From 5892902ee22278c1f83667c6e07b0129c3d29b6c Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 16:00:34 -0300
Subject: [PATCH] Update Catalog HC Purchase layout

---
 src/assets/images/catalog/hc_banner_big.png   | Bin 0 -> 3539 bytes
 .../vip-buy/CatalogLayoutVipBuyView.scss      |   6 +
 .../vip-buy/CatalogLayoutVipBuyView.tsx       | 182 +++++++++---------
 3 files changed, 95 insertions(+), 93 deletions(-)
 create mode 100644 src/assets/images/catalog/hc_banner_big.png

diff --git a/src/assets/images/catalog/hc_banner_big.png b/src/assets/images/catalog/hc_banner_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b2c4ec39eee0ec02046d14e8de3974821068e67
GIT binary patch
literal 3539
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
N002ovPDHLkV1oSFwh;gT

literal 0
HcmV?d00001

diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss
index 5aee7e7f..e2684851 100644
--- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss
+++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss
@@ -6,5 +6,11 @@
             height: 80px !important;
             max-height: 80px !important;
         }
+
+        .hc-banner {
+            width: 68px;
+            height: 40px;
+            background: url(../../../../../../assets/images/catalog/hc_big.png) center no-repeat;
+        }
     }
 }
diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
index 04424e33..c53ac536 100644
--- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
+++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
@@ -1,22 +1,43 @@
 import { ClubOfferData, GetClubOffersMessageComposer, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from 'react-bootstrap';
 import { LocalizeText } from '../../../../../../api';
+import { CatalogEvent } from '../../../../../../events/catalog/CatalogEvent';
+import { useUiEvent } from '../../../../../../hooks';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
+import { LoadingSpinnerView } from '../../../../../../layout/loading-spinner/LoadingSpinnerView';
 import { GetCurrencyAmount } from '../../../../../purse/common/CurrencyHelper';
 import { GLOBAL_PURSE } from '../../../../../purse/PurseView';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
 import { GetCatalogPageImage } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
+import { CatalogPurchaseState } from '../../purchase/purchase-button/CatalogPurchaseButtonView.types';
 import { CatalogLayoutVipBuyViewProps } from './CatalogLayoutVipBuyView.types';
 
 export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =>
 {
     const { catalogState = null } = useCatalogContext();
     const { pageParser = null, clubOffers = null, subscriptionInfo = null } = catalogState;
+
     const [ pendingOffer, setPendingOffer ] = useState<ClubOfferData>(null);
+    const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
+
+    const onCatalogEvent = useCallback((event: CatalogEvent) =>
+    {
+        switch(event.type)
+        {
+            case CatalogEvent.PURCHASE_SUCCESS:
+                setPurchaseState(CatalogPurchaseState.NONE);
+                return;
+            case CatalogEvent.PURCHASE_FAILED:
+                setPurchaseState(CatalogPurchaseState.FAILED);
+                return;
+        }
+    }, []);
+
+    useUiEvent(CatalogEvent.PURCHASE_SUCCESS, onCatalogEvent);
+    useUiEvent(CatalogEvent.PURCHASE_FAILED, onCatalogEvent);
 
     const getOfferText = useCallback((offer: ClubOfferData) =>
     {
@@ -77,130 +98,105 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
     {
         if(!pendingOffer) return;
 
+        setPurchaseState(CatalogPurchaseState.PURCHASE);
         SendMessageHook(new PurchaseFromCatalogComposer(pageParser.pageId, pendingOffer.offerId, null, 1));
     }, [ pendingOffer, pageParser ]);
 
     useEffect(() =>
     {
-        if(clubOffers === null)
-        {
-            SendMessageHook(new GetClubOffersMessageComposer(1));
-
-            return;
-        }
+        if(clubOffers === null) SendMessageHook(new GetClubOffersMessageComposer(1));
     }, [ clubOffers ]);
 
-    const getPurchaseButton = (offer: ClubOfferData) =>
+    const setOffer = useCallback((offer: ClubOfferData) =>
     {
-        if(!offer) return null;
+        setPurchaseState(CatalogPurchaseState.NONE);
+        setPendingOffer(offer);
+    }, []);
 
-        if(offer.priceCredits > GetCurrencyAmount(-1))
+    const getPurchaseButton = useCallback(() =>
+    {
+        if(!pendingOffer) return null;
+
+        if(pendingOffer.priceCredits > GetCurrencyAmount(-1))
         {
-            return <Button variant="danger" size="sm">{ LocalizeText('catalog.alert.notenough.title') }</Button>;
+            return <button className="btn btn-danger btn-sm w-100">{ LocalizeText('catalog.alert.notenough.title') }</button>;
         }
 
-        if(offer.priceActivityPoints > GetCurrencyAmount(offer.priceActivityPointsType))
+        if(pendingOffer.priceActivityPoints > GetCurrencyAmount(pendingOffer.priceActivityPointsType))
         {
-            return <Button variant="danger" size="sm">{ LocalizeText('catalog.alert.notenough.activitypoints.title.' + offer.priceActivityPointsType) }</Button>;
+            return <button className="btn btn-danger btn-sm w-100">{ LocalizeText('catalog.alert.notenough.activitypoints.title.' + pendingOffer.priceActivityPointsType) }</button>;
         }
 
-        return <Button variant="primary" size="sm" onClick={ event => setPendingOffer(offer) }>{ LocalizeText('buy') }</Button>;
-    }
-
-    console.log(pendingOffer)
+        switch(purchaseState)
+        {
+            case CatalogPurchaseState.CONFIRM:
+                return <button type="button" className="btn btn-warning w-100" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</button>;
+            case CatalogPurchaseState.PURCHASE:
+                return <button type="button" className="btn btn-primary w-100" disabled><LoadingSpinnerView /></button>;
+            case CatalogPurchaseState.FAILED:
+                return <button type="button" className="btn btn-danger w-100" disabled>{ LocalizeText('generic.failed') }</button>;
+            case CatalogPurchaseState.NONE:
+            default:
+                return <button type="button" className="btn btn-success w-100" onClick={ () => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</button>;
+        }
+    }, [ pendingOffer, purchaseState, purchaseSubscription ]);
 
     return (
         <>
             <div className="row h-100 nitro-catalog-layout-vip-buy">
-                <div className="col-7 h-100">
+                <div className="col-6 h-100">
                     <NitroCardGridView columns={ 1 } className="vip-buy-grid">
                         { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                             {
                                 return (
-                                    <NitroCardGridItemView key={ index } className="justify-content-between p-1">
-                                        { (pendingOffer === offer) &&
-                                            <>
-                                                <div className="d-flex flex-column text-black text-small m-1">
-                                                    <div className="d-flex align-items-center">
-                                                        <i className="icon icon-catalogue-hc_small me-1"></i>
-                                                        { getPurchaseHeader() }
-                                                    </div>
-                                                    <div className="text-black text-small">{ getPurchaseValidUntil() }</div>
-                                                    <div className="d-flex">
-                                                        { (offer.priceCredits > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceCredits }</span>
-                                                                <CurrencyIcon type={ -1 } />
-                                                            </div> }
-                                                        { (offer.priceActivityPoints > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceActivityPoints }</span>
-                                                                <CurrencyIcon type={ offer.priceActivityPointsType } />
-                                                            </div> }
-                                                    </div>
+                                    <NitroCardGridItemView key={ index } className="justify-content-between py-1 px-2 text-black" itemActive={ pendingOffer === offer } onClick={ () => setOffer(offer) }>
+                                        <div className="hc-banner"></div>
+                                            <div className="fw-bold">
+                                                <div className="text-end">{ getOfferText(offer) }</div>
+                                                <div className="d-flex gap-2 justify-content-end">
+                                                    { (offer.priceCredits > 0) &&
+                                                        <div className="d-flex align-items-center justify-content-end gap-1">
+                                                            <span className="text-black">{ offer.priceCredits }</span>
+                                                            <CurrencyIcon type={ -1 } />
+                                                        </div> }
+                                                    { (offer.priceActivityPoints > 0) &&
+                                                        <div className="d-flex align-items-center justify-content-end gap-1">
+                                                            <span className="text-black">{ offer.priceActivityPoints }</span>
+                                                            <CurrencyIcon type={ offer.priceActivityPointsType } />
+                                                        </div> }
                                                 </div>
-                                                <Button variant="primary" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>
-                                            </> }
-                                        { (pendingOffer !== offer) &&
-                                            <>
-                                                <div className="d-flex flex-column text-black text-small m-1">
-                                                    <div className="d-flex align-items-center">
-                                                        <i className="icon icon-catalogue-hc_small me-1"></i>
-                                                        { getOfferText(offer) }
-                                                    </div>
-                                                    <div className="d-flex">
-                                                        { (offer.priceCredits > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceCredits }</span>
-                                                                <CurrencyIcon type={ -1 } />
-                                                            </div> }
-                                                        { (offer.priceActivityPoints > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceActivityPoints }</span>
-                                                                <CurrencyIcon type={ offer.priceActivityPointsType } />
-                                                            </div> }
-                                                    </div>
-                                                </div>
-                                                { getPurchaseButton(offer) }
-                                            </> }
+                                            </div>
                                     </NitroCardGridItemView>
                                 );
                             }) }
                     </NitroCardGridView>
-                    {/* <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
-                        { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
-                            {
-                                return (
-                                    <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                        <div className="position-relative border border-2 rounded catalog-offer-item">
-                                            <div className="d-flex align-items-center text-black text-small m-1">
-                                                <i className="icon icon-catalogue-hc_small me-1"></i>
-                                                { getOfferText(offer) }
-                                            </div>
-                                            <div className="d-flex">
-                                                { (offer.priceCredits > 0) &&
-                                                    <div className="d-flex align-items-center justify-content-end">
-                                                        <span className="text-black ms-1">{ offer.priceCredits }</span>
-                                                        <CurrencyIcon type={ -1 } />
-                                                    </div> }
-                                                { (offer.priceActivityPoints > 0) &&
-                                                    <div className="d-flex align-items-center justify-content-end">
-                                                        <span className="text-black ms-1">{ offer.priceActivityPoints }</span>
-                                                        <CurrencyIcon type={ offer.priceActivityPointsType } />
-                                                    </div> }
-                                            </div>
-                                            <Button variant="primary" size="sm" onClick={ event => setPendingOffer(offer) } />
-                                        </div>
-                                    </div>
-                                );
-                            }) }
-                    </div> */}
                 </div>
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
+                <div className="position-relative d-flex flex-column col-6 justify-content-center align-items-center">
                     <div className="d-block mb-2">
                         <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
                     </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } }></div>
+                    <div className="text-center text-black small bg-muted rounded p-1" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } }></div>
+                    { pendingOffer && <div className="mt-auto w-100 text-black">
+                        <div className="d-flex gap-2 mb-2 align-items-center">
+                            <div className="w-100">
+                                <div className="fw-bold">{ getPurchaseHeader() }</div>
+                                <div className="small">{ getPurchaseValidUntil() }</div>
+                            </div>
+                            <div>
+                                { (pendingOffer.priceCredits > 0) &&
+                                    <div className="d-flex align-items-center justify-content-end gap-1">
+                                        <span className="text-black">{ pendingOffer.priceCredits }</span>
+                                        <CurrencyIcon type={ -1 } />
+                                    </div> }
+                                { (pendingOffer.priceActivityPoints > 0) &&
+                                    <div className="d-flex align-items-center justify-content-end gap-1">
+                                        <span className="text-black">{ pendingOffer.priceActivityPoints }</span>
+                                        <CurrencyIcon type={ pendingOffer.priceActivityPointsType } />
+                                    </div> }
+                            </div>
+                        </div>
+                        { getPurchaseButton() }
+                    </div>}
                 </div>
             </div>
         </>