fix: pr comments

src/components/Payment/Payment.tsx

@@ -19,7 +19,6 @@ import type { PaymentDetail, Subscription, Transaction } from '#types/subscripti
 import type { AccessModel } from '#types/Config';
 import PayPal from '#src/icons/PayPal';
 import type { Offer } from '#types/checkout';
-import useOffers from '#src/hooks/useOffers';
 import OfferSwitch from '#components/OfferSwitch/OfferSwitch';
 import { changeSubscription } from '#src/stores/CheckoutController';
 import Alert from '#components/Alert/Alert';
@@ -46,6 +45,7 @@ type Props = {
   canUpdatePaymentMethod: boolean;
   canRenewSubscription?: boolean;
   canShowReceipts?: boolean;
+  offers?: Offer[];
 };
 
 const Payment = ({
@@ -66,6 +66,7 @@ const Payment = ({
   canUpdatePaymentMethod,
   onUpgradeSubscriptionClick,
   offerSwitchesAvailable,
+  offers = [],
 }: Props): JSX.Element => {
   const { t, i18n } = useTranslation(['user', 'account']);
   const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0;
@@ -76,8 +77,6 @@ const Payment = ({
   const breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
 
-  const { offers } = useOffers();
-
   const [isChangingOffer, setIsChangingOffer] = useState(false);
   const [selectedOfferId, setSelectedOfferId] = useState<string | null>(activeSubscription?.accessFeeId ?? null);
   const [isUpgradeOffer, setIsUpgradeOffer] = useState<boolean | undefined>(undefined);

src/hooks/useOffers.ts

@@ -30,8 +30,9 @@ const useOffers = () => {
   const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutService?.getOffers({ offerIds }, sandbox));
 
   // The `offerQueries` variable mutates on each render which prevents the useMemo to work properly.
-  const offerData = useMemo(() => {
+  return useMemo(() => {
     const offers = (allOffers || []).filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
+    useCheckoutStore.setState({ availableOffers: offers });
     const hasMultipleOfferTypes = (allOffers || []).some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
 
     const offersDict = (!isLoading && Object.fromEntries(offers.map((offer: Offer) => [offer.offerId, offer]))) || {};
@@ -51,20 +52,6 @@ const useOffers = () => {
       offersDict,
     };
   }, [allOffers, isLoading, hasPremierOffer, offerType]);
-
-  return checkoutService
-    ? offerData
-    : {
-        hasTVODOffers: false,
-        hasMultipleOfferTypes: false,
-        isLoading: false,
-        hasPremierOffer: false,
-        defaultOfferId: '',
-        offerType: 'svod' as OfferType,
-        setOfferType: () => null,
-        offers: [],
-        offersDict: {},
-      };
 };
 
 export default useOffers;

src/hooks/useSubscriptionChange.ts

@@ -0,0 +1,35 @@
+import { useMutation } from 'react-query';
+
+import { updateUser } from '#src/stores/AccountController';
+import { useAccountStore } from '#src/stores/AccountStore';
+import { changeSubscription } from '#src/stores/CheckoutController';
+import type { Customer } from '#types/account';
+
+export const useSubscriptionChange = (
+  isUpgradeOffer: boolean,
+  selectedOfferId: string | null,
+  customer: Customer,
+  activeSubscriptionId: string | number | undefined,
+) => {
+  const updateSubscriptionMetadata = useMutation(updateUser, {
+    onSuccess: () => {
+      useAccountStore.setState({
+        loading: false,
+      });
+    },
+  });
+
+  return useMutation(changeSubscription, {
+    onSuccess: () => {
+      if (!isUpgradeOffer && selectedOfferId) {
+        updateSubscriptionMetadata.mutate({
+          firstName: customer.firstName || '',
+          lastName: customer.lastName || '',
+          metadata: {
+            [`${activeSubscriptionId}_pending_downgrade`]: selectedOfferId,
+          },
+        });
+      }
+    },
+  });
+};

src/pages/User/User.tsx

@@ -55,7 +55,7 @@ const User = (): JSX.Element => {
     canUpdatePaymentMethod,
     canShowReceipts,
   } = useAccountStore();
-  const offerSwitches = useCheckoutStore((state) => state.offerSwitches);
+  const { offerSwitches, availableOffers } = useCheckoutStore();
   const location = useLocation();
 
   const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem }));
@@ -197,6 +197,7 @@ const User = (): JSX.Element => {
                   offerSwitchesAvailable={!!offerSwitches.length}
                   canShowReceipts={canShowReceipts}
                   onShowReceiptClick={handleShowReceiptClick}
+                  offers={availableOffers}
                 />
               ) : (
                 <Navigate to="my-account" />

src/stores/CheckoutStore.ts

@@ -8,6 +8,7 @@ type CheckoutStore = {
   paymentMethods: PaymentMethod[] | null;
   requestedMediaOffers: MediaOffer[] | null;
   offerSwitches: Offer[];
+  availableOffers: Offer[];
   updateOffer: (offer: Offer | null) => void;
   setOffer: (offer: Offer | null) => void;
   setOrder: (order: Order | null) => void;
@@ -21,6 +22,7 @@ export const useCheckoutStore = createStore<CheckoutStore>('CheckoutStore', (set
   paymentMethods: null,
   requestedMediaOffers: null,
   offerSwitches: [],
+  availableOffers: [],
   updateOffer: (offer) => set({ offer: offer }),
   setOffer: (offer) => set({ offer }),
   setOrder: (order) => set({ order }),