import { CreateLinkEvent, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { CatalogPurchaseState, DispatchUiEvent, GetClubMemberLevel, LocalStorageKeys, LocalizeText, Offer, SendMessageComposer } from '../../../../../api'; import { Button, LayoutLoadingSpinnerView } from '../../../../../common'; import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogPurchasedEvent } from '../../../../../events'; import { useCatalog, useLocalStorage, usePurse, useUiEvent } from '../../../../../hooks'; interface CatalogPurchaseWidgetViewProps { noGiftOption?: boolean; purchaseCallback?: () => void; } let isPurchasingCatalogItem = false; export const CatalogPurchaseWidgetView: FC = props => { const { noGiftOption = false, purchaseCallback = null } = props; const [ purchaseWillBeGift, setPurchaseWillBeGift ] = useState(false); const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE); const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useLocalStorage(LocalStorageKeys.CATALOG_SKIP_PURCHASE_CONFIRMATION, false); const { currentOffer = null, currentPage = null, purchaseOptions = null, setPurchaseOptions = null } = useCatalog(); const { getCurrencyAmount = null } = usePurse(); const onCatalogEvent = useCallback((event: CatalogEvent) => { switch(event.type) { case CatalogPurchasedEvent.PURCHASE_SUCCESS: isPurchasingCatalogItem = false; setPurchaseState(CatalogPurchaseState.NONE); return; case CatalogPurchaseFailureEvent.PURCHASE_FAILED: isPurchasingCatalogItem = false; setPurchaseState(CatalogPurchaseState.FAILED); return; case CatalogPurchaseNotAllowedEvent.NOT_ALLOWED: isPurchasingCatalogItem = false; setPurchaseState(CatalogPurchaseState.FAILED); return; case CatalogPurchaseSoldOutEvent.SOLD_OUT: isPurchasingCatalogItem = false; setPurchaseState(CatalogPurchaseState.SOLD_OUT); return; } }, []); useUiEvent(CatalogPurchasedEvent.PURCHASE_SUCCESS, onCatalogEvent); useUiEvent(CatalogPurchaseFailureEvent.PURCHASE_FAILED, onCatalogEvent); useUiEvent(CatalogPurchaseNotAllowedEvent.NOT_ALLOWED, onCatalogEvent); useUiEvent(CatalogPurchaseSoldOutEvent.SOLD_OUT, onCatalogEvent); const isLimitedSoldOut = useMemo(() => { if(!currentOffer) return false; if(purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) return false; if(currentOffer.pricingModel === Offer.PRICING_MODEL_SINGLE) { const product = currentOffer.product; if(product && product.isUniqueLimitedItem) return !product.uniqueLimitedItemsLeft; } return false; }, [ currentOffer, purchaseOptions ]); const purchase = (isGift: boolean = false) => { if(!currentOffer || isPurchasingCatalogItem) return; if(GetClubMemberLevel() < currentOffer.clubLevel) { CreateLinkEvent('habboUI/open/hccenter'); return; } if(isGift) { DispatchUiEvent(new CatalogInitGiftEvent(currentOffer.page.pageId, currentOffer.offerId, purchaseOptions.extraData)); return; } isPurchasingCatalogItem = true; setPurchaseState(CatalogPurchaseState.PURCHASE); if(purchaseCallback) { purchaseCallback(); return; } let pageId = currentOffer.page.pageId; // if(pageId === -1) // { // const nodes = getNodesByOfferId(currentOffer.offerId); // if(nodes) pageId = nodes[0].pageId; // } SendMessageComposer(new PurchaseFromCatalogComposer(pageId, currentOffer.offerId, purchaseOptions.extraData, purchaseOptions.quantity)); }; useEffect(() => { if(!currentOffer) return; setPurchaseState(CatalogPurchaseState.NONE); }, [ currentOffer, setPurchaseOptions ]); useEffect(() => { let timeout: ReturnType = null; if((purchaseState === CatalogPurchaseState.CONFIRM) || (purchaseState === CatalogPurchaseState.FAILED)) { timeout = setTimeout(() => setPurchaseState(CatalogPurchaseState.NONE), 3000); } return () => { if(timeout) clearTimeout(timeout); }; }, [ purchaseState ]); if(!currentOffer) return null; const PurchaseButton = () => { const priceCredits = (currentOffer.priceInCredits * purchaseOptions.quantity); const pricePoints = (currentOffer.priceInActivityPoints * purchaseOptions.quantity); if(GetClubMemberLevel() < currentOffer.clubLevel) return ; if(isLimitedSoldOut) return ; if(priceCredits > getCurrencyAmount(-1)) return ; if(pricePoints > getCurrencyAmount(currentOffer.activityPointType)) return ; switch(purchaseState) { case CatalogPurchaseState.CONFIRM: return ; case CatalogPurchaseState.PURCHASE: return ; case CatalogPurchaseState.FAILED: return ; case CatalogPurchaseState.SOLD_OUT: return ; case CatalogPurchaseState.NONE: default: return ; } }; return ( <> { (!noGiftOption && !currentOffer.isRentOffer) && } ); };