From 1097cb442eb97ec0740b168a3c78ec0709a76730 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 16 Mar 2022 17:46:04 -0400
Subject: [PATCH] Fix purchasing wall items with extra data

---
 .../widgets/CatalogItemGridWidgetView.tsx     |  2 +-
 .../widgets/CatalogPurchaseWidgetView.tsx     | 48 ++++++++++++-------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
index 32b5f0b0..7081c873 100644
--- a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
@@ -29,7 +29,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
 
         if(offer.product && (offer.product.productType === ProductTypeEnum.WALL))
         {
-            DispatchUiEvent(new CatalogSetExtraPurchaseParameterEvent(offer.product.extraParam));
+            setTimeout(() => DispatchUiEvent(new CatalogSetExtraPurchaseParameterEvent(offer.product.extraParam)), 0);
         }
     }
 
diff --git a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
index bdbcbb79..149ece69 100644
--- a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
@@ -2,7 +2,7 @@ import { PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetClubMemberLevel, LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Button, LayoutLoadingSpinnerView } from '../../../../../common';
-import { CatalogEvent, CatalogInitGiftEvent, CatalogInitPurchaseEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogWidgetEvent } from '../../../../../events';
+import { CatalogEvent, CatalogInitGiftEvent, CatalogInitPurchaseEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogSetExtraPurchaseParameterEvent, CatalogWidgetEvent } from '../../../../../events';
 import { DispatchUiEvent, UseUiEvent } from '../../../../../hooks';
 import { GetCurrencyAmount } from '../../../../purse/common/CurrencyHelper';
 import { useCatalogContext } from '../../../CatalogContext';
@@ -20,8 +20,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
     const { noGiftOption = false, purchaseCallback = null } = props;
     const [ purchaseWillBeGift, setPurchaseWillBeGift ] = useState(false);
     const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
-    const { currentOffer = null, currentPage = null, purchaseOptions = null, setPurchaseOptions = null, getNodesByOfferId = null } = useCatalogContext();
-    const { quantity = 1, extraData = '', extraParamRequired = false, previewStuffData = null } = purchaseOptions;
+    const { currentOffer = null, currentPage = null, purchaseOptions = null, setPurchaseOptions = null } = useCatalogContext();
 
     const onCatalogInitPurchaseEvent = useCallback((event: CatalogInitPurchaseEvent) =>
     {
@@ -33,6 +32,22 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
 
     UseUiEvent(CatalogWidgetEvent.INIT_PURCHASE, onCatalogInitPurchaseEvent);
 
+    const onCatalogSetExtraPurchaseParameterEvent = useCallback((event: CatalogSetExtraPurchaseParameterEvent) =>
+    {
+        if(!currentOffer) return;
+
+        setPurchaseOptions(prevValue =>
+            {
+                const newValue = { ...prevValue };
+
+                newValue.extraData = event.parameter;
+
+                return newValue;
+            });
+    }, [ currentOffer, setPurchaseOptions ]);
+
+    UseUiEvent(CatalogWidgetEvent.SET_EXTRA_PARM, onCatalogSetExtraPurchaseParameterEvent);
+
     const onCatalogEvent = useCallback((event: CatalogEvent) =>
     {
         switch(event.type)
@@ -61,7 +76,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
     {
         if(!currentOffer) return false;
         
-        if(extraParamRequired && (!extraData || !extraData.length)) return false;
+        if(purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) return false;
 
         if(currentOffer.pricingModel === Offer.PRICING_MODEL_SINGLE)
         {
@@ -71,9 +86,9 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
         }
 
         return false;
-    }, [ currentOffer, extraParamRequired, extraData ]);
+    }, [ currentOffer, purchaseOptions ]);
 
-    const purchase = useCallback((isGift: boolean = false) =>
+    const purchase = (isGift: boolean = false) =>
     {
         if(!currentOffer) return;
 
@@ -86,7 +101,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
 
         if(isGift)
         {
-            DispatchUiEvent(new CatalogInitGiftEvent(currentOffer.page.pageId, currentOffer.offerId, extraData));
+            DispatchUiEvent(new CatalogInitGiftEvent(currentOffer.page.pageId, currentOffer.offerId, purchaseOptions.extraData));
 
             return;
         }
@@ -109,18 +124,15 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
         //     if(nodes) pageId = nodes[0].pageId;
         // }
 
-        SendMessageComposer(new PurchaseFromCatalogComposer(pageId, currentOffer.offerId, extraData, quantity));
-    }, [ currentOffer, purchaseCallback, extraData, quantity ]);
+        SendMessageComposer(new PurchaseFromCatalogComposer(pageId, currentOffer.offerId, purchaseOptions.extraData, purchaseOptions.quantity));
+    }
 
     useEffect(() =>
     {
         if(!currentOffer) return;
 
-        return () =>
-        {
-            setPurchaseState(CatalogPurchaseState.NONE);
-            setPurchaseOptions({ quantity: 1, extraData: '', extraParamRequired: false, previewStuffData: null });
-        }
+        setPurchaseState(CatalogPurchaseState.NONE);
+        setPurchaseOptions({ quantity: 1, extraData: '', extraParamRequired: false, previewStuffData: null });
     }, [ currentOffer, setPurchaseOptions ]);
 
     useEffect(() =>
@@ -142,8 +154,8 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
 
     const PurchaseButton = () =>
     {
-        const priceCredits = (currentOffer.priceInCredits * quantity);
-        const pricePoints = (currentOffer.priceInActivityPoints * quantity);
+        const priceCredits = (currentOffer.priceInCredits * purchaseOptions.quantity);
+        const pricePoints = (currentOffer.priceInActivityPoints * purchaseOptions.quantity);
 
         if(GetClubMemberLevel() < currentOffer.clubLevel) return <Button variant="danger" disabled>{ LocalizeText('catalog.alert.hc.required') }</Button>;
 
@@ -165,7 +177,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
                 return <Button variant="danger">{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
             case CatalogPurchaseState.NONE:
             default:
-                return <Button disabled={ (extraParamRequired && (!extraData || !extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
+                return <Button disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
         }
     }
 
@@ -173,7 +185,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
         <>
             <PurchaseButton />
             { (!noGiftOption && !currentOffer.isRentOffer) &&
-                <Button disabled={ ((quantity > 1) || !currentOffer.giftable || isLimitedSoldOut || (extraParamRequired && (!extraData || !extraData.length))) } onClick={ event => purchase(true) }>
+                <Button disabled={ ((purchaseOptions.quantity > 1) || !currentOffer.giftable || isLimitedSoldOut || (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length))) } onClick={ event => purchase(true) }>
                     { LocalizeText('catalog.purchase_confirmation.gift') }
                 </Button> }
         </>