From d13c819be729b67d5ed7ffba93d689827be2dfd7 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 25 Jul 2021 04:44:40 -0400
Subject: [PATCH] Badge display updates

---
 .../badge-display/CatalogLayoutBadgeDisplayView.tsx       | 8 +++++---
 .../catalog/views/page/purchase/CatalogPurchaseView.tsx   | 4 ++--
 .../views/page/purchase/CatalogPurchaseView.types.ts      | 1 +
 .../purchase-button/CatalogPurchaseButtonView.tsx         | 4 ++--
 .../purchase-button/CatalogPurchaseButtonView.types.ts    | 1 +
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
index 5e05b594..c67f9600 100644
--- a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
@@ -5,6 +5,7 @@ import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/
 import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
 import { GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
@@ -18,8 +19,8 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
     const { roomPreviewer = null, pageParser = null } = props;
     const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
     const { activeOffer = null } = catalogState;
-    const [ currentBadge, setCurrentBadge ] = useState<string>(null);
     const [ badges, setBadges ] = useState<string[]>([]);
+    const [ currentBadge, setCurrentBadge ] = useState<string>(null);
 
     const product = ((activeOffer && activeOffer.products[0]) || null);
 
@@ -63,7 +64,8 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
         <div className="row h-100 nitro-catalog-layout-badge-display">
             <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
-                <div className="d-flex mt-2">
+                <div className="d-flex flex-column mt-2">
+                    <div className="text-black fw-bold">{ LocalizeText('catalog_selectbadge') }</div>
                     <NitroCardGridView className="inventory-badge-grid">
                         { badgeElements }
                     </NitroCardGridView>
@@ -73,7 +75,7 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
                 <div className="position-relative d-flex flex-column col">
                     <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
                     <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ 'Bill	22-7-2021	ADM' } />
+                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ currentBadge } disabled={ !currentBadge } />
                 </div> }
         </div>
     );
diff --git a/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx b/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
index e2275968..ba6b4dd6 100644
--- a/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
+++ b/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
@@ -7,7 +7,7 @@ import { CatalogPurchaseGiftButtonView } from './purchase-gift-button/CatalogPur
 
 export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
 {
-    const { offer = null, pageId = -1, extra = '' } = props;
+    const { offer = null, pageId = -1, extra = '', disabled = false } = props;
     const [ quantity, setQuantity ] = useState(1);
 
     useEffect(() =>
@@ -70,7 +70,7 @@ export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
                 </div>
             </div>
             <div className="d-flex flex-column mt-1">
-                <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } />
+                <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } disabled={ disabled } />
                 { offer.giftable && <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } /> }
             </div>
         </div>
diff --git a/src/views/catalog/views/page/purchase/CatalogPurchaseView.types.ts b/src/views/catalog/views/page/purchase/CatalogPurchaseView.types.ts
index 075b4f22..72be56a3 100644
--- a/src/views/catalog/views/page/purchase/CatalogPurchaseView.types.ts
+++ b/src/views/catalog/views/page/purchase/CatalogPurchaseView.types.ts
@@ -5,4 +5,5 @@ export interface CatalogPurchaseViewProps
     offer: CatalogPageOfferData;
     pageId: number;
     extra?: string;
+    disabled?: boolean;
 }
diff --git a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
index 2ae147b9..ed8d728a 100644
--- a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
+++ b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
@@ -10,7 +10,7 @@ import { CatalogPurchaseButtonViewProps, CatalogPurchaseState } from './CatalogP
 
 export const CatalogPurchaseButtonView: FC<CatalogPurchaseButtonViewProps> = props =>
 {
-    const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, beforePurchase = null } = props;
+    const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, disabled = false, beforePurchase = null } = props;
     const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
     const [ pendingApproval, setPendingApproval ] = useState(false);
 
@@ -96,6 +96,6 @@ export const CatalogPurchaseButtonView: FC<CatalogPurchaseButtonViewProps> = pro
             return <button type="button" className={ 'btn btn-danger ' + className } disabled>{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</button>;
         case CatalogPurchaseState.NONE:
         default:
-            return <button type="button" className={ 'btn btn-success ' + className } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</button>
+            return <button type="button" className={ 'btn btn-success ' + className } disabled={ disabled } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</button>
     }
 }
diff --git a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.types.ts b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.types.ts
index 0abc0ef3..008d8d8e 100644
--- a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.types.ts
+++ b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.types.ts
@@ -8,6 +8,7 @@ export interface CatalogPurchaseButtonViewProps
     extra?: string;
     quantity?: number;
     isPurchaseAllowed?: boolean;
+    disabled?: boolean;
     beforePurchase?: () => void;
 }