diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx index 34d94a4..7b05a40 100644 --- a/src/components/catalog/views/gift/CatalogGiftView.tsx +++ b/src/components/catalog/views/gift/CatalogGiftView.tsx @@ -1,10 +1,10 @@ -import { GetSessionDataManager, GiftReceiverNotFoundEvent, PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer'; +import { GetGiftWrappingConfigurationComposer, GetSessionDataManager, GiftReceiverNotFoundEvent, GiftWrappingConfigurationEvent, PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer'; import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; -import { ColorUtils, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api'; +import { ColorUtils, GiftWrappingConfiguration, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api'; import { Button, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common'; import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events'; -import { useFriends, useGiftConfiguration, useMessageEvent, useUiEvent } from '../../../../hooks'; +import { useFriends, useMessageEvent, useMessageEventState, useUiEvent } from '../../../../hooks'; import { classNames } from '../../../../layout'; let isBuyingGift = false; @@ -18,19 +18,63 @@ export const CatalogGiftView: FC<{}> = props => const [ receiverName, setReceiverName ] = useState(''); const [ showMyFace, setShowMyFace ] = useState(true); const [ message, setMessage ] = useState(''); - const [ colors, setColors ] = useState<{ id: number, color: string }[]>([]); const [ selectedBoxIndex, setSelectedBoxIndex ] = useState(0); const [ selectedRibbonIndex, setSelectedRibbonIndex ] = useState(0); const [ selectedColorId, setSelectedColorId ] = useState(0); - const [ maxBoxIndex, setMaxBoxIndex ] = useState(0); - const [ maxRibbonIndex, setMaxRibbonIndex ] = useState(0); const [ receiverNotFound, setReceiverNotFound ] = useState(false); const { friends } = useFriends(); - const { data: giftConfiguration = null } = useGiftConfiguration(); - const [ boxTypes, setBoxTypes ] = useState([]); + const giftConfiguration = useMessageEventState( + GiftWrappingConfigurationEvent, + event => new GiftWrappingConfiguration(event.getParser()), + null + ); const [ suggestions, setSuggestions ] = useState([]); const [ isAutocompleteVisible, setIsAutocompleteVisible ] = useState(true); + const boxTypes = useMemo(() => + { + if(!giftConfiguration) return []; + + const list = [ ...giftConfiguration.boxTypes ]; + const defaults = giftConfiguration.defaultStuffTypes; + + if(defaults && defaults.length) + { + const pickIndex = Math.floor(Math.random() * Math.max(defaults.length - 1, 1)); + list.push(defaults[pickIndex]); + } + + return list; + }, [ giftConfiguration ]); + + const colors = useMemo<{ id: number, color: string }[]>(() => + { + if(!giftConfiguration) return []; + + const result: { id: number, color: string }[] = []; + + for(const colorId of giftConfiguration.stuffTypes) + { + const giftData = GetSessionDataManager().getFloorItemData(colorId); + + if(!giftData) continue; + + if(giftData.colors && giftData.colors.length > 0) result.push({ id: colorId, color: ColorUtils.makeColorNumberHex(giftData.colors[0]) }); + } + + return result; + }, [ giftConfiguration ]); + + const maxBoxIndex = Math.max(boxTypes.length - 1, 0); + const maxRibbonIndex = Math.max(boxTypes.length - 1, 0); + + useEffect(() => + { + if(!colors.length) return; + + setSelectedColorId(prev => (prev || colors[0].id)); + }, [ colors ]); + const onClose = useCallback(() => { isBuyingGift = false; @@ -144,35 +188,6 @@ export const CatalogGiftView: FC<{}> = props => useMessageEvent(GiftReceiverNotFoundEvent, event => setReceiverNotFound(true)); - const initializeGiftData = useCallback(() => - { - if(!giftConfiguration) return; - - const newBoxTypes = [ ...giftConfiguration.boxTypes ]; - newBoxTypes.push(giftConfiguration.defaultStuffTypes[Math.floor((Math.random() * (giftConfiguration.defaultStuffTypes.length - 1)))]); - - setBoxTypes(newBoxTypes); - setMaxBoxIndex(newBoxTypes.length - 1); - setMaxRibbonIndex(newBoxTypes.length - 1); - setSelectedBoxIndex(0); - setSelectedRibbonIndex(0); - - const newColors: { id: number, color: string }[] = []; - - for(const colorId of giftConfiguration.stuffTypes) - { - const giftData = GetSessionDataManager().getFloorItemData(colorId); - - if(!giftData) continue; - - if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: ColorUtils.makeColorNumberHex(giftData.colors[0]) }); - } - - setColors(newColors); - - if(newColors.length) setSelectedColorId(newColors[0].id); - }, [ giftConfiguration ]); - useUiEvent([ CatalogPurchasedEvent.PURCHASE_SUCCESS, CatalogEvent.INIT_GIFT ], event => @@ -191,8 +206,12 @@ export const CatalogGiftView: FC<{}> = props => setPageId(castedEvent.pageId); setOfferId(castedEvent.offerId); setExtraData(castedEvent.extraData); - initializeGiftData(); + setSelectedBoxIndex(0); + setSelectedRibbonIndex(0); setIsVisible(true); + + if(!giftConfiguration) SendMessageComposer(new GetGiftWrappingConfigurationComposer()); + return; } }); @@ -202,14 +221,7 @@ export const CatalogGiftView: FC<{}> = props => setReceiverNotFound(false); }, [ receiverName ]); - useEffect(() => - { - if(!isVisible || !giftConfiguration) return; - - initializeGiftData(); - }, [ giftConfiguration, isVisible, initializeGiftData ]); - - if(!giftConfiguration || !giftConfiguration.isEnabled || !isVisible || !boxTypes.length) return null; + if(!isVisible || !giftConfiguration || !giftConfiguration.isEnabled || !boxTypes.length) return null; const boxName = 'catalog.gift_wrapping_new.box.' + (isBoxDefault ? 'default' : boxTypes[selectedBoxIndex]); const ribbonName = `catalog.gift_wrapping_new.ribbon.${ selectedRibbonIndex }`; diff --git a/src/css/catalog/CatalogClassicView.css b/src/css/catalog/CatalogClassicView.css index c2c7092..b1dff1b 100644 --- a/src/css/catalog/CatalogClassicView.css +++ b/src/css/catalog/CatalogClassicView.css @@ -1,10 +1,10 @@ .nitro-catalog-classic-window { - width: 606px !important; - height: 565px !important; - max-width: 606px !important; - min-width: 606px !important; - min-height: 565px !important; - max-height: 565px !important; + width: 640px !important; + height: 600px !important; + max-width: 640px !important; + min-width: 640px !important; + min-height: 600px !important; + max-height: 600px !important; } .nitro-catalog-classic-window .nitro-card-title { @@ -301,7 +301,6 @@ inset: 4px; background-repeat: no-repeat; background-position: center; - background-size: contain; pointer-events: none; }