fix: offerswitch props

jwplayer · Jul 17, 2023 · d79f779 · d79f779
1 parent c9d5bbb
commit d79f779
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 42 deletions.
diff --git a/src/components/OfferSwitch/OfferSwitch.tsx b/src/components/OfferSwitch/OfferSwitch.tsx
@@ -6,31 +6,28 @@ import styles from './OfferSwitch.module.scss';
 import type { Offer } from '#types/checkout';
 import Checkbox from '#components/Checkbox/Checkbox';
 import { formatLocalizedDate, formatPrice } from '#src/utils/formatting';
-import { useAccountStore } from '#src/stores/AccountStore';
 
-interface OfferSwitchProps {
+type OfferSwitchProps = {
   isCurrentOffer: boolean;
   pendingDowngradeOfferId: string;
   offer: Offer;
-  selected: {
-    value: boolean;
-    set: React.Dispatch<React.SetStateAction<string | null>>;
-  };
-}
+  selected: boolean;
+  onChange: (offerId: string) => void;
+  expiresAt: number | undefined;
+};
 
-const OfferSwitch = ({ isCurrentOffer, pendingDowngradeOfferId, offer, selected }: OfferSwitchProps) => {
+const OfferSwitch = ({ isCurrentOffer, pendingDowngradeOfferId, offer, selected, onChange, expiresAt }: OfferSwitchProps) => {
   const { t, i18n } = useTranslation('user');
   const { customerPriceInclTax, customerCurrency, period } = offer;
-  const expiresAt = useAccountStore((state) => state.subscription?.expiresAt);
 
   const isPendingDowngrade = pendingDowngradeOfferId === offer.offerId;
 
   return (
-    <div className={classNames(styles.offerSwitchContainer, { [styles.activeOfferSwitchContainer]: selected.value })}>
-      <Checkbox disabled={isPendingDowngrade} name={offer.offerId} checked={selected.value} onChange={() => selected.set(offer.offerId)} />
+    <div className={classNames(styles.offerSwitchContainer, { [styles.activeOfferSwitchContainer]: selected })}>
+      <Checkbox disabled={isPendingDowngrade} name={offer.offerId} checked={selected} onChange={() => onChange(offer.offerId)} />
       <div className={styles.offerSwitchInfoContainer}>
         {(isCurrentOffer || isPendingDowngrade) && (
-          <div className={classNames(styles.currentPlanHeading, { [styles.activeCurrentPlanHeading]: selected.value })}>
+          <div className={classNames(styles.currentPlanHeading, { [styles.activeCurrentPlanHeading]: selected })}>
             {isCurrentOffer && t('payment.current_plan').toUpperCase()}
             {isPendingDowngrade && t('payment.pending_downgrade').toUpperCase()}
           </div>

diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useMutation } from 'react-query';
 
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 import IconButton from '../IconButton/IconButton';
@@ -20,10 +19,8 @@ import type { AccessModel } from '#types/Config';
 import PayPal from '#src/icons/PayPal';
 import type { Offer } from '#types/checkout';
 import OfferSwitch from '#components/OfferSwitch/OfferSwitch';
-import { changeSubscription } from '#src/stores/CheckoutController';
 import Alert from '#components/Alert/Alert';
-import { updateUser } from '#src/stores/AccountController';
-import { useAccountStore } from '#src/stores/AccountStore';
+import { useSubscriptionChange } from '#src/hooks/useSubscriptionChange';
 
 const VISIBLE_TRANSACTIONS = 4;
 
@@ -100,26 +97,7 @@ const Payment = ({
     }
   }, [selectedOfferId, offers, activeSubscription]);
 
-  const updateSubscriptionMetadata = useMutation(updateUser, {
-    onSuccess: () => {
-      useAccountStore.setState({
-        loading: false,
-      });
-    },
-  });
-  const changeSubscriptionPlan = useMutation(changeSubscription, {
-    onSuccess: () => {
-      if (!isUpgradeOffer && selectedOfferId) {
-        updateSubscriptionMetadata.mutate({
-          firstName: customer.firstName || '',
-          lastName: customer.lastName || '',
-          metadata: {
-            [`${activeSubscription?.subscriptionId}_pending_downgrade`]: selectedOfferId,
-          },
-        });
-      }
-    },
-  });
+  const changeSubscriptionPlan = useSubscriptionChange(isUpgradeOffer ?? false, selectedOfferId, customer, activeSubscription?.subscriptionId);
 
   const pendingDowngradeOfferId = (customer.metadata?.[`${activeSubscription?.subscriptionId}_pending_downgrade`] as string) || '';
 
@@ -262,7 +240,9 @@ const Payment = ({
                     isCurrentOffer={offer.offerId === activeSubscription?.accessFeeId}
                     pendingDowngradeOfferId={pendingDowngradeOfferId}
                     offer={offer}
-                    selected={{ value: selectedOfferId === offer.offerId, set: setSelectedOfferId }}
+                    selected={selectedOfferId === offer.offerId}
+                    onChange={(offerId) => setSelectedOfferId(offerId)}
+                    expiresAt={activeSubscription?.expiresAt}
                   />
                 ))}
               <div className={styles.changePlanButtons}>

diff --git a/src/hooks/useOffers.ts b/src/hooks/useOffers.ts
@@ -32,7 +32,6 @@ const useOffers = () => {
   // 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)));
-    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]))) || {};

diff --git a/src/pages/User/User.tsx b/src/pages/User/User.tsx
@@ -26,6 +26,7 @@ import { clear as clearFavorites } from '#src/stores/FavoritesController';
 import { getSubscriptionSwitches } from '#src/stores/CheckoutController';
 import { useCheckoutStore } from '#src/stores/CheckoutStore';
 import { addQueryParam } from '#src/utils/location';
+import useOffers from '#src/hooks/useOffers';
 
 const User = (): JSX.Element => {
   const { accessModel, favoritesList } = useConfigStore(
@@ -55,7 +56,8 @@ const User = (): JSX.Element => {
     canUpdatePaymentMethod,
     canShowReceipts,
   } = useAccountStore();
-  const { offerSwitches, availableOffers } = useCheckoutStore();
+  const { offerSwitches } = useCheckoutStore();
+  const { offers } = useOffers();
   const location = useLocation();
 
   const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL({ media: playlistItem }));
@@ -197,7 +199,7 @@ const User = (): JSX.Element => {
                   offerSwitchesAvailable={!!offerSwitches.length}
                   canShowReceipts={canShowReceipts}
                   onShowReceiptClick={handleShowReceiptClick}
-                  offers={availableOffers}
+                  offers={offers}
                 />
               ) : (
                 <Navigate to="my-account" />

diff --git a/src/stores/CheckoutStore.ts b/src/stores/CheckoutStore.ts
@@ -8,7 +8,6 @@ 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;
@@ -22,7 +21,6 @@ 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 }),