feat(sdk): custom plan change message support (#625)

* feat: add custom message support in plan change modal * chore: add data-test-id for plan change confirm modal
raystack · May 20, 2024 · 9818d93 · 9818d93
1 parent 3ec85c5
commit 9818d93
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
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
@@ -3,15 +3,19 @@ import styles from '../../organization.module.css';
 import { useNavigate, useParams } from '@tanstack/react-router';
 import cross from '~/react/assets/cross.svg';
 import { useFrontier } from '~/react/contexts/FrontierContext';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import dayjs, { ManipulateType } from 'dayjs';
-import { DEFAULT_DATE_FORMAT } from '~/react/utils/constants';
+import { useCallback, useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import {
+  DEFAULT_DATE_FORMAT,
+  DEFAULT_PLAN_UPGRADE_MESSAGE
+} from '~/react/utils/constants';
 import { V1Beta1Plan } from '~/src';
 import Skeleton from 'react-loading-skeleton';
 import { getPlanChangeAction, getPlanNameWithInterval } from '~/react/utils';
 import planStyles from '../plans.module.css';
 import { usePlans } from '../hooks/usePlans';
 import { toast } from 'sonner';
+import * as _ from 'lodash';
 
 export default function ConfirmPlanChange() {
   const navigate = useNavigate({ from: '/plans/confirm-change/$planId' });
@@ -46,6 +50,17 @@ export default function ConfirmPlanChange() {
     fetchActiveSubsciption();
   }, [fetchActiveSubsciption]);
 
+  const planChangeSlug =
+    activePlan?.name && newPlan?.name
+      ? `${activePlan?.name}:${newPlan?.name}`
+      : '';
+
+  const planChangeMessage = planChangeSlug
+    ? _.get(config, ['messages', 'billing', 'plan_change', planChangeSlug])
+    : '';
+
+  const isUpgrade = planAction.btnLabel === 'Upgrade';
+
   // const expiryDate = useMemo(() => {
   //   if (activePlan?.created_at && activePlan?.interval) {
   //     return dayjs(activePlan?.created_at)
@@ -142,6 +157,7 @@ export default function ConfirmPlanChange() {
             // @ts-ignore
             src={cross}
             onClick={cancel}
+            data-test-id="frontier-sdk-confirm-plan-change-close-button"
           />
         </Flex>
         <Separator />
@@ -179,24 +195,29 @@ export default function ConfirmPlanChange() {
           )}
           {isLoading ? (
             <Skeleton count={2} />
-          ) : planAction?.btnLabel === 'Upgrade' ? (
+          ) : (
             <Text size={2} style={{ color: 'var(--foreground-muted)' }}>
-              Any remaining balance from your current plan will be prorated and
-              credited to your account in future billing cycles.
+              {planChangeMessage || (isUpgrade && DEFAULT_PLAN_UPGRADE_MESSAGE)}
             </Text>
-          ) : null}
+          )}
         </Flex>
 
         <Separator />
         <Flex justify={'end'} gap="medium" style={{ padding: 'var(--pd-16)' }}>
-          <Button variant={'secondary'} onClick={cancel} size={'medium'}>
+          <Button
+            variant={'secondary'}
+            onClick={cancel}
+            size={'medium'}
+            data-test-id="frontier-sdk-confirm-plan-change-cancel-button"
+          >
             Cancel
           </Button>
           <Button
             variant={'primary'}
             size={'medium'}
             onClick={onConfirm}
             disabled={isLoading || isChangePlanLoading}
+            data-test-id="frontier-sdk-confirm-plan-change-submit-button"
           >
             {isChangePlanLoading
               ? `${planAction?.btnLoadingLabel}...`

diff --git a/sdks/js/packages/core/react/utils/constants.ts b/sdks/js/packages/core/react/utils/constants.ts
@@ -1,6 +1,8 @@
 export const DEFAULT_DATE_FORMAT = 'DD MMM YYYY';
 export const DEFAULT_DATE_SHORT_FORMAT = 'DD MMM';
 export const DEFAULT_TOKEN_PRODUCT_NAME = 'token';
+export const DEFAULT_PLAN_UPGRADE_MESSAGE =
+  'Any remaining balance from your current plan will be prorated and credited to your account in future billing cycles.';
 
 export const SUBSCRIPTION_STATES = {
   ACTIVE: 'active',

diff --git a/sdks/js/packages/core/shared/types.ts b/sdks/js/packages/core/shared/types.ts
@@ -20,6 +20,11 @@ export interface FrontierClientOptions {
   dateFormat?: string;
   shortDateFormat?: string;
   billing?: FrontierClientBillingOptions;
+  messages?: {
+    billing?: {
+      plan_change?: Record<string, string>;
+    };
+  };
 }
 
 export interface InitialState {