@pelcro/react-pelcro-js 3.26.0 → 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: {
@@ -8193,7 +8209,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 OutboundLink$1.origTrackLink = OutboundLink$1.trackLink;
 OutboundLink$1.trackLink = outboundLink;
 var OutboundLink = OutboundLink$1;
-var ReactGA1 = _objectSpread({}, Defaults, {
+var ReactGA = _objectSpread({}, Defaults, {
   OutboundLink: OutboundLink
 });
 
@@ -8732,8 +8748,6 @@ exports["default"] = _default;
 var ReactGA4 = unwrapExports(dist);
 dist.ReactGAImplementation;
 
-var _window$d, _window$Pelcro$d, _window$Pelcro$uiSett$d;
-const ReactGA$d = (_window$d = window) !== null && _window$d !== void 0 && (_window$Pelcro$d = _window$d.Pelcro) !== null && _window$Pelcro$d !== void 0 && (_window$Pelcro$uiSett$d = _window$Pelcro$d.uiSettings) !== null && _window$Pelcro$uiSett$d !== void 0 && _window$Pelcro$uiSett$d.enableReactGA4 ? ReactGA4 : ReactGA1;
 class PelcroActions {
   constructor(storeSetter, storeGetter) {
     var _this = this;
@@ -8913,23 +8927,31 @@ class PelcroActions {
       });
     });
     _defineProperty$3(this, "logout", function () {
-      var _ReactGA$event;
+      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();
-      ReactGA$d === null || ReactGA$d === void 0 ? void 0 : (_ReactGA$event = ReactGA$d.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$d, {
-        category: "ACTIONS",
-        action: "Logged out",
-        nonInteraction: true
-      });
+      if (enableReactGA4) {
+        ReactGA4.event("Logged out", {
+          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: "Logged out",
+          nonInteraction: true
+        });
+      }
       resetView();
       if (displayLogin) {
         switchView("login");
@@ -8942,7 +8964,7 @@ class PelcroActions {
         return false;
       }
 
-      //Dispatch PelcroElementsCartItemAdded when an item added successfully to the
+      // Dispatch PelcroElementsCartItemAdded when an item added successfully to the
       document.dispatchEvent(cartItemAdded(itemToAdd));
       const {
         cartItems
@@ -9151,9 +9173,6 @@ if (process.env.NODE_ENV === "development") {
   c$1("Pelcro Store", usePelcro);
 }
 
-var _window$c, _window$Pelcro$c, _window$Pelcro$uiSett$c;
-const ReactGA$c = (_window$c = window) !== null && _window$c !== void 0 && (_window$Pelcro$c = _window$c.Pelcro) !== null && _window$Pelcro$c !== void 0 && (_window$Pelcro$uiSett$c = _window$Pelcro$c.uiSettings) !== null && _window$Pelcro$uiSett$c !== void 0 && _window$Pelcro$uiSett$c.enableReactGA4 ? ReactGA4 : ReactGA1;
-
 /**
  * List of zero-decimal currencies.
  * @see https://stripe.com/docs/currencies#zero-decimal
@@ -9239,8 +9258,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);
 };
 
 /**
@@ -9293,9 +9312,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;
@@ -9341,7 +9360,7 @@ const disableScroll = () => {
   }
 };
 const trackSubscriptionOnGA = () => {
-  var _window$Pelcro$user$r5, _window$Pelcro$user$r6, _ReactGA$set, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
+  var _window, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
   const {
     product,
     plan,
@@ -9356,33 +9375,56 @@ 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;
-  ReactGA$c === null || ReactGA$c === void 0 ? void 0 : (_ReactGA$set = ReactGA$c.set) === null || _ReactGA$set === void 0 ? void 0 : _ReactGA$set.call(ReactGA$c, {
-    currencyCode: currencyCode
-  });
-  ReactGA$c === null || ReactGA$c === void 0 ? void 0 : (_ReactGA$plugin = ReactGA$c.plugin) === null || _ReactGA$plugin === void 0 ? void 0 : (_ReactGA$plugin$execu = _ReactGA$plugin.execute) === null || _ReactGA$plugin$execu === void 0 ? void 0 : _ReactGA$plugin$execu.call(_ReactGA$plugin, "ecommerce", "addTransaction", {
-    id: lastSubscriptionId,
-    affiliation: "Pelcro",
-    revenue: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
-    coupon: couponCode
-  });
-  ReactGA$c === null || ReactGA$c === void 0 ? void 0 : (_ReactGA$plugin2 = ReactGA$c.plugin) === null || _ReactGA$plugin2 === void 0 ? void 0 : (_ReactGA$plugin2$exec = _ReactGA$plugin2.execute) === null || _ReactGA$plugin2$exec === void 0 ? void 0 : _ReactGA$plugin2$exec.call(_ReactGA$plugin2, "ecommerce", "addItem", {
-    id: lastSubscriptionId,
-    name: product.name,
-    category: product.description,
-    variant: plan.nickname,
-    price: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
-    quantity: 1
-  });
-  ReactGA$c === null || ReactGA$c === void 0 ? void 0 : (_ReactGA$plugin3 = ReactGA$c.plugin) === null || _ReactGA$plugin3 === void 0 ? void 0 : (_ReactGA$plugin3$exec = _ReactGA$plugin3.execute) === null || _ReactGA$plugin3$exec === void 0 ? void 0 : _ReactGA$plugin3$exec.call(_ReactGA$plugin3, "ecommerce", "send");
-  ReactGA$c === null || ReactGA$c === void 0 ? void 0 : (_ReactGA$event = ReactGA$c.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$c, {
-    category: "ACTIONS",
-    action: "Subscribed",
-    nonInteraction: true
-  });
+  if (enableReactGA4) {
+    ReactGA4.event("purchase", {
+      transaction_id: lastSubscriptionId,
+      affiliation: "Pelcro",
+      currency: currencyCode,
+      value: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
+      coupon: couponCode,
+      items: [{
+        item_id: lastSubscriptionId,
+        item_name: product.name,
+        item_category: product.description,
+        item_variant: plan.nickname,
+        price: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
+        quantity: 1
+      }]
+    });
+    ReactGA4.event("Subscribed", {
+      nonInteraction: true
+    });
+  } else {
+    var _ReactGA$set, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
+    ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$set = ReactGA.set) === null || _ReactGA$set === void 0 ? void 0 : _ReactGA$set.call(ReactGA, {
+      currencyCode: currencyCode
+    });
+    ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin = ReactGA.plugin) === null || _ReactGA$plugin === void 0 ? void 0 : (_ReactGA$plugin$execu = _ReactGA$plugin.execute) === null || _ReactGA$plugin$execu === void 0 ? void 0 : _ReactGA$plugin$execu.call(_ReactGA$plugin, "ecommerce", "addTransaction", {
+      id: lastSubscriptionId,
+      affiliation: "Pelcro",
+      revenue: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
+      coupon: couponCode
+    });
+    ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin2 = ReactGA.plugin) === null || _ReactGA$plugin2 === void 0 ? void 0 : (_ReactGA$plugin2$exec = _ReactGA$plugin2.execute) === null || _ReactGA$plugin2$exec === void 0 ? void 0 : _ReactGA$plugin2$exec.call(_ReactGA$plugin2, "ecommerce", "addItem", {
+      id: lastSubscriptionId,
+      name: product.name,
+      category: product.description,
+      variant: plan.nickname,
+      price: plan !== null && plan !== void 0 && plan.amount ? isCurrencyZeroDecimal(currencyCode) ? plan.amount : plan.amount / 100 : 0,
+      quantity: 1
+    });
+    ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin3 = ReactGA.plugin) === null || _ReactGA$plugin3 === void 0 ? void 0 : (_ReactGA$plugin3$exec = _ReactGA$plugin3.execute) === null || _ReactGA$plugin3$exec === void 0 ? void 0 : _ReactGA$plugin3$exec.call(_ReactGA$plugin3, "ecommerce", "send");
+    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: "Subscribed",
+      nonInteraction: true
+    });
+  }
 };
 
 /** check wether or not the user have any existing payment method
@@ -9466,14 +9508,14 @@ 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;
 }
 function notifyBugsnag(callback, startOptions) {
   if (!window.Bugsnag && !document.querySelector('script[src="https://d2wy8f7a9ursnm.cloudfront.net/v7/bugsnag.min.js"]')) {
-    //load bugsnag CDN
+    // load bugsnag CDN
     window.Pelcro.helpers.loadSDK("https://d2wy8f7a9ursnm.cloudfront.net/v7/bugsnag.min.js", "bugsnag-cdn");
     document.querySelector('script[src="https://d2wy8f7a9ursnm.cloudfront.net/v7/bugsnag.min.js"]').addEventListener("load", () => {
       var _window$Pelcro$enviro, _window$Pelcro4, _window$Pelcro4$envir, _window$Pelcro5, _window$Pelcro5$envir;
@@ -9652,10 +9694,8 @@ function _classPrivateFieldGet(receiver, privateMap) {
   return descriptor.value;
 }
 
-var _window$b, _window$Pelcro$b, _window$Pelcro$uiSett$b;
 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 ReactGA$b = (_window$b = window) !== null && _window$b !== void 0 && (_window$Pelcro$b = _window$b.Pelcro) !== null && _window$Pelcro$b !== void 0 && (_window$Pelcro$uiSett$b = _window$Pelcro$b.uiSettings) !== null && _window$Pelcro$uiSett$b !== void 0 && _window$Pelcro$uiSett$b.enableReactGA4 ? ReactGA4 : ReactGA1;
 var _isAlreadySaved = /*#__PURE__*/new WeakMap();
 var _markButtonAsLoading = /*#__PURE__*/new WeakMap();
 var _removeLoadingState = /*#__PURE__*/new WeakMap();
@@ -9739,7 +9779,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 {
@@ -9749,6 +9789,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");
         }
@@ -9773,16 +9814,22 @@ class SaveToMetadataButtonClass {
             value: newMetadataValue,
             auth_token: window.Pelcro.user.read().auth_token
           }, (err, resp) => {
-            var _ReactGA$event;
             if (err) {
               return _classPrivateFieldGet(this, _removeLoadingState).call(this, button);
             }
             _classPrivateFieldGet(this, _markButtonAsSaved).call(this, button);
-            ReactGA$b === null || ReactGA$b === void 0 ? void 0 : (_ReactGA$event = ReactGA$b.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$b, {
-              category: "ACTIONS",
-              action: "Save/Follow",
-              label: buttonMetadata === null || buttonMetadata === void 0 ? void 0 : buttonMetadata.title
-            });
+            if (enableReactGA4) {
+              ReactGA4.event("Save/Follow", {
+                event_label: buttonMetadata === null || buttonMetadata === void 0 ? void 0 : buttonMetadata.title
+              });
+            } 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: "Save/Follow",
+                label: buttonMetadata === null || buttonMetadata === void 0 ? void 0 : buttonMetadata.title
+              });
+            }
           });
         }
       }
@@ -9790,6 +9837,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 {
@@ -9797,6 +9845,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);
@@ -9805,16 +9854,22 @@ class SaveToMetadataButtonClass {
             value: newMetadataValue,
             auth_token: window.Pelcro.user.read().auth_token
           }, (err, resp) => {
-            var _ReactGA$event2;
             if (err) {
               return _classPrivateFieldGet(this, _removeLoadingState).call(this, button);
             }
             _classPrivateFieldGet(this, _unmarkSavedButton).call(this, button);
-            ReactGA$b === null || ReactGA$b === void 0 ? void 0 : (_ReactGA$event2 = ReactGA$b.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA$b, {
-              category: "ACTIONS",
-              action: "Unsave/Unfollow",
-              label: title
-            });
+            if (enableReactGA4) {
+              ReactGA4.event("Unsave/Unfollow", {
+                event_label: title
+              });
+            } else {
+              var _ReactGA$event2;
+              ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
+                category: "ACTIONS",
+                action: "Unsave/Unfollow",
+                label: title
+              });
+            }
           });
         }
       }
@@ -11455,9 +11510,6 @@ function getSiteCardProcessor() {
   return "stripe";
 }
 
-var _window$a, _window$Pelcro$a, _window$Pelcro$uiSett$a;
-const ReactGA$a = (_window$a = window) !== null && _window$a !== void 0 && (_window$Pelcro$a = _window$a.Pelcro) !== null && _window$Pelcro$a !== void 0 && (_window$Pelcro$uiSett$a = _window$Pelcro$a.uiSettings) !== null && _window$Pelcro$uiSett$a !== void 0 && _window$Pelcro$uiSett$a.enableReactGA4 ? ReactGA4 : ReactGA1;
-
 /**
  * @typedef {Object} OptionsType
  * @property {boolean} loadPaymentSDKs
@@ -11584,17 +11636,44 @@ const initSecuritySdk = () => {
   });
 };
 const initGATracking = () => {
-  var _ReactGA$initialize, _ReactGA$plugin, _ReactGA$plugin$requi;
-  ReactGA$a === null || ReactGA$a === void 0 ? void 0 : (_ReactGA$initialize = ReactGA$a.initialize) === null || _ReactGA$initialize === void 0 ? void 0 : _ReactGA$initialize.call(ReactGA$a, window.Pelcro.site.read().google_analytics_id);
-  ReactGA$a === null || ReactGA$a === void 0 ? void 0 : (_ReactGA$plugin = ReactGA$a.plugin) === null || _ReactGA$plugin === void 0 ? void 0 : (_ReactGA$plugin$requi = _ReactGA$plugin.require) === null || _ReactGA$plugin$requi === void 0 ? void 0 : _ReactGA$plugin$requi.call(_ReactGA$plugin, "ecommerce");
+  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) {
+      // Initialize ReactGA4 with your tracking ID
+      ReactGA4.initialize(window.Pelcro.site.read().google_analytics_id);
+      // Enable e-commerce tracking
+      ReactGA4.initialize(window.Pelcro.site.read().google_analytics_id, {
+        gaOptions: {
+          send_page_view: true,
+          ecommerce: {
+            enabled: true
+          }
+        }
+      });
+    } else {
+      var _ReactGA$initialize, _ReactGA$plugin, _ReactGA$plugin$requi;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$initialize = ReactGA.initialize) === null || _ReactGA$initialize === void 0 ? void 0 : _ReactGA$initialize.call(ReactGA, window.Pelcro.site.read().google_analytics_id);
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$plugin = ReactGA.plugin) === null || _ReactGA$plugin === void 0 ? void 0 : (_ReactGA$plugin$requi = _ReactGA$plugin.require) === null || _ReactGA$plugin$requi === void 0 ? void 0 : _ReactGA$plugin$requi.call(_ReactGA$plugin, "ecommerce");
+    }
+  }
 };
 const dispatchModalDisplayEvents = modalName => {
-  var _ReactGA$event, _modalName$replace, _modalName$replace2;
-  ReactGA$a === null || ReactGA$a === void 0 ? void 0 : (_ReactGA$event = ReactGA$a.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$a, {
-    category: "VIEWS",
-    action: `${modalName === null || modalName === void 0 ? void 0 : (_modalName$replace = modalName.replace("pelcro-", "")) === null || _modalName$replace === void 0 ? void 0 : _modalName$replace.replaceAll("-", " ")} viewed`,
-    nonInteraction: true
-  });
+  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) {
+    ReactGA4.event(`${formattedAction} viewed`, {
+      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: "VIEWS",
+      action: `${formattedAction} viewed`,
+      nonInteraction: true
+    });
+  }
   window.Pelcro.insight.track("Modal Displayed", {
     name: `${modalName === null || modalName === void 0 ? void 0 : (_modalName$replace2 = modalName.replace("pelcro-", "")) === null || _modalName$replace2 === void 0 ? void 0 : _modalName$replace2.replaceAll("-", " ")}`
   });
@@ -12389,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";
@@ -12419,6 +12499,7 @@ const {
   Provider: Provider$m
 } = store$m;
 const LoginContainer = _ref => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     style,
     className = "",
@@ -12426,6 +12507,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,
@@ -12455,13 +12537,19 @@ const LoginContainer = _ref => {
         });
         onFailure(err);
       } else {
-        var _ReactGA$event;
         onSuccess(res);
-        ReactGA1 === null || ReactGA1 === void 0 ? void 0 : (_ReactGA$event = ReactGA1.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA1, {
-          category: "ACTIONS",
-          action: "Logged in",
-          nonInteraction: true
-        });
+        if (enableReactGA4) {
+          ReactGA4.event("Logged in", {
+            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: "Logged in",
+            nonInteraction: true
+          });
+        }
       }
     });
   };
@@ -12847,17 +12935,23 @@ function ConfirmPassword(_ref) {
   }, otherProps));
 }
 
-var _window$9, _window$Pelcro$9, _window$Pelcro$uiSett$9;
-const ReactGA$9 = (_window$9 = window) !== null && _window$9 !== void 0 && (_window$Pelcro$9 = _window$9.Pelcro) !== null && _window$Pelcro$9 !== void 0 && (_window$Pelcro$uiSett$9 = _window$Pelcro$9.uiSettings) !== null && _window$Pelcro$uiSett$9 !== void 0 && _window$Pelcro$uiSett$9.enableReactGA4 ? ReactGA4 : ReactGA1;
 const Logout = props => {
   const handleLogout = () => {
-    var _ReactGA$event;
+    var _window, _window$Pelcro, _window$Pelcro$uiSett;
     window.Pelcro.user.logout();
-    ReactGA$9 === null || ReactGA$9 === void 0 ? void 0 : (_ReactGA$event = ReactGA$9.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$9, {
-      category: "ACTIONS",
-      action: "Logged out",
-      nonInteraction: true
-    });
+    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
+      });
+    } 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: "Logged out",
+        nonInteraction: true
+      });
+    }
   };
   return /*#__PURE__*/React__default['default'].createElement("button", {
     name: "logout",
@@ -14415,13 +14509,11 @@ const RegisterCompany = props => {
   }, props));
 };
 
-var _window$8, _window$Pelcro$8, _window$Pelcro$uiSett$8;
-const ReactGA$8 = (_window$8 = window) !== null && _window$8 !== void 0 && (_window$Pelcro$8 = _window$8.Pelcro) !== null && _window$Pelcro$8 !== void 0 && (_window$Pelcro$uiSett$8 = _window$Pelcro$8.uiSettings) !== null && _window$Pelcro$uiSett$8 !== void 0 && _window$Pelcro$uiSett$8.enableReactGA4 ? ReactGA4 : ReactGA1;
-
 /**
  *
  */
 function RegisterModal(props) {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   const {
     t
   } = useTranslation("register");
@@ -14436,18 +14528,26 @@ 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);
     handleAfterRegistrationLogic();
   };
   const handleAfterRegistrationLogic = () => {
-    var _ReactGA$event, _window$Pelcro$site$r, _window$Pelcro$site$r2;
-    ReactGA$8 === null || ReactGA$8 === void 0 ? void 0 : (_ReactGA$event = ReactGA$8.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$8, {
-      category: "ACTIONS",
-      action: "Registered",
-      nonInteraction: true
-    });
+    var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+    if (enableReactGA4) {
+      ReactGA4.event("Registered", {
+        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: "Registered",
+        nonInteraction: true
+      });
+    }
     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;
     if (isEmailVerificationEnabled) {
       return switchView("email-verify");
@@ -14534,9 +14634,6 @@ function Radio(_ref) {
   }, children));
 }
 
-var _window$7, _window$Pelcro$7, _window$Pelcro$uiSett$7;
-const ReactGA$7 = (_window$7 = window) !== null && _window$7 !== void 0 && (_window$Pelcro$7 = _window$7.Pelcro) !== null && _window$Pelcro$7 !== void 0 && (_window$Pelcro$uiSett$7 = _window$Pelcro$7.uiSettings) !== null && _window$Pelcro$uiSett$7 !== void 0 && _window$Pelcro$uiSett$7.enableReactGA4 ? ReactGA4 : ReactGA1;
-
 /**
  *
  */
@@ -14596,6 +14693,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) {
@@ -14630,11 +14728,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;
         });
@@ -14647,12 +14745,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: {
@@ -14663,8 +14761,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`
@@ -14875,6 +14973,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;
@@ -14882,19 +14981,31 @@ class SelectModal extends React.Component {
       disableGifting
     } = this.props;
     if (this.state.mode === "product") {
-      var _ReactGA$event;
-      ReactGA$7 === null || ReactGA$7 === void 0 ? void 0 : (_ReactGA$event = ReactGA$7.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$7, {
-        category: "VIEWS",
-        action: "Product Modal Viewed",
-        nonInteraction: true
-      });
+      if (this.enableReactGA4) {
+        ReactGA4.event("Product Modal Viewed", {
+          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: "VIEWS",
+          action: "Product Modal Viewed",
+          nonInteraction: true
+        });
+      }
     } else if (this.state.mode === "plan") {
-      var _ReactGA$event2;
-      ReactGA$7 === null || ReactGA$7 === void 0 ? void 0 : (_ReactGA$event2 = ReactGA$7.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA$7, {
-        category: "VIEWS",
-        action: "Plan Modal Viewed",
-        nonInteraction: true
-      });
+      if (this.enableReactGA4) {
+        ReactGA4.event("Plan Modal Viewed", {
+          nonInteraction: true
+        });
+      } else {
+        var _ReactGA$event2;
+        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
+          category: "VIEWS",
+          action: "Plan Modal Viewed",
+          nonInteraction: true
+        });
+      }
     }
     return /*#__PURE__*/React__default['default'].createElement(Modal, {
       hideCloseButton: !this.closeButton,
@@ -20228,13 +20339,11 @@ const SubscriptionRenewView = _ref => {
   }));
 };
 
-var _window$6, _window$Pelcro$6, _window$Pelcro$uiSett$6;
-const ReactGA$6 = (_window$6 = window) !== null && _window$6 !== void 0 && (_window$Pelcro$6 = _window$6.Pelcro) !== null && _window$Pelcro$6 !== void 0 && (_window$Pelcro$uiSett$6 = _window$Pelcro$6.uiSettings) !== null && _window$Pelcro$uiSett$6 !== void 0 && _window$Pelcro$uiSett$6.enableReactGA4 ? ReactGA4 : ReactGA1;
-
 /**
  *
  */
 function SubscriptionRenewModal(_ref) {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     onDisplay,
     onClose,
@@ -20243,24 +20352,39 @@ 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, _ReactGA$event;
+    var _otherProps$onSuccess;
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, res);
-    ReactGA$6 === null || ReactGA$6 === void 0 ? void 0 : (_ReactGA$event = ReactGA$6.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$6, {
-      category: "ACTIONS",
-      action: "Renewed",
-      nonInteraction: true
-    });
+    if (enableReactGA4) {
+      ReactGA4.event("Renewed", {
+        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: "Renewed",
+        nonInteraction: true
+      });
+    }
     return switchView("subscription-success");
   };
   const onGiftRenewalSuccess = () => {
-    var _otherProps$onGiftRen, _ReactGA$event2;
+    var _otherProps$onGiftRen;
     (_otherProps$onGiftRen = otherProps.onGiftRenewalSuccess) === null || _otherProps$onGiftRen === void 0 ? void 0 : _otherProps$onGiftRen.call(otherProps);
-    ReactGA$6 === null || ReactGA$6 === void 0 ? void 0 : (_ReactGA$event2 = ReactGA$6.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA$6, {
-      category: "ACTIONS",
-      action: "Renewed Gift",
-      nonInteraction: true
-    });
+    if (enableReactGA4) {
+      ReactGA4.event("Renewed Gift", {
+        nonInteraction: true
+      });
+    } else {
+      var _ReactGA$event2;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Renewed Gift",
+        nonInteraction: true
+      });
+    }
     return switchView("subscription-success");
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
@@ -20275,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 {
@@ -20290,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:
@@ -20298,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;
     }
@@ -20397,8 +20526,7 @@ const SubscriptionCancelReason = props => {
     t
   } = useTranslation("subscriptionCancel");
   const {
-    dispatch,
-    state
+    dispatch
   } = React.useContext(store$j);
   const handleOnTextAreaBlur = e => {
     dispatch({
@@ -20430,9 +20558,7 @@ function SvgSubscription(props) {
   }))))));
 }
 
-var _window$5, _window$Pelcro$5, _window$Pelcro$uiSett$5;
-const ReactGA$5 = (_window$5 = window) !== null && _window$5 !== void 0 && (_window$Pelcro$5 = _window$5.Pelcro) !== null && _window$Pelcro$5 !== void 0 && (_window$Pelcro$uiSett$5 = _window$Pelcro$5.uiSettings) !== null && _window$Pelcro$uiSett$5 !== void 0 && _window$Pelcro$uiSett$5.enableReactGA4 ? ReactGA4 : ReactGA1;
-const SubscriptionCancelNowButton = _ref => {
+const SubscriptionCancelButton = _ref => {
   let {
     subscription,
     onClick,
@@ -20443,14 +20569,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,
@@ -20459,36 +20587,42 @@ const SubscriptionCancelNowButton = _ref => {
         reason: payload.reason
       })
     }, (err, res) => {
-      var _ReactGA$event;
       if (err) {
         return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
       }
-      ReactGA$5 === null || ReactGA$5 === void 0 ? void 0 : (_ReactGA$event = ReactGA$5.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$5, {
-        category: "ACTIONS",
-        action: "Canceled",
-        nonInteraction: true
-      });
+      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 handleCancelClick = () => {
     const payload = {
       subscription_id: subscription.id,
-      mode: "now",
+      mode: cancelationOption,
       ...(cancelationReason && {
         reason: cancelationReason
       })
     };
     onClick === null || onClick === void 0 ? void 0 : onClick();
 
-    //Close the modal
+    // Close the modal
     switchView(null);
 
-    //Show confirmation alert after closing the modal
+    // Show confirmation alert after closing the modal
     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")
@@ -20497,90 +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"));
 };
 
-var _window$4, _window$Pelcro$4, _window$Pelcro$uiSett$4;
-const ReactGA$4 = (_window$4 = window) !== null && _window$4 !== void 0 && (_window$Pelcro$4 = _window$4.Pelcro) !== null && _window$Pelcro$4 !== void 0 && (_window$Pelcro$uiSett$4 = _window$Pelcro$4.uiSettings) !== null && _window$Pelcro$uiSett$4 !== void 0 && _window$Pelcro$uiSett$4.enableReactGA4 ? ReactGA4 : ReactGA1;
-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) => {
-    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) => {
-      var _ReactGA$event;
-      if (err) {
-        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
-      }
-      ReactGA$4 === null || ReactGA$4 === void 0 ? void 0 : (_ReactGA$event = ReactGA$4.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$4, {
-        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", {
@@ -20589,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 => {
@@ -20744,9 +20890,8 @@ const SubscriptionSuspendDate = props => {
   }, props));
 };
 
-var _window$3, _window$Pelcro$3, _window$Pelcro$uiSett$3;
-const ReactGA$3 = (_window$3 = window) !== null && _window$3 !== void 0 && (_window$Pelcro$3 = _window$3.Pelcro) !== null && _window$Pelcro$3 !== void 0 && (_window$Pelcro$uiSett$3 = _window$Pelcro$3.uiSettings) !== null && _window$Pelcro$uiSett$3 !== void 0 && _window$Pelcro$uiSett$3.enableReactGA4 ? ReactGA4 : ReactGA1;
 const SubscriptionSuspendButton = _ref => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
     subscription,
     onClick,
@@ -20765,6 +20910,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,
@@ -20772,15 +20918,21 @@ const SubscriptionSuspendButton = _ref => {
       suspend: 1,
       shipments_suspended_until: suspendDate
     }, (err, res) => {
-      var _ReactGA$event;
       if (err) {
         return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
       }
-      ReactGA$3 === null || ReactGA$3 === void 0 ? void 0 : (_ReactGA$event = ReactGA$3.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$3, {
-        category: "ACTIONS",
-        action: "Suspended",
-        nonInteraction: true
-      });
+      if (enableReactGA4) {
+        ReactGA4.event("Suspended", {
+          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: "Suspended",
+          nonInteraction: true
+        });
+      }
       onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
     });
   };
@@ -20790,10 +20942,10 @@ const SubscriptionSuspendButton = _ref => {
     };
     onClick === null || onClick === void 0 ? void 0 : onClick();
 
-    //Close the modal
+    // Close the modal
     switchView(null);
 
-    //Show confirmation alert after closing the modal
+    // Show confirmation alert after closing the modal
     notify$1.confirm((onSuccess, onFailure) => {
       suspendSubscription(payload, onSuccess, onFailure);
     }, {
@@ -23522,7 +23674,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 = "",
@@ -23536,6 +23688,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 = () => {
@@ -23626,7 +23779,6 @@ const AddressUpdateContainer = _ref => {
         });
         onFailure(err);
       } else {
-        var _ReactGA$event;
         dispatch({
           type: SHOW_ALERT,
           payload: {
@@ -23635,11 +23787,18 @@ const AddressUpdateContainer = _ref => {
           }
         });
         onSuccess(res);
-        ReactGA1 === null || ReactGA1 === void 0 ? void 0 : (_ReactGA$event = ReactGA1.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA1, {
-          category: "ACTIONS",
-          action: "Updated address",
-          nonInteraction: true
-        });
+        if (enableReactGA4) {
+          ReactGA4.event("Updated address", {
+            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: "Updated address",
+            nonInteraction: true
+          });
+        }
       }
     });
   };
@@ -24163,17 +24322,24 @@ function PaymentMethodUpdateView(props) {
   }));
 }
 
-var _window$2, _window$Pelcro$2, _window$Pelcro$uiSett$2;
-const ReactGA$2 = (_window$2 = window) !== null && _window$2 !== void 0 && (_window$Pelcro$2 = _window$2.Pelcro) !== null && _window$Pelcro$2 !== void 0 && (_window$Pelcro$uiSett$2 = _window$Pelcro$2.uiSettings) !== null && _window$Pelcro$uiSett$2 !== void 0 && _window$Pelcro$uiSett$2.enableReactGA4 ? ReactGA4 : ReactGA1;
 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, _ReactGA$event;
+    var _props$onSuccess;
     (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
-    ReactGA$2 === null || ReactGA$2 === void 0 ? void 0 : (_ReactGA$event = ReactGA$2.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$2, {
-      category: "ACTIONS",
-      action: "Updated payment card",
-      nonInteraction: true
-    });
+    if (enableReactGA4) {
+      ReactGA4.event("Updated payment card", {
+        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: "Updated payment card",
+        nonInteraction: true
+      });
+    }
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-payment-method-update-modal",
@@ -28050,8 +28216,6 @@ const OrderItems = _ref => {
   });
 };
 
-var _window$1, _window$Pelcro$1, _window$Pelcro$uiSett$1;
-const ReactGA$1 = (_window$1 = window) !== null && _window$1 !== void 0 && (_window$Pelcro$1 = _window$1.Pelcro) !== null && _window$Pelcro$1 !== void 0 && (_window$Pelcro$uiSett$1 = _window$Pelcro$1.uiSettings) !== null && _window$Pelcro$uiSett$1 !== void 0 && _window$Pelcro$uiSett$1.enableReactGA4 ? ReactGA4 : ReactGA1;
 const SavedItemsMenu = () => {
   const {
     t
@@ -28100,8 +28264,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);
@@ -28110,17 +28276,24 @@ const SavedItems = _ref3 => {
         value: newMetadataValue,
         auth_token: window.Pelcro.user.read().auth_token
       }, (error, response) => {
-        var _response$data, _ReactGA$event;
+        var _response$data;
         setLoading(false);
         if (error) {
           return;
         }
         setItems(response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.metadata);
-        ReactGA$1 === null || ReactGA$1 === void 0 ? void 0 : (_ReactGA$event = ReactGA$1.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$1, {
-          category: "ACTIONS",
-          action: "Unsave/Unfollow",
-          label: title
-        });
+        if (enableReactGA4) {
+          ReactGA4.event("Unsave/Unfollow", {
+            event_label: title
+          });
+        } 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: "Unsave/Unfollow",
+            label: title
+          });
+        }
       });
     }
   };
@@ -29063,8 +29236,6 @@ function getMemberShipStatus(status) {
   };
 }
 
-var _window, _window$Pelcro, _window$Pelcro$uiSett;
-const ReactGA = (_window = window) !== null && _window !== void 0 && (_window$Pelcro = _window.Pelcro) !== null && _window$Pelcro !== void 0 && (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) !== null && _window$Pelcro$uiSett !== void 0 && _window$Pelcro$uiSett.enableReactGA4 ? ReactGA4 : ReactGA1;
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -29119,21 +29290,27 @@ 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", () => {
-      var _ReactGA$event;
       this.setState({
         isOpen: true
       });
       window.Pelcro.insight.track("Modal Displayed", {
         name: "dashboard"
       });
-      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
-        category: "VIEWS",
-        action: "Dashboard Modal Viewed",
-        nonInteraction: true
-      });
+      if (this.enableReactGA4) {
+        ReactGA4.event("Dashboard Modal Viewed", {
+          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: "VIEWS",
+          action: "Dashboard Modal Viewed",
+          nonInteraction: true
+        });
+      }
       const {
         addresses
       } = window.Pelcro.user.read();
@@ -29161,15 +29338,21 @@ class Dashboard extends React.Component {
         auth_token: window.Pelcro.user.read().auth_token,
         subscription_id: subscription_id
       }, (err, res) => {
-        var _ReactGA$event2;
         if (err) {
           return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
         }
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
-          category: "ACTIONS",
-          action: "Canceled",
-          nonInteraction: true
-        });
+        if (this.enableReactGA4) {
+          ReactGA4.event("Canceled", {
+            nonInteraction: true
+          });
+        } else {
+          var _ReactGA$event2;
+          ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event2 = ReactGA.event) === null || _ReactGA$event2 === void 0 ? void 0 : _ReactGA$event2.call(ReactGA, {
+            category: "ACTIONS",
+            action: "Canceled",
+            nonInteraction: true
+          });
+        }
         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
       });
     });
@@ -29179,15 +29362,21 @@ class Dashboard extends React.Component {
         subscription_id: subscription_id,
         suspend: 0
       }, (err, res) => {
-        var _ReactGA$event3;
         if (err) {
           return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
         }
-        ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event3 = ReactGA.event) === null || _ReactGA$event3 === void 0 ? void 0 : _ReactGA$event3.call(ReactGA, {
-          category: "ACTIONS",
-          action: "UnSuspended",
-          nonInteraction: true
-        });
+        if (this.enableReactGA4) {
+          ReactGA4.event("UnSuspended", {
+            nonInteraction: true
+          });
+        } else {
+          var _ReactGA$event3;
+          ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event3 = ReactGA.event) === null || _ReactGA$event3 === void 0 ? void 0 : _ReactGA$event3.call(ReactGA, {
+            category: "ACTIONS",
+            action: "UnSuspended",
+            nonInteraction: true
+          });
+        }
         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
       });
     });
@@ -29464,6 +29653,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;