Fix / TVOD infinite loop and render optimizations

src/containers/AccountModal/AccountModal.tsx

@@ -24,6 +24,7 @@ import { addQueryParam, removeQueryParam } from '#src/utils/location';
 import FinalizePayment from '#components/FinalizePayment/FinalizePayment';
 import WaitingForPayment from '#components/WaitingForPayment/WaitingForPayment';
 import UpdatePaymentMethod from '#src/containers/UpdatePaymentMethod/UpdatePaymentMethod';
+import useEventCallback from '#src/hooks/useEventCallback';
 
 const PUBLIC_VIEWS = ['login', 'create-account', 'forgot-password', 'reset-password', 'send-confirmation', 'edit-password'];
 
@@ -41,20 +42,24 @@ const AccountModal = () => {
   } = config;
   const isPublicView = viewParam && PUBLIC_VIEWS.includes(viewParam);
 
+  const toLogin = useEventCallback(() => {
+    navigate(addQueryParam(location, 'u', 'login'));
+  });
+
+  const closeHandler = useEventCallback(() => {
+    navigate(removeQueryParam(location, 'u'));
+  });
+
   useEffect(() => {
     // make sure the last view is rendered even when the modal gets closed
     if (viewParam) setView(viewParam);
   }, [viewParam]);
 
   useEffect(() => {
     if (!!viewParam && !loading && !user && !isPublicView) {
-      navigate(addQueryParam(location, 'u', 'login'));
+      toLogin();
     }
-  }, [viewParam, navigate, location, loading, user, isPublicView]);
-
-  const closeHandler = () => {
-    navigate(removeQueryParam(location, 'u'));
-  };
+  }, [viewParam, loading, user, isPublicView, toLogin]);
 
   const renderForm = () => {
     if (!user && loading && !isPublicView) {

src/containers/AccountModal/forms/ChooseOffer.tsx

@@ -1,20 +1,33 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { mixed, object, SchemaOf } from 'yup';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
 import shallow from 'zustand/shallow';
 
-import useQueryParam from '../../../hooks/useQueryParam';
-import { switchSubscription } from '../../../stores/CheckoutController';
-import { useAccountStore } from '../../../stores/AccountStore';
-
 import useOffers from '#src/hooks/useOffers';
 import { addQueryParam, removeQueryParam } from '#src/utils/location';
 import { useCheckoutStore } from '#src/stores/CheckoutStore';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import ChooseOfferForm from '#components/ChooseOfferForm/ChooseOfferForm';
 import useForm, { UseFormOnSubmitHandler } from '#src/hooks/useForm';
+import useQueryParam from '#src/hooks/useQueryParam';
+import { switchSubscription } from '#src/stores/CheckoutController';
+import { useAccountStore } from '#src/stores/AccountStore';
 import type { ChooseOfferFormData } from '#types/account';
+import type { Subscription } from '#types/subscription';
+import useEventCallback from '#src/hooks/useEventCallback';
+
+const determineSwitchDirection = (subscription: Subscription | null) => {
+  const currentPeriod = subscription?.period;
+
+  if (currentPeriod === 'month') {
+    return 'upgrade';
+  } else if (currentPeriod === 'year') {
+    return 'downgrade';
+  } else {
+    return 'upgrade'; // Default to 'upgrade' if the period is not 'month' or 'year'
+  }
+};
 
 const ChooseOffer = () => {
   const navigate = useNavigate();
@@ -36,45 +49,46 @@ const ChooseOffer = () => {
     offerId: defaultOfferId,
   };
 
-  const determineSwitchDirection = () => {
-    const currentPeriod = subscription?.period;
+  const closeModal = useEventCallback((replace = false) => {
+    navigate(removeQueryParam(location, 'u'), { replace });
+  });
 
-    if (currentPeriod === 'month') {
-      return 'upgrade';
-    } else if (currentPeriod === 'year') {
-      return 'downgrade';
-    } else {
-      return 'upgrade'; // Default to 'upgrade' if the period is not 'month' or 'year'
-    }
-  };
+  const toCheckout = useEventCallback(() => {
+    navigate(addQueryParam(location, 'u', 'checkout'));
+  });
 
-  const chooseOfferSubmitHandler: UseFormOnSubmitHandler<ChooseOfferFormData> = async ({ offerId }, { setSubmitting, setErrors }) => {
-    const offer = offerId && offersDict[offerId];
+  const chooseOfferSubmitHandler: UseFormOnSubmitHandler<ChooseOfferFormData> = useCallback(
+    async ({ offerId }, { setSubmitting, setErrors }) => {
+      const offer = offerId && offersDict[offerId];
 
-    if (!offer) return setErrors({ form: t('choose_offer.offer_not_found') });
+      if (!offer) return setErrors({ form: t('choose_offer.offer_not_found') });
 
-    if (isOfferSwitch) {
-      const targetOffer = offerSwitches.find((offer) => offer.offerId === offerId);
-      const targetOfferId = targetOffer?.offerId || '';
+      if (isOfferSwitch) {
+        const targetOffer = offerSwitches.find((offer) => offer.offerId === offerId);
+        const targetOfferId = targetOffer?.offerId || '';
 
-      await switchSubscription(targetOfferId, determineSwitchDirection());
-      navigate(removeQueryParam(location, 'u'));
-    } else {
-      const selectedOffer = availableOffers.find((offer) => offer.offerId === offerId) || null;
+        await switchSubscription(targetOfferId, determineSwitchDirection(subscription));
+        closeModal();
+      } else {
+        const selectedOffer = availableOffers.find((offer) => offer.offerId === offerId) || null;
 
-      setOffer(selectedOffer);
-      updateOffer(selectedOffer);
-      setSubmitting(false);
-      navigate(addQueryParam(location, 'u', 'checkout'));
-    }
-  };
+        setOffer(selectedOffer);
+        updateOffer(selectedOffer);
+        setSubmitting(false);
+        toCheckout();
+      }
+    },
+    [availableOffers, closeModal, isOfferSwitch, offerSwitches, offersDict, setOffer, subscription, t, toCheckout, updateOffer],
+  );
 
   const { handleSubmit, handleChange, setValue, values, errors, submitting } = useForm(initialValues, chooseOfferSubmitHandler, validationSchema);
 
   useEffect(() => {
     // close auth modal when there are no offers defined in the config
-    if (!isLoading && !offers.length) navigate(removeQueryParam(location, 'u'), { replace: true });
-  }, [isLoading, offers, location, navigate]);
+    if (!isLoading && !offers.length) {
+      closeModal(true);
+    }
+  }, [isLoading, offers, closeModal]);
 
   useEffect(() => {
     if (!isOfferSwitch) setValue('offerId', defaultOfferId);

src/hooks/useClientIntegration.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { useConfigStore } from '#src/stores/ConfigStore';
 
 export enum ClientIntegrations {
@@ -11,10 +13,24 @@ const useClientIntegration = () => {
   } = useConfigStore.getState();
 
   const isJWP = !!integrations.jwp?.clientId;
+  const isCleeng = !!integrations.cleeng?.id;
   const sandbox = isJWP ? integrations.jwp?.useSandbox : integrations.cleeng?.useSandbox;
   const client = isJWP ? ClientIntegrations.JWP : ClientIntegrations.CLEENG;
   const clientId = isJWP ? integrations.jwp?.clientId : integrations.cleeng?.id;
-  const clientOffers = isJWP ? [`${integrations.jwp?.assetId}`] : [`${integrations.cleeng?.monthlyOffer}`, `${integrations.cleeng?.yearlyOffer}`];
+
+  // prevent infinite updates when `clientOffers` is used in as dependency
+  const clientOffers = useMemo(() => {
+    if (isJWP && !!integrations.jwp?.assetId) {
+      return [`${integrations.jwp.assetId}`];
+    }
+
+    if (isCleeng && integrations.cleeng?.monthlyOffer && integrations.cleeng?.yearlyOffer) {
+      return [`${integrations.cleeng.monthlyOffer}`, `${integrations.cleeng.yearlyOffer}`];
+    }
+
+    // No offers or JWP/Cleeng TVOD
+    return [];
+  }, [isJWP, isCleeng, integrations.jwp, integrations.cleeng]);
 
   return {
     sandbox: sandbox ?? true,

src/hooks/useEntitlement.ts

@@ -23,6 +23,8 @@ type QueryResult = {
   responseData?: GetEntitlementsResponse;
 };
 
+const notifyOnChangeProps = ['data' as const, 'isLoading' as const];
+
 /**
  * useEntitlement()
  *
@@ -55,6 +57,7 @@ const useEntitlement: UseEntitlement = (playlistItem) => {
       queryFn: () => checkoutService?.getEntitlements({ offerId }, sandbox),
       enabled: !!playlistItem && !!user && !!offerId && !isPreEntitled,
       refetchOnMount: 'always' as const,
+      notifyOnChangeProps,
     })),
   );