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 index 1cb2239b8..e46c15488 100644 --- 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" /> @@ -179,17 +195,21 @@ export default function ConfirmPlanChange() { )} {isLoading ? ( - ) : planAction?.btnLabel === 'Upgrade' ? ( + ) : ( - 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)} - ) : null} + )} -