@pelcro/react-pelcro-js 3.26.1 → 3.27.0

package/dist/index.cjs.js

@@ -4048,12 +4048,16 @@ var invoiceDetails_en = {
 var labels$R = {
 	title: "Cancel subscription",
 	cancelReason: "Cancellation reason",
+	endOn: "End on",
+	endImmediately: "End immediately",
+	cancel: "Cancel",
 	subCancellation: {
 		goBack: "Go back"
 	}
 };
 var messages$T = {
 	subscriptionEnd: "This subscription is set to expire on",
+	cancelWhen: "When would you like to cancel?",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Cancel at Period End",
 	subCancellation: {
@@ -4916,12 +4920,16 @@ var invoiceDetails_fr = {
 var labels$A = {
 	title: "Annuler l'abonnement",
 	cancelReason: "Motif d'annulation",
+	endOn: "Fin sur",
+	endImmediately: "Fin immédiate",
+	cancel: "Annuler",
 	subCancellation: {
 		goBack: "Retourner"
 	}
 };
 var messages$B = {
 	subscriptionEnd: "Cet abonnement doit expirer le",
+	cancelWhen: "Quand voulez-vous annuler?",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Annuler l'abonnement maintenant",
 	subCancellation: {
@@ -5890,12 +5898,16 @@ var invoiceDetails_ko = {
 var labels$j = {
 	title: "구독 취소",
 	cancelReason: "취소 사유",
+	endOn: "종료",
+	endImmediately: "즉시 종료",
+	cancel: "취소",
 	subCancellation: {
 		goBack: "돌아가기"
 	}
 };
 var messages$j = {
 	subscriptionEnd: "이 구독은 다음 날짜에 만료되도록 설정되었습니다.",
+	cancelWhen: "언제 취소하시겠습니까?",
 	cancelNow: "지금 구독 취소",
 	cancelLater: "기간 종료 시 취소",
 	subCancellation: {
@@ -6750,12 +6762,16 @@ var invoiceDetails_es = {
 var labels$2 = {
 	title: "Cancelar suscripción",
 	cancelReason: "Razón de la cancelación",
+	endOn: "Fin de",
+	endImmediately: "Fin inmediato",
+	cancel: "Cancelar",
 	subCancellation: {
 		goBack: "Volver"
 	}
 };
 var messages$1 = {
 	subscriptionEnd: "Esta suscripción expirará el",
+	cancelWhen: "¿Cuándo desea cancelar?",
 	cancelNow: "Cancelar Suscripción Ahora",
 	cancelLater: "Cancelar al Final del Periodo",
 	subCancellation: {
@@ -12452,6 +12468,7 @@ const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
 const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
 const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
+const SET_CANCEL_SUBSCRIPTION_OPTION = "SET_CANCEL_SUBSCRIPTION_OPTION";
 const HANDLE_CHECKBOX_CHANGE = "HANDLE_CHECKBOX_CHANGE";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
@@ -20382,7 +20399,8 @@ function SubscriptionRenewModal(_ref) {
 SubscriptionRenewModal.viewId = "subscription-renew";
 
 const initialState$j = {
-  cancelationReason: ""
+  cancelationReason: "",
+  cancelationOption: ""
 };
 const store$j = /*#__PURE__*/React.createContext(initialState$j);
 const {
@@ -20397,7 +20415,6 @@ const SubscriptionCancelContainer = _ref => {
     children,
     ...props
   } = _ref;
-  useTranslation("verifyEmail");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_CANCEL_SUBSCRIPTION_REASON:
@@ -20405,6 +20422,11 @@ const SubscriptionCancelContainer = _ref => {
           ...state,
           cancelationReason: action.payload
         });
+      case SET_CANCEL_SUBSCRIPTION_OPTION:
+        return lib_7({
+          ...state,
+          cancelationOption: action.payload
+        });
       default:
         return state;
     }
@@ -20504,8 +20526,7 @@ const SubscriptionCancelReason = props => {
     t
   } = useTranslation("subscriptionCancel");
   const {
-    dispatch,
-    state
+    dispatch
   } = React.useContext(store$j);
   const handleOnTextAreaBlur = e => {
     dispatch({
@@ -20537,7 +20558,7 @@ function SvgSubscription(props) {
   }))))));
 }
 
-const SubscriptionCancelNowButton = _ref => {
+const SubscriptionCancelButton = _ref => {
   let {
     subscription,
     onClick,
@@ -20548,9 +20569,9 @@ const SubscriptionCancelNowButton = _ref => {
   } = usePelcro();
   const {
     state: {
-      cancelationReason
-    },
-    dispatch
+      cancelationReason,
+      cancelationOption
+    }
   } = React.useContext(store$j);
   const {
     t
@@ -20584,10 +20605,10 @@ const SubscriptionCancelNowButton = _ref => {
       onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
     });
   };
-  const handleCancelNowClick = () => {
+  const handleCancelClick = () => {
     const payload = {
       subscription_id: subscription.id,
-      mode: "now",
+      mode: cancelationOption,
       ...(cancelationReason && {
         reason: cancelationReason
       })
@@ -20601,7 +20622,7 @@ const SubscriptionCancelNowButton = _ref => {
     notify$1.confirm((onSuccess, onFailure) => {
       cancelSubscription(payload, onSuccess, onFailure);
     }, {
-      confirmMessage: t("messages.subCancellation.isSureToCancelNow"),
+      confirmMessage: cancelationOption === "now" ? t("messages.subCancellation.isSureToCancelNow") : t("messages.subCancellation.isSureToCancel"),
       loadingMessage: t("messages.subCancellation.loading"),
       successMessage: t("messages.subCancellation.success"),
       errorMessage: t("messages.subCancellation.error")
@@ -20610,96 +20631,89 @@ const SubscriptionCancelNowButton = _ref => {
     });
   };
   return /*#__PURE__*/React__default['default'].createElement(Button, {
-    onClick: handleCancelNowClick,
-    className: `${className}`
-  }, t("messages.cancelNow"));
+    onClick: handleCancelClick,
+    className: `${className}`,
+    disabled: !cancelationOption
+  }, t("labels.cancel"));
 };
 
-const SubscriptionCancelLaterButton = _ref => {
+// New cancellation option modal
+const SubscriptionCancelOptions = _ref => {
+  var _subscription$schedul;
   let {
     subscription,
+    hasPhases,
     onClick,
     className
   } = _ref;
-  const {
-    switchView
-  } = usePelcro();
   const {
     state: {
-      cancelationReason
+      cancelationOption
     },
     dispatch
   } = React.useContext(store$j);
   const {
     t
   } = useTranslation("subscriptionCancel");
-  const cancelSubscription = (payload, onSuccess, onFailure) => {
-    var _window, _window$Pelcro, _window$Pelcro$uiSett;
-    const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
-    window.Pelcro.subscription.cancel({
-      auth_token: window.Pelcro.user.read().auth_token,
-      subscription_id: payload.subscription_id,
-      mode: payload.mode,
-      ...(payload.reason && {
-        reason: payload.reason
-      })
-    }, (err, res) => {
-      if (err) {
-        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-      }
-      if (enableReactGA4) {
-        ReactGA4.event("Canceled", {
-          nonInteraction: true
-        });
-      } else {
-        var _ReactGA$event;
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
-          category: "ACTIONS",
-          action: "Canceled",
-          nonInteraction: true
-        });
-      }
-      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
-    });
-  };
-  const handleCancelNowClick = () => {
-    const payload = {
-      subscription_id: subscription.id,
-      mode: "period_end",
-      ...(cancelationReason && {
-        reason: cancelationReason
-      })
-    };
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-
-    // Close the modal
-    switchView(null);
-
-    // Show confirmation alert after closing the modal
-    notify$1.confirm((onSuccess, onFailure) => {
-      cancelSubscription(payload, onSuccess, onFailure);
-    }, {
-      confirmMessage: t("messages.subCancellation.isSureToCancel"),
-      loadingMessage: t("messages.subCancellation.loading"),
-      successMessage: t("messages.subCancellation.success"),
-      errorMessage: t("messages.subCancellation.error")
-    }, {
-      closeButtonLabel: t("labels.subCancellation.goBack")
+  const phases = subscription === null || subscription === void 0 ? void 0 : (_subscription$schedul = subscription.schedule) === null || _subscription$schedul === void 0 ? void 0 : _subscription$schedul.phases;
+  const lastPhase = !phases ? [] : phases[(phases === null || phases === void 0 ? void 0 : phases.length) - 1];
+  const handleOptionSelect = event => {
+    dispatch({
+      type: SET_CANCEL_SUBSCRIPTION_OPTION,
+      payload: event.target.value
     });
   };
-  return /*#__PURE__*/React__default['default'].createElement(Button, {
-    onClick: handleCancelNowClick,
-    className: `${className}`
-  }, t("messages.cancelLater"));
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-mb-3"
+  }, t("messages.cancelWhen")), subscription.cancel_at_period_end === 0 && hasPhases && /*#__PURE__*/React__default['default'].createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: cancelationOption === "period_end",
+    value: "period_end"
+  }, t("labels.endOn"), " ", new Date(Number(`${lastPhase === null || lastPhase === void 0 ? void 0 : lastPhase.end_date}000`)).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  })), subscription.cancel_at_period_end === 0 && /*#__PURE__*/React__default['default'].createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: cancelationOption === "current_period_end",
+    value: "current_period_end"
+  }, t("labels.endOn"), " ", new Date(subscription === null || subscription === void 0 ? void 0 : subscription.current_period_end).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  })), /*#__PURE__*/React__default['default'].createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: cancelationOption === "now",
+    value: "now"
+  }, t("labels.endImmediately")));
 };
 
 const SubscriptionCancelView = props => {
+  var _subscriptionToCancel7, _subscriptionToCancel8;
   const {
-    subscriptionToCancel
+    subscriptionToCancel,
+    switchView
   } = usePelcro();
   const {
     t
   } = useTranslation("subscriptionCancel");
+  const getPhases = () => {
+    var _subscriptionToCancel, _subscriptionToCancel2, _subscriptionToCancel3, _subscriptionToCancel4, _subscriptionToCancel5, _subscriptionToCancel6;
+    if (!subscriptionToCancel.schedule) return [];
+    const currentPhaseStartDate = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel = subscriptionToCancel.schedule) === null || _subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel2 = _subscriptionToCancel.current_phase) === null || _subscriptionToCancel2 === void 0 ? void 0 : _subscriptionToCancel2.start_date;
+    const currentPhase = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel3 = subscriptionToCancel.schedule) === null || _subscriptionToCancel3 === void 0 ? void 0 : (_subscriptionToCancel4 = _subscriptionToCancel3.phases) === null || _subscriptionToCancel4 === void 0 ? void 0 : _subscriptionToCancel4.find(phase => {
+      return (phase === null || phase === void 0 ? void 0 : phase.start_date) === currentPhaseStartDate;
+    });
+    const futurePhases = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel5 = subscriptionToCancel.schedule) === null || _subscriptionToCancel5 === void 0 ? void 0 : (_subscriptionToCancel6 = _subscriptionToCancel5.phases) === null || _subscriptionToCancel6 === void 0 ? void 0 : _subscriptionToCancel6.filter(phase => {
+      return (phase === null || phase === void 0 ? void 0 : phase.start_date) > currentPhaseStartDate;
+    });
+    return [currentPhase, ...futurePhases];
+  };
+  const hasPhases = getPhases().length > 0;
+  const phases = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel7 = subscriptionToCancel.schedule) === null || _subscriptionToCancel7 === void 0 ? void 0 : _subscriptionToCancel7.phases;
+  const lastPhase = !phases ? [] : phases[(phases === null || phases === void 0 ? void 0 : phases.length) - 1];
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-subscription-cancel-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -20708,22 +20722,35 @@ const SubscriptionCancelView = props => {
     className: "plc-text-2xl plc-font-semibold"
   }, t("labels.title"), /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-text-gray-400 plc-text-base plc-block"
-  }, "(", subscriptionToCancel.plan.nickname, ")"))), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, "(", subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel8 = subscriptionToCancel.plan) === null || _subscriptionToCancel8 === void 0 ? void 0 : _subscriptionToCancel8.nickname, ")"))), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
   }, /*#__PURE__*/React__default['default'].createElement(SvgSubscription, {
     className: "plc-w-32 plc-h-32"
   }), /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "plc-mb-3 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
-  }, t("messages.subscriptionEnd"), " ", new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
+    className: "plc-mb-3 plc-text-gray-900 plc-text-left plc-mr-auto plc-whitespace-pre-line"
+  }, t("messages.subscriptionEnd"), " ", hasPhases ? new Date(Number(`${lastPhase === null || lastPhase === void 0 ? void 0 : lastPhase.end_date}000`)).toLocaleDateString("en-CA", {
     year: "numeric",
     month: "short",
     day: "numeric"
-  }), "."), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelNowButton, {
-    className: "plc-mb-2",
-    subscription: subscriptionToCancel
-  }), subscriptionToCancel.cancel_at_period_end === 0 && /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelLaterButton, {
+  }) : new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }), "."), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelOptions, {
+    subscription: subscriptionToCancel,
+    hasPhases: hasPhases
+  }), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-space-x-0 plc-space-y-3 md:plc-space-x-3 md:plc-space-y-0 plc-w-full plc-flex plc-flex-col md:plc-flex-row plc-items-center plc-justify-center"
+  }, /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelButton, {
+    className: "plc-w-3/4 md:plc-w-2/5",
     subscription: subscriptionToCancel
-  }))));
+  }), /*#__PURE__*/React__default['default'].createElement(Button, {
+    variant: "outline",
+    className: "plc-w-3/4 md:plc-w-2/5",
+    onClick: () => {
+      switchView("dashboard");
+    }
+  }, t("labels.subCancellation.goBack"))))));
 };
 
 const SubscriptionCancelModal = _ref => {

package/dist/index.esm.js

@@ -4018,12 +4018,16 @@ var invoiceDetails_en = {
 var labels$R = {
 	title: "Cancel subscription",
 	cancelReason: "Cancellation reason",
+	endOn: "End on",
+	endImmediately: "End immediately",
+	cancel: "Cancel",
 	subCancellation: {
 		goBack: "Go back"
 	}
 };
 var messages$T = {
 	subscriptionEnd: "This subscription is set to expire on",
+	cancelWhen: "When would you like to cancel?",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Cancel at Period End",
 	subCancellation: {
@@ -4886,12 +4890,16 @@ var invoiceDetails_fr = {
 var labels$A = {
 	title: "Annuler l'abonnement",
 	cancelReason: "Motif d'annulation",
+	endOn: "Fin sur",
+	endImmediately: "Fin immédiate",
+	cancel: "Annuler",
 	subCancellation: {
 		goBack: "Retourner"
 	}
 };
 var messages$B = {
 	subscriptionEnd: "Cet abonnement doit expirer le",
+	cancelWhen: "Quand voulez-vous annuler?",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Annuler l'abonnement maintenant",
 	subCancellation: {
@@ -5860,12 +5868,16 @@ var invoiceDetails_ko = {
 var labels$j = {
 	title: "구독 취소",
 	cancelReason: "취소 사유",
+	endOn: "종료",
+	endImmediately: "즉시 종료",
+	cancel: "취소",
 	subCancellation: {
 		goBack: "돌아가기"
 	}
 };
 var messages$j = {
 	subscriptionEnd: "이 구독은 다음 날짜에 만료되도록 설정되었습니다.",
+	cancelWhen: "언제 취소하시겠습니까?",
 	cancelNow: "지금 구독 취소",
 	cancelLater: "기간 종료 시 취소",
 	subCancellation: {
@@ -6720,12 +6732,16 @@ var invoiceDetails_es = {
 var labels$2 = {
 	title: "Cancelar suscripción",
 	cancelReason: "Razón de la cancelación",
+	endOn: "Fin de",
+	endImmediately: "Fin inmediato",
+	cancel: "Cancelar",
 	subCancellation: {
 		goBack: "Volver"
 	}
 };
 var messages$1 = {
 	subscriptionEnd: "Esta suscripción expirará el",
+	cancelWhen: "¿Cuándo desea cancelar?",
 	cancelNow: "Cancelar Suscripción Ahora",
 	cancelLater: "Cancelar al Final del Periodo",
 	subCancellation: {
@@ -12422,6 +12438,7 @@ const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
 const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
 const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
+const SET_CANCEL_SUBSCRIPTION_OPTION = "SET_CANCEL_SUBSCRIPTION_OPTION";
 const HANDLE_CHECKBOX_CHANGE = "HANDLE_CHECKBOX_CHANGE";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
@@ -20352,7 +20369,8 @@ function SubscriptionRenewModal(_ref) {
 SubscriptionRenewModal.viewId = "subscription-renew";
 
 const initialState$j = {
-  cancelationReason: ""
+  cancelationReason: "",
+  cancelationOption: ""
 };
 const store$j = /*#__PURE__*/createContext(initialState$j);
 const {
@@ -20367,7 +20385,6 @@ const SubscriptionCancelContainer = _ref => {
     children,
     ...props
   } = _ref;
-  useTranslation("verifyEmail");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_CANCEL_SUBSCRIPTION_REASON:
@@ -20375,6 +20392,11 @@ const SubscriptionCancelContainer = _ref => {
           ...state,
           cancelationReason: action.payload
         });
+      case SET_CANCEL_SUBSCRIPTION_OPTION:
+        return lib_7({
+          ...state,
+          cancelationOption: action.payload
+        });
       default:
         return state;
     }
@@ -20474,8 +20496,7 @@ const SubscriptionCancelReason = props => {
     t
   } = useTranslation("subscriptionCancel");
   const {
-    dispatch,
-    state
+    dispatch
   } = useContext(store$j);
   const handleOnTextAreaBlur = e => {
     dispatch({
@@ -20507,7 +20528,7 @@ function SvgSubscription(props) {
   }))))));
 }
 
-const SubscriptionCancelNowButton = _ref => {
+const SubscriptionCancelButton = _ref => {
   let {
     subscription,
     onClick,
@@ -20518,9 +20539,9 @@ const SubscriptionCancelNowButton = _ref => {
   } = usePelcro();
   const {
     state: {
-      cancelationReason
-    },
-    dispatch
+      cancelationReason,
+      cancelationOption
+    }
   } = useContext(store$j);
   const {
     t
@@ -20554,10 +20575,10 @@ const SubscriptionCancelNowButton = _ref => {
       onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
     });
   };
-  const handleCancelNowClick = () => {
+  const handleCancelClick = () => {
     const payload = {
       subscription_id: subscription.id,
-      mode: "now",
+      mode: cancelationOption,
       ...(cancelationReason && {
         reason: cancelationReason
       })
@@ -20571,7 +20592,7 @@ const SubscriptionCancelNowButton = _ref => {
     notify$1.confirm((onSuccess, onFailure) => {
       cancelSubscription(payload, onSuccess, onFailure);
     }, {
-      confirmMessage: t("messages.subCancellation.isSureToCancelNow"),
+      confirmMessage: cancelationOption === "now" ? t("messages.subCancellation.isSureToCancelNow") : t("messages.subCancellation.isSureToCancel"),
       loadingMessage: t("messages.subCancellation.loading"),
       successMessage: t("messages.subCancellation.success"),
       errorMessage: t("messages.subCancellation.error")
@@ -20580,96 +20601,89 @@ const SubscriptionCancelNowButton = _ref => {
     });
   };
   return /*#__PURE__*/React__default.createElement(Button, {
-    onClick: handleCancelNowClick,
-    className: `${className}`
-  }, t("messages.cancelNow"));
+    onClick: handleCancelClick,
+    className: `${className}`,
+    disabled: !cancelationOption
+  }, t("labels.cancel"));
 };
 
-const SubscriptionCancelLaterButton = _ref => {
+// New cancellation option modal
+const SubscriptionCancelOptions = _ref => {
+  var _subscription$schedul;
   let {
     subscription,
+    hasPhases,
     onClick,
     className
   } = _ref;
-  const {
-    switchView
-  } = usePelcro();
   const {
     state: {
-      cancelationReason
+      cancelationOption
     },
     dispatch
   } = useContext(store$j);
   const {
     t
   } = useTranslation("subscriptionCancel");
-  const cancelSubscription = (payload, onSuccess, onFailure) => {
-    var _window, _window$Pelcro, _window$Pelcro$uiSett;
-    const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
-    window.Pelcro.subscription.cancel({
-      auth_token: window.Pelcro.user.read().auth_token,
-      subscription_id: payload.subscription_id,
-      mode: payload.mode,
-      ...(payload.reason && {
-        reason: payload.reason
-      })
-    }, (err, res) => {
-      if (err) {
-        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-      }
-      if (enableReactGA4) {
-        ReactGA4.event("Canceled", {
-          nonInteraction: true
-        });
-      } else {
-        var _ReactGA$event;
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
-          category: "ACTIONS",
-          action: "Canceled",
-          nonInteraction: true
-        });
-      }
-      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
-    });
-  };
-  const handleCancelNowClick = () => {
-    const payload = {
-      subscription_id: subscription.id,
-      mode: "period_end",
-      ...(cancelationReason && {
-        reason: cancelationReason
-      })
-    };
-    onClick === null || onClick === void 0 ? void 0 : onClick();
-
-    // Close the modal
-    switchView(null);
-
-    // Show confirmation alert after closing the modal
-    notify$1.confirm((onSuccess, onFailure) => {
-      cancelSubscription(payload, onSuccess, onFailure);
-    }, {
-      confirmMessage: t("messages.subCancellation.isSureToCancel"),
-      loadingMessage: t("messages.subCancellation.loading"),
-      successMessage: t("messages.subCancellation.success"),
-      errorMessage: t("messages.subCancellation.error")
-    }, {
-      closeButtonLabel: t("labels.subCancellation.goBack")
+  const phases = subscription === null || subscription === void 0 ? void 0 : (_subscription$schedul = subscription.schedule) === null || _subscription$schedul === void 0 ? void 0 : _subscription$schedul.phases;
+  const lastPhase = !phases ? [] : phases[(phases === null || phases === void 0 ? void 0 : phases.length) - 1];
+  const handleOptionSelect = event => {
+    dispatch({
+      type: SET_CANCEL_SUBSCRIPTION_OPTION,
+      payload: event.target.value
     });
   };
-  return /*#__PURE__*/React__default.createElement(Button, {
-    onClick: handleCancelNowClick,
-    className: `${className}`
-  }, t("messages.cancelLater"));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-mb-3"
+  }, t("messages.cancelWhen")), subscription.cancel_at_period_end === 0 && hasPhases && /*#__PURE__*/React__default.createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: cancelationOption === "period_end",
+    value: "period_end"
+  }, t("labels.endOn"), " ", new Date(Number(`${lastPhase === null || lastPhase === void 0 ? void 0 : lastPhase.end_date}000`)).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  })), subscription.cancel_at_period_end === 0 && /*#__PURE__*/React__default.createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: cancelationOption === "current_period_end",
+    value: "current_period_end"
+  }, t("labels.endOn"), " ", new Date(subscription === null || subscription === void 0 ? void 0 : subscription.current_period_end).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  })), /*#__PURE__*/React__default.createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: cancelationOption === "now",
+    value: "now"
+  }, t("labels.endImmediately")));
 };
 
 const SubscriptionCancelView = props => {
+  var _subscriptionToCancel7, _subscriptionToCancel8;
   const {
-    subscriptionToCancel
+    subscriptionToCancel,
+    switchView
   } = usePelcro();
   const {
     t
   } = useTranslation("subscriptionCancel");
+  const getPhases = () => {
+    var _subscriptionToCancel, _subscriptionToCancel2, _subscriptionToCancel3, _subscriptionToCancel4, _subscriptionToCancel5, _subscriptionToCancel6;
+    if (!subscriptionToCancel.schedule) return [];
+    const currentPhaseStartDate = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel = subscriptionToCancel.schedule) === null || _subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel2 = _subscriptionToCancel.current_phase) === null || _subscriptionToCancel2 === void 0 ? void 0 : _subscriptionToCancel2.start_date;
+    const currentPhase = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel3 = subscriptionToCancel.schedule) === null || _subscriptionToCancel3 === void 0 ? void 0 : (_subscriptionToCancel4 = _subscriptionToCancel3.phases) === null || _subscriptionToCancel4 === void 0 ? void 0 : _subscriptionToCancel4.find(phase => {
+      return (phase === null || phase === void 0 ? void 0 : phase.start_date) === currentPhaseStartDate;
+    });
+    const futurePhases = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel5 = subscriptionToCancel.schedule) === null || _subscriptionToCancel5 === void 0 ? void 0 : (_subscriptionToCancel6 = _subscriptionToCancel5.phases) === null || _subscriptionToCancel6 === void 0 ? void 0 : _subscriptionToCancel6.filter(phase => {
+      return (phase === null || phase === void 0 ? void 0 : phase.start_date) > currentPhaseStartDate;
+    });
+    return [currentPhase, ...futurePhases];
+  };
+  const hasPhases = getPhases().length > 0;
+  const phases = subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel7 = subscriptionToCancel.schedule) === null || _subscriptionToCancel7 === void 0 ? void 0 : _subscriptionToCancel7.phases;
+  const lastPhase = !phases ? [] : phases[(phases === null || phases === void 0 ? void 0 : phases.length) - 1];
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-subscription-cancel-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -20678,22 +20692,35 @@ const SubscriptionCancelView = props => {
     className: "plc-text-2xl plc-font-semibold"
   }, t("labels.title"), /*#__PURE__*/React__default.createElement("span", {
     className: "plc-text-gray-400 plc-text-base plc-block"
-  }, "(", subscriptionToCancel.plan.nickname, ")"))), /*#__PURE__*/React__default.createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default.createElement("div", {
+  }, "(", subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : (_subscriptionToCancel8 = subscriptionToCancel.plan) === null || _subscriptionToCancel8 === void 0 ? void 0 : _subscriptionToCancel8.nickname, ")"))), /*#__PURE__*/React__default.createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
   }, /*#__PURE__*/React__default.createElement(SvgSubscription, {
     className: "plc-w-32 plc-h-32"
   }), /*#__PURE__*/React__default.createElement("p", {
-    className: "plc-mb-3 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
-  }, t("messages.subscriptionEnd"), " ", new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
+    className: "plc-mb-3 plc-text-gray-900 plc-text-left plc-mr-auto plc-whitespace-pre-line"
+  }, t("messages.subscriptionEnd"), " ", hasPhases ? new Date(Number(`${lastPhase === null || lastPhase === void 0 ? void 0 : lastPhase.end_date}000`)).toLocaleDateString("en-CA", {
     year: "numeric",
     month: "short",
     day: "numeric"
-  }), "."), /*#__PURE__*/React__default.createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default.createElement(SubscriptionCancelNowButton, {
-    className: "plc-mb-2",
-    subscription: subscriptionToCancel
-  }), subscriptionToCancel.cancel_at_period_end === 0 && /*#__PURE__*/React__default.createElement(SubscriptionCancelLaterButton, {
+  }) : new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }), "."), /*#__PURE__*/React__default.createElement(SubscriptionCancelOptions, {
+    subscription: subscriptionToCancel,
+    hasPhases: hasPhases
+  }), /*#__PURE__*/React__default.createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-space-x-0 plc-space-y-3 md:plc-space-x-3 md:plc-space-y-0 plc-w-full plc-flex plc-flex-col md:plc-flex-row plc-items-center plc-justify-center"
+  }, /*#__PURE__*/React__default.createElement(SubscriptionCancelButton, {
+    className: "plc-w-3/4 md:plc-w-2/5",
     subscription: subscriptionToCancel
-  }))));
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    variant: "outline",
+    className: "plc-w-3/4 md:plc-w-2/5",
+    onClick: () => {
+      switchView("dashboard");
+    }
+  }, t("labels.subCancellation.goBack"))))));
 };
 
 const SubscriptionCancelModal = _ref => {

package/dist/pelcro.css

@@ -1724,6 +1724,12 @@ in order to scope selectors under pelcro-root
 
 /* utilities */
 
+.pelcro-root .plc-space-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .pelcro-root .plc-space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1736,6 +1742,12 @@ in order to scope selectors under pelcro-root
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.pelcro-root .plc-space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .pelcro-root .plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@@ -2320,6 +2332,10 @@ in order to scope selectors under pelcro-root
   margin-top: auto;
 }
 
+.pelcro-root .plc-mr-auto {
+  margin-right: auto;
+}
+
 .pelcro-root .plc-ml-auto {
   margin-left: auto;
 }
@@ -3218,6 +3234,25 @@ in order to scope selectors under pelcro-root
 }
 
 @media (min-width: 768px) {
+  .pelcro-root .md\:plc-space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .pelcro-root .md\:plc-space-x-3 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .pelcro-root .md\:plc-flex-row {
+    flex-direction: row;
+  }
+
+  .pelcro-root .md\:plc-w-2\/5 {
+    width: 40%;
+  }
 }
 
 @media (min-width: 1024px) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.26.1",
+  "version": "3.27.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",