feat(sdk): show cycle end date if plan change is not immediate (#630)

* feat: show current cycle end date in cycle switch * feat: show current plan end date in plan switch
raystack · May 27, 2024 · 6d938c1 · 6d938c1
1 parent 075bc74
commit 6d938c1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/billing/cycle-switch/index.tsx b/sdks/js/packages/core/react/components/organization/billing/cycle-switch/index.tsx
@@ -14,7 +14,8 @@ import dayjs from 'dayjs';
 import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
 
 export function ConfirmCycleSwitch() {
-  const { activePlan, client, paymentMethod, config } = useFrontier();
+  const { activePlan, client, paymentMethod, config, activeSubscription } =
+    useFrontier();
   const navigate = useNavigate({ from: '/billing/cycle-switch/$planId' });
   const { planId } = useParams({ from: '/billing/cycle-switch/$planId' });
   const dateFormat = config?.dateFormat || DEFAULT_DATE_FORMAT;
@@ -115,6 +116,12 @@ export function ConfirmCycleSwitch() {
     }
   }
 
+  const cycleSwitchDate = activeSubscription?.current_period_end_at
+    ? dayjs(activeSubscription?.current_period_end_at).format(
+        config?.dateFormat || DEFAULT_DATE_FORMAT
+      )
+    : 'the next billing cycle';
+
   return (
     <Dialog open={true}>
       {/* @ts-ignore */}
@@ -128,6 +135,7 @@ export function ConfirmCycleSwitch() {
           </Text>
 
           <Image
+            data-test-id="frontier-sdk-billing-cycle-switch-close-button"
             alt="cross"
             style={{ cursor: 'pointer' }}
             // @ts-ignore
@@ -163,22 +171,28 @@ export function ConfirmCycleSwitch() {
                 {nextPlanIntervalName} (
                 {isUpgrade
                   ? 'effective immediately'
-                  : 'effective from the next billing cycle'}
+                  : `effective from ${cycleSwitchDate}`}
                 )
               </Text>
             </Flex>
           )}
         </Flex>
         <Separator />
         <Flex justify={'end'} gap="medium" style={{ padding: 'var(--pd-16)' }}>
-          <Button variant={'secondary'} onClick={closeModal} size={'medium'}>
+          <Button
+            variant={'secondary'}
+            onClick={closeModal}
+            size={'medium'}
+            data-test-id="frontier-sdk-billing-cycle-switch-cancel-button"
+          >
             Cancel
           </Button>
           <Button
             variant={'primary'}
             size={'medium'}
             disabled={isLoading || isCycleSwitching || isPlanActionLoading}
             onClick={onConfirm}
+            data-test-id="frontier-sdk-billing-cycle-switch-submit-button"
           >
             {isCycleSwitching ? 'Switching...' : 'Switch cycle'}
           </Button>

diff --git a/sdks/js/packages/core/react/components/organization/plans/confirm-change/index.tsx b/sdks/js/packages/core/react/components/organization/plans/confirm-change/index.tsx
@@ -25,7 +25,8 @@ export default function ConfirmPlanChange() {
     isActivePlanLoading,
     config,
     client,
-    fetchActiveSubsciption
+    fetchActiveSubsciption,
+    activeSubscription
   } = useFrontier();
   const [newPlan, setNewPlan] = useState<V1Beta1Plan>();
   const [isNewPlanLoading, setIsNewPlanLoading] = useState(false);
@@ -135,6 +136,13 @@ export default function ConfirmPlanChange() {
   const upcomingPlanName = getPlanNameWithInterval(newPlan, {
     hyphenSeperated: true
   });
+
+  const cycleSwitchDate = activeSubscription?.current_period_end_at
+    ? dayjs(activeSubscription?.current_period_end_at).format(
+        config?.dateFormat || DEFAULT_DATE_FORMAT
+      )
+    : 'the next billing cycle';
+
   return (
     <Dialog open={true}>
       {/* @ts-ignore */}
@@ -188,7 +196,7 @@ export default function ConfirmPlanChange() {
                 {upcomingPlanName} (
                 {planAction?.immediate
                   ? 'effective immediately'
-                  : 'effective from the next billing cycle'}
+                  : `effective from ${cycleSwitchDate}`}
                 )
               </Text>
             </Flex>