From 580d0a1d2d1a68869ccd03bb4d820d0aaeed7bb3 Mon Sep 17 00:00:00 2001
From: laynester <laynebalsters@gmail.com>
Date: Tue, 13 Dec 2022 04:19:22 -0500
Subject: [PATCH 1/4] fix the shit

---
 src/components/catalog/CatalogView.scss       |  6 ++++-
 .../catalog/views/gift/CatalogGiftView.tsx    | 23 +++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 9e5fe9d7..173e92a0 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -27,6 +27,9 @@
         width: 80px;
         height: 80px;
         overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
     .gift-color {
@@ -89,7 +92,8 @@
         .icon-hc-banner {
             width: 68px;
             height: 40px;
-            background: url("../../assets/images/catalog/hc_big.png") center no-repeat;
+            background: url("../../assets/images/catalog/hc_big.png") center
+                no-repeat;
         }
     }
 }
diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index 04eebeaa..222a7f76 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@@ -36,30 +36,33 @@ export const CatalogGiftView: FC<{}> = props =>
         setMessage('');
         setSelectedBoxIndex(0);
         setSelectedRibbonIndex(0);
-        
+
         if(colors.length) setSelectedColorId(colors[0].id);
     }, [ colors ]);
 
     const isBoxDefault = useMemo(() =>
     {
-        return giftConfiguration ? (giftConfiguration.defaultStuffTypes.findIndex(s => (s === giftConfiguration.boxTypes[selectedBoxIndex])) > -1) : true;
+        return giftConfiguration ? (giftConfiguration.defaultStuffTypes.findIndex(s => (s === giftConfiguration.boxTypes[selectedBoxIndex])) > -1) : false;
     }, [ giftConfiguration, selectedBoxIndex ]);
 
     const boxExtraData = useMemo(() =>
     {
-        if(!giftConfiguration) return '';
+        if (!giftConfiguration) return '';
 
         return ((giftConfiguration.boxTypes[selectedBoxIndex] * 1000) + giftConfiguration.ribbonTypes[selectedRibbonIndex]).toString();
     }, [ giftConfiguration, selectedBoxIndex, selectedRibbonIndex ]);
 
     const isColorable = useMemo(() =>
     {
-        if(!giftConfiguration) return false;
+        if (!giftConfiguration) return false;
         
+        if (isBoxDefault) return false;
+
         const boxType = giftConfiguration.boxTypes[selectedBoxIndex];
 
         return (boxType === 8 || (boxType >= 3 && boxType <= 6)) ? false : true;
-    }, [ giftConfiguration, selectedBoxIndex ]);
+    }, [ giftConfiguration, selectedBoxIndex, isBoxDefault ]);
+
 
     const handleAction = useCallback((action: string) =>
     {
@@ -83,7 +86,7 @@ export const CatalogGiftView: FC<{}> = props =>
                     setReceiverNotFound(true);
                     return;
                 }
-                
+
                 SendMessageComposer(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, showMyFace));
                 return;
         }
@@ -133,6 +136,8 @@ export const CatalogGiftView: FC<{}> = props =>
             if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: `#${ giftData.colors[0].toString(16) }` });
         }
 
+        giftConfiguration.boxTypes.push(giftConfiguration.defaultStuffTypes[Math.floor((Math.random() * giftConfiguration.defaultStuffTypes.length) - 1)]);
+
         setMaxBoxIndex(giftConfiguration.boxTypes.length - 1);
         setMaxRibbonIndex(giftConfiguration.ribbonTypes.length - 1);
 
@@ -145,7 +150,7 @@ export const CatalogGiftView: FC<{}> = props =>
 
     if(!giftConfiguration || !giftConfiguration.isEnabled || !isVisible) return null;
 
-    const boxName = 'catalog.gift_wrapping_new.box.' + (isBoxDefault ? 'default' : selectedBoxIndex);
+    const boxName = 'catalog.gift_wrapping_new.box.' + (isBoxDefault ? 'default' : giftConfiguration.boxTypes[selectedBoxIndex]);
     const ribbonName = `catalog.gift_wrapping_new.ribbon.${ selectedRibbonIndex }`;
     const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');
 
@@ -187,7 +192,7 @@ export const CatalogGiftView: FC<{}> = props =>
                                 </Flex>
                             </Column>
                         </Flex>
-                        <Flex alignItems="center" gap={ 2 }>
+                        <Flex alignItems="center" gap={ 2 } className={ isColorable ? '' : 'opacity-50 pointer-events-none' }>
                             <ButtonGroup>
                                 <Button variant="primary" onClick={ () => handleAction('prev_ribbon') }>
                                     <FontAwesomeIcon icon="chevron-left" />
@@ -200,7 +205,7 @@ export const CatalogGiftView: FC<{}> = props =>
                         </Flex>
                     </Column>
                 </Flex>
-                <Column gap={ 1 }>
+                <Column gap={ 1 } className={ isColorable ? '' : 'opacity-50 pointer-events-none' }>
                     <Text fontWeight="bold">
                         { LocalizeText('catalog.gift_wrapping.pick_color') }
                     </Text>

From e8c9654ea3fffd7e412c395a55dac76c303751fd Mon Sep 17 00:00:00 2001
From: laynester <laynebalsters@gmail.com>
Date: Tue, 13 Dec 2022 04:28:57 -0500
Subject: [PATCH 2/4] change image

---
 src/components/catalog/views/gift/CatalogGiftView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index 222a7f76..fd9bdb7a 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@@ -172,7 +172,7 @@ export const CatalogGiftView: FC<{}> = props =>
                 <Flex alignItems="center" gap={ 2 }>
                     { selectedColorId &&
                         <Base className="gift-preview">
-                            <LayoutFurniImageView productType={ ProductTypeEnum.FLOOR } productClassId={ selectedColorId } extraData={ boxExtraData } />
+                            <LayoutFurniImageView productType={ ProductTypeEnum.FLOOR } productClassId={ isBoxDefault ? giftConfiguration.boxTypes[selectedBoxIndex] : selectedColorId } extraData={ boxExtraData } />
                         </Base> }
                     <Column gap={ 1 }>
                         <Flex gap={ 2 }>

From 6b8c039df733dba72fc368503f7b4b6937e76585 Mon Sep 17 00:00:00 2001
From: laynester <laynebalsters@gmail.com>
Date: Tue, 13 Dec 2022 04:58:59 -0500
Subject: [PATCH 3/4] fix purchasing & the colours

---
 .../catalog/views/gift/CatalogGiftView.tsx      | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index fd9bdb7a..74003a60 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@@ -1,7 +1,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GiftReceiverNotFoundEvent, PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetSessionDataManager, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../api';
+import { ColorUtils, GetSessionDataManager, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../api';
 import { Base, Button, ButtonGroup, classNames, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events';
 import { useCatalog, useMessageEvent, useUiEvent } from '../../../../hooks';
@@ -62,6 +62,11 @@ export const CatalogGiftView: FC<{}> = props =>
 
         return (boxType === 8 || (boxType >= 3 && boxType <= 6)) ? false : true;
     }, [ giftConfiguration, selectedBoxIndex, isBoxDefault ]);
+    
+    const colourId = useMemo(() =>
+    {
+        return isBoxDefault ? giftConfiguration.boxTypes[selectedBoxIndex] : selectedColorId;
+    },[ isBoxDefault, giftConfiguration, selectedBoxIndex,selectedColorId ])
 
 
     const handleAction = useCallback((action: string) =>
@@ -87,10 +92,10 @@ export const CatalogGiftView: FC<{}> = props =>
                     return;
                 }
 
-                SendMessageComposer(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, showMyFace));
+                SendMessageComposer(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, colourId , selectedBoxIndex, selectedRibbonIndex, showMyFace));
                 return;
         }
-    }, [ extraData, maxBoxIndex, maxRibbonIndex, message, offerId, pageId, receiverName, selectedBoxIndex, selectedColorId, selectedRibbonIndex, showMyFace ]);
+    }, [ colourId, extraData, maxBoxIndex, maxRibbonIndex, message, offerId, pageId, receiverName, selectedBoxIndex, selectedRibbonIndex, showMyFace ]);
 
     useMessageEvent<GiftReceiverNotFoundEvent>(GiftReceiverNotFoundEvent, event => setReceiverNotFound(true));
 
@@ -133,7 +138,7 @@ export const CatalogGiftView: FC<{}> = props =>
 
             if(!giftData) continue;
 
-            if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: `#${ giftData.colors[0].toString(16) }` });
+            if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: ColorUtils.makeColorNumberHex(giftData.colors[0]) });
         }
 
         giftConfiguration.boxTypes.push(giftConfiguration.defaultStuffTypes[Math.floor((Math.random() * giftConfiguration.defaultStuffTypes.length) - 1)]);
@@ -152,7 +157,7 @@ export const CatalogGiftView: FC<{}> = props =>
 
     const boxName = 'catalog.gift_wrapping_new.box.' + (isBoxDefault ? 'default' : giftConfiguration.boxTypes[selectedBoxIndex]);
     const ribbonName = `catalog.gift_wrapping_new.ribbon.${ selectedRibbonIndex }`;
-    const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');
+    const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');;
 
     return (
         <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" theme="primary-slim">
@@ -172,7 +177,7 @@ export const CatalogGiftView: FC<{}> = props =>
                 <Flex alignItems="center" gap={ 2 }>
                     { selectedColorId &&
                         <Base className="gift-preview">
-                            <LayoutFurniImageView productType={ ProductTypeEnum.FLOOR } productClassId={ isBoxDefault ? giftConfiguration.boxTypes[selectedBoxIndex] : selectedColorId } extraData={ boxExtraData } />
+                            <LayoutFurniImageView productType={ ProductTypeEnum.FLOOR } productClassId={ colourId } extraData={ boxExtraData } />
                         </Base> }
                     <Column gap={ 1 }>
                         <Flex gap={ 2 }>

From 6a16dcf2d54a59fcbb55785b81802a4c52fbe97b Mon Sep 17 00:00:00 2001
From: laynester <laynebalsters@gmail.com>
Date: Tue, 13 Dec 2022 05:28:07 -0500
Subject: [PATCH 4/4] seperate box types

---
 .../catalog/views/gift/CatalogGiftView.tsx    | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index 74003a60..5bcdd23a 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@@ -24,6 +24,7 @@ export const CatalogGiftView: FC<{}> = props =>
     const [ receiverNotFound, setReceiverNotFound ] = useState<boolean>(false);
     const { catalogOptions = null } = useCatalog();
     const { giftConfiguration = null } = catalogOptions;
+    const [ boxTypes, setBoxTypes ] = useState<number[]>([]);
 
     const onClose = useCallback(() =>
     {
@@ -42,15 +43,15 @@ export const CatalogGiftView: FC<{}> = props =>
 
     const isBoxDefault = useMemo(() =>
     {
-        return giftConfiguration ? (giftConfiguration.defaultStuffTypes.findIndex(s => (s === giftConfiguration.boxTypes[selectedBoxIndex])) > -1) : false;
-    }, [ giftConfiguration, selectedBoxIndex ]);
+        return giftConfiguration ? (giftConfiguration.defaultStuffTypes.findIndex(s => (s === boxTypes[selectedBoxIndex])) > -1) : false;
+    }, [ boxTypes, giftConfiguration, selectedBoxIndex ]);
 
     const boxExtraData = useMemo(() =>
     {
         if (!giftConfiguration) return '';
 
-        return ((giftConfiguration.boxTypes[selectedBoxIndex] * 1000) + giftConfiguration.ribbonTypes[selectedRibbonIndex]).toString();
-    }, [ giftConfiguration, selectedBoxIndex, selectedRibbonIndex ]);
+        return ((boxTypes[selectedBoxIndex] * 1000) + giftConfiguration.ribbonTypes[selectedRibbonIndex]).toString();
+    }, [ giftConfiguration, selectedBoxIndex, selectedRibbonIndex, boxTypes ]);
 
     const isColorable = useMemo(() =>
     {
@@ -58,15 +59,15 @@ export const CatalogGiftView: FC<{}> = props =>
         
         if (isBoxDefault) return false;
 
-        const boxType = giftConfiguration.boxTypes[selectedBoxIndex];
+        const boxType = boxTypes[selectedBoxIndex];
 
         return (boxType === 8 || (boxType >= 3 && boxType <= 6)) ? false : true;
-    }, [ giftConfiguration, selectedBoxIndex, isBoxDefault ]);
+    }, [ giftConfiguration, selectedBoxIndex, isBoxDefault, boxTypes ]);
     
     const colourId = useMemo(() =>
     {
-        return isBoxDefault ? giftConfiguration.boxTypes[selectedBoxIndex] : selectedColorId;
-    },[ isBoxDefault, giftConfiguration, selectedBoxIndex,selectedColorId ])
+        return isBoxDefault ? boxTypes[selectedBoxIndex] : selectedColorId;
+    },[ isBoxDefault, boxTypes, selectedBoxIndex, selectedColorId ])
 
 
     const handleAction = useCallback((action: string) =>
@@ -125,6 +126,23 @@ export const CatalogGiftView: FC<{}> = props =>
     {
         setReceiverNotFound(false);
     }, [ receiverName ]);
+    
+    const createBoxTypes = useCallback(() =>
+    {
+        if (!giftConfiguration) return;
+        
+        setBoxTypes(prev =>
+        {
+            let newPrev = [ ...giftConfiguration.boxTypes ];
+    
+            newPrev.push(giftConfiguration.defaultStuffTypes[ Math.floor((Math.random() * (giftConfiguration.defaultStuffTypes.length - 1))) ]);
+
+            setMaxBoxIndex(newPrev.length- 1);
+            setMaxRibbonIndex(newPrev.length - 1);
+    
+            return newPrev;
+        })
+    },[ giftConfiguration ])
 
     useEffect(() =>
     {
@@ -141,23 +159,27 @@ export const CatalogGiftView: FC<{}> = props =>
             if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: ColorUtils.makeColorNumberHex(giftData.colors[0]) });
         }
 
-        giftConfiguration.boxTypes.push(giftConfiguration.defaultStuffTypes[Math.floor((Math.random() * giftConfiguration.defaultStuffTypes.length) - 1)]);
-
-        setMaxBoxIndex(giftConfiguration.boxTypes.length - 1);
-        setMaxRibbonIndex(giftConfiguration.ribbonTypes.length - 1);
+        createBoxTypes();
 
         if(newColors.length)
         {
             setSelectedColorId(newColors[0].id);
             setColors(newColors);
         }
-    }, [ giftConfiguration ]);
+    }, [ giftConfiguration, createBoxTypes ]);
+    
+    useEffect(() =>
+    { 
+        if (!isVisible) return;
+
+        createBoxTypes();
+    },[ createBoxTypes, isVisible ])
 
     if(!giftConfiguration || !giftConfiguration.isEnabled || !isVisible) return null;
 
-    const boxName = 'catalog.gift_wrapping_new.box.' + (isBoxDefault ? 'default' : giftConfiguration.boxTypes[selectedBoxIndex]);
+    const boxName = 'catalog.gift_wrapping_new.box.' + (isBoxDefault ? 'default' : boxTypes[selectedBoxIndex]);
     const ribbonName = `catalog.gift_wrapping_new.ribbon.${ selectedRibbonIndex }`;
-    const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');;
+    const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');
 
     return (
         <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" theme="primary-slim">