Catalog vip purchase

src/views/catalog/CatalogMessageHandler.tsx

@@ -127,11 +127,11 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
             type: CatalogActions.SET_SUBSCRIPTION_INFO,
             payload: {
                 subscriptionInfo: new SubscriptionInfo(
-                    Math.max(0, parser.days),
+                    Math.max(0, parser.daysToPeriodEnd),
-                    Math.max(0, parser.months),
+                    Math.max(0, parser.periodsSubscribedAhead),
                     parser.isVip,
                     parser.pastClubDays,
-                    parser.pastVIPDays
+                    parser.pastVipDays
                 )
             }
         });
@@ -149,8 +149,6 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     {
         const parser = event.getParser();
 
-        console.log(parser);
-
         dispatchCatalogState({
             type: CatalogActions.SET_GIFT_CONFIGURATION,
             payload: {

src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx

@@ -46,6 +46,8 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
         SendMessageHook(new CatalogPageComposer(page.pageId, -1, CatalogMode.MODE_NORMAL));
     }, [ isActive, page, select, dispatchCatalogState ]);
 
+    if(!page.visible) return null;
+    
     return (
         <div className="col pb-1 catalog-navigation-item-container">
             <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss

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

src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx

@@ -1,7 +1,11 @@
-import { CatalogClubOfferData, CatalogRequestVipOffersComposer } from 'nitro-renderer';
+import { CatalogClubOfferData, CatalogPurchaseComposer, CatalogRequestVipOffersComposer } from 'nitro-renderer';
-import { FC, useCallback, useEffect, useMemo } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from 'react-bootstrap';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
+import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { GLOBAL_PURSE } from '../../../../../purse/PurseView';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
 import { GetCatalogPageImage } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
@@ -11,16 +15,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
 {
     const { catalogState = null } = useCatalogContext();
     const { pageParser = null, clubOffers = null, subscriptionInfo = null } = catalogState;
-
+    const [ pendingOffer, setPendingOffer ] = useState<CatalogClubOfferData>(null);
-    useEffect(() =>
-    {
-        if(clubOffers === null)
-        {
-            SendMessageHook(new CatalogRequestVipOffersComposer(1));
-
-            return;
-        }
-    }, [ clubOffers ]);
 
     const getOfferText = useCallback((offer: CatalogClubOfferData) =>
     {
@@ -41,6 +36,31 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
         return offerText;
     }, []);
 
+    const getPurchaseHeader = useCallback(() =>
+    {
+        const purse = GLOBAL_PURSE;
+
+        if(!purse) return '';
+
+        const extensionOrSubscription = (purse.clubDays > 0 || purse.clubPeriods > 0) ? 'extension.' : 'subscription.';
+        const daysOrMonths = ((pendingOffer.months === 0) ? 'days' : 'months');
+        const daysOrMonthsText = ((pendingOffer.months === 0) ? pendingOffer.extraDays : pendingOffer.months);
+        const locale = LocalizeText('catalog.vip.buy.confirm.' + extensionOrSubscription + daysOrMonths);
+
+        return locale.replace('%NUM_' + daysOrMonths.toUpperCase() + '%', daysOrMonthsText.toString());
+    }, [ pendingOffer ]);
+
+    const getPurchaseValidUntil = useCallback(() =>
+    {
+        let locale = LocalizeText('catalog.vip.buy.confirm.end_date');
+
+        locale = locale.replace('%month%', pendingOffer.month.toString());
+        locale = locale.replace('%day%', pendingOffer.day.toString());
+        locale = locale.replace('%year%', pendingOffer.year.toString());
+
+        return locale;
+    }, [ pendingOffer ]);
+
     const getSubscriptionDetails = useMemo(() =>
     {
         if(!subscriptionInfo) return '';
@@ -52,41 +72,100 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
         return LocalizeText('catalog.vip.extend.info', [ 'days' ], [ totalDays.toString() ]);
     }, [ subscriptionInfo ]);
 
+    const purchaseSubscription = useCallback(() =>
+    {
+        if(!pendingOffer) return;
+
+        SendMessageHook(new CatalogPurchaseComposer(pageParser.pageId, pendingOffer.offerId, null, 1));
+    }, [ pendingOffer, pageParser ])
+
+    useEffect(() =>
+    {
+        if(clubOffers === null)
+        {
+            SendMessageHook(new CatalogRequestVipOffersComposer(1));
+
+            return;
+        }
+    }, [ clubOffers ]);
+
     return (
-        <div className="row h-100 nitro-catalog-layout-vip-buy">
+        <>
-            <div className="col-7 h-100">
+            <div className="row h-100 nitro-catalog-layout-vip-buy">
-                <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
+                <div className="col-7 h-100">
-                    { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
+                    <NitroCardGridView columns={ 1 } className="vip-buy-grid">
-                        {
+                        { 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">
+                                return (
-                                    <div className="d-flex align-items-center text-black text-small m-1">
+                                    <NitroCardGridItemView key={ index } className="justify-content-between p-1">
-                                        <i className="icon icon-catalogue-hc_small me-1"></i>
+                                        { (pendingOffer === offer) &&
-                                        { getOfferText(offer) }
+                                            <div className="d-flex flex-column justify-content-center align-items-center w-100">
-                                    </div>
+                                                <div className="text-black text-small">{ getPurchaseHeader() }</div>
-                                    <div className="d-flex">
+                                                <div className="text-black text-small">{ getPurchaseValidUntil() }</div>
-                                        { (offer.priceCredits > 0) &&
+                                                <Button variant="primary" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('buy') }</Button>
-                                            <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> }
+                                        { (pendingOffer !== offer) &&
+                                            <>
+                                                <div className="d-flex flex-column text-black text-small m-1">
+                                                    <div>
+                                                        <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>
+                                                <Button variant="primary" size="sm" onClick={ event => setPendingOffer(offer) }>{ LocalizeText('buy') }</Button>
+                                            </> }
+                                    </NitroCardGridItemView>
+                                );
+                            }) }
+                    </NitroCardGridView>
+                    {/* <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
+                        { 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>
+                                            <Button variant="primary" size="sm" onClick={ event => setPendingOffer(offer) } />
+                                        </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" dangerouslySetInnerHTML={ {__html: getSubscriptionDetails } }></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" dangerouslySetInnerHTML={ {__html: getSubscriptionDetails } }></div>
-            </div>
-        </div>
     );
 }