finish club gifts

This commit is contained in:
dank074 2022-01-05 17:35:15 -06:00
parent 19d388ea92
commit 1b4046e493
5 changed files with 123 additions and 5 deletions

View File

@ -1,4 +1,4 @@
import { GetCatalogIndexComposer, GetCatalogPageComposer, GetGiftWrappingConfigurationComposer, GetMarketplaceConfigurationMessageComposer, ILinkEventTracker, INodeData, RoomPreviewer } from '@nitrots/nitro-renderer'; import { GetCatalogIndexComposer, GetCatalogPageComposer, GetClubGiftInfo, GetGiftWrappingConfigurationComposer, GetMarketplaceConfigurationMessageComposer, ILinkEventTracker, INodeData, RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useReducer, useState } from 'react'; import { FC, useCallback, useEffect, useReducer, useState } from 'react';
import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api'; import { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
import { CREDITS, PlaySound } from '../../api/utils/PlaySound'; import { CREDITS, PlaySound } from '../../api/utils/PlaySound';
@ -193,6 +193,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
{ {
SendMessageHook(new GetMarketplaceConfigurationMessageComposer()); SendMessageHook(new GetMarketplaceConfigurationMessageComposer());
SendMessageHook(new GetGiftWrappingConfigurationComposer()); SendMessageHook(new GetGiftWrappingConfigurationComposer());
SendMessageHook(new GetClubGiftInfo());
}); });
const currentNavigationPage = ((searchResult && searchResult.page) || currentTab); const currentNavigationPage = ((searchResult && searchResult.page) || currentTab);

View File

@ -174,7 +174,7 @@ export const CatalogReducer: Reducer<ICatalogState, ICatalogAction> = (state, ac
return { ...state, clubGifts }; return { ...state, clubGifts };
} }
case CatalogActions.SET_MARKETPLACE_CONFIGURATION: { case CatalogActions.SET_MARKETPLACE_CONFIGURATION: {
let marketplaceConfiguration = (action.payload.marketplaceConfiguration || state.marketplaceConfiguration || null); const marketplaceConfiguration = (action.payload.marketplaceConfiguration || state.marketplaceConfiguration || null);
return { ...state, marketplaceConfiguration } return { ...state, marketplaceConfiguration }
} }

View File

@ -1,6 +1,14 @@
import { FC } from 'react'; import { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../api';
import { SendMessageHook } from '../../../../../../hooks';
import { NitroCardGridView } from '../../../../../../layout'; import { NitroCardGridView } from '../../../../../../layout';
import { NitroLayoutBase } from '../../../../../../layout/base';
import { NotificationUtilities } from '../../../../../notification-center/common/NotificationUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogActions } from '../../../../reducers/CatalogReducer';
import { CatalogLayoutProps } from '../CatalogLayout.types'; import { CatalogLayoutProps } from '../CatalogLayout.types';
import { VipGiftItem } from './gift-item/VipGiftItemView';
export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
{ {
@ -9,9 +17,57 @@ export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = props => export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = props =>
{ {
return ( const { catalogState, dispatchCatalogState } = useCatalogContext();
<NitroCardGridView columns={1} className='text-black'>
const giftsAvailable = useCallback(() =>
{
const clubGifts = catalogState.clubGifts;
if(!clubGifts) return '';
if(clubGifts.giftsAvailable > 0)
{
return LocalizeText('catalog.club_gift.available', ['amount'], [clubGifts.giftsAvailable.toString()]);
}
if(clubGifts.daysUntilNextGift > 0)
{
return LocalizeText('catalog.club_gift.days_until_next', ['days'], [clubGifts.daysUntilNextGift.toString()]);
}
if(catalogState.subscriptionInfo.isVip)
{
return LocalizeText('catalog.club_gift.not_available');
}
return LocalizeText('catalog.club_gift.no_club');
}, [catalogState.clubGifts, catalogState.subscriptionInfo.isVip]);
const selectGift = useCallback((localizationId: string) =>
{
NotificationUtilities.confirm(LocalizeText('catalog.club_gift.confirm'), () =>
{
SendMessageHook(new SelectClubGiftComposer(localizationId));
const prev = catalogState.clubGifts;
prev.giftsAvailable--;
dispatchCatalogState({
type: CatalogActions.SET_CLUB_GIFTS,
payload: {
clubGifts: prev
}
});
}, null);
}, [catalogState.clubGifts, dispatchCatalogState]);
return (
<>
<NitroLayoutBase className='text-black'>{giftsAvailable()}</NitroLayoutBase>
<NitroCardGridView columns={1} className='text-black'>
{ catalogState.clubGifts && catalogState.clubGifts.offers.map( (offer, index) => <VipGiftItem key={index} offer={offer} isAvailable={ catalogState.clubGifts.getOfferExtraData(offer.offerId).isSelectable && catalogState.clubGifts.giftsAvailable > 0} onSelect={selectGift}/>)}
</NitroCardGridView> </NitroCardGridView>
</>
) )
} }

View File

@ -0,0 +1,61 @@
import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../../api';
import { NitroCardGridItemView } from '../../../../../../../layout';
import { ProductImageUtility } from '../../../../../../notification-center/common/ProductImageUtility';
export interface VipGiftItemViewProps
{
offer: CatalogPageMessageOfferData;
isAvailable: boolean;
onSelect(localizationId: string): void;
}
export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
{
const { offer = null, isAvailable = false, onSelect = null } = props;
const getImageUrlForOffer = useCallback( () =>
{
if(!offer || !offer.products.length) return '';
const productData = offer.products[0];
return ProductImageUtility.getProductImageUrl(productData.productType, productData.furniClassId, productData.extraParam);
}, [offer]);
const getItemTitle = useCallback(() =>
{
if(!offer || !offer.products.length) return '';
const productData = offer.products[0];
const localizationKey = ProductImageUtility.getProductCategory(productData.productType, productData.furniClassId) === 2 ? 'wallItem.name.' + productData.furniClassId : 'roomItem.name.' + productData.furniClassId;
return LocalizeText(localizationKey);
}, [offer]);
const getItemDesc = useCallback( () =>
{
if(!offer || !offer.products.length) return '';
const productData = offer.products[0];
const localizationKey = ProductImageUtility.getProductCategory(productData.productType, productData.furniClassId) === 2 ? 'wallItem.desc.' + productData.furniClassId : 'roomItem.desc.' + productData.furniClassId ;
return LocalizeText(localizationKey);
}, [offer]);
return (
<NitroCardGridItemView className='w-100 vip-gift-item align-items-center'>
<img src={ getImageUrlForOffer() } className='mx-3' alt='' />
<div className='h-100 flex-grow-1 justify-content-center '>
<div className='fw-bold'>{getItemTitle()}</div>
<div className='fst-italic fs-6'>{getItemDesc()}</div>
</div>
<div className='btn-group-vertical mx-1 gap-2'>
<button className='btn btn-secondary btn-sm' disabled={!isAvailable} onClick={() => onSelect(offer.localizationId)}>{ LocalizeText('catalog.club_gift.select') }</button>
</div>
</NitroCardGridItemView>
)
}

View File

@ -41,7 +41,7 @@ export class ProductImageUtility
return imageUrl; return imageUrl;
} }
private static getProductCategory(productType: string, furniClassId: number): number public static getProductCategory(productType: string, furniClassId: number): number
{ {
if(productType === CatalogPageMessageProductData.S) return 1; if(productType === CatalogPageMessageProductData.S) return 1;