nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #88 from billsonnn/@bug-fix/default-gift

Browse Source 
@bug fix/default gift
This commit is contained in:
Bill 2022-12-13 23:55:11 -05:00 committed by GitHub
commit 9f46f75a1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/catalog/CatalogView.scss
View File

@ -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;
}
}
}

74
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -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';
@ -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(() =>
{
@ -36,30 +37,38 @@ 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;
}, [ giftConfiguration, selectedBoxIndex ]);
return giftConfiguration ? (giftConfiguration.defaultStuffTypes.findIndex(s => (s === boxTypes[selectedBoxIndex])) > -1) : false;
}, [ boxTypes, giftConfiguration, selectedBoxIndex ]);
const boxExtraData = useMemo(() =>
{
if(!giftConfiguration) return '';
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(() =>
{
if(!giftConfiguration) return false;
if (!giftConfiguration) return false;
const boxType = giftConfiguration.boxTypes[selectedBoxIndex];
if (isBoxDefault) return false;
const boxType = boxTypes[selectedBoxIndex];
return (boxType === 8 || (boxType >= 3 && boxType <= 6)) ? false : true;
}, [ giftConfiguration, selectedBoxIndex ]);
}, [ giftConfiguration, selectedBoxIndex, isBoxDefault, boxTypes ]);
const colourId = useMemo(() =>
{
return isBoxDefault ? boxTypes[selectedBoxIndex] : selectedColorId;
},[ isBoxDefault, boxTypes, selectedBoxIndex, selectedColorId ])
const handleAction = useCallback((action: string) =>
{
@ -83,11 +92,11 @@ export const CatalogGiftView: FC<{}> = props =>
setReceiverNotFound(true);
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));
@ -117,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(() =>
{
@ -130,22 +156,28 @@ 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]) });
}
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' : 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');
@ -167,7 +199,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={ colourId } extraData={ boxExtraData } />
</Base> }
<Column gap={ 1 }>
<Flex gap={ 2 }>
@ -187,7 +219,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 +232,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>