From 12031a4c7e8288ad82240da9b7b8d121cd340e79 Mon Sep 17 00:00:00 2001 From: Bill Date: Mon, 24 May 2021 01:28:37 -0400 Subject: [PATCH] Catalog updates --- src/views/catalog/CatalogMessageHandler.tsx | 15 +++- src/views/catalog/reducers/CatalogReducer.tsx | 13 ++- .../item/CatalogNavigationItemView.tsx | 16 +++- .../views/page/layout/CatalogLayout.scss | 1 + .../views/page/layout/GetCatalogLayout.tsx | 3 +- .../vip-buy/CatalogLayoutVipBuyView.scss | 7 ++ .../vip-buy/CatalogLayoutVipBuyView.tsx | 83 +++++++++++++++++++ .../vip-buy/CatalogLayoutVipBuyView.types.ts | 6 ++ 8 files changed, 136 insertions(+), 8 deletions(-) create mode 100644 src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss create mode 100644 src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx create mode 100644 src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.types.ts diff --git a/src/views/catalog/CatalogMessageHandler.tsx b/src/views/catalog/CatalogMessageHandler.tsx index bc0e42ba..b34357d3 100644 --- a/src/views/catalog/CatalogMessageHandler.tsx +++ b/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 = 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 = props => CreateMessageHook(CatalogSearchEvent, onCatalogSearchEvent); CreateMessageHook(SellablePetPalettesEvent, onSellablePetPalettesEvent); CreateMessageHook(CatalogApproveNameResultEvent, onCatalogApproveNameResultEvent); + CreateMessageHook(CatalogClubEvent, onCatalogClubEvent); return null; } diff --git a/src/views/catalog/reducers/CatalogReducer.tsx b/src/views/catalog/reducers/CatalogReducer.tsx index 0c178942..1a7caca4 100644 --- a/src/views/catalog/reducers/CatalogReducer.tsx +++ b/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 = (state, action) => @@ -117,6 +121,11 @@ export const CatalogReducer: Reducer = (state, ac return { ...state, petPalettes }; } + case CatalogActions.SET_CLUB_OFFERS: { + const clubOffers = (action.payload.clubOffers || null); + + return { ...state, clubOffers }; + } default: return state; } diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx index 09914180..6d38a6c2 100644 --- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx +++ b/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 = 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 = pro return !prevValue; }); } - } + }, [ page, setActiveChild ]); return (
diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss index 88936819..e3ac0191 100644 --- a/src/views/catalog/views/page/layout/CatalogLayout.scss +++ b/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'; diff --git a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx index 934a5206..15d5050f 100644 --- a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx +++ b/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 ; case 'guild_frontpage': return null; case 'guild_custom_furni': diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss new file mode 100644 index 00000000..00fac98f --- /dev/null +++ b/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; + } +} diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx new file mode 100644 index 00000000..2fc45a89 --- /dev/null +++ b/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 = 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 ( +
+
+
+ { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) => + { + return
+
+
+ + { getOfferText(offer) } +
+
+ { (offer.priceCredits > 0) && +
+ { offer.priceCredits } + +
} + { (offer.priceActivityPoints > 0) && +
+ { offer.priceActivityPoints } + +
} +
+
+
; + })} +
+
+
+
+ +
+
{ GetCatalogPageText(pageParser, 0) }
+
+
+ ); +} diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.types.ts b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.types.ts new file mode 100644 index 00000000..071bf0cc --- /dev/null +++ b/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 +{ + +}