Some catalog layouts

src/views/catalog/CatalogMessageHandler.tsx

@@ -1,4 +1,4 @@
-import { CatalogApproveNameResultEvent, CatalogClubEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, CatalogUpdatedEvent, SellablePetPalettesEvent, UserSubscriptionEvent } from 'nitro-renderer';
+import { CatalogApproveNameResultEvent, CatalogClubEvent, CatalogGroupsEvent, CatalogPageEvent, CatalogPagesEvent, CatalogPurchaseEvent, CatalogPurchaseFailedEvent, CatalogPurchaseUnavailableEvent, CatalogSearchEvent, CatalogSoldOutEvent, CatalogUpdatedEvent, SellablePetPalettesEvent, UserSubscriptionEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CatalogNameResultEvent, CatalogPurchaseFailureEvent } from '../../events';
 import { CatalogPurchasedEvent } from '../../events/catalog/CatalogPurchasedEvent';
@@ -31,8 +31,6 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     {
         const parser = event.getParser();
 
-        console.log(parser)
-
         dispatchCatalogState({
             type: CatalogActions.SET_CATALOG_PAGE_PARSER,
             payload: {
@@ -109,6 +107,18 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
         });
     }, [ dispatchCatalogState ]);
 
+    const onCatalogGroupsEvent = useCallback((event: CatalogGroupsEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchCatalogState({
+            type: CatalogActions.SET_GROUPS,
+            payload: {
+                groups: parser.groups
+            }
+        });
+    }, [ dispatchCatalogState ]);
+
     const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
     {
         const parser = event.getParser();
@@ -142,6 +152,7 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     CreateMessageHook(CatalogPurchaseUnavailableEvent, onCatalogPurchaseUnavailableEvent);
     CreateMessageHook(CatalogSoldOutEvent, onCatalogSoldOutEvent);
     CreateMessageHook(CatalogSearchEvent, onCatalogSearchEvent);
+    CreateMessageHook(CatalogGroupsEvent, onCatalogGroupsEvent);
     CreateMessageHook(SellablePetPalettesEvent, onSellablePetPalettesEvent);
     CreateMessageHook(CatalogApproveNameResultEvent, onCatalogApproveNameResultEvent);
     CreateMessageHook(CatalogClubEvent, onCatalogClubEvent);

src/views/catalog/CatalogView.scss

@@ -8,6 +8,10 @@
         resize: vertical;
         overflow:auto;
     }
+
+    font[size="16"] {
+        font-size: 20px;
+    }
 }
 
 @import './views/CatalogViews';

src/views/catalog/reducers/CatalogReducer.tsx

@@ -1,4 +1,4 @@
-import { CatalogClubOfferData, CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer';
+import { CatalogClubOfferData, CatalogGroupData, CatalogPageOfferData, ICatalogPageData, ICatalogPageParser } from 'nitro-renderer';
 import { Reducer } from 'react';
 import { CatalogPetPalette } from '../utils/CatalogPetPalette';
 import { ICatalogOffers, ICatalogSearchResult, SetOffersToNodes } from '../utils/CatalogUtilities';
@@ -13,6 +13,7 @@ export interface ICatalogState
     pageParser: ICatalogPageParser;
     activeOffer: CatalogPageOfferData;
     searchResult: ICatalogSearchResult;
+    groups: CatalogGroupData[];
     petPalettes: CatalogPetPalette[];
     clubOffers: CatalogClubOfferData[];
     subscriptionInfo: SubscriptionInfo;
@@ -29,6 +30,7 @@ export interface ICatalogAction
         pageParser?: ICatalogPageParser;
         activeOffer?: CatalogPageOfferData;
         searchResult?: ICatalogSearchResult;
+        groups?: CatalogGroupData[];
         petPalette?: CatalogPetPalette;
         clubOffers?: CatalogClubOfferData[];
         subscriptionInfo?: SubscriptionInfo;
@@ -37,16 +39,17 @@ export interface ICatalogAction
 
 export class CatalogActions
 {
+    public static RESET_STATE: string = 'CA_RESET_STATE';
     public static SET_CATALOG_ROOT: string = 'CA_SET_CATALOG_ROOT';
     public static SET_CATALOG_CURRENT_TAB: string = 'CA_SET_CATALOG_CURRENT_TAB';
     public static SET_CATALOG_CURRENT_PAGE: string = 'CA_SET_CATALOG_CURRENT_PAGE';
     public static SET_CATALOG_PAGE_PARSER: string = 'CA_SET_CATALOG_PAGE';
     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';
+    public static SET_GROUPS: string = 'CA_SET_GROUPS';
+    public static SET_PET_PALETTE: string = 'CA_SET_PET_PALETTE';
+    public static SET_SEARCH_RESULT: string = 'CA_SET_SEARCH_RESULT';
     public static SET_SUBSCRIPTION_INFO: string = 'CA_SET_SUBSCRIPTION_INFO';
-    public static RESET_STATE = 'CA_RESET_STATE';
 }
 
 export const initialCatalog: ICatalogState = {
@@ -57,6 +60,7 @@ export const initialCatalog: ICatalogState = {
     pageParser: null,
     activeOffer: null,
     searchResult: null,
+    groups: [],
     petPalettes: [],
     clubOffers: null,
     subscriptionInfo: new SubscriptionInfo()
@@ -115,6 +119,11 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
 
             return { ...state, searchResult };
         }
+        case CatalogActions.SET_GROUPS: {
+            const groups = (action.payload.groups || null);
+
+            return { ...state, groups };
+        }
         case CatalogActions.SET_PET_PALETTE: {
             const petPalette = (action.payload.petPalette || null);
 

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

@@ -1,6 +1,8 @@
 import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer';
 import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView';
 import { CatalogLayoutFrontpage4View } from './frontpage4/CatalogLayoutFrontpage4View';
+import { CatalogLayouGuildCustomFurniView } from './guild-custom-furni/CatalogLayoutGuildCustomFurniView';
+import { CatalogLayouGuildForumView } from './guild-forum/CatalogLayoutGuildForumView';
 import { CatalogLayoutInfoLoyaltyView } from './info-loyalty/CatalogLayoutInfoLoyaltyView';
 import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
 import { CatalogLayoutPets2View } from './pets2/CatalogLayoutPets2View';
@@ -12,7 +14,6 @@ import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
 
 export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: RoomPreviewer): JSX.Element
 {
-
     switch(pageParser.layoutCode)
     {
         case 'frontpage_featured':
@@ -29,8 +30,10 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer:
             return <CatalogLayoutVipBuyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'guild_frontpage':
             return null;
+        case 'guild_forum':
+            return <CatalogLayouGuildForumView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'guild_custom_furni':
-            return null;
+            return <CatalogLayouGuildCustomFurniView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'search_results':
             return null;
         case 'club_gifts':

src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx

@@ -0,0 +1,43 @@
+import { CatalogGroupsComposer } from 'nitro-renderer';
+import { FC, useEffect } from 'react';
+import { SendMessageHook } from '../../../../../../hooks/messages';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { RoomPreviewerView } from '../../../../../room-previewer/RoomPreviewerView';
+import { useCatalogContext } from '../../../../context/CatalogContext';
+import { GetOfferName } from '../../../../utils/CatalogUtilities';
+import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
+import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogLayoutGuildCustomFurniViewProps } from './CatalogLayoutGuildCustomFurniView.types';
+
+export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutGuildCustomFurniViewProps> = props =>
+{
+    const { roomPreviewer = null, pageParser = null } = props;
+
+    const { catalogState = null } = useCatalogContext();
+    const { activeOffer = null, groups = null } = catalogState;
+
+    const product = ((activeOffer && activeOffer.products[0]) || null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new CatalogGroupsComposer());
+    }, [ pageParser ]);
+    
+    return (
+        <div className="row h-100 nitro-catalog-layout-guild-custom-furni">
+            <div className="d-flex flex-column col-7 h-100">
+                <CatalogPageOffersView offers={ pageParser.offers } />
+            </div>
+            { product &&
+            <div className="col position-relative d-flex flex-column">
+                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
+                { groups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black mt-auto">
+                    { LocalizeText('catalog.guild_selector.members_only') }
+                    <button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
+                </div> }
+                { groups.length > 0 && <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } /> }
+            </div> }
+        </div>
+        );
+}

src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.types.ts

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

src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.tsx

@@ -0,0 +1,47 @@
+import { CatalogGroupsComposer } from 'nitro-renderer';
+import { FC, useEffect } from 'react';
+import { SendMessageHook } from '../../../../../../hooks/messages';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { useCatalogContext } from '../../../../context/CatalogContext';
+import { CatalogActions } from '../../../../reducers/CatalogReducer';
+import { GetCatalogPageText } from '../../../../utils/CatalogUtilities';
+import { CatalogLayoutGuildForumViewProps } from './CatalogLayoutGuildForumView.types';
+
+export const CatalogLayouGuildForumView: FC<CatalogLayoutGuildForumViewProps> = props =>
+{
+    const { pageParser = null } = props;
+
+    const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
+    const { activeOffer = null, groups = null } = catalogState;
+
+    const product = ((activeOffer && activeOffer.products[0]) || null);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new CatalogGroupsComposer());
+
+        if(pageParser.offers.length > 0)
+        {
+            dispatchCatalogState({
+                type: CatalogActions.SET_CATALOG_ACTIVE_OFFER,
+                payload: {
+                    activeOffer: pageParser.offers[0]
+                }
+            });
+        }
+    }, [ dispatchCatalogState, pageParser ]);
+    
+    return (
+        <div className="row h-100 nitro-catalog-layout-guild-custom-furni">
+            <div className="col-7 overflow-auto h-100 d-flex flex-column bg-muted rounded py-1 px-2 text-black">
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 1) } } />
+            </div>
+            <div className="col position-relative d-flex flex-column justify-content-center">
+                { groups.length === 0 && <div className="bg-muted text-center rounded p-1 text-black">
+                        { LocalizeText('catalog.guild_selector.members_only') }
+                    <button className="btn btn-sm btn-primary mt-1">{ LocalizeText('catalog.guild_selector.find_groups') }</button>
+                </div> }
+            </div>
+        </div>
+        );
+}

src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.types.ts

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