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 4580319fd..b1821b036 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
@@ -36,6 +36,7 @@ export default function ConfirmPlanChange() {
     changePlan,
     isLoading: isChangePlanLoading,
     verifyPlanChange,
+    verifySubscriptionCancel,
     cancelSubscription,
     checkBasePlan
   } = usePlans();
@@ -67,17 +68,10 @@ export default function ConfirmPlanChange() {
 
   const isUpgrade = planAction.btnLabel === 'Upgrade';
 
-  // const expiryDate = useMemo(() => {
-  //   if (activePlan?.created_at && activePlan?.interval) {
-  //     return dayjs(activePlan?.created_at)
-  //       .add(1, activePlan?.interval as ManipulateType)
-  //       .format(config.dateFormat || DEFAULT_DATE_FORMAT);
-  //   }
-  //   return '';
-  // }, [activePlan?.created_at, activePlan?.interval, config.dateFormat]);
-
   const verifyChange = useCallback(async () => {
-    const planPhase = await verifyPlanChange({ planId });
+    const planPhase = isNewPlanBasePlan
+      ? await verifySubscriptionCancel({})
+      : await verifyPlanChange({ planId });
     const actionName = planAction?.btnLabel.toLowerCase();
     if (planPhase) {
       const changeDate = dayjs(planPhase?.effective_at).format(
@@ -93,7 +87,9 @@ export default function ConfirmPlanChange() {
     config?.dateFormat,
     planAction?.btnLabel,
     planId,
-    verifyPlanChange
+    verifyPlanChange,
+    verifySubscriptionCancel,
+    isNewPlanBasePlan
   ]);
 
   const onConfirm = useCallback(async () => {
diff --git a/sdks/js/packages/core/react/components/organization/plans/hooks/usePlans.tsx b/sdks/js/packages/core/react/components/organization/plans/hooks/usePlans.tsx
index ede660166..879c3e88c 100644
--- a/sdks/js/packages/core/react/components/organization/plans/hooks/usePlans.tsx
+++ b/sdks/js/packages/core/react/components/organization/plans/hooks/usePlans.tsx
@@ -28,6 +28,10 @@ interface verifyPlanChangeOptions {
   onSuccess?: (planPhase: SubscriptionPhase) => void;
 }
 
+interface verifyCancelSubscriptionOptions {
+  onSuccess?: (planPhase: SubscriptionPhase) => void;
+}
+
 export const usePlans = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [hasAlreadyTrialed, setHasAlreadyTrialed] = useState(false);
@@ -160,9 +164,23 @@ export const usePlans = () => {
       const activeSub = await fetchActiveSubsciption();
       if (activeSub) {
         const planPhase = activeSub.phases?.find(
-          phase =>
-            phase?.plan_id === planId ||
-            (planId === NIL_UUID && phase?.plan_id === '')
+          phase => phase?.plan_id === planId && phase.reason === 'change'
+        );
+        if (planPhase) {
+          onSuccess(planPhase);
+          return planPhase;
+        }
+      }
+    },
+    [fetchActiveSubsciption]
+  );
+
+  const verifySubscriptionCancel = useCallback(
+    async ({ onSuccess = () => {} }: verifyCancelSubscriptionOptions) => {
+      const activeSub = await fetchActiveSubsciption();
+      if (activeSub) {
+        const planPhase = activeSub.phases?.find(
+          phase => phase?.plan_id === '' && phase.reason === 'cancel'
         );
         if (planPhase) {
           onSuccess(planPhase);
@@ -265,6 +283,7 @@ export const usePlans = () => {
     isLoading,
     changePlan,
     verifyPlanChange,
+    verifySubscriptionCancel,
     isTrialCheckLoading: isAllPlansLoading,
     hasAlreadyTrialed,
     isCurrentlyTrialing,