From d63b0562e74c624bae0690048467442595928fe2 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 14:44:47 -0300
Subject: [PATCH] fix(payment): subscription offer panel shown for authvod+tvod

---
 packages/hooks-react/src/useOffers.ts               | 13 +++++++++----
 .../containers/AccountModal/forms/ChooseOffer.tsx   |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index 53c9f6697..580dfad9a 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -28,10 +28,16 @@ const useOffers = () => {
 
   const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutController.getOffers({ offerIds }));
 
+  const hasMultipleOfferTypes = (allOffers || []).some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
+
+  const updateOfferType = useMemo(
+    () => (!hasPremierOffer && hasMultipleOfferTypes ? (type: OfferType) => setOfferType(type) : undefined),
+    [hasMultipleOfferTypes, hasPremierOffer],
+  );
+
   // The `offerQueries` variable mutates on each render which prevents the useMemo to work properly.
   return useMemo(() => {
     const offers = (allOffers || []).filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
-    const hasMultipleOfferTypes = (allOffers || []).some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
 
     const offersDict = (!isLoading && Object.fromEntries(offers.map((offer: Offer) => [offer.offerId, offer]))) || {};
     // we need to get the offerIds from the offer responses since it contains different offerIds based on the customers'
@@ -45,12 +51,11 @@ const useOffers = () => {
       hasPremierOffer,
       defaultOfferId,
       offerType,
-      setOfferType,
+      setOfferType: updateOfferType,
       offers,
       offersDict,
-      isTvodRequested: hasTvodOffer,
     };
-  }, [allOffers, isLoading, hasPremierOffer, offerType, hasTvodOffer]);
+  }, [allOffers, isLoading, hasMultipleOfferTypes, hasPremierOffer, offerType, updateOfferType]);
 };
 
 export default useOffers;
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index 8b5bdcaeb..dc998cda6 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -41,7 +41,7 @@ const ChooseOffer = () => {
   const location = useLocation();
   const { t } = useTranslation('account');
   const { setOffer } = useCheckoutStore(({ setOffer }) => ({ setOffer }), shallow);
-  const { isLoading, offerType, setOfferType, offers, offersDict, defaultOfferId, hasMultipleOfferTypes, hasPremierOffer, isTvodRequested } = useOffers();
+  const { isLoading, offerType, setOfferType, offers, offersDict, defaultOfferId } = useOffers();
   const { subscription } = useAccountStore.getState();
   const [offerSwitches, updateOffer] = useCheckoutStore((state) => [state.offerSwitches, state.updateOffer]);
   const isOfferSwitch = useQueryParam('u') === 'upgrade-subscription';
@@ -137,7 +137,7 @@ const ChooseOffer = () => {
       submitting={submitting}
       offers={availableOffers}
       offerType={offerType}
-      setOfferType={isTvodRequested || (hasMultipleOfferTypes && !hasPremierOffer) ? setOfferType : undefined}
+      setOfferType={setOfferType}
     />
   );
 };