Catalog updates

src/views/catalog/CatalogMessageHandler.tsx

@@ -1,4 +1,4 @@
-import { CatalogApproveNameResultEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, SellablePetPalettesEvent } from 'nitro-renderer';
+import { CatalogApproveNameResultEvent, CatalogClubEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, SellablePetPalettesEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CatalogNameResultEvent, CatalogPurchaseFailureEvent } from '../../events';
 import { CatalogPurchasedEvent } from '../../events/catalog/CatalogPurchasedEvent';
@@ -94,6 +94,18 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
         dispatchUiEvent(new CatalogNameResultEvent(parser.result, parser.validationInfo));
     }, []);
 
+    const onCatalogClubEvent = useCallback((event: CatalogClubEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchCatalogState({
+            type: CatalogActions.SET_CLUB_OFFERS,
+            payload: {
+                clubOffers: parser.offers
+            }
+        });
+    }, [ dispatchCatalogState ]);
+
     CreateMessageHook(CatalogPagesEvent, onCatalogPagesEvent);
     CreateMessageHook(CatalogPageEvent, onCatalogPageEvent);
     CreateMessageHook(CatalogPurchaseEvent, onCatalogPurchaseEvent);
@@ -103,6 +115,7 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     CreateMessageHook(CatalogSearchEvent, onCatalogSearchEvent);
     CreateMessageHook(SellablePetPalettesEvent, onSellablePetPalettesEvent);
     CreateMessageHook(CatalogApproveNameResultEvent, onCatalogApproveNameResultEvent);
+    CreateMessageHook(CatalogClubEvent, onCatalogClubEvent);
 
     return null;
 }

src/views/catalog/reducers/CatalogReducer.tsx

@@ -1,4 +1,4 @@
-import { CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer';
+import { CatalogClubOfferData, CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer';
 import { Reducer } from 'react';
 import { CatalogPetPalette } from '../utils/CatalogPetPalette';
 import { ICatalogOffers, ICatalogSearchResult, SetOffersToNodes } from '../utils/CatalogUtilities';
@@ -12,6 +12,7 @@ export interface ICatalogState
     activeOffer: CatalogPageOfferData;
     searchResult: ICatalogSearchResult;
     petPalettes: CatalogPetPalette[];
+    clubOffers: CatalogClubOfferData[];
 }
 
 export interface ICatalogAction
@@ -25,6 +26,7 @@ export interface ICatalogAction
         activeOffer?: CatalogPageOfferData;
         searchResult?: ICatalogSearchResult;
         petPalette?: CatalogPetPalette;
+        clubOffers?: CatalogClubOfferData[];
     }
 }
 
@@ -36,6 +38,7 @@ export class CatalogActions
     public static SET_CATALOG_ACTIVE_OFFER: string = 'CA_SET_ACTIVE_OFFER';
     public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT';
     public static SET_PET_PALETTE: string = 'CA_SET_PET_PALETTE';
+    public static SET_CLUB_OFFERS: string = 'CA_SET_CLUB_OFFERS';
 }
 
 export const initialCatalog: ICatalogState = {
@@ -45,7 +48,8 @@ export const initialCatalog: ICatalogState = {
     pageParser: null,
     activeOffer: null,
     searchResult: null,
-    petPalettes: []
+    petPalettes: [],
+    clubOffers: null
 }
 
 export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, action) =>
@@ -117,6 +121,11 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
 
             return { ...state, petPalettes };
         }
+        case CatalogActions.SET_CLUB_OFFERS: {
+            const clubOffers = (action.payload.clubOffers || null);
+
+            return { ...state, clubOffers };
+        }
         default:
             return state;
     }

src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { GetCatalogPageComposer } from '../../../../../api/catalog/GetCatalogPageComposer';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
 import { CatalogIconView } from '../../../../catalog-icon/CatalogIconView';
@@ -20,11 +20,19 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
         SendMessageHook(GetCatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
     }, [ isActive, page ]);
 
-    function select(): void
+    const select = useCallback(() =>
     {
         if(!page) return;
         
-        setActiveChild(page);
+        setActiveChild(prevValue =>
+            {
+                if(prevValue === page)
+                {
+                    SendMessageHook(GetCatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
+                }
+                
+                return page;
+            });
 
         if(page.children && page.children.length)
         {
@@ -33,7 +41,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
                     return !prevValue;
                 });
         }
-    }
+    }, [ page, setActiveChild ]);
     
     return (
         <div className="col pe-1 pb-1 catalog-navigation-item-container">

src/views/catalog/views/page/layout/CatalogLayout.scss

@@ -3,3 +3,4 @@
 @import './single-bundle/CatalogLayoutSingleBundleView';
 @import './spaces-new/CatalogLayoutSpacesView';
 @import './trophies/CatalogLayoutTrophiesView';
+@import './vip-buy/CatalogLayoutVipBuyView';

src/views/catalog/views/page/layout/GetCatalogLayout.tsx

@@ -4,6 +4,7 @@ import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
 import { CatalogLayoutSingleBundleView } from './single-bundle/CatalogLayoutSingleBundleView';
 import { CatalogLayoutSpacesView } from './spaces-new/CatalogLayoutSpacesView';
 import { CatalogLayoutTrophiesView } from './trophies/CatalogLayoutTrophiesView';
+import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
 
 export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: RoomPreviewer): JSX.Element
 {
@@ -20,7 +21,7 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer:
         case 'pets3':
             return null;
         case 'vip_buy':
-            return null;
+            return <CatalogLayoutVipBuyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'guild_frontpage':
             return null;
         case 'guild_custom_furni':

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss

@@ -0,0 +1,7 @@
+.nitro-catalog-layout-vip-buy {
+
+    .catalog-offer-item-container {
+        height: 60px !important;
+        max-height: 60px !important;
+    }
+}

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx

@@ -0,0 +1,83 @@
+import { CatalogClubOfferData, CatalogRequestVipOffersComposer } from 'nitro-renderer';
+import { FC, useCallback, useEffect } from 'react';
+import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { CurrencyIcon } from '../../../../../../utils/currency-icon/CurrencyIcon';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { useCatalogContext } from '../../../../context/CatalogContext';
+import { GetCatalogPageImage, GetCatalogPageText } from '../../../../utils/CatalogUtilities';
+import { CatalogLayoutVipBuyViewProps } from './CatalogLayoutVipBuyView.types';
+
+export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =>
+{
+    const { catalogState = null } = useCatalogContext();
+    const { pageParser = null, clubOffers = null } = catalogState;
+
+    useEffect(() =>
+    {
+        if(clubOffers === null)
+        {
+            SendMessageHook(new CatalogRequestVipOffersComposer(1));
+
+            return;
+        }
+
+        console.log(clubOffers);
+    }, [ clubOffers ]);
+
+    const getOfferText = useCallback((offer: CatalogClubOfferData) =>
+    {
+        let offerText = '';
+
+        if(offer.months > 0)
+        {
+            offerText = LocalizeText('catalog.vip.item.header.months', [ 'num_months' ], [ offer.months.toString() ]);
+        }
+
+        if(offer.extraDays > 0)
+        {
+            if(offerText !== '') offerText += ' ';
+            
+            offerText += (' ' + LocalizeText('catalog.vip.item.header.days', [ 'num_days' ], [ offer.extraDays.toString() ]));
+        }
+
+        return offerText;
+    }, []);
+
+    return (
+        <div className="row h-100 nitro-catalog-layout-vip-buy">
+            <div className="col-7">
+                <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container">
+                    { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
+                        {
+                            return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
+                                <div className="position-relative border border-2 rounded catalog-offer-item">
+                                    <div className="d-flex align-items-center text-black text-small m-1">
+                                        <i className="icon icon-catalogue-hc_small me-1"></i>
+                                        { getOfferText(offer) }
+                                    </div>
+                                    <div className="d-flex">
+                                        { (offer.priceCredits > 0) &&
+                                            <div className="d-flex align-items-center justify-content-end">
+                                                <span className="text-black ms-1">{ offer.priceCredits }</span>
+                                                <CurrencyIcon type={ -1 } />
+                                            </div> }
+                                        { (offer.priceActivityPoints > 0) &&
+                                            <div className="d-flex align-items-center justify-content-end">
+                                                <span className="text-black ms-1">{ offer.priceActivityPoints }</span>
+                                                <CurrencyIcon type={ offer.priceActivityPointsType } />
+                                            </div> }
+                                    </div>
+                                </div>
+                            </div>;
+                        })}
+                </div>
+            </div>
+            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
+                <div className="d-block mb-2">
+                    <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+                </div>
+                <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
+            </div>
+        </div>
+    );
+}

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.types.ts

@@ -0,0 +1,6 @@
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+
+export interface CatalogLayoutVipBuyViewProps extends CatalogLayoutProps
+{
+
+}