@pelcro/react-pelcro-js 3.26.0-beta.2 → 3.26.0-beta.4

package/dist/index.cjs.js

@@ -4103,12 +4103,16 @@ var invoiceDetails_en = {
 var labels$U = {
 	title: "Cancel subscription",
 	cancelReason: "Cancellation reason",
+	endOn: "End on",
+	endImmediately: "End immediately",
+	cancel: "Cancel",
 	subCancellation: {
 		goBack: "Go back"
 	}
 };
 var messages$W = {
 	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: {
@@ -5025,12 +5029,16 @@ var invoiceDetails_fr = {
 var labels$C = {
 	title: "Annuler l'abonnement",
 	cancelReason: "Motif d'annulation",
+	endOn: "Fin sur",
+	endImmediately: "Fin immédiate",
+	cancel: "Annuler",
 	subCancellation: {
 		goBack: "Retourner"
 	}
 };
 var messages$D = {
 	subscriptionEnd: "Cet abonnement doit expirer le",
+	cancelWhen: "Quand voulez-vous annuler?",
 	cancelNow: "Cancel Subscription Now",
 	cancelLater: "Annuler l'abonnement maintenant",
 	subCancellation: {
@@ -6054,12 +6062,16 @@ var invoiceDetails_ko = {
 var labels$k = {
 	title: "구독 취소",
 	cancelReason: "취소 사유",
+	endOn: "종료",
+	endImmediately: "즉시 종료",
+	cancel: "취소",
 	subCancellation: {
 		goBack: "돌아가기"
 	}
 };
 var messages$k = {
 	subscriptionEnd: "이 구독은 다음 날짜에 만료되도록 설정되었습니다.",
+	cancelWhen: "언제 취소하시겠습니까?",
 	cancelNow: "지금 구독 취소",
 	cancelLater: "기간 종료 시 취소",
 	subCancellation: {
@@ -6968,12 +6980,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: {
@@ -8950,8 +8966,6 @@ exports["default"] = _default;
 var ReactGA4 = unwrapExports(dist);
 dist.ReactGAImplementation;
 
-var _window$f, _window$Pelcro$f, _window$Pelcro$uiSett$f;
-const enableReactGA4$f = (_window$f = window) === null || _window$f === void 0 ? void 0 : (_window$Pelcro$f = _window$f.Pelcro) === null || _window$Pelcro$f === void 0 ? void 0 : (_window$Pelcro$uiSett$f = _window$Pelcro$f.uiSettings) === null || _window$Pelcro$uiSett$f === void 0 ? void 0 : _window$Pelcro$uiSett$f.enableReactGA4;
 class PelcroActions {
   constructor(storeSetter, storeGetter) {
     var _this = this;
@@ -9131,18 +9145,20 @@ class PelcroActions {
       });
     });
     _defineProperty$3(this, "logout", function () {
+      var _window, _window$Pelcro, _window$Pelcro$uiSett;
       let displayLogin = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       const {
         switchView,
         resetView,
         isAuthenticated
       } = _this.get();
+      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;
       // if user is not authenticated function execution is terminated
       if (!isAuthenticated()) {
         return console.warn("You are already logged out.");
       }
       window.Pelcro.user.logout();
-      if (enableReactGA4$f) {
+      if (enableReactGA4) {
         ReactGA4.event("Logged out", {
           nonInteraction: true
         });
@@ -9378,9 +9394,6 @@ if (process.env.NODE_ENV === "development") {
   c$1("Pelcro Store", usePelcro);
 }
 
-var _window$e, _window$Pelcro$e, _window$Pelcro$uiSett$e;
-const enableReactGA4$e = (_window$e = window) === null || _window$e === void 0 ? void 0 : (_window$Pelcro$e = _window$e.Pelcro) === null || _window$Pelcro$e === void 0 ? void 0 : (_window$Pelcro$uiSett$e = _window$Pelcro$e.uiSettings) === null || _window$Pelcro$uiSett$e === void 0 ? void 0 : _window$Pelcro$uiSett$e.enableReactGA4;
-
 /**
  * List of zero-decimal currencies.
  * @see https://stripe.com/docs/currencies#zero-decimal
@@ -9466,8 +9479,8 @@ const getLanguageWithoutRegion = localeName => {
  * @return {string | undefined}
  */
 const getPageOrDefaultLanguage = () => {
-  var _window$Pelcro$helper, _window$Pelcro2, _window$Pelcro2$site, _window$Pelcro2$site$, _window$Pelcro2$site$2;
-  return (_window$Pelcro$helper = window.Pelcro.helpers.getHtmlLanguageAttribute()) !== null && _window$Pelcro$helper !== void 0 ? _window$Pelcro$helper : getLanguageWithoutRegion((_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$site = _window$Pelcro2.site) === null || _window$Pelcro2$site === void 0 ? void 0 : (_window$Pelcro2$site$ = _window$Pelcro2$site.read) === null || _window$Pelcro2$site$ === void 0 ? void 0 : (_window$Pelcro2$site$2 = _window$Pelcro2$site$.call(_window$Pelcro2$site)) === null || _window$Pelcro2$site$2 === void 0 ? void 0 : _window$Pelcro2$site$2.default_locale);
+  var _window$Pelcro$helper, _window$Pelcro, _window$Pelcro$site, _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  return (_window$Pelcro$helper = window.Pelcro.helpers.getHtmlLanguageAttribute()) !== null && _window$Pelcro$helper !== void 0 ? _window$Pelcro$helper : getLanguageWithoutRegion((_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read) === null || _window$Pelcro$site$r === void 0 ? void 0 : (_window$Pelcro$site$r2 = _window$Pelcro$site$r.call(_window$Pelcro$site)) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.default_locale);
 };
 
 /**
@@ -9520,9 +9533,9 @@ const isValidViewFromURL = viewID => {
    *
    */
   function hasValidNewsletterUpdateUrl() {
-    var _window$Pelcro3, _window$Pelcro3$uiSet;
+    var _window$Pelcro2, _window$Pelcro2$uiSet;
     if (viewID !== "newsletter-update") return false;
-    const newsletters = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.newsletters;
+    const newsletters = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.newsletters;
     const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     if (!siteHasNewslettersDefined) {
       return false;
@@ -9568,7 +9581,7 @@ const disableScroll = () => {
   }
 };
 const trackSubscriptionOnGA = () => {
-  var _window$Pelcro$user$r5, _window$Pelcro$user$r6;
+  var _window, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
   const {
     product,
     plan,
@@ -9583,11 +9596,12 @@ const trackSubscriptionOnGA = () => {
     invoices
   } = window.Pelcro.user.read();
   const lastSubscriptionId = invoices === null || invoices === void 0 ? void 0 : invoices[invoices.length - 1].subscription_id;
+  const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro3 = _window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.enableReactGA4;
   if (!lastSubscriptionId) {
     return;
   }
   const currencyCode = (_window$Pelcro$user$r5 = (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.currency) !== null && _window$Pelcro$user$r5 !== void 0 ? _window$Pelcro$user$r5 : plan.currency;
-  if (enableReactGA4$e) {
+  if (enableReactGA4) {
     ReactGA4.event("purchase", {
       transaction_id: lastSubscriptionId,
       affiliation: "Pelcro",
@@ -9715,8 +9729,8 @@ function getDateWithoutTime(dateObject) {
   return date;
 }
 function userMustVerifyEmail() {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
-  const isEmailVerificationEnabled = (_window$Pelcro$site$r = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.email_verify_enabled) !== null && _window$Pelcro$site$r !== void 0 ? _window$Pelcro$site$r : false;
+  var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
+  const isEmailVerificationEnabled = (_window$Pelcro$site$r3 = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.email_verify_enabled) !== null && _window$Pelcro$site$r3 !== void 0 ? _window$Pelcro$site$r3 : false;
   const isUserEmailVerified = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.email_confirm) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : false;
   return window.Pelcro.user.isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified;
 }
@@ -10085,10 +10099,8 @@ function _classPrivateFieldGet(receiver, privateMap) {
   return descriptor.value;
 }
 
-var _window$d, _window$Pelcro$d, _window$Pelcro$uiSett$d;
 function _classPrivateFieldInitSpec$2(obj, privateMap, value) { _checkPrivateRedeclaration$2(obj, privateMap); privateMap.set(obj, value); }
 function _checkPrivateRedeclaration$2(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-const enableReactGA4$d = (_window$d = window) === null || _window$d === void 0 ? void 0 : (_window$Pelcro$d = _window$d.Pelcro) === null || _window$Pelcro$d === void 0 ? void 0 : (_window$Pelcro$uiSett$d = _window$Pelcro$d.uiSettings) === null || _window$Pelcro$uiSett$d === void 0 ? void 0 : _window$Pelcro$uiSett$d.enableReactGA4;
 var _isAlreadySaved = /*#__PURE__*/new WeakMap();
 var _markButtonAsLoading = /*#__PURE__*/new WeakMap();
 var _removeLoadingState = /*#__PURE__*/new WeakMap();
@@ -10172,7 +10184,7 @@ class SaveToMetadataButtonClass {
     _classPrivateFieldInitSpec$2(this, _saveToMetadata, {
       writable: true,
       value: event => {
-        var _user$metadata;
+        var _window, _window$Pelcro, _window$Pelcro$uiSett, _user$metadata;
         const button = event.currentTarget;
         const user = window.Pelcro.user.read();
         const {
@@ -10182,6 +10194,7 @@ class SaveToMetadataButtonClass {
           key,
           ...buttonMetadata
         } = button.dataset;
+        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;
         if (userMustVerifyEmail()) {
           return switchView("email-verify");
         }
@@ -10210,7 +10223,7 @@ class SaveToMetadataButtonClass {
               return _classPrivateFieldGet(this, _removeLoadingState).call(this, button);
             }
             _classPrivateFieldGet(this, _markButtonAsSaved).call(this, button);
-            if (enableReactGA4$d) {
+            if (enableReactGA4) {
               ReactGA4.event("Save/Follow", {
                 event_label: buttonMetadata === null || buttonMetadata === void 0 ? void 0 : buttonMetadata.title
               });
@@ -10229,6 +10242,7 @@ class SaveToMetadataButtonClass {
     _classPrivateFieldInitSpec$2(this, _removeMetaData, {
       writable: true,
       value: event => {
+        var _window2, _window2$Pelcro, _window2$Pelcro$uiSet;
         const button = event.currentTarget;
         const user = window.Pelcro.user.read();
         const {
@@ -10236,6 +10250,7 @@ class SaveToMetadataButtonClass {
           title
         } = button.dataset;
         const oldValue = user.metadata[`metadata_saved_${key}`];
+        const enableReactGA4 = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$uiSet = _window2$Pelcro.uiSettings) === null || _window2$Pelcro$uiSet === void 0 ? void 0 : _window2$Pelcro$uiSet.enableReactGA4;
         const newMetadataValue = oldValue.filter(metadata => !((metadata === null || metadata === void 0 ? void 0 : metadata.title) === title));
         if (window.Pelcro.user.isAuthenticated()) {
           _classPrivateFieldGet(this, _markButtonAsLoading).call(this, button);
@@ -10248,7 +10263,7 @@ class SaveToMetadataButtonClass {
               return _classPrivateFieldGet(this, _removeLoadingState).call(this, button);
             }
             _classPrivateFieldGet(this, _unmarkSavedButton).call(this, button);
-            if (enableReactGA4$d) {
+            if (enableReactGA4) {
               ReactGA4.event("Unsave/Unfollow", {
                 event_label: title
               });
@@ -11782,9 +11797,6 @@ function getSiteCardProcessor() {
   return "stripe";
 }
 
-var _window$c, _window$Pelcro$c, _window$Pelcro$uiSett$c;
-const enableReactGA4$c = (_window$c = window) === null || _window$c === void 0 ? void 0 : (_window$Pelcro$c = _window$c.Pelcro) === null || _window$Pelcro$c === void 0 ? void 0 : (_window$Pelcro$uiSett$c = _window$Pelcro$c.uiSettings) === null || _window$Pelcro$uiSett$c === void 0 ? void 0 : _window$Pelcro$uiSett$c.enableReactGA4;
-
 /**
  * @typedef {Object} OptionsType
  * @property {boolean} loadPaymentSDKs
@@ -11907,8 +11919,10 @@ const initSecuritySdk = () => {
   });
 };
 const initGATracking = () => {
+  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;
   if (window.Pelcro.site.read().google_analytics_id) {
-    if (enableReactGA4$c) {
+    if (enableReactGA4) {
       // Initialize ReactGA4 with your tracking ID
       ReactGA4.initialize(window.Pelcro.site.read().google_analytics_id);
       // Enable e-commerce tracking
@@ -11928,9 +11942,10 @@ const initGATracking = () => {
   }
 };
 const dispatchModalDisplayEvents = modalName => {
-  var _modalName$replace, _modalName$replace2;
+  var _window2, _window2$Pelcro, _window2$Pelcro$uiSet, _modalName$replace, _modalName$replace2;
+  const enableReactGA4 = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$uiSet = _window2$Pelcro.uiSettings) === null || _window2$Pelcro$uiSet === void 0 ? void 0 : _window2$Pelcro$uiSet.enableReactGA4;
   const formattedAction = modalName === null || modalName === void 0 ? void 0 : (_modalName$replace = modalName.replace("pelcro-", "")) === null || _modalName$replace === void 0 ? void 0 : _modalName$replace.replaceAll("-", " ");
-  if (enableReactGA4$c) {
+  if (enableReactGA4) {
     ReactGA4.event(`${formattedAction} viewed`, {
       nonInteraction: true
     });
@@ -12804,6 +12819,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";
@@ -12816,8 +12832,6 @@ const UPDATE_MEMBERS = "UPDATE_MEMBERS";
 const UPDATE_REMOVE_MEMBER_ID = "UPDATE_REMOVE_MEMBER_ID";
 const UPDATE_CYBERSOURCE_SESSION_ID = "UPDATE_CYBERSOURCE_SESSION_ID";
 
-var _window$b, _window$Pelcro$b, _window$Pelcro$uiSett$b;
-const enableReactGA4$b = (_window$b = window) === null || _window$b === void 0 ? void 0 : (_window$Pelcro$b = _window$b.Pelcro) === null || _window$Pelcro$b === void 0 ? void 0 : (_window$Pelcro$uiSett$b = _window$Pelcro$b.uiSettings) === null || _window$Pelcro$uiSett$b === void 0 ? void 0 : _window$Pelcro$uiSett$b.enableReactGA4;
 const initialState$m = {
   email: "",
   username: "",
@@ -12836,6 +12850,7 @@ const {
   Provider: Provider$m
 } = store$m;
 const LoginContainer = _ref => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     style,
     className = "",
@@ -12843,6 +12858,7 @@ const LoginContainer = _ref => {
     onFailure = () => {},
     children
   } = _ref;
+  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;
   const handleLogin = (_ref2, dispatch) => {
     let {
       email,
@@ -12873,7 +12889,7 @@ const LoginContainer = _ref => {
         onFailure(err);
       } else {
         onSuccess(res);
-        if (enableReactGA4$b) {
+        if (enableReactGA4) {
           ReactGA4.event("Logged in", {
             nonInteraction: true
           });
@@ -13270,12 +13286,12 @@ function ConfirmPassword(_ref) {
   }, otherProps));
 }
 
-var _window$a, _window$Pelcro$a, _window$Pelcro$uiSett$a;
-const enableReactGA4$a = (_window$a = window) === null || _window$a === void 0 ? void 0 : (_window$Pelcro$a = _window$a.Pelcro) === null || _window$Pelcro$a === void 0 ? void 0 : (_window$Pelcro$uiSett$a = _window$Pelcro$a.uiSettings) === null || _window$Pelcro$uiSett$a === void 0 ? void 0 : _window$Pelcro$uiSett$a.enableReactGA4;
 const Logout = props => {
   const handleLogout = () => {
+    var _window, _window$Pelcro, _window$Pelcro$uiSett;
     window.Pelcro.user.logout();
-    if (enableReactGA4$a) {
+    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;
+    if (enableReactGA4) {
       ReactGA4.event("Logged out", {
         nonInteraction: true
       });
@@ -14844,13 +14860,11 @@ const RegisterCompany = props => {
   }, props));
 };
 
-var _window$9, _window$Pelcro$9, _window$Pelcro$uiSett$9;
-const enableReactGA4$9 = (_window$9 = window) === null || _window$9 === void 0 ? void 0 : (_window$Pelcro$9 = _window$9.Pelcro) === null || _window$Pelcro$9 === void 0 ? void 0 : (_window$Pelcro$uiSett$9 = _window$Pelcro$9.uiSettings) === null || _window$Pelcro$uiSett$9 === void 0 ? void 0 : _window$Pelcro$uiSett$9.enableReactGA4;
-
 /**
  *
  */
 function RegisterModal(props) {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   const {
     t
   } = useTranslation("register");
@@ -14865,6 +14879,7 @@ function RegisterModal(props) {
     giftCode,
     isGift
   } = usePelcro();
+  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;
   const onSuccess = res => {
     var _props$onSuccess;
     (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
@@ -14872,7 +14887,7 @@ function RegisterModal(props) {
   };
   const handleAfterRegistrationLogic = () => {
     var _window$Pelcro$site$r, _window$Pelcro$site$r2;
-    if (enableReactGA4$9) {
+    if (enableReactGA4) {
       ReactGA4.event("Registered", {
         nonInteraction: true
       });
@@ -14970,9 +14985,6 @@ function Radio(_ref) {
   }, children));
 }
 
-var _window$8, _window$Pelcro$8, _window$Pelcro$uiSett$8;
-const enableReactGA4$8 = (_window$8 = window) === null || _window$8 === void 0 ? void 0 : (_window$Pelcro$8 = _window$8.Pelcro) === null || _window$Pelcro$8 === void 0 ? void 0 : (_window$Pelcro$uiSett$8 = _window$Pelcro$8.uiSettings) === null || _window$Pelcro$uiSett$8 === void 0 ? void 0 : _window$Pelcro$uiSett$8.enableReactGA4;
-
 /**
  *
  */
@@ -15032,6 +15044,7 @@ function productMatchPageLanguage(product) {
 SelectModalWithHook.viewId = "plan-select";
 class SelectModal extends React.Component {
   constructor(props) {
+    var _window, _window$Pelcro11, _window$Pelcro11$uiSe;
     super(props);
     _defineProperty$3(this, "componentDidMount", () => {
       if (this.props.product) {
@@ -15066,11 +15079,11 @@ class SelectModal extends React.Component {
       }
       document.addEventListener("keydown", this.handleSubmit);
       if (!document.querySelector("#pelcro-selection-view") || !document.querySelector(".pelcro-select-product-wrapper")) {
-        var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro3, _window$Pelcro3$user, _window$Pelcro4, _window$Pelcro4$user, _window$Pelcro5, _window$Pelcro5$site;
-        const userCurrency = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.read().currency;
-        const userCountry = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.location.countryCode;
-        const userLanguage = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$user = _window$Pelcro4.user) === null || _window$Pelcro4$user === void 0 ? void 0 : _window$Pelcro4$user.read().language;
-        const productsMatchingUserCurrency = (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read().products.filter(product => {
+        var _window$Pelcro, _window$Pelcro$user, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro3, _window$Pelcro3$user, _window$Pelcro4, _window$Pelcro4$site;
+        const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
+        const userCountry = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.location.countryCode;
+        const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
+        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
           const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
           if (filteredPlans.length) return filteredPlans;
         });
@@ -15083,12 +15096,12 @@ class SelectModal extends React.Component {
         });
         notifyBugsnag(() => {
           Bugsnag.notify("SelectModal - No data viewed", event => {
-            var _window$Pelcro6, _window$Pelcro6$site, _window$Pelcro7, _window$Pelcro7$user, _window$Pelcro8, _window$Pelcro8$uiSet, _window$Pelcro9, _this$props, _window$Pelcro10, _window$Pelcro10$help, _window$Pelcro11, _window$Pelcro11$site;
+            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
             event.addMetadata("MetaData", {
-              site: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$site = _window$Pelcro6.site) === null || _window$Pelcro6$site === void 0 ? void 0 : _window$Pelcro6$site.read(),
-              user: (_window$Pelcro7 = window.Pelcro) === null || _window$Pelcro7 === void 0 ? void 0 : (_window$Pelcro7$user = _window$Pelcro7.user) === null || _window$Pelcro7$user === void 0 ? void 0 : _window$Pelcro7$user.read(),
-              uiVersion: (_window$Pelcro8 = window.Pelcro) === null || _window$Pelcro8 === void 0 ? void 0 : (_window$Pelcro8$uiSet = _window$Pelcro8.uiSettings) === null || _window$Pelcro8$uiSet === void 0 ? void 0 : _window$Pelcro8$uiSet.uiVersion,
-              environment: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : _window$Pelcro9.environment,
+              site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
+              user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
+              uiVersion: (_window$Pelcro7 = window.Pelcro) === null || _window$Pelcro7 === void 0 ? void 0 : (_window$Pelcro7$uiSet = _window$Pelcro7.uiSettings) === null || _window$Pelcro7$uiSet === void 0 ? void 0 : _window$Pelcro7$uiSet.uiVersion,
+              environment: (_window$Pelcro8 = window.Pelcro) === null || _window$Pelcro8 === void 0 ? void 0 : _window$Pelcro8.environment,
               matchingEntitlementsProps: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.matchingEntitlements,
               productListState: this.state.productList,
               methods: {
@@ -15099,8 +15112,8 @@ class SelectModal extends React.Component {
               userCurrency: userCurrency,
               userCountry: userCountry,
               userLanguage: userLanguage,
-              siteLanguage: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$help = _window$Pelcro10.helpers) === null || _window$Pelcro10$help === void 0 ? void 0 : _window$Pelcro10$help.getHtmlLanguageAttribute(),
-              products: (_window$Pelcro11 = window.Pelcro) === null || _window$Pelcro11 === void 0 ? void 0 : (_window$Pelcro11$site = _window$Pelcro11.site) === null || _window$Pelcro11$site === void 0 ? void 0 : _window$Pelcro11$site.read().products.length,
+              siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
+              products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
               currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
               country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
               language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
@@ -15312,6 +15325,7 @@ class SelectModal extends React.Component {
     this.product = this.props.product || window.Pelcro.paywall.getProduct();
     this.locale = this.props.t;
     this.closeButton = window.Pelcro.paywall.displayCloseButton();
+    this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro11 = _window.Pelcro) === null || _window$Pelcro11 === void 0 ? void 0 : (_window$Pelcro11$uiSe = _window$Pelcro11.uiSettings) === null || _window$Pelcro11$uiSe === void 0 ? void 0 : _window$Pelcro11$uiSe.enableReactGA4;
   }
   render() {
     var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
@@ -15319,7 +15333,7 @@ class SelectModal extends React.Component {
       disableGifting
     } = this.props;
     if (this.state.mode === "product") {
-      if (enableReactGA4$8) {
+      if (this.enableReactGA4) {
         ReactGA4.event("Product Modal Viewed", {
           nonInteraction: true
         });
@@ -15332,7 +15346,7 @@ class SelectModal extends React.Component {
         });
       }
     } else if (this.state.mode === "plan") {
-      if (enableReactGA4$8) {
+      if (this.enableReactGA4) {
         ReactGA4.event("Plan Modal Viewed", {
           nonInteraction: true
         });
@@ -21274,13 +21288,11 @@ const SubscriptionRenewView = _ref => {
   }));
 };
 
-var _window$7, _window$Pelcro$7, _window$Pelcro$uiSett$7;
-const enableReactGA4$7 = (_window$7 = window) === null || _window$7 === void 0 ? void 0 : (_window$Pelcro$7 = _window$7.Pelcro) === null || _window$Pelcro$7 === void 0 ? void 0 : (_window$Pelcro$uiSett$7 = _window$Pelcro$7.uiSettings) === null || _window$Pelcro$uiSett$7 === void 0 ? void 0 : _window$Pelcro$uiSett$7.enableReactGA4;
-
 /**
  *
  */
 function SubscriptionRenewModal(_ref) {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     onDisplay,
     onClose,
@@ -21289,10 +21301,11 @@ function SubscriptionRenewModal(_ref) {
   const {
     switchView
   } = usePelcro();
+  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;
   const onSuccess = res => {
     var _otherProps$onSuccess;
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, res);
-    if (enableReactGA4$7) {
+    if (enableReactGA4) {
       ReactGA4.event("Renewed", {
         nonInteraction: true
       });
@@ -21309,7 +21322,7 @@ function SubscriptionRenewModal(_ref) {
   const onGiftRenewalSuccess = () => {
     var _otherProps$onGiftRen;
     (_otherProps$onGiftRen = otherProps.onGiftRenewalSuccess) === null || _otherProps$onGiftRen === void 0 ? void 0 : _otherProps$onGiftRen.call(otherProps);
-    if (enableReactGA4$7) {
+    if (enableReactGA4) {
       ReactGA4.event("Renewed Gift", {
         nonInteraction: true
       });
@@ -21335,7 +21348,8 @@ function SubscriptionRenewModal(_ref) {
 SubscriptionRenewModal.viewId = "subscription-renew";
 
 const initialState$j = {
-  cancelationReason: ""
+  cancelationReason: "",
+  cancelationOption: ""
 };
 const store$j = /*#__PURE__*/React.createContext(initialState$j);
 const {
@@ -21350,7 +21364,6 @@ const SubscriptionCancelContainer = _ref => {
     children,
     ...props
   } = _ref;
-  useTranslation("verifyEmail");
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
     switch (action.type) {
       case SET_CANCEL_SUBSCRIPTION_REASON:
@@ -21358,6 +21371,11 @@ const SubscriptionCancelContainer = _ref => {
           ...state,
           cancelationReason: action.payload
         });
+      case SET_CANCEL_SUBSCRIPTION_OPTION:
+        return lib_7({
+          ...state,
+          cancelationOption: action.payload
+        });
       default:
         return state;
     }
@@ -21457,8 +21475,7 @@ const SubscriptionCancelReason = props => {
     t
   } = useTranslation("subscriptionCancel");
   const {
-    dispatch,
-    state
+    dispatch
   } = React.useContext(store$j);
   const handleOnTextAreaBlur = e => {
     dispatch({
@@ -21490,9 +21507,7 @@ function SvgSubscription(props) {
   }))))));
 }
 
-var _window$6, _window$Pelcro$6, _window$Pelcro$uiSett$6;
-const enableReactGA4$6 = (_window$6 = window) === null || _window$6 === void 0 ? void 0 : (_window$Pelcro$6 = _window$6.Pelcro) === null || _window$Pelcro$6 === void 0 ? void 0 : (_window$Pelcro$uiSett$6 = _window$Pelcro$6.uiSettings) === null || _window$Pelcro$uiSett$6 === void 0 ? void 0 : _window$Pelcro$uiSett$6.enableReactGA4;
-const SubscriptionCancelNowButton = _ref => {
+const SubscriptionCancelButton = _ref => {
   let {
     subscription,
     onClick,
@@ -21503,14 +21518,16 @@ const SubscriptionCancelNowButton = _ref => {
   } = usePelcro();
   const {
     state: {
-      cancelationReason
-    },
-    dispatch
+      cancelationReason,
+      cancelationOption
+    }
   } = 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,
@@ -21522,7 +21539,7 @@ const SubscriptionCancelNowButton = _ref => {
       if (err) {
         return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
       }
-      if (enableReactGA4$6) {
+      if (enableReactGA4) {
         ReactGA4.event("Canceled", {
           nonInteraction: true
         });
@@ -21537,10 +21554,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
       })
@@ -21554,7 +21571,7 @@ const SubscriptionCancelNowButton = _ref => {
     notify.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")
@@ -21563,96 +21580,88 @@ 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"));
 };
 
-var _window$5, _window$Pelcro$5, _window$Pelcro$uiSett$5;
-const enableReactGA4$5 = (_window$5 = window) === null || _window$5 === void 0 ? void 0 : (_window$Pelcro$5 = _window$5.Pelcro) === null || _window$Pelcro$5 === void 0 ? void 0 : (_window$Pelcro$uiSett$5 = _window$Pelcro$5.uiSettings) === null || _window$Pelcro$uiSett$5 === void 0 ? void 0 : _window$Pelcro$uiSett$5.enableReactGA4;
-const SubscriptionCancelLaterButton = _ref => {
+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) => {
-    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$5) {
-        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.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")), 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"
+  })), /*#__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", {
@@ -21661,22 +21670,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 => {
@@ -21816,9 +21838,8 @@ const SubscriptionSuspendDate = props => {
   }, props));
 };
 
-var _window$4, _window$Pelcro$4, _window$Pelcro$uiSett$4;
-const enableReactGA4$4 = (_window$4 = window) === null || _window$4 === void 0 ? void 0 : (_window$Pelcro$4 = _window$4.Pelcro) === null || _window$Pelcro$4 === void 0 ? void 0 : (_window$Pelcro$uiSett$4 = _window$Pelcro$4.uiSettings) === null || _window$Pelcro$uiSett$4 === void 0 ? void 0 : _window$Pelcro$uiSett$4.enableReactGA4;
 const SubscriptionSuspendButton = _ref => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     subscription,
     onClick,
@@ -21837,6 +21858,7 @@ const SubscriptionSuspendButton = _ref => {
   const {
     t
   } = useTranslation("subscriptionSuspend");
+  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;
   const suspendSubscription = (payload, onSuccess, onFailure) => {
     window.Pelcro.subscription.update({
       auth_token: window.Pelcro.user.read().auth_token,
@@ -21847,7 +21869,7 @@ const SubscriptionSuspendButton = _ref => {
       if (err) {
         return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
       }
-      if (enableReactGA4$4) {
+      if (enableReactGA4) {
         ReactGA4.event("Suspended", {
           nonInteraction: true
         });
@@ -24571,8 +24593,6 @@ const AddressCreateLine2 = props => {
   }, props));
 };
 
-var _window$3, _window$Pelcro$3, _window$Pelcro$uiSett$3;
-const enableReactGA4$3 = (_window$3 = window) === null || _window$3 === void 0 ? void 0 : (_window$Pelcro$3 = _window$3.Pelcro) === null || _window$Pelcro$3 === void 0 ? void 0 : (_window$Pelcro$uiSett$3 = _window$Pelcro$3.uiSettings) === null || _window$Pelcro$uiSett$3 === void 0 ? void 0 : _window$Pelcro$uiSett$3.enableReactGA4;
 const initialState$d = {
   isSubmitting: false,
   firstName: "",
@@ -24604,7 +24624,7 @@ const {
   Provider: Provider$d
 } = store$d;
 const AddressUpdateContainer = _ref => {
-  var _props$addressId;
+  var _props$addressId, _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     style,
     className = "",
@@ -24618,6 +24638,7 @@ const AddressUpdateContainer = _ref => {
     addressIdToEdit
   } = usePelcro();
   const addressId = (_props$addressId = props === null || props === void 0 ? void 0 : props.addressId) !== null && _props$addressId !== void 0 ? _props$addressId : addressIdToEdit;
+  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;
   const [t] = useTranslation("address");
   React.useEffect(() => {
     const getCountries = () => {
@@ -24716,7 +24737,7 @@ const AddressUpdateContainer = _ref => {
           }
         });
         onSuccess(res);
-        if (enableReactGA4$3) {
+        if (enableReactGA4) {
           ReactGA4.event("Updated address", {
             nonInteraction: true
           });
@@ -25251,13 +25272,13 @@ function PaymentMethodUpdateView(props) {
   }));
 }
 
-var _window$2, _window$Pelcro$2, _window$Pelcro$uiSett$2;
-const enableReactGA4$2 = (_window$2 = window) === null || _window$2 === void 0 ? void 0 : (_window$Pelcro$2 = _window$2.Pelcro) === null || _window$Pelcro$2 === void 0 ? void 0 : (_window$Pelcro$uiSett$2 = _window$Pelcro$2.uiSettings) === null || _window$Pelcro$uiSett$2 === void 0 ? void 0 : _window$Pelcro$uiSett$2.enableReactGA4;
 const PaymentMethodUpdateModal = props => {
+  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;
   const onSuccess = res => {
     var _props$onSuccess;
     (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
-    if (enableReactGA4$2) {
+    if (enableReactGA4) {
       ReactGA4.event("Updated payment card", {
         nonInteraction: true
       });
@@ -29145,8 +29166,6 @@ const OrderItems = _ref => {
   });
 };
 
-var _window$1, _window$Pelcro$1, _window$Pelcro$uiSett$1;
-const enableReactGA4$1 = (_window$1 = window) === null || _window$1 === void 0 ? void 0 : (_window$Pelcro$1 = _window$1.Pelcro) === null || _window$Pelcro$1 === void 0 ? void 0 : (_window$Pelcro$uiSett$1 = _window$Pelcro$1.uiSettings) === null || _window$Pelcro$uiSett$1 === void 0 ? void 0 : _window$Pelcro$uiSett$1.enableReactGA4;
 const SavedItemsMenu = () => {
   const {
     t
@@ -29195,8 +29214,10 @@ const SavedItems = _ref3 => {
     isAuthenticated
   } = usePelcro();
   const removeItemFromMetadata = (category, title) => {
+    var _window, _window$Pelcro, _window$Pelcro$uiSett;
     const user = window.Pelcro.user.read();
     const oldValue = user.metadata[`metadata_saved_${category}`];
+    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;
     const newMetadataValue = oldValue.filter(metadata => !((metadata === null || metadata === void 0 ? void 0 : metadata.title) === title));
     if (isAuthenticated()) {
       setLoading(true);
@@ -29211,7 +29232,7 @@ const SavedItems = _ref3 => {
           return;
         }
         setItems(response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.metadata);
-        if (enableReactGA4$1) {
+        if (enableReactGA4) {
           ReactGA4.event("Unsave/Unfollow", {
             event_label: title
           });
@@ -30175,8 +30196,6 @@ function getMemberShipStatus(status) {
   };
 }
 
-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;
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -30231,7 +30250,7 @@ function DashboardWithHook(props) {
 DashboardWithHook.viewId = "dashboard";
 class Dashboard extends React.Component {
   constructor(props) {
-    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window, _window$Pelcro, _window$Pelcro$uiSett;
     super(props);
     _defineProperty$3(this, "componentDidMount", () => {
       this.setState({
@@ -30240,7 +30259,7 @@ class Dashboard extends React.Component {
       window.Pelcro.insight.track("Modal Displayed", {
         name: "dashboard"
       });
-      if (enableReactGA4) {
+      if (this.enableReactGA4) {
         ReactGA4.event("Dashboard Modal Viewed", {
           nonInteraction: true
         });
@@ -30282,7 +30301,7 @@ class Dashboard extends React.Component {
         if (err) {
           return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
         }
-        if (enableReactGA4) {
+        if (this.enableReactGA4) {
           ReactGA4.event("Canceled", {
             nonInteraction: true
           });
@@ -30306,7 +30325,7 @@ class Dashboard extends React.Component {
         if (err) {
           return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
         }
-        if (enableReactGA4) {
+        if (this.enableReactGA4) {
           ReactGA4.event("UnSuspended", {
             nonInteraction: true
           });
@@ -30602,6 +30621,7 @@ class Dashboard extends React.Component {
     this.locale = this.props.t;
     this.user = window.Pelcro.user.read();
     this.menuRef = /*#__PURE__*/React__default['default'].createRef();
+    this.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;
   }
   render() {
     var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;