finish club gifts

src/views/catalog/CatalogView.tsx

@@ -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 { AddEventLinkTracker, GetRoomEngine, LocalizeText, RemoveLinkEventTracker } from '../../api';
 import { CREDITS, PlaySound } from '../../api/utils/PlaySound';
@@ -193,6 +193,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
     {
         SendMessageHook(new GetMarketplaceConfigurationMessageComposer());
         SendMessageHook(new GetGiftWrappingConfigurationComposer());
+        SendMessageHook(new GetClubGiftInfo());
     });
 
     const currentNavigationPage = ((searchResult && searchResult.page) || currentTab);

src/views/catalog/reducers/CatalogReducer.tsx

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

src/views/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx

@@ -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 { 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 { VipGiftItem } from './gift-item/VipGiftItemView';
 
 export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
 {
@@ -9,9 +17,57 @@ export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
 
 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>
+        </>
     )
 }

src/views/catalog/views/page/layout/vip-gifts/gift-item/VipGiftItemView.tsx

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

src/views/notification-center/common/ProductImageUtility.ts

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