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}
+ )}
-