feat: temporary FE handling for downgrade subscription

jwplayer · Jun 27, 2023 · 53ee10d · 53ee10d
1 parent 7722e79
commit 53ee10d
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 16 deletions.
diff --git a/public/locales/en/user.json b/public/locales/en/user.json
@@ -75,6 +75,7 @@
     "complete_subscription": "Complete subscription",
     "current_plan": "CURRENT PLAN",
     "daily_subscription": "Daily subscription",
+    "downgrade_on": "Pending downgrade on {{date}}",
     "downgrade_plan_success": "You've successfully changed the subscription plan. Your new plan will start after the end of the current cycle ({{date}}).",
     "expiry_date": "Expiry date",
     "granted_subscription": "Granted subscription",
@@ -88,6 +89,7 @@
     "no_transactions": "No transactions",
     "other": "other",
     "payment_method": "Payment method",
+    "pending_downgrade": "Pending downgrade",
     "pending_offer_switch": "Will update to a \"{{title}}\" after the next billing date",
     "price_payed_with": "{{price}} payed with {{method}}",
     "price_payed_with_card": "Price payed with card",

diff --git a/public/locales/es/user.json b/public/locales/es/user.json
@@ -75,6 +75,7 @@
     "complete_subscription": "Completar suscripción",
     "current_plan": "",
     "daily_subscription": "Suscripción diaria",
+    "downgrade_on": "",
     "downgrade_plan_success": "",
     "expiry_date": "Fecha de vencimiento",
     "granted_subscription": "Suscripción otorgada",
@@ -89,6 +90,7 @@
     "no_transactions": "No hay transacciones",
     "other": "otro",
     "payment_method": "Método de pago",
+    "pending_downgrade": "",
     "pending_offer_switch": "Se actualizará a \"{{title}}\" después de la próxima fecha de facturación",
     "price_payed_with": "{{price}} pagado con {{method}}",
     "price_payed_with_card": "Precio pagado con tarjeta",

diff --git a/src/components/OfferSwitch/OfferSwitch.tsx b/src/components/OfferSwitch/OfferSwitch.tsx
@@ -10,30 +10,39 @@ import { useAccountStore } from '#src/stores/AccountStore';
 
 interface OfferSwitchProps {
   isCurrentOffer: boolean;
+  pendingDowngradeOfferId: string;
   offer: Offer;
   selected: {
     value: boolean;
     set: React.Dispatch<React.SetStateAction<string | null>>;
   };
 }
 
-const OfferSwitch = ({ isCurrentOffer, offer, selected }: OfferSwitchProps) => {
+const OfferSwitch = ({ isCurrentOffer, pendingDowngradeOfferId, offer, selected }: 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 name={offer.offerId} checked={selected.value} onChange={() => selected.set(offer.offerId)} />
+      <Checkbox disabled={isPendingDowngrade} name={offer.offerId} checked={selected.value} onChange={() => selected.set(offer.offerId)} />
       <div className={styles.offerSwitchInfoContainer}>
-        {isCurrentOffer && (
-          <div className={classNames(styles.currentPlanHeading, { [styles.activeCurrentPlanHeading]: selected.value })}>{t('payment.current_plan')}</div>
+        {(isCurrentOffer || isPendingDowngrade) && (
+          <div className={classNames(styles.currentPlanHeading, { [styles.activeCurrentPlanHeading]: selected.value })}>
+            {isCurrentOffer && t('payment.current_plan').toUpperCase()}
+            {isPendingDowngrade && t('payment.pending_downgrade').toUpperCase()}
+          </div>
         )}
         <div className={styles.offerSwitchPlanContainer}>
           <div>{t(`payment.${period === 'month' ? 'monthly' : 'annual'}_subscription`)}</div>
-          {isCurrentOffer && expiresAt && (
+          {(isCurrentOffer || isPendingDowngrade) && expiresAt && (
             <div className={styles.nextBillingDate}>
-              {t('payment.next_billing_date_on', { date: formatLocalizedDate(new Date(expiresAt * 1000), i18n.language) })}
+              {isCurrentOffer &&
+                !pendingDowngradeOfferId &&
+                t('payment.next_billing_date_on', { date: formatLocalizedDate(new Date(expiresAt * 1000), i18n.language) })}
+              {isPendingDowngrade && t('payment.downgrade_on', { date: formatLocalizedDate(new Date(expiresAt * 1000), i18n.language) })}
             </div>
           )}
         </div>

diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
@@ -23,6 +23,8 @@ import useOffers from '#src/hooks/useOffers';
 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';
 
 const VISIBLE_TRANSACTIONS = 4;
 
@@ -81,8 +83,6 @@ const Payment = ({
   const [selectedOfferId, setSelectedOfferId] = useState<string | null>(activeSubscription?.accessFeeId ?? null);
   const [isUpgradeOffer, setIsUpgradeOffer] = useState<boolean | undefined>(undefined);
 
-  // TODO: debug why offer upgrade works but downgrade doesn't
-
   useEffect(() => {
     if (!isChangingOffer) {
       setSelectedOfferId(activeSubscription?.accessFeeId ?? null);
@@ -98,7 +98,28 @@ const Payment = ({
     }
   }, [selectedOfferId, offers, activeSubscription]);
 
-  const changeSubscriptionPlan = useMutation(changeSubscription);
+  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 pendingDowngradeOfferId = (customer.metadata?.[`${activeSubscription?.subscriptionId}_pending_downgrade`] as string) || '';
 
   const onChangePlanClick = async () => {
     if (selectedOfferId && activeSubscription?.subscriptionId) {
@@ -173,11 +194,15 @@ const Payment = ({
                 <div className={styles.infoBox} key={activeSubscription.subscriptionId}>
                   <p>
                     <strong>{getTitle(activeSubscription.period)}</strong> <br />
-                    {activeSubscription.status === 'active' && !isGrantedSubscription
+                    {activeSubscription.status === 'active' && !isGrantedSubscription && !pendingDowngradeOfferId
                       ? t('user:payment.next_billing_date_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) })
                       : t('user:payment.subscription_expires_on', { date: formatLocalizedDate(new Date(activeSubscription.expiresAt * 1000), i18n.language) })}
-                    {pendingOffer && (
-                      <span className={styles.pendingSwitch}>{t('user:payment.pending_offer_switch', { title: getTitle(pendingOffer.period) })}</span>
+                    {(pendingOffer || pendingDowngradeOfferId) && (
+                      <span className={styles.pendingSwitch}>
+                        {t('user:payment.pending_offer_switch', {
+                          title: getTitle(pendingOffer?.period || offers.find((offer) => offer.offerId === pendingDowngradeOfferId)?.period || 'month'),
+                        })}
+                      </span>
                     )}
                   </p>
                   {!isGrantedSubscription && (
@@ -224,6 +249,7 @@ const Payment = ({
                   <OfferSwitch
                     key={offer.offerId}
                     isCurrentOffer={offer.offerId === activeSubscription?.accessFeeId}
+                    pendingDowngradeOfferId={pendingDowngradeOfferId}
                     offer={offer}
                     selected={{ value: selectedOfferId === offer.offerId, set: setSelectedOfferId }}
                   />

diff --git a/src/pages/User/__snapshots__/User.test.tsx.snap b/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -636,6 +636,7 @@ exports[`User Component tests > Payments Page 1`] = `
              
             <br />
             user:payment.next_billing_date_on
+            
           </p>
           <p
             class="_price_c57ff5"

diff --git a/src/services/inplayer.account.service.ts b/src/services/inplayer.account.service.ts
@@ -423,12 +423,14 @@ function formatUpdateAccount(customer: UpdateCustomerArgs) {
   const firstName = customer.firstName?.trim() || '';
   const lastName = customer.lastName?.trim() || '';
   const fullName = `${firstName} ${lastName}`.trim() || (customer.email as string);
+  const metadata: { [key: string]: string } = {
+    first_name: firstName,
+    surname: lastName,
+    ...customer.metadata,
+  };
   const data: UpdateAccountData = {
     fullName,
-    metadata: {
-      first_name: firstName,
-      surname: lastName,
-    },
+    metadata,
   };
 
   return data;

diff --git a/types/account.d.ts b/types/account.d.ts
@@ -312,6 +312,7 @@ export type UpdatePersonalShelvesArgs = {
 export type FirstLastNameInput = {
   firstName: string;
   lastName: string;
+  metadata?: Record<string, string>;
 };
 
 export type EmailConfirmPasswordInput = {