nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Catalog updates

Browse Source
This commit is contained in:
Bill 2021-05-24 01:28:37 -04:00
parent f56164e3c2
commit 12031a4c7e
8 changed files with 136 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/catalog/CatalogMessageHandler.tsx
View File

@ -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;
}

13
src/views/catalog/reducers/CatalogReducer.tsx
View File

@ -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;
}

16
src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
View File

@ -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">

1
src/views/catalog/views/page/layout/CatalogLayout.scss
View File

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

3
src/views/catalog/views/page/layout/GetCatalogLayout.tsx
View File

@ -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':

7
src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss Normal file
View File

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

83
src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx Normal file
View File

@ -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>
);
}

6
src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.types.ts Normal file
View File

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