From d70f24e38f5fa5bf563e2a31c6fec32c4e3548e7 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Mon, 21 Jun 2021 06:54:29 -0300 Subject: [PATCH] Some catalog layouts --- src/views/catalog/CatalogMessageHandler.tsx | 17 +++++-- src/views/catalog/CatalogView.scss | 4 ++ src/views/catalog/reducers/CatalogReducer.tsx | 17 +++++-- .../views/page/layout/GetCatalogLayout.tsx | 7 ++- .../CatalogLayoutGuildCustomFurniView.tsx | 43 +++++++++++++++++ ...CatalogLayoutGuildCustomFurniView.types.ts | 4 ++ .../CatalogLayoutGuildForumView.tsx | 47 +++++++++++++++++++ .../CatalogLayoutGuildForumView.types.ts | 4 ++ 8 files changed, 134 insertions(+), 9 deletions(-) create mode 100644 src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx create mode 100644 src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.types.ts create mode 100644 src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.tsx create mode 100644 src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.types.ts diff --git a/src/views/catalog/CatalogMessageHandler.tsx b/src/views/catalog/CatalogMessageHandler.tsx index 7afba364..509a256c 100644 --- a/src/views/catalog/CatalogMessageHandler.tsx +++ b/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 = props => { const parser = event.getParser(); - console.log(parser) - dispatchCatalogState({ type: CatalogActions.SET_CATALOG_PAGE_PARSER, payload: { @@ -109,6 +107,18 @@ export const CatalogMessageHandler: FC = 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 = props => CreateMessageHook(CatalogPurchaseUnavailableEvent, onCatalogPurchaseUnavailableEvent); CreateMessageHook(CatalogSoldOutEvent, onCatalogSoldOutEvent); CreateMessageHook(CatalogSearchEvent, onCatalogSearchEvent); + CreateMessageHook(CatalogGroupsEvent, onCatalogGroupsEvent); CreateMessageHook(SellablePetPalettesEvent, onSellablePetPalettesEvent); CreateMessageHook(CatalogApproveNameResultEvent, onCatalogApproveNameResultEvent); CreateMessageHook(CatalogClubEvent, onCatalogClubEvent); diff --git a/src/views/catalog/CatalogView.scss b/src/views/catalog/CatalogView.scss index 3d0f76d8..3f469ce5 100644 --- a/src/views/catalog/CatalogView.scss +++ b/src/views/catalog/CatalogView.scss @@ -8,6 +8,10 @@ resize: vertical; overflow:auto; } + + font[size="16"] { + font-size: 20px; + } } @import './views/CatalogViews'; diff --git a/src/views/catalog/reducers/CatalogReducer.tsx b/src/views/catalog/reducers/CatalogReducer.tsx index 8d8c2cd9..b0cd9ee3 100644 --- a/src/views/catalog/reducers/CatalogReducer.tsx +++ b/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 = (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); diff --git a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx index 053e00cc..a080119f 100644 --- a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx +++ b/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 ; case 'guild_frontpage': return null; + case 'guild_forum': + return ; case 'guild_custom_furni': - return null; + return ; case 'search_results': return null; case 'club_gifts': diff --git a/src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx b/src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.tsx new file mode 100644 index 00000000..7f5ef58c --- /dev/null +++ b/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 = 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 ( +
+
+ +
+ { product && +
+ +
{ GetOfferName(activeOffer) }
+ { groups.length === 0 &&
+ { LocalizeText('catalog.guild_selector.members_only') } + +
} + { groups.length > 0 && } +
} +
+ ); +} diff --git a/src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.types.ts b/src/views/catalog/views/page/layout/guild-custom-furni/CatalogLayoutGuildCustomFurniView.types.ts new file mode 100644 index 00000000..581b6f9a --- /dev/null +++ b/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 +{} diff --git a/src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.tsx b/src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.tsx new file mode 100644 index 00000000..6160d1a5 --- /dev/null +++ b/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 = 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 ( +
+
+
+
+
+ { groups.length === 0 &&
+ { LocalizeText('catalog.guild_selector.members_only') } + +
} +
+
+ ); +} diff --git a/src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.types.ts b/src/views/catalog/views/page/layout/guild-forum/CatalogLayoutGuildForumView.types.ts new file mode 100644 index 00000000..5ea8ffac --- /dev/null +++ b/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 +{}