feat(user): add functionality to switch offers

src/components/Payment/Payment.module.scss

@@ -47,3 +47,9 @@
     margin-right: 4px;
   }
 }
+
+.upgradeSubscription {
+  @include responsive.mobile-only() {
+    margin-bottom: 8px;
+  }
+}

src/components/Payment/Payment.test.tsx

@@ -9,9 +9,17 @@ import subscription from '#test/fixtures/subscription.json';
 import type { Customer } from '#types/account';
 import type { PaymentDetail, Subscription, Transaction } from '#types/subscription';
 import { renderWithRouter } from '#test/testUtils';
+import * as checkoutController from '#src/stores/CheckoutController';
 
 describe('<Payment>', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   test('renders and matches snapshot', () => {
+    const spy = vi.spyOn(checkoutController, 'getSubscriptionSwitches');
+    spy.mockResolvedValue(undefined);
+
     const { container } = renderWithRouter(
       <Payment
         accessModel="AVOD"
@@ -22,6 +30,7 @@ describe('<Payment>', () => {
         canUpdatePaymentMethod={false}
         showAllTransactions={false}
         isLoading={false}
+        offerSwitchesAvailable={false}
       />,
     );
 

src/components/Payment/Payment.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import { getSubscriptionSwitches } from '../../stores/CheckoutController';
+
 import styles from './Payment.module.scss';
 
 import TextField from '#components/TextField/TextField';
@@ -23,9 +26,11 @@ type Props = {
   transactions: Transaction[] | null;
   customer: Customer;
   isLoading: boolean;
+  offerSwitchesAvailable: boolean;
   panelClassName?: string;
   panelHeaderClassName?: string;
   onShowAllTransactionsClick?: () => void;
+  onUpgradeSubscriptionClick?: () => void;
   showAllTransactions: boolean;
   canUpdatePaymentMethod: boolean;
   canRenewSubscription?: boolean;
@@ -44,13 +49,17 @@ const Payment = ({
   showAllTransactions,
   canRenewSubscription = false,
   canUpdatePaymentMethod,
+  onUpgradeSubscriptionClick,
+  offerSwitchesAvailable,
 }: Props): JSX.Element => {
   const { t } = useTranslation(['user', 'account']);
   const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0;
   const hasMoreTransactions = hiddenTransactionsCount > 0;
   const navigate = useNavigate();
   const location = useLocation();
   const isGrantedSubscription = activeSubscription?.period === 'granted';
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint === Breakpoint.xs;
 
   function onCompleteSubscriptionClick() {
     navigate(addQueryParam(location, 'u', 'choose-offer'));
@@ -81,6 +90,10 @@ const Payment = ({
     }
   }
 
+  useEffect(() => {
+    getSubscriptionSwitches();
+  }, []);
+
   return (
     <>
       {accessModel === 'SVOD' && (
@@ -104,8 +117,18 @@ const Payment = ({
                   </p>
                 )}
               </div>
+              {offerSwitchesAvailable && (
+                <Button
+                  className={styles.upgradeSubscription}
+                  label={t('user:payment.change_subscription')}
+                  onClick={onUpgradeSubscriptionClick}
+                  fullWidth={isMobile}
+                  color="primary"
+                  data-testid="change-subscription-button"
+                />
+              )}
               {activeSubscription.status === 'active' && !isGrantedSubscription ? (
-                <Button label={t('user:payment.cancel_subscription')} onClick={onCancelSubscriptionClick} />
+                <Button label={t('user:payment.cancel_subscription')} onClick={onCancelSubscriptionClick} fullWidth={isMobile} />
               ) : canRenewSubscription ? (
                 <Button label={t('user:payment.renew_subscription')} onClick={onRenewSubscriptionClick} />
               ) : null}

src/containers/AccountModal/AccountModal.test.tsx

@@ -3,9 +3,17 @@ import React from 'react';
 import AccountModal from './AccountModal';
 
 import { renderWithRouter } from '#test/testUtils';
+import * as checkoutController from '#src/stores/CheckoutController';
 
 describe('<AccountModal>', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   test('renders and matches snapshot', () => {
+    const spy = vi.spyOn(checkoutController, 'getSubscriptionSwitches');
+    spy.mockResolvedValue(undefined);
+
     const { container } = renderWithRouter(<AccountModal />);
 
     expect(container).toMatchSnapshot();

src/containers/AccountModal/AccountModal.tsx

@@ -73,6 +73,8 @@ const AccountModal = () => {
         return <PersonalDetails />;
       case 'choose-offer':
         return <ChooseOffer />;
+      case 'upgrade-subscription':
+        return <ChooseOffer />;
       case 'checkout':
         return <Checkout />;
       case 'payment-error':

src/containers/AccountModal/forms/ChooseOffer.tsx

@@ -4,6 +4,10 @@ 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';
@@ -18,6 +22,11 @@ const ChooseOffer = () => {
   const { t } = useTranslation('account');
   const { setOffer } = useCheckoutStore(({ setOffer }) => ({ setOffer }), shallow);
   const { isLoading, offerType, setOfferType, offers, offersDict, defaultOfferId, hasMultipleOfferTypes, hasPremierOffer } = useOffers();
+  const { subscription } = useAccountStore.getState();
+  const [offerSwitches, updateOffer] = useCheckoutStore((state) => [state.offerSwitches, state.updateOffer]);
+  const isOfferSwitch = useQueryParam('u') === 'upgrade-subscription';
+  const availableOffers = isOfferSwitch ? offerSwitches : offers;
+  const offerId = availableOffers[0]?.offerId || '';
 
   const validationSchema: SchemaOf<ChooseOfferFormData> = object().shape({
     offerId: mixed<string>().required(t('choose_offer.field_required')),
@@ -27,14 +36,37 @@ const ChooseOffer = () => {
     offerId: defaultOfferId,
   };
 
+  const determineSwitchDirection = () => {
+    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 chooseOfferSubmitHandler: UseFormOnSubmitHandler<ChooseOfferFormData> = async ({ offerId }, { setSubmitting, setErrors }) => {
     const offer = offerId && offersDict[offerId];
 
     if (!offer) return setErrors({ form: t('choose_offer.offer_not_found') });
 
-    setOffer(offer);
-    setSubmitting(false);
-    navigate(addQueryParam(location, 'u', 'checkout'));
+    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;
+
+      setOffer(selectedOffer);
+      updateOffer(selectedOffer);
+      setSubmitting(false);
+      navigate(addQueryParam(location, 'u', 'checkout'));
+    }
   };
 
   const { handleSubmit, handleChange, setValue, values, errors, submitting } = useForm(initialValues, chooseOfferSubmitHandler, validationSchema);
@@ -45,8 +77,15 @@ const ChooseOffer = () => {
   }, [isLoading, offers, location, navigate]);
 
   useEffect(() => {
-    setValue('offerId', defaultOfferId);
-  }, [setValue, defaultOfferId]);
+    if (!isOfferSwitch) setValue('offerId', defaultOfferId);
+
+    // Update offerId if the user is switching offers to ensure the correct offer is checked in the ChooseOfferForm
+    // Initially, a defaultOfferId is set, but when switching offers, we need to use the id of the target offer
+    if (isOfferSwitch && values.offerId === initialValues.offerId) {
+      setValue('offerId', offerId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setValue, defaultOfferId, availableOffers]);
 
   // loading state
   if (!offers.length || isLoading) {
@@ -64,7 +103,7 @@ const ChooseOffer = () => {
       values={values}
       errors={errors}
       submitting={submitting}
-      offers={offers}
+      offers={availableOffers}
       offerType={offerType}
       setOfferType={hasMultipleOfferTypes && !hasPremierOffer ? setOfferType : undefined}
     />

src/i18n/locales/en_US/user.json

@@ -50,6 +50,7 @@
     "annual_subscription": "Annual subscription",
     "cancel_subscription": "Cancel subscription",
     "card_number": "Card number",
+    "change_subscription": "Change subscription",
     "complete_subscription": "Complete subscription",
     "daily_subscription": "Daily subscription",
     "expiry_date": "Expiry date",

src/i18n/locales/nl_NL/user.json

@@ -46,6 +46,7 @@
     "annual_subscription": "",
     "cancel_subscription": "",
     "card_number": "",
+    "change_subscription": "",
     "complete_subscription": "",
     "daily_subscription": "",
     "expiry_date": "",

src/pages/User/User.test.tsx

@@ -7,6 +7,7 @@ import { useConfigStore } from '#src/stores/ConfigStore';
 import type { Config } from '#types/Config';
 import { useFavoritesStore } from '#src/stores/FavoritesStore';
 import type { Playlist, PlaylistItem } from '#types/playlist';
+import * as checkoutController from '#src/stores/CheckoutController';
 
 const data = {
   loading: false,
@@ -64,6 +65,15 @@ const data = {
 };
 
 describe('User Component tests', () => {
+  beforeEach(() => {
+    const spy = vi.spyOn(checkoutController, 'getSubscriptionSwitches');
+    spy.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
   test('Account Page', () => {
     useAccountStore.setState(data);
 

src/pages/User/User.tsx

@@ -1,8 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import shallow from 'zustand/shallow';
 
+import { useCheckoutStore } from '../../stores/CheckoutStore';
+import { addQueryParam } from '../../utils/location';
+
 import styles from './User.module.scss';
 
 import PlaylistContainer from '#src/containers/PlaylistContainer/PlaylistContainer';
@@ -48,13 +51,19 @@ const User = (): JSX.Element => {
     canRenewSubscription,
     canUpdatePaymentMethod,
   } = useAccountStore();
+  const offerSwitches = useCheckoutStore((state) => state.offerSwitches);
+  const location = useLocation();
 
   const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL(playlistItem));
   const onLogout = useCallback(async () => {
     // Empty customer on a user page leads to navigate (code bellow), so we don't repeat it here
     await logout();
   }, []);
 
+  const handleUpgradeSubscriptionClick = async () => {
+    navigate(addQueryParam(location, 'u', 'upgrade-subscription'));
+  };
+
   useEffect(() => {
     if (!loading && !customer) {
       navigate('/', { replace: true });
@@ -150,6 +159,8 @@ const User = (): JSX.Element => {
                   showAllTransactions={showAllTransactions}
                   canUpdatePaymentMethod={canUpdatePaymentMethod}
                   canRenewSubscription={canRenewSubscription}
+                  onUpgradeSubscriptionClick={handleUpgradeSubscriptionClick}
+                  offerSwitchesAvailable={!!offerSwitches.length}
                 />
               ) : (
                 <Navigate to="my-account" />

src/services/cleeng.checkout.service.ts

@@ -15,8 +15,10 @@ import type {
   GetOffers,
   GetOrder,
   GetPaymentMethods,
+  GetSubscriptionSwitches,
   PaymentWithoutDetails,
   PaymentWithPayPal,
+  SwitchSubscription,
   UpdateOrder,
   UpdatePaymentWithPayPal,
 } from '#types/checkout';
@@ -88,6 +90,19 @@ export const paymentWithPayPal: PaymentWithPayPal = async (payload, sandbox, jwt
   return post(sandbox, '/connectors/paypal/v1/tokens', JSON.stringify(paypalPayload), jwt);
 };
 
+export const getSubscriptionSwitches: GetSubscriptionSwitches = async (payload, sandbox, jwt) => {
+  return get(sandbox, `/customers/${payload.customerId}/subscription_switches/${payload.offerId}/availability`, jwt);
+};
+
+export const switchSubscription: SwitchSubscription = async (payload, sandbox, jwt) => {
+  return post(
+    sandbox,
+    `/customers/${payload.customerId}/subscription_switches/${payload.offerId}`,
+    JSON.stringify({ toOfferId: payload.toOfferId, switchDirection: payload.switchDirection }),
+    jwt,
+  );
+};
+
 export const getEntitlements: GetEntitlements = async (payload, sandbox, jwt = '') => {
   return get(sandbox, `/entitlements/${payload.offerId}`, jwt);
 };