fix: move additional logic to container

jwplayer · Jul 18, 2023 · 7a350fa · 7a350fa
1 parent 6b7a72a
commit 7a350fa
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 29 deletions.
diff --git a/src/components/Payment/Payment.test.tsx b/src/components/Payment/Payment.test.tsx
@@ -25,6 +25,19 @@ describe('<Payment>', () => {
         isLoading={false}
         offerSwitchesAvailable={false}
         onShowReceiptClick={vi.fn()}
+        onUpgradeSubscriptionClick={vi.fn()}
+        onShowAllTransactionsClick={vi.fn()}
+        changeSubscriptionPlan={{
+          isLoading: false,
+          isSuccess: false,
+          isError: false,
+          reset: vi.fn(),
+        }}
+        onChangePlanClick={vi.fn()}
+        selectedOfferId={null}
+        setSelectedOfferId={vi.fn()}
+        isUpgradeOffer={undefined}
+        setIsUpgradeOffer={vi.fn()}
       />,
     );
 

diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
@@ -3,24 +3,23 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
-import IconButton from '../IconButton/IconButton';
 import ExternalLink from '../../icons/ExternalLink';
+import IconButton from '../IconButton/IconButton';
 
 import styles from './Payment.module.scss';
 
-import TextField from '#components/TextField/TextField';
-import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
+import Alert from '#components/Alert/Alert';
 import Button from '#components/Button/Button';
-import type { Customer } from '#types/account';
+import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
+import OfferSwitch from '#components/OfferSwitch/OfferSwitch';
+import TextField from '#components/TextField/TextField';
+import PayPal from '#src/icons/PayPal';
 import { formatLocalizedDate, formatPrice } from '#src/utils/formatting';
 import { addQueryParam } from '#src/utils/location';
-import type { PaymentDetail, Subscription, Transaction } from '#types/subscription';
 import type { AccessModel } from '#types/Config';
-import PayPal from '#src/icons/PayPal';
+import type { Customer } from '#types/account';
 import type { Offer } from '#types/checkout';
-import OfferSwitch from '#components/OfferSwitch/OfferSwitch';
-import Alert from '#components/Alert/Alert';
-import { useSubscriptionChange } from '#src/hooks/useSubscriptionChange';
+import type { PaymentDetail, Subscription, Transaction } from '#types/subscription';
 
 const VISIBLE_TRANSACTIONS = 4;
 
@@ -44,6 +43,17 @@ type Props = {
   canShowReceipts?: boolean;
   offers?: Offer[];
   pendingDowngradeOfferId?: string;
+  changeSubscriptionPlan: {
+    isLoading: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    reset: () => void;
+  };
+  onChangePlanClick: () => void;
+  selectedOfferId: string | null;
+  setSelectedOfferId: (offerId: string | null) => void;
+  isUpgradeOffer: boolean | undefined;
+  setIsUpgradeOffer: (isUpgradeOffer: boolean | undefined) => void;
 };
 
 const Payment = ({
@@ -66,6 +76,12 @@ const Payment = ({
   offerSwitchesAvailable,
   offers = [],
   pendingDowngradeOfferId = '',
+  changeSubscriptionPlan,
+  onChangePlanClick,
+  selectedOfferId,
+  setSelectedOfferId,
+  isUpgradeOffer,
+  setIsUpgradeOffer,
 }: Props): JSX.Element => {
   const { t, i18n } = useTranslation(['user', 'account']);
   const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0;
@@ -77,14 +93,12 @@ const Payment = ({
   const isMobile = breakpoint === Breakpoint.xs;
 
   const [isChangingOffer, setIsChangingOffer] = useState(false);
-  const [selectedOfferId, setSelectedOfferId] = useState<string | null>(activeSubscription?.accessFeeId ?? null);
-  const [isUpgradeOffer, setIsUpgradeOffer] = useState<boolean | undefined>(undefined);
 
   useEffect(() => {
     if (!isChangingOffer) {
       setSelectedOfferId(activeSubscription?.accessFeeId ?? null);
     }
-  }, [activeSubscription, isChangingOffer]);
+  }, [activeSubscription, isChangingOffer, setSelectedOfferId]);
 
   useEffect(() => {
     setIsChangingOffer(false);
@@ -97,18 +111,7 @@ const Payment = ({
           (offers.find((offer) => offer.offerId === activeSubscription?.accessFeeId)?.customerPriceInclTax ?? 0),
       );
     }
-  }, [selectedOfferId, offers, activeSubscription]);
-
-  const changeSubscriptionPlan = useSubscriptionChange(isUpgradeOffer ?? false, selectedOfferId, customer, activeSubscription?.subscriptionId);
-
-  const onChangePlanClick = async () => {
-    if (selectedOfferId && activeSubscription?.subscriptionId) {
-      changeSubscriptionPlan.mutate({
-        accessFeeId: selectedOfferId.slice(1),
-        subscriptionId: `${activeSubscription.subscriptionId}`,
-      });
-    }
-  };
+  }, [selectedOfferId, offers, activeSubscription, setIsUpgradeOffer]);
 
   function onCompleteSubscriptionClick() {
     navigate(addQueryParam(location, 'u', 'choose-offer'));

diff --git a/src/containers/PaymentContainer/PaymentContainer.tsx b/src/containers/PaymentContainer/PaymentContainer.tsx
@@ -12,6 +12,7 @@ import { useCheckoutStore } from '#src/stores/CheckoutStore';
 import { useConfigStore } from '#src/stores/ConfigStore';
 import { addQueryParam } from '#src/utils/location';
 import useOffers from '#src/hooks/useOffers';
+import { useSubscriptionChange } from '#src/hooks/useSubscriptionChange';
 
 const PaymentContainer = () => {
   const { accessModel } = useConfigStore(
@@ -22,8 +23,6 @@ const PaymentContainer = () => {
     shallow,
   );
   const navigate = useNavigate();
-  const [showAllTransactions, setShowAllTransactions] = useState(false);
-  const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);
 
   const {
     user: customer,
@@ -36,6 +35,12 @@ const PaymentContainer = () => {
     canUpdatePaymentMethod,
     canShowReceipts,
   } = useAccountStore();
+
+  const [showAllTransactions, setShowAllTransactions] = useState(false);
+  const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);
+  const [selectedOfferId, setSelectedOfferId] = useState<string | null>(activeSubscription?.accessFeeId ?? null);
+  const [isUpgradeOffer, setIsUpgradeOffer] = useState<boolean | undefined>(undefined);
+
   const { offerSwitches } = useCheckoutStore();
   const location = useLocation();
 
@@ -80,6 +85,17 @@ const PaymentContainer = () => {
 
   const { offers } = useOffers();
 
+  const changeSubscriptionPlan = useSubscriptionChange(isUpgradeOffer ?? false, selectedOfferId, customer, activeSubscription?.subscriptionId);
+
+  const onChangePlanClick = async () => {
+    if (selectedOfferId && activeSubscription?.subscriptionId) {
+      changeSubscriptionPlan.mutate({
+        accessFeeId: selectedOfferId.slice(1),
+        subscriptionId: `${activeSubscription.subscriptionId}`,
+      });
+    }
+  };
+
   if (!customer) {
     return <LoadingOverlay />;
   }
@@ -107,6 +123,12 @@ const PaymentContainer = () => {
       onShowReceiptClick={handleShowReceiptClick}
       offers={offers}
       pendingDowngradeOfferId={pendingDowngradeOfferId}
+      changeSubscriptionPlan={changeSubscriptionPlan}
+      onChangePlanClick={onChangePlanClick}
+      selectedOfferId={selectedOfferId}
+      setSelectedOfferId={(offerId: string | null) => setSelectedOfferId(offerId)}
+      isUpgradeOffer={isUpgradeOffer}
+      setIsUpgradeOffer={(isUpgradeOffer: boolean | undefined) => setIsUpgradeOffer(isUpgradeOffer)}
     />
   );
 };

diff --git a/src/hooks/useSubscriptionChange.ts b/src/hooks/useSubscriptionChange.ts
@@ -8,7 +8,7 @@ import type { Customer } from '#types/account';
 export const useSubscriptionChange = (
   isUpgradeOffer: boolean,
   selectedOfferId: string | null,
-  customer: Customer,
+  customer: Customer | null,
   activeSubscriptionId: string | number | undefined,
 ) => {
   const updateSubscriptionMetadata = useMutation(updateUser, {
@@ -23,8 +23,8 @@ export const useSubscriptionChange = (
     onSuccess: () => {
       if (!isUpgradeOffer && selectedOfferId) {
         updateSubscriptionMetadata.mutate({
-          firstName: customer.firstName || '',
-          lastName: customer.lastName || '',
+          firstName: customer?.firstName || '',
+          lastName: customer?.lastName || '',
           metadata: {
             [`${activeSubscriptionId}_pending_downgrade`]: selectedOfferId,
           },