@pelcro/react-pelcro-js 2.4.0-beta.9 → 2.6.0-beta.10

package/dist/index.cjs.js

@@ -3462,6 +3462,7 @@ var paymentMethod_fr = {
 };
 
 var title$d = "Enter your email to subscribe to our newsletter";
+var updateTitle$1 = "Update newsletter selections";
 var subtitle$7 = "We may use your email for other marketing communication";
 var labels$l = {
 	submit: "Submit",
@@ -3473,22 +3474,21 @@ var labels$l = {
 };
 var messages$p = {
 	alreadyHaveAccount: "Already have an account?",
+	success: "Newsletters were successfully updated",
 	loginHere: "Login here.",
 	createAnAccount: " Create an account by clicking ",
 	here: "here"
 };
-var errors$b = {
-	"": ""
-};
 var newsletter_en = {
 	title: title$d,
+	updateTitle: updateTitle$1,
 	subtitle: subtitle$7,
 	labels: labels$l,
-	messages: messages$p,
-	errors: errors$b
+	messages: messages$p
 };
 
 var title$c = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
+var updateTitle = "Mettre à jour son choix d'infolettres";
 var subtitle$6 = "Nous pouvons utiliser votre adresse courriel pour d’autres communications marketing";
 var labels$k = {
 	submit: "Lire l’article !",
@@ -3500,19 +3500,17 @@ var labels$k = {
 };
 var messages$o = {
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
+	success: "Votre choix d'infolettres à été mis à jour",
 	loginHere: "Connectez-vous ici",
 	createAnAccount: " Créez un compte en cliquant ",
 	here: "ici"
 };
-var errors$a = {
-	"": ""
-};
 var newsletter_fr = {
 	title: title$c,
+	updateTitle: updateTitle,
 	subtitle: subtitle$6,
 	labels: labels$k,
-	messages: messages$o,
-	errors: errors$a
+	messages: messages$o
 };
 
 var labels$j = {
@@ -3621,7 +3619,8 @@ var labels$h = {
 	code: "Coupon code",
 	"for": "for",
 	interval: "{{count}} {{interval}}",
-	interval_plural: "{{count}} {{interval}}s"
+	interval_plural: "{{count}} {{interval}}s",
+	tax: "+ Tax"
 };
 var checkoutForm_en = {
 	messages: messages$j,
@@ -3646,7 +3645,8 @@ var labels$g = {
 	code: "Code promo",
 	"for": "pour",
 	interval: "{{count}} {{interval}}",
-	interval_plural: "{{count}} {{interval}}s"
+	interval_plural: "{{count}} {{interval}}s",
+	tax: "+ Taxe"
 };
 var checkoutForm_fr = {
 	messages: messages$i,
@@ -4359,7 +4359,8 @@ var labels$3 = {
 		title: "Status",
 		active: "Active",
 		inTrial: "In trial",
-		endingSoon: "Ending soon"
+		endingSoon: "Ending soon",
+		scheduled: "Scheduled"
 	},
 	shipments: "Shipments remaining",
 	logout: "Logout",
@@ -4375,6 +4376,7 @@ var labels$3 = {
 	profile: "Profile",
 	updateProfile: "Edit profile",
 	changePassword: "Change password",
+	editNewsletters: "Edit newsletters",
 	edit: "Edit",
 	gifts: "Gifts",
 	redeemGift: "Redeem gift",
@@ -4384,6 +4386,7 @@ var labels$3 = {
 	paymentSource: "Payment cards",
 	actions: "Actions",
 	expiresOn: "Ends",
+	startsOn: "Starts",
 	renewsOn: "Renews",
 	canceledOn: "Canceled on",
 	recipient: "Recipient",
@@ -4435,7 +4438,8 @@ var labels$2 = {
 		title: "Statut",
 		active: "Active",
 		inTrial: "Dans l'essai",
-		endingSoon: "Fin bientôt"
+		endingSoon: "Fin bientôt",
+		scheduled: "Programmé"
 	},
 	shipments: "Expéditions restantes",
 	logout: "Déconnexion",
@@ -4451,6 +4455,7 @@ var labels$2 = {
 	profile: "Profil",
 	updateProfile: "Mettre à jour le profil",
 	changePassword: "Changer le mot de passe",
+	editNewsletters: "Modifier les newsletters",
 	edit: "Modifier",
 	gifts: "Cadeaux",
 	redeemGift: "Échanger un cadeau",
@@ -4460,6 +4465,7 @@ var labels$2 = {
 	paymentSource: "Sources de paiement",
 	actions: "Actes",
 	expiresOn: "Expire le",
+	startsOn: "Débute le",
 	renewsOn: "Renouvelle le",
 	canceledOn: "Annulé le",
 	recipient: "Destinataire",
@@ -4492,7 +4498,7 @@ var messages$2 = {
 		isSureToCancel: "Êtes-vous certain de vouloir annuler votre abonnement?",
 		loading: "Annulation de l'abonnement",
 		success: "L'abonnement a été annulé avec succès",
-		error: "Une erreure s'est produite lors de l'annulation de l'abonnement"
+		error: "Une erreur s'est produite lors de l'annulation de l'abonnement"
 	}
 };
 var dashboard_fr = {
@@ -5927,7 +5933,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$f;
+      } = initialState$g;
       this.set(otherStateFields);
     });
 
@@ -6217,7 +6223,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$f = {
+const initialState$g = {
   // View
   view: null,
   // Plans
@@ -6245,7 +6251,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$f,
+    ...initialState$g,
     // State actions
     ...actions,
     // Callbacks
@@ -6325,13 +6331,34 @@ const getAddressById = id => {
 };
 /**
  * Transforms locale names stored in our backend like
- * "en_US" into the standerd accepted in core i18n methods: "en-US"
+ * "en_US" into the standard accepted in core i18n methods: "en-US"
  * @param {string} localeName
  * @return {string | undefined}
  * @example getCanonicalLocaleFormat("en_US") => "en-US"
  */
 
 const getCanonicalLocaleFormat = localeName => localeName === null || localeName === void 0 ? void 0 : localeName.replace("_", "-");
+/**
+ * @param {string} localeName
+ * @return {string | undefined}
+ * @example getLanguageWithoutRegion("en-US") => "en"
+ */
+
+const getLanguageWithoutRegion = localeName => {
+  var _getCanonicalLocaleFo;
+
+  return (_getCanonicalLocaleFo = getCanonicalLocaleFormat(localeName)) === null || _getCanonicalLocaleFo === void 0 ? void 0 : _getCanonicalLocaleFo.split("-")[0];
+};
+/**
+ * Gets the current page language or fallbacks to site default
+ * @return {string | undefined}
+ */
+
+const getPageOrDefaultLanguage = () => {
+  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);
+};
 /**
  * Returns a formatted price string depending on locale
  * @param {number} amount
@@ -6341,7 +6368,7 @@ const getCanonicalLocaleFormat = localeName => localeName === null || localeName
  * @example getFormattedPriceByLocal(10, 'USD', 'en-US') => "$10.00"
  */
 
-const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en-US") => {
+const getFormattedPriceByLocal = (amount, currency = "USD", locale = "en") => {
   const formatter = new Intl.NumberFormat(getCanonicalLocaleFormat(locale), {
     style: "currency",
     currency
@@ -6366,8 +6393,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
     totalWithoutDividingBy100 += parseFloat(item.price ? (item.price * item.quantity).toFixed(2) : item.amount.toFixed(2));
   }
 
-  const locale = window.Pelcro.site.read().default_locale;
-  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, locale);
+  return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
 };
 /**
  * returns true if the URL contains a supported view trigger URL
@@ -6376,11 +6402,43 @@ const calcAndFormatItemsTotal = (items, currency) => {
  */
 
 const isValidViewFromURL = viewID => {
-  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart"].includes(viewID)) {
+  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
     return true;
   }
 
   return false;
+  /**
+   *
+   */
+
+  function hasValidNewsletterUpdateUrl() {
+    var _window$Pelcro2, _window$Pelcro2$uiSet;
+
+    if (viewID !== "newsletter-update") return false;
+    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;
+    }
+
+    const queryParamEmail = window.Pelcro.helpers.getURLParameter("email");
+
+    if (queryParamEmail && window.Pelcro.user.isAuthenticated()) {
+      var _window$Pelcro$user$r4;
+
+      if (queryParamEmail !== ((_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email)) {
+        console.error("email query parameter and user account email are different, url email query parameter must match user email if user is logged in");
+        return false;
+      }
+    }
+
+    if (!queryParamEmail && !window.Pelcro.user.isAuthenticated()) {
+      return false;
+    }
+
+    return true;
+  }
 };
 /**
  * Returns the current stable viewID from all old variations
@@ -6412,7 +6470,7 @@ const disableScroll = () => {
   }
 };
 const trackSubscriptionOnGA = () => {
-  var _ReactGA$set, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
+  var _ReactGA$set, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _ReactGA$plugin, _ReactGA$plugin$execu, _ReactGA$plugin2, _ReactGA$plugin2$exec, _ReactGA$plugin3, _ReactGA$plugin3$exec, _ReactGA$event;
 
   const {
     product,
@@ -6434,7 +6492,7 @@ const trackSubscriptionOnGA = () => {
   }
 
   ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$set = ReactGA.set) === null || _ReactGA$set === void 0 ? void 0 : _ReactGA$set.call(ReactGA, {
-    currencyCode: (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.currency) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : plan.currency
+    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 === 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,
@@ -6462,9 +6520,9 @@ const trackSubscriptionOnGA = () => {
  */
 
 const userHasPaymentMethod = () => {
-  var _window$Pelcro$user$r6, _window$Pelcro$user$r7;
+  var _window$Pelcro$user$r7, _window$Pelcro$user$r8;
 
-  const sources = (_window$Pelcro$user$r6 = (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.sources) !== null && _window$Pelcro$user$r6 !== void 0 ? _window$Pelcro$user$r6 : [];
+  const sources = (_window$Pelcro$user$r7 = (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.sources) !== null && _window$Pelcro$user$r7 !== void 0 ? _window$Pelcro$user$r7 : [];
   return sources.length > 0;
 };
 /**
@@ -6530,10 +6588,20 @@ const getPaymentCardIcon$1 = name => {
     d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
   }));
 };
+/**
+ * Gets the current date with time set to 0
+ * @param {Date} dateObject
+ * @return {Date}
+ */
+
+function getDateWithoutTime(dateObject) {
+  const date = new Date(dateObject.getTime());
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
 
-var _window$Pelcro, _window$Pelcro$site, _window$Pelcro$site$r, _window$Pelcro$site$r2;
 const resources = {
-  "en-US": {
+  en: {
     common: common_en,
     paymentMethod: paymentMethod_en,
     newsletter: newsletter_en,
@@ -6555,7 +6623,7 @@ const resources = {
     select: select_en,
     notification: notification_en
   },
-  "fr-CA": {
+  fr: {
     common: common_fr,
     paymentMethod: paymentMethod_fr,
     newsletter: newsletter_fr,
@@ -6577,13 +6645,14 @@ const resources = {
     select: select_fr,
     notification: notification_fr
   }
-};
-let locale = (_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;
-if (!locale) locale = "en-US";
+}; // set UI language to the page language or default to the language in site settings
+
+const locale = getPageOrDefaultLanguage();
 i18next.use(initReactI18next) // passes i18n down to react-i18next,
 .init({
   resources,
-  lng: getCanonicalLocaleFormat(locale),
+  lng: locale,
+  fallbackLng: "en",
   // debug: true,
   interpolation: {
     escapeValue: false // react already safes from xss
@@ -6594,6 +6663,16 @@ i18next.use(initReactI18next) // passes i18n down to react-i18next,
 
   }
 });
+const pageLanguageObserver = new MutationObserver(mutationsList => {
+  mutationsList.forEach(mutationRecord => {
+    if (mutationRecord.attributeName === "lang") {
+      i18next.changeLanguage(window.Pelcro.helpers.getHtmlLanguageAttribute());
+    }
+  });
+});
+pageLanguageObserver.observe(document.documentElement, {
+  attributes: true
+});
 
 function _classPrivateFieldGet(receiver, privateMap) {
   var descriptor = privateMap.get(receiver);
@@ -6846,8 +6925,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"undefined"!=typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(})/g,a=/\/\*[^]*?\*\/|\s\s+|\n/g,n=(e,t)=>{let r,l="",a="",o="";for(let c in e){let s=e[c];"object"==typeof s?(r=t?t.replace(/([^,])+/g,e=>c.replace(/([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):c,a+="@"==c[0]?"f"==c[1]?n(s,c):c+"{"+n(s,"k"==c[1]?"":t)+"}":n(s,r)):"@"==c[0]&&"i"==c[1]?l=c+" "+s+";":(c=c.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=n.p?n.p(c,s):c+":"+s+";");}return o[0]?(r=t?t+"{"+o+"}":o,l+r+a):l+a},o={},c=e=>{let t="";for(let r in e)t+=r+("object"==typeof e[r]?c(e[r]):e[r]);return t},s=(e,t,r,s,i)=>{let p="object"==typeof e?c(e):e,u=o[p]||(o[p]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(p));if(!o[u]){let t="object"==typeof e?e:(e=>{let t,r=[{}];for(;t=l.exec(e.replace(a,""));)t[4]&&r.shift(),t[3]?r.unshift(r[0][t[3]]=r[0][t[3]]||{}):t[4]||(r[0][t[1]]=t[2]);return r[0]})(e);o[u]=n(i?{["@keyframes "+u]:t}:t,r?"":"."+u);}return ((e,t,r)=>{-1==t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(o[u],t,s),u},i=(e,t,r)=>e.reduce((e,l,a)=>{let o=t[a];if(o&&o.call){let e=o(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;o=t?"."+t:e&&"object"==typeof e?e.props?"":n(e,""):e;}return e+l+(null==o?"":o)},"");function p(e){let r=this||{},l=e.call?e(r.p):e;return s(l.unshift?l.raw?i(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>t?Object.assign(e,t.call?t(r.p):t):e,{}):l,t(r.target),r.g,r.o,r.k)}let u,f,d;p.bind({g:1});let b=p.bind({k:1});function h(e,t,r,l){n.p=t,u=e,f=r,d=l;}function y(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=p.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=c.as||e;return d&&i[0]&&d(c),u(i,c)}return t?t(a):a}}
 
-function _extends$t() {
-  _extends$t = Object.assign || function (target) {
+function _extends$v() {
+  _extends$v = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -6861,7 +6940,7 @@ function _extends$t() {
     return target;
   };
 
-  return _extends$t.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -6951,7 +7030,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$t({}, state, {
+      return _extends$v({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -6961,9 +7040,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$t({}, state, {
+      return _extends$v({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$t({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$v({}, t, action.toast) : t;
         })
       });
 
@@ -6990,9 +7069,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$t({}, state, {
+      return _extends$v({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$t({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$v({}, t, {
             visible: false
           }) : t;
         })
@@ -7000,28 +7079,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$t({}, state, {
+        return _extends$v({}, state, {
           toasts: []
         });
       }
 
-      return _extends$t({}, state, {
+      return _extends$v({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$t({}, state, {
+      return _extends$v({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$t({}, state, {
+      return _extends$v({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$t({}, t, {
+          return _extends$v({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -7068,12 +7147,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$t({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$v({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$t({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$v({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$t({}, state, {
+  return _extends$v({}, state, {
     toasts: mergedToasts
   });
 };
@@ -7083,7 +7162,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$t({
+  return _extends$v({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7133,14 +7212,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$t({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$v({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$t({
+    toast.success(resolveValue(msgs.success, p), _extends$v({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$t({
+    toast.error(resolveValue(msgs.error, e), _extends$v({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -7479,7 +7558,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$t({}, animationStyle, style, toast.style)
+    style: _extends$v({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -7509,7 +7588,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$t({
+  return _extends$v({
     left: 0,
     right: 0,
     display: 'flex',
@@ -7536,7 +7615,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$t({
+    style: _extends$v({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7571,82 +7650,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$q;
+var _path$s;
 
-function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+function _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$p;
+var _path$r;
 
-function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+function _extends$t() { _extends$t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 
 function SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$o;
+var _path$q;
 
-function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$n;
+var _path$p;
 
-function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 
 function SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$m, _path2$3;
+var _path$o, _path2$3;
 
-function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 
 function SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -7872,6 +7951,16 @@ const init$1 = () => {
     }
   }
 
+  const pelcroUpdateNewslettersButtons = document.getElementsByClassName("pelcro-update-newsletters-button");
+
+  if (pelcroUpdateNewslettersButtons.length !== 0) {
+    for (let i = 0; i < pelcroUpdateNewslettersButtons.length; i++) {
+      pelcroUpdateNewslettersButtons[i].addEventListener("click", () => {
+        switchView("newsletter-update");
+      });
+    }
+  }
+
   const pelcroCartButtonsByClass = document.getElementsByClassName("pelcro-cart-button");
 
   if (pelcroCartButtonsByClass.length !== 0) {
@@ -8087,87 +8176,71 @@ function Link({
 
 const init = () => {
   const {
-    whenSiteReady,
-    view,
-    resetView,
     switchView,
     set
   } = usePelcro.getStore();
-  whenSiteReady(() => {
-    const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
+  const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
 
-    if (entitlementsProtectedElements.length === 0) {
-      return;
-    }
+  if (entitlementsProtectedElements.length === 0) {
+    return false;
+  }
 
-    if (!allElemsHaveSameEntitlements(entitlementsProtectedElements)) {
-      console.error("not all elements protected by entitlements have the same entitlements, all elements protected by entitlements must have the exact same data-pelcro-entitlements attribute value");
-      return;
-    }
+  if (!allElemsHaveSameEntitlements(entitlementsProtectedElements)) {
+    console.error("not all elements protected by entitlements have the same entitlements, all elements protected by entitlements must have the exact same data-pelcro-entitlements attribute value");
+    return false;
+  }
 
-    entitlementsProtectedElements.forEach(elem => {
-      const entitlements = getEntitlementsFromElem(elem);
+  for (const elem of entitlementsProtectedElements) {
+    const entitlements = getEntitlementsFromElem(elem);
 
-      if (entitlements.length === 0) {
-        console.error("invalid data-pelcro-entitlements attribute value", elem);
-        return;
-      }
+    if (entitlements.length === 0) {
+      console.error("invalid data-pelcro-entitlements attribute value", elem);
+      return false;
+    }
 
-      if (window.Pelcro.product.getByEntitlements(entitlements).length === 0) {
-        console.warn("user can't subscribe to any plan that has any of the entitlement(s) needed, this is usually unintentional, make sure that the entitlements are spelled correctly, entitlements are case sensitive. make sure that your plans are configured in a way that allows users from all supported countries, using all supported currencies, to have access to your content by subscribing to certain plans that provide the needed entitlement(s)");
-      }
+    if (window.Pelcro.product.getByEntitlements(entitlements).length === 0) {
+      console.warn("user can't subscribe to any plan that has any of the entitlement(s) needed, this is usually unintentional, make sure that the entitlements are spelled correctly, entitlements are case sensitive. make sure that your plans are configured in a way that allows users from all supported countries, using all supported currencies, to have access to your content by subscribing to certain plans that provide the needed entitlement(s)");
+    }
 
-      if (shouldBlurContent(entitlements)) {
-        // remove all event listeners from the elem by replacing it with a deep clone of itself
-        const elemDeepClone = elem.cloneNode(true);
-        elem.replaceWith(elemDeepClone);
-        disableKeyboardInteractions(elemDeepClone);
-        elemDeepClone.setAttribute("style", "filter:blur(3px) !important; pointer-events:none !important; user-select:none !important");
-        unblurElemWhenUserSubscribes(elemDeepClone, entitlements);
-        /* 
-        showing both the meter and the entitlements notification doesn't make sense from
-        a product prespective + they would take half the screen on mobile devies, so we're
-        hiding the meter, and showing the entitlements notification only.
-        */
+    if (shouldBlurContent(entitlements)) {
+      // remove all event listeners from the elem by replacing it with a deep clone of itself
+      const elemDeepClone = elem.cloneNode(true);
+      elem.replaceWith(elemDeepClone);
+      disableKeyboardInteractions(elemDeepClone);
+      elemDeepClone.setAttribute("style", "filter:blur(3px) !important; pointer-events:none !important; user-select:none !important");
+      unblurElemWhenUserSubscribes(elemDeepClone, entitlements);
+      const NOTIFICATION_ID = "entitlement";
+      notify( /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement(Trans, {
+        i18nKey: "messages:entitlement"
+      }, "Some of the content on this page is available with one or more of our plans.", /*#__PURE__*/React__default['default'].createElement(Link, {
+        onClick: () => {
+          const productId = Number(elem.dataset.productId);
+          const planId = Number(elem.dataset.planId);
+          const selectedProduct = window.Pelcro.product.getById(productId);
+          const selectedPlan = window.Pelcro.plan.getById(planId);
+          const hasValidProductAndPlan = Boolean(selectedProduct && selectedPlan);
 
-        if (view === "meter") {
-          resetView();
-        }
+          if (hasValidProductAndPlan) {
+            set({
+              product: selectedProduct,
+              plan: selectedPlan
+            });
+          }
 
-        const NOTIFICATION_ID = "entitlement";
-        notify( /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement(Trans, {
-          i18nKey: "messages:entitlement"
-        }, "Some of the content on this page is available with one or more of our plans.", /*#__PURE__*/React__default['default'].createElement(Link, {
-          onClick: () => {
-            const productId = Number(elem.dataset.productId);
-            const planId = Number(elem.dataset.planId);
-            const selectedProduct = window.Pelcro.product.getById(productId);
-            const selectedPlan = window.Pelcro.plan.getById(planId);
-            const hasValidProductAndPlan = Boolean(selectedProduct && selectedPlan);
-
-            if (hasValidProductAndPlan) {
-              set({
-                product: selectedProduct,
-                plan: selectedPlan
-              });
-            }
+          notify.dismiss(NOTIFICATION_ID);
+          switchView("_plan-select-entitlements");
+        }
+      }, "Subscribe"), "now to get full page access.")), {
+        className: "pelcro-notification-entitlement",
+        position: "bottom-right",
+        duration: Infinity,
+        id: NOTIFICATION_ID
+      });
+    }
+  }
 
-            notify.dismiss(NOTIFICATION_ID);
-            switchView("_plan-select-entitlements");
-          }
-        }, "Subscribe"), "now to get full page access.")), {
-          className: "pelcro-notification-entitlement",
-          position: "bottom-right",
-          duration: Infinity,
-          id: NOTIFICATION_ID
-        });
-      }
-    });
-  });
+  return true;
 };
-/**
- *
- */
 
 function allElemsHaveSameEntitlements(elems) {
   const entitlements = getEntitlementsFromElem(elems[0]);
@@ -8177,10 +8250,6 @@ function allElemsHaveSameEntitlements(elems) {
     return entitlements.every(ent => elemEntitlements.includes(ent));
   });
 }
-/**
- *
- */
-
 
 function disableKeyboardInteractions(elem) {
   elem.addEventListener("keydown", event => {
@@ -8193,10 +8262,6 @@ function disableKeyboardInteractions(elem) {
     }
   }, true);
 }
-/**
- *
- */
-
 
 function unblurElemWhenUserSubscribes(elem, entitlements) {
   document.addEventListener("PelcroSubscriptionCreate", event => {
@@ -8204,11 +8269,11 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
       isGift
     } = usePelcro.getStore();
     if (isGift) return;
-    const latestSub = event.detail.data.subscriptions[0];
+    const latestSub = event.detail.data.subscriptions[event.detail.data.subscriptions.length - 1];
     const shouldUnblurContent = entitlements.some(ent => {
-      var _latestSub$plan$entit, _latestSub$plan$entit2;
+      var _latestSub$plan$entit, _latestSub$plan, _latestSub$plan$entit2;
 
-      return (_latestSub$plan$entit = (_latestSub$plan$entit2 = latestSub.plan.entitlements) === null || _latestSub$plan$entit2 === void 0 ? void 0 : _latestSub$plan$entit2.includes(ent)) !== null && _latestSub$plan$entit !== void 0 ? _latestSub$plan$entit : false;
+      return (_latestSub$plan$entit = latestSub === null || latestSub === void 0 ? void 0 : (_latestSub$plan = latestSub.plan) === null || _latestSub$plan === void 0 ? void 0 : (_latestSub$plan$entit2 = _latestSub$plan.entitlements) === null || _latestSub$plan$entit2 === void 0 ? void 0 : _latestSub$plan$entit2.includes(ent)) !== null && _latestSub$plan$entit !== void 0 ? _latestSub$plan$entit : false;
     });
 
     if (shouldUnblurContent) {
@@ -8216,15 +8281,180 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
     }
   });
 }
-/**
- *
- */
-
 
 function shouldBlurContent(entitlements) {
   return entitlements.every(entitlement => !window.Pelcro.user.isEntitledTo(entitlement));
 }
 
+var pure$1 = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+var V3_URL = 'https://js.stripe.com/v3';
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
+var findScript = function findScript() {
+  var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
+
+  for (var i = 0; i < scripts.length; i++) {
+    var script = scripts[i];
+
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+
+    return script;
+  }
+
+  return null;
+};
+
+var injectScript = function injectScript(params) {
+  var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
+  var script = document.createElement('script');
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+
+  if (!headOrBody) {
+    throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
+  }
+
+  headOrBody.appendChild(script);
+  return script;
+};
+
+var registerWrapper = function registerWrapper(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+
+  stripe._registerWrapper({
+    name: 'stripe-js',
+    version: "1.21.1",
+    startTime: startTime
+  });
+};
+
+var stripePromise = null;
+var loadScript = function loadScript(params) {
+  // Ensure that we only attempt to load Stripe.js at most once
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+
+  stripePromise = new Promise(function (resolve, reject) {
+    if (typeof window === 'undefined') {
+      // Resolve to null when imported server side. This makes the module
+      // safe to import in an isomorphic code base.
+      resolve(null);
+      return;
+    }
+
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+
+    try {
+      var script = findScript();
+
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      }
+
+      script.addEventListener('load', function () {
+        if (window.Stripe) {
+          resolve(window.Stripe);
+        } else {
+          reject(new Error('Stripe.js not available'));
+        }
+      });
+      script.addEventListener('error', function () {
+        reject(new Error('Failed to load Stripe.js'));
+      });
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise;
+};
+var initStripe = function initStripe(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+
+  var stripe = maybeStripe.apply(undefined, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var validateLoadParams = function validateLoadParams(params) {
+  var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
+
+  if (params === null || _typeof(params) !== 'object') {
+    throw new Error(errorMessage);
+  }
+
+  if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === 'boolean') {
+    return params;
+  }
+
+  throw new Error(errorMessage);
+};
+
+var loadParams;
+var loadStripeCalled = false;
+var loadStripe = function loadStripe() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  loadStripeCalled = true;
+  var startTime = Date.now();
+  return loadScript(loadParams).then(function (maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+
+loadStripe.setLoadParameters = function (params) {
+  if (loadStripeCalled) {
+    throw new Error('You cannot change load parameters after calling loadStripe');
+  }
+
+  loadParams = validateLoadParams(params);
+};
+
+exports.loadStripe = loadStripe;
+});
+
+unwrapExports(pure$1);
+pure$1.loadStripe;
+
+var pure = pure$1;
+var pure_1 = pure.loadStripe;
+
 /**
  * @typedef {Object} OptionsType
  * @property {boolean} loadPaymentSDKs
@@ -8250,6 +8480,7 @@ const optionsController = options => {
     enableURLTriggers: initViewFromURL,
     enableTheme: applyPelcroTheme,
     enablePaywalls: initPaywalls,
+    loadSecuritySDK: initSecuritySdk,
     enableGoogleAnalytics: initGATracking
   }; // Only execute enabled options
 
@@ -8266,7 +8497,9 @@ const initPaywalls = () => {
   const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
 
   if (((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.settings) === "subscription") {
-    // Skip if article is not restricted
+    // blur entitlements based content
+    const didBlurContent = init(); // Skip paywall if article is not restricted
+
     if (isValidViewFromURL(viewFromURL) || !paywallMethods.isArticleRestricted()) {
       return;
     }
@@ -8276,9 +8509,14 @@ const initPaywalls = () => {
     } = usePelcro.getStore();
 
     if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
-      switchView("meter"); // initializing content entitlement here because it interacts with meter
-
-      init();
+      /* 
+        showing both the meter and the entitlements notification doesn't make sense from
+        a product prespective + they would take half the screen on mobile devies, so we're
+        not showing the meter, and only showing the entitlements notification.
+        */
+      if (!didBlurContent) {
+        switchView("meter");
+      }
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
       switchView("newsletter");
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
@@ -8287,8 +8525,15 @@ const initPaywalls = () => {
   }
 };
 const loadPaymentSDKs = () => {
-  // Load stripe's SDK
-  window.Pelcro.helpers.loadSDK("https://js.stripe.com/v3/", "pelcro-sdk-stripe-id"); // Load PayPal SDK's
+  // Lazy load stripe's SDK
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
+  whenUserReady(() => {
+    if (!window.Stripe) {
+      pure_1(window.Pelcro.environment.stripe);
+    }
+  }); // Load PayPal SDK's
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
@@ -8297,6 +8542,18 @@ const loadPaymentSDKs = () => {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
   }
 };
+const initSecuritySdk = () => {
+  const {
+    whenSiteReady
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    var _window$Pelcro$site$r2;
+
+    const securityKey = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.security_key;
+    if (!securityKey) return;
+    window.Pelcro.helpers.loadSDK(`https://www.google.com/recaptcha/enterprise.js?render=${securityKey}`, "pelcro-security-enteprise");
+  });
+};
 const initGATracking = () => {
   var _ReactGA$initialize, _ReactGA$plugin, _ReactGA$plugin$requi;
 
@@ -8383,9 +8640,9 @@ const applyPelcroTheme = () => {
   };
 
   whenSiteReady(() => {
-    var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
+    var _window$Pelcro$site$r3, _window$Pelcro$site$r4;
 
-    const primaryColorHex = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : (_window$Pelcro$site$r3 = _window$Pelcro$site$r2.design_settings) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.primary_color;
+    const primaryColorHex = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : (_window$Pelcro$site$r4 = _window$Pelcro$site$r3.design_settings) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.primary_color;
 
     if (!primaryColorHex) {
       return;
@@ -8584,6 +8841,7 @@ const defaultOptions = {
   enableURLTriggers: true,
   enableTheme: true,
   enablePaywalls: true,
+  loadSecuritySDK: true,
   enableGoogleAnalytics: false
 };
 const PelcroModalController = ({
@@ -8882,6 +9140,7 @@ const GET_STATES_SUCCESS = "GET_STATES_SUCCESS";
 const GET_STATES_FETCH = "GET_STATES_FETCH";
 const HANDLE_SUBMIT = "HANDLE_SUBMIT";
 const SET_UPDATED_PRICE = "SET_UPDATED_PRICE";
+const SET_TAX_AMOUNT = "SET_TAX_AMOUNT";
 const SET_CAN_MAKE_PAYMENT = "SET_CAN_MAKE_PAYMENT";
 const SET_PAYMENT_REQUEST = "SET_PAYMENT_REQUEST";
 const INIT_CONTAINER = "INIT_CONTAINER";
@@ -8910,6 +9169,9 @@ const SET_IMAGE_SRC = "SET_IMAGE_SRC";
 const PASSWORD_CHANGE_SUCCESS = "PASSWORD_CHANGE_SUCCESS";
 const SELECT_PAYMENT_METHOD = "SELECT_PAYMENT_METHOD";
 const LOAD_PAYMENT_METHODS = "LOAD_PAYMENT_METHODS";
+const GET_NEWSLETTERS_FETCH = "GET_NEWSLETTERS_FETCH";
+const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
+const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 
 /**
  * Extracts error message from the response error object
@@ -8971,7 +9233,7 @@ const debounce = (func, waitTime) => {
   };
 };
 
-const initialState$e = {
+const initialState$f = {
   email: "",
   password: "",
   emailError: null,
@@ -8982,10 +9244,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/React.createContext(initialState$e);
+const store$f = /*#__PURE__*/React.createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const LoginContainer = ({
   style,
@@ -9092,7 +9354,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$e;
+        return initialState$f;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9110,12 +9372,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
     value: {
       state,
       dispatch
@@ -9123,12 +9385,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$e,
+        store: store$f,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -9373,7 +9635,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("login");
@@ -9394,23 +9656,23 @@ const LoginButton = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
-var _path$l;
+var _path$n;
 
-function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 
 function SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -9475,7 +9737,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$d = {
+const initialState$e = {
   email: "",
   password: "",
   emailError: null,
@@ -9492,10 +9754,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/React.createContext(initialState$d);
+const store$e = /*#__PURE__*/React.createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const RegisterContainer = ({
   style,
@@ -9520,35 +9782,53 @@ const RegisterContainer = ({
       jobTitle,
       selectFields
     } = filteredData;
-    window.Pelcro.user.register({
-      email,
-      password,
-      first_name: firstName,
-      last_name: lastName,
-      metadata: {
-        organization,
-        jobTitle,
-        ...selectFields
-      }
-    }, (err, res) => {
-      dispatch({
-        type: DISABLE_REGISTRATION_BUTTON,
-        payload: false
+
+    if (!hasSecurityTokenEnabled()) {
+      sendRegisterRequest();
+      return;
+    }
+
+    window.grecaptcha.enterprise.ready(async () => {
+      var _window$Pelcro$site$r;
+
+      const token = await window.grecaptcha.enterprise.execute((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.security_key, {
+        action: "register"
       });
+      sendRegisterRequest(token);
+    });
 
-      if (err) {
+    function sendRegisterRequest(securityToken) {
+      window.Pelcro.user.register({
+        email,
+        password,
+        first_name: firstName,
+        last_name: lastName,
+        security_token: securityToken,
+        metadata: {
+          organization,
+          jobTitle,
+          ...selectFields
+        }
+      }, (err, res) => {
         dispatch({
-          type: SHOW_ALERT,
-          payload: {
-            type: "error",
-            content: getErrorMessages(err)
-          }
+          type: DISABLE_REGISTRATION_BUTTON,
+          payload: false
         });
-        onFailure(err);
-      } else {
-        onSuccess(res);
-      }
-    });
+
+        if (err) {
+          dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+          onFailure(err);
+        } else {
+          onSuccess(res);
+        }
+      });
+    }
   };
 
   const handleSocialLogin = ({
@@ -9660,7 +9940,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$d;
+        return initialState$e;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -9678,12 +9958,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
     value: {
       state,
       dispatch
@@ -9691,24 +9971,33 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$d,
+        store: store$e,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
+/**
+ * Checks if the current site has security token enabled
+ * @return {boolean}
+ */
+
+function hasSecurityTokenEnabled() {
+  const hasSecuritySdkLoaded = Boolean(window.grecaptcha);
+  return hasSecuritySdkLoaded;
+}
 
-var _path$k;
+var _path$m;
 
-function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 
 function SvgFacebookLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -9720,15 +10009,15 @@ const FacebookLoginButton = ({
   labelClassName = "",
   iconClassName = ""
 }) => {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r;
 
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -9759,7 +10048,7 @@ const FacebookLoginButton = ({
 
   return facebookLoginEnabled ? /*#__PURE__*/React__default['default'].createElement(FacebookLogin, {
     appId: window.Pelcro.site.read().facebook_app_id,
-    language: (_window$Pelcro$site$r2 = window.Pelcro.site.read().default_locale) !== null && _window$Pelcro$site$r2 !== void 0 ? _window$Pelcro$site$r2 : "en_US",
+    language: getPageOrDefaultLanguage(),
     fields: "first_name,last_name,email,picture",
     callback: onSuccess,
     onFailure: onFailure,
@@ -9781,15 +10070,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$j, _path2$2, _path3$1, _path4;
+var _path$l, _path2$2, _path3$1, _path4;
 
-function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 
 function SvgGoogleLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -9815,10 +10104,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -9923,15 +10212,15 @@ function LoginView(props) {
   }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null))))));
 }
 
-var _path$i, _path2$1, _path3;
+var _path$k, _path2$1, _path3;
 
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 
 function SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "#4a4a4a",
     d: "M487.89 42.299c0 13.158-10.671 23.829-23.829 23.829H37.074c-13.162 0-23.832-10.671-23.832-23.829v-63.552c0-13.158 10.67-23.831 23.832-23.831H464.06c13.158 0 23.829 10.672 23.829 23.831l.001 63.552z"
@@ -10078,18 +10367,21 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const RegisterButton = ({
   name,
   onClick,
+  className,
   ...otherProps
 }) => {
+  var _window$Pelcro$site$r;
+
   const {
     state: {
       emailError,
@@ -10099,7 +10391,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("register");
@@ -10115,7 +10407,10 @@ const RegisterButton = ({
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
     disabled: isDisabled,
-    isLoading: buttonDisabled
+    isLoading: buttonDisabled,
+    className: `${className} g-recaptcha`,
+    "data-action": "register",
+    "data-sitekey": (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.security_key
   }, otherProps), name !== null && name !== void 0 ? name : t("messages.createAccount"));
 };
 
@@ -10234,7 +10529,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function LastName({
@@ -10265,7 +10560,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 /**
@@ -10369,7 +10664,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -12334,13 +12629,14 @@ class PaypalGateWay {
  * @property {unknown} canMakePayment
  * @property {unknown} paymentRequest
  * @property {number} updatedPrice
+ * @property {number} taxAmount
  * @property {object} currentPlan
  * @property {object} alert
  */
 
 /** @type {PaymentStateType} */
 
-const initialState$c = {
+const initialState$d = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -12352,16 +12648,17 @@ const initialState$c = {
   canMakePayment: false,
   paymentRequest: null,
   updatedPrice: null,
+  taxAmount: null,
   currentPlan: null,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const store$d = /*#__PURE__*/React.createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -12402,6 +12699,7 @@ const PaymentMethodContainerWithoutStripe = ({
     dispatch({
       type: INIT_CONTAINER
     });
+    updateTotalAmountWithTax();
   }, []);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -12468,6 +12766,45 @@ const PaymentMethodContainerWithoutStripe = ({
       console.log("Google Pay/Apple pay isn't available in this country");
     }
   };
+  /**
+   * Updates the total amount after adding taxes only if site taxes are enabled
+   */
+
+
+  const updateTotalAmountWithTax = () => {
+    var _window$Pelcro$site$r;
+
+    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+
+    if (taxesEnabled && type === "createPayment") {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      resolveTaxCalculation().then(res => {
+        if (res) {
+          dispatch({
+            type: SET_TAX_AMOUNT,
+            payload: res.taxAmount
+          });
+          dispatch({
+            type: SET_UPDATED_PRICE,
+            payload: res.totalAmountWithTax
+          });
+          dispatch({
+            type: UPDATE_PAYMENT_REQUEST
+          });
+        }
+      }).catch(error => {
+        handlePaymentError(error);
+      }).finally(() => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+      });
+    }
+  };
 
   const onApplyCouponCode = (state, dispatch) => {
     const {
@@ -12494,6 +12831,10 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
+      dispatch({
+        type: SET_COUPON_ERROR,
+        payload: ""
+      });
       dispatch({
         type: SHOW_ALERT,
         payload: {
@@ -12509,6 +12850,10 @@ const PaymentMethodContainerWithoutStripe = ({
         type: SET_PERCENT_OFF,
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
       });
+      dispatch({
+        type: SET_TAX_AMOUNT,
+        payload: res.data.taxes
+      });
       dispatch({
         type: SET_UPDATED_PRICE,
         payload: res.data.total
@@ -12518,6 +12863,29 @@ const PaymentMethodContainerWithoutStripe = ({
       });
     };
 
+    if ((couponCode === null || couponCode === void 0 ? void 0 : couponCode.trim()) === "") {
+      dispatch({
+        type: SET_COUPON,
+        payload: null
+      });
+      dispatch({
+        type: SET_PERCENT_OFF,
+        payload: ""
+      });
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        payload: null
+      });
+      dispatch({
+        type: SET_TAX_AMOUNT,
+        payload: null
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      });
+      updateTotalAmountWithTax();
+    }
+
     if (couponCode !== null && couponCode !== void 0 && couponCode.trim()) {
       dispatch({
         type: DISABLE_COUPON_BUTTON,
@@ -12904,16 +13272,20 @@ const PaymentMethodContainerWithoutStripe = ({
       const totalAmount = (_ref = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
 
       if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required" && totalAmount > 0) {
-        return resolveTaxCalculation().then(totalAmountWithTax => generate3DSecureSource(source, totalAmountWithTax !== null && totalAmountWithTax !== void 0 ? totalAmountWithTax : totalAmount).then(({
-          source,
-          error
-        }) => {
-          if (error) {
-            return handlePaymentError(error);
-          }
+        return resolveTaxCalculation().then(res => {
+          var _res$totalAmountWithT;
 
-          toggleAuthenticationPendingView(true, source);
-        }));
+          return generate3DSecureSource(source, (_res$totalAmountWithT = res === null || res === void 0 ? void 0 : res.totalAmountWithTax) !== null && _res$totalAmountWithT !== void 0 ? _res$totalAmountWithT : totalAmount).then(({
+            source,
+            error
+          }) => {
+            if (error) {
+              return handlePaymentError(error);
+            }
+
+            toggleAuthenticationPendingView(true, source);
+          });
+        });
       }
 
       return handlePayment(source);
@@ -12922,15 +13294,15 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
   /**
-   * Resolves with the total including taxes incase taxes enabled by site
+   * Resolves with the total & tax amount incase taxes enabled by site
    * @return {Promise}
    */
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r;
+    var _window$Pelcro$site$r2;
 
-    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -12943,14 +13315,18 @@ const PaymentMethodContainerWithoutStripe = ({
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data;
+        var _res$data, _res$data2;
 
         if (error) {
           return reject(error);
         }
 
-        const totalAmountWithTax = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.total;
-        resolve(totalAmountWithTax);
+        const taxAmount = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.taxes;
+        const totalAmountWithTax = (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.total;
+        resolve({
+          totalAmountWithTax,
+          taxAmount
+        });
       });
     });
   };
@@ -13005,13 +13381,13 @@ const PaymentMethodContainerWithoutStripe = ({
   const handlePaymentError = error => {
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
-      var _state$coupon;
+      var _state$couponObject;
 
       const {
         updatedPrice
       } = state; // When price is 0, we allow submitting without card info
 
-      if (updatedPrice === 0 && ((_state$coupon = state.coupon) === null || _state$coupon === void 0 ? void 0 : _state$coupon.duration) === "forever") {
+      if (updatedPrice === 0 && ((_state$couponObject = state.couponObject) === null || _state$couponObject === void 0 ? void 0 : _state$couponObject.duration) === "forever") {
         return subscribe({}, state, dispatch);
       }
     }
@@ -13139,6 +13515,11 @@ const PaymentMethodContainerWithoutStripe = ({
           updatedPrice: action.payload
         });
 
+      case SET_TAX_AMOUNT:
+        return lib_7({ ...state,
+          taxAmount: action.payload
+        });
+
       case SET_CAN_MAKE_PAYMENT:
         return lib_7({ ...state,
           canMakePayment: action.payload
@@ -13156,7 +13537,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
       case SET_COUPON:
         return lib_7({ ...state,
-          coupon: action.payload
+          couponObject: action.payload
         });
 
       case SET_COUPON_ERROR:
@@ -13182,34 +13563,43 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
 
 const PaymentMethodContainer = props => {
-  if (window.Stripe) {
+  const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
+  React.useEffect(() => {
+    if (!window.Stripe) {
+      document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+        setIsStripeLoaded(true);
+      });
+    }
+  }, []);
+
+  if (isStripeLoaded) {
     return /*#__PURE__*/React__default['default'].createElement(es_13, {
       apiKey: window.Pelcro.environment.stripe,
       stripeAccount: window.Pelcro.site.read().account_id,
-      locale: getCanonicalLocaleFormat(window.Pelcro.site.read().default_locale)
+      locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$c
+      store: store$d
     }, props))));
   }
 
@@ -13262,7 +13652,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -13315,24 +13705,25 @@ const DiscountedPrice = props => {
   const {
     state: {
       updatedPrice,
+      taxAmount,
       percentOff
     }
-  } = React.useContext(store$c);
-  const {
-    default_locale
-  } = Pelcro.site.read();
+  } = React.useContext(store$d);
   const {
     order,
     plan
   } = usePelcro();
   const ecommOrderCurrency = (_order$currency = order === null || order === void 0 ? void 0 : order.currency) !== null && _order$currency !== void 0 ? _order$currency : order === null || order === void 0 ? void 0 : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency;
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
-  const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : updatedPrice * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const discountedPriceWithoutTax = updatedPrice - taxAmount;
+  const priceFormatted = getFormattedPriceByLocal(order ? updatedPrice : discountedPriceWithoutTax * planQuantity, ecommOrderCurrency !== null && ecommOrderCurrency !== void 0 ? ecommOrderCurrency : plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
 
   if (percentOff) {
     return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
-      className: "plc-my-2"
-    }, props), "(-", percentOff, ") ", priceFormatted);
+      className: "plc-flex plc-justify-center plc-mt-2 pelcro-discount"
+    }, props), "(-", percentOff, ")", " ", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-bold pelcro-discounted-price"
+    }, priceFormatted));
   }
 
   return "";
@@ -13357,13 +13748,10 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = React.useContext(store$c);
-  const {
-    default_locale
-  } = Pelcro.site.read();
+  } = React.useContext(store$d);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
-  const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+  const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -13381,17 +13769,17 @@ const SubmitPaymentMethod = ({
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$h;
+var _path$j;
 
-function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 
 function SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13410,7 +13798,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13444,7 +13832,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -13462,6 +13850,7 @@ const CouponCodeField = props => {
 
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     className: "plc-h-12",
+    wrapperClassName: "plc-mb-1",
     errorClassName: "plc-h-12 sm:plc-h-8",
     error: couponError,
     "aria-label": t("labels.code"),
@@ -13472,17 +13861,17 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$g;
+var _path$i;
 
-function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 
 function SvgTicket(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13499,7 +13888,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13513,16 +13902,16 @@ const CouponCode = ({
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-my-4"
+    className: "plc-mt-4"
   }, /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
-    className: "plc-text-base plc-text-gray-500",
+    className: "plc-mb-2 plc-text-base plc-text-gray-500",
     variant: "ghost",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgTicket, {
       className: "plc-w-5 plc-h-5 plc-mr-2"
     }),
     onClick: showCouponField
   }, otherProps), !enableCouponField ? t("labels.addCode") : t("labels.hideCode")), enableCouponField && /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-w-full plc-my-4 pelcro-apply-coupon-wrapper"
+    className: "plc-flex plc-w-full plc-mt-2 pelcro-apply-coupon-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCodeField, null), /*#__PURE__*/React__default['default'].createElement(ApplyCouponButton, null)));
 };
 
@@ -13607,7 +13996,7 @@ class PaypalClient {
       this.paypalButton = window.paypal.Buttons({
         fundingSource: window.paypal.FUNDING.PAYPAL,
         // button locale
-        locale: (_this$config$locale = this.config.locale) !== null && _this$config$locale !== void 0 ? _this$config$locale : this.siteInfo.default_locale,
+        locale: (_this$config$locale = this.config.locale) !== null && _this$config$locale !== void 0 ? _this$config$locale : getPageOrDefaultLanguage(),
         // button style
         style: (_this$config$style = this.config.style) !== null && _this$config$style !== void 0 ? _this$config$style : defaultButtonStyle,
         // create payment handler
@@ -13704,7 +14093,7 @@ class PaypalClient {
           } : undefined,
           shippingAddressEditable: this.config.shippingAddressEditable,
           displayName: (_this$config$displayN = this.config.displayName) !== null && _this$config$displayN !== void 0 ? _this$config$displayN : this.siteInfo.name,
-          locale: (_this$config$locale2 = this.config.locale) !== null && _this$config$locale2 !== void 0 ? _this$config$locale2 : this.siteInfo.default_locale
+          locale: (_this$config$locale2 = this.config.locale) !== null && _this$config$locale2 !== void 0 ? _this$config$locale2 : getPageOrDefaultLanguage()
         };
       }
     });
@@ -13713,7 +14102,7 @@ class PaypalClient {
       writable: true,
       value: () => {
         const totalAmount = (this.product.quantity || 1) * this.amount;
-        const priceFormatted = getFormattedPriceByLocal(totalAmount, this.product.currency, this.siteInfo.default_locale);
+        const priceFormatted = getFormattedPriceByLocal(totalAmount, this.product.currency, getPageOrDefaultLanguage());
         const autoRenewed = this.product.auto_renew;
         const {
           interval,
@@ -13756,7 +14145,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     product,
     plan,
@@ -13841,16 +14230,16 @@ const BankRedirection = () => {
   }));
 };
 
-var _path$f;
+var _path$h;
 
-function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 
 function SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -13867,7 +14256,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     switchView,
     selectedPaymentMethodId
@@ -13899,6 +14288,34 @@ const SelectedPaymentMethod = () => {
   }, t("select.buttons.changePaymentMethod")))));
 };
 
+const TaxAmount = () => {
+  var _plan$quantity;
+
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    state: {
+      taxAmount
+    }
+  } = React.useContext(store$d);
+  const {
+    plan
+  } = usePelcro();
+  const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
+  const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
+
+  if (taxAmount) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-text-center pelcro-tax-amount"
+    }, t("labels.tax"), " ", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-bold"
+    }, priceFormatted));
+  }
+
+  return null;
+};
+
 /**
  *
  */
@@ -13935,7 +14352,9 @@ function PaymentMethodView({
     onFailure: onFailure
   }, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-2"
+  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)))))));
 }
@@ -14042,12 +14461,12 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-var _path$e;
+var _path$g;
 
-function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 
 function SvgGift(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -14056,7 +14475,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -14387,6 +14806,292 @@ class DefaultNewsLetter extends React.Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
+const initialState$c = {
+  didSubToNewslettersBefore: false,
+  newsletters: [],
+  isListLoading: true,
+  isSubmitting: false,
+  alert: {
+    type: "error",
+    content: ""
+  }
+};
+const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const {
+  Provider: Provider$c
+} = store$c;
+
+const NewsletterUpdateContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  onFailure = () => {},
+  children
+}) => {
+  const [t] = useTranslation("newsletter");
+
+  const handleSubmit = ({
+    newsletters,
+    didSubToNewslettersBefore
+  }, dispatch) => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const callback = (err, res) => {
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+
+      if (err) {
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+        onFailure(err);
+      } else {
+        if (!didSubToNewslettersBefore) {
+          dispatch({
+            type: SWITCH_TO_UPDATE
+          });
+        }
+
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.success")
+          }
+        });
+        onSuccess(res);
+      }
+    };
+
+    const requestData = {
+      email: (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : window.Pelcro.helpers.getURLParameter("email"),
+      source: "web",
+      lists: newsletters.filter(newsletter => newsletter.selected).map(newsletter => newsletter.id).join(",")
+    };
+
+    if (didSubToNewslettersBefore) {
+      window.Pelcro.newsletter.update(requestData, callback);
+    } else {
+      window.Pelcro.newsletter.create(requestData, callback);
+    }
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case GET_NEWSLETTERS_FETCH:
+        return lib_7({ ...state,
+          isListLoading: true
+        });
+
+      case GET_NEWSLETTERS_SUCCESS:
+        return lib_7({ ...state,
+          newsletters: action.payload.newsletters,
+          didSubToNewslettersBefore: action.payload.didSubToNewslettersBefore,
+          isListLoading: false
+        });
+
+      case SET_SELECT:
+        return lib_7({ ...state,
+          newsletters: state.newsletters.map(newsletter => {
+            if (newsletter.id === action.payload) {
+              return { ...newsletter,
+                selected: !newsletter.selected
+              };
+            }
+
+            return newsletter;
+          })
+        });
+
+      case SWITCH_TO_UPDATE:
+        return lib_7({ ...state,
+          didSubToNewslettersBefore: true
+        });
+
+      case SHOW_ALERT:
+        return lib_7({ ...state,
+          alert: action.payload
+        });
+
+      case LOADING:
+        return lib_7({ ...state,
+          isSubmitting: action.payload
+        });
+
+      case HANDLE_SUBMIT:
+        return lib_5({ ...state,
+          isSubmitting: true
+        }, (state, dispatch) => handleSubmit(state, dispatch));
+
+      default:
+        return state;
+    }
+  }, initialState$c);
+  React.useEffect(() => {
+    const getUserNewsletters = () => {
+      var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+
+      dispatch({
+        type: GET_NEWSLETTERS_FETCH
+      });
+      const email = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : window.Pelcro.helpers.getURLParameter("email");
+      window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+        var _window$Pelcro$uiSett, _window$Pelcro, _window$Pelcro$uiSett2, _res$data$lists$split, _res$data$lists;
+
+        if (err) {
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+
+        const newsletters = (_window$Pelcro$uiSett = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett2 = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett2 === void 0 ? void 0 : _window$Pelcro$uiSett2.newsletters) !== null && _window$Pelcro$uiSett !== void 0 ? _window$Pelcro$uiSett : [];
+        const selectedNewsletters = (_res$data$lists$split = (_res$data$lists = res.data.lists) === null || _res$data$lists === void 0 ? void 0 : _res$data$lists.split(",")) !== null && _res$data$lists$split !== void 0 ? _res$data$lists$split : [];
+        const allNewslettersWithSelectedField = newsletters.map(newsletter => ({ ...newsletter,
+          id: String(newsletter.id),
+          selected: selectedNewsletters.includes(String(newsletter.id))
+        }));
+        dispatch({
+          type: GET_NEWSLETTERS_SUCCESS,
+          payload: {
+            newsletters: allNewslettersWithSelectedField,
+            didSubToNewslettersBefore: Boolean(res.data.email)
+          }
+        });
+      });
+    };
+
+    getUserNewsletters();
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-newsletter-update-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$c,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store: store$c
+  })));
+};
+
+const NewsletterUpdateButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch,
+    state: {
+      isSubmitting,
+      isListLoading
+    }
+  } = React.useContext(store$c);
+  const {
+    t
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isListLoading,
+    isLoading: isSubmitting
+  }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
+};
+
+const NewsletterUpdateList = () => {
+  const handleSelectNewsletter = event => {
+    dispatch({
+      type: SET_SELECT,
+      payload: event.target.value
+    });
+  };
+
+  const {
+    dispatch,
+    state: {
+      newsletters,
+      isListLoading
+    }
+  } = React.useContext(store$c);
+
+  if (isListLoading) {
+    return /*#__PURE__*/React__default['default'].createElement(Loader, {
+      width: 60,
+      height: 100
+    });
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-max-h-80 plc-overflow-y-auto pelcro-newsletters-wrapper"
+  }, newsletters.map(newsletter => /*#__PURE__*/React__default['default'].createElement("div", {
+    key: newsletter.id,
+    className: "plc-p-2 plc-mx-3 plc-mt-2 plc-border plc-border-gray-400 plc-border-solid plc-rounded plc-text-gray-900 pelcro-newsletter-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement(Checkbox, {
+    className: "pelcro-select-newsletter-checkbox",
+    labelClassName: "plc-cursor-pointer plc-w-full",
+    id: `pelcro-newsletter-update-${newsletter.id}`,
+    checked: newsletter.selected,
+    value: newsletter.id,
+    onChange: handleSelectNewsletter
+  }, newsletter.label))));
+};
+
+const NewsletterUpdateView = props => {
+  const {
+    t
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-newsletter-update-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("updateTitle"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateList, null), /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateButton, {
+    role: "submit",
+    className: "plc-mt-4 plc-w-full",
+    name: t("labels.submit"),
+    id: "pelcro-submit"
+  }))));
+};
+
+const NewsletterUpdateModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-newsletter-update-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+NewsletterUpdateModal.viewId = "newsletter-update";
+
 const MeterView = () => {
   var _paywallProduct$paywa, _paywallProduct$paywa2;
 
@@ -14438,7 +15143,7 @@ const MeterModal = props => {
     className: "plc-fixed plc-bottom-0 plc-right-0 plc-w-full plc-p-4 plc-bg-white plc-border-t-4 plc-rounded plc-shadow-md motion-safe:plc-animate-slideInBottom sm:plc-m-4 sm:plc-max-w-md plc-z-max plc-border-primary-500"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
     type: "button",
-    className: "plc-absolute plc-top-0 plc-text-2xl plc-text-gray-500 plc-right-1 pelcro-close-btn",
+    className: "plc-absolute plc-top-0 plc-text-2xl plc-text-gray-500 hover:plc-text-black focus:plc-text-black plc-right-1 plc-border-0 plc-bg-transparent hover:plc-bg-transparent focus:plc-bg-transparent pelcro-close-btn",
     "aria-label": "Close",
     onClick: onClose
   }, /*#__PURE__*/React__default['default'].createElement("span", null, "\xD7")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(MeterView, props)));
@@ -14471,10 +15176,7 @@ const SubscriptionCreateView = ({
       interval,
       count: interval_count
     });
-    const {
-      default_locale
-    } = Pelcro.site.read();
-    const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, default_locale);
+    const priceFormatted = getFormattedPriceByLocal((plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
     return /*#__PURE__*/React__default['default'].createElement("p", {
       className: "plc-text-gray-600"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
@@ -14774,17 +15476,17 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createEl
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$d;
+var _path$f;
 
-function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 
 function SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -17651,7 +18353,6 @@ const OrderConfirmModal = props => {
   const userOrders = window.Pelcro.user.read().orders;
   const latestOrder = userOrders === null || userOrders === void 0 ? void 0 : userOrders[userOrders.length - 1];
   const latestOrderDiscount = latestOrder === null || latestOrder === void 0 ? void 0 : (_latestOrder$coupon = latestOrder.coupon) === null || _latestOrder$coupon === void 0 ? void 0 : _latestOrder$coupon.percent_off;
-  const locale = window.Pelcro.site.read().default_locale;
   const {
     t
   } = useTranslation("shop");
@@ -17710,7 +18411,7 @@ const OrderConfirmModal = props => {
     className: "plc-mr-1 pelcro-summary-total-text"
   }, t("labels.total")), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "pelcro-summary-total"
-  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, locale)))), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, latestOrderDiscount && `(-${latestOrderDiscount}%) `, getFormattedPriceByLocal(latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.amount, latestOrder === null || latestOrder === void 0 ? void 0 : latestOrder.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-justify-center plc-mt-6"
   }, /*#__PURE__*/React__default['default'].createElement(Button, {
     id: "pelcro-submit",
@@ -17772,9 +18473,9 @@ const GiftCreateContainer = ({
     }
 
     if (giftRecipient.startDate) {
-      const nowDate = new Date();
-      const yearFromNowDate = new Date(new Date().setFullYear(nowDate.getFullYear() + 1));
-      const submittedDate = new Date(giftRecipient.startDate);
+      const nowDate = getDateWithoutTime(new Date());
+      const yearFromNowDate = getDateWithoutTime(new Date(new Date().setFullYear(nowDate.getFullYear() + 1)));
+      const submittedDate = getDateWithoutTime(new Date(giftRecipient.startDate));
 
       if (submittedDate < nowDate || submittedDate > yearFromNowDate) {
         dispatch({
@@ -17895,18 +18596,18 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].creat
   store: store$4
 }, props));
 
-var _path$c;
+var _path$e;
 
-function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 
 function SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-5 plc-h-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -18893,8 +19594,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$d() {
-  _extends$d = Object.assign || function (target) {
+function _extends$f() {
+  _extends$f = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -18908,7 +19609,7 @@ function _extends$d() {
     return target;
   };
 
-  return _extends$d.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -19092,7 +19793,7 @@ function render(props, propsBag, defaultTag, features, visible) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$d({}, _rest, {
+      return _render(_extends$f({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -19620,7 +20321,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['default'].createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$d({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$f({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -19664,7 +20365,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$d({}, sharedProps, {
+  }, render(_extends$f({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -19791,12 +20492,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -19815,7 +20516,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -19826,19 +20527,19 @@ var ActionTypes;
 
     return ((_item$dataRef$current = item.dataRef.current.textValue) == null ? void 0 : _item$dataRef$current.startsWith(searchQuery)) && !item.dataRef.current.disabled;
   });
-  if (match === -1 || match === state.activeItemIndex) return _extends$d({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$f({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -19851,7 +20552,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -19890,19 +20591,19 @@ var ActionTypes$1;
 (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -19923,7 +20624,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -19936,10 +20637,10 @@ var ActionTypes$1;
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$d({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$f({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -19947,11 +20648,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -19964,7 +20665,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -20025,18 +20726,18 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$b;
+var _path$d;
 
-function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20079,7 +20780,6 @@ const OrderItems = ({
   const {
     t
   } = useTranslation("dashboard");
-  const site = window.Pelcro.site.read();
   return !(orders !== null && orders !== void 0 && orders.length) ? /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
     colSpan: "3",
     className: "plc-text-center plc-text-gray-500"
@@ -20095,7 +20795,7 @@ const OrderItems = ({
       className: "plc-py-4 plc-pl-2"
     }, /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xl plc-font-semibold "
-    }, getFormattedPriceByLocal(order.amount, order.currency, site.default_locale)), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+    }, getFormattedPriceByLocal(order.amount, order.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "plc-text-xs plc-text-gray-400 plc-uppercase"
     }, t("labels.orders.itemsAmount", {
       count: getItemsAmount(order.id)
@@ -20124,7 +20824,7 @@ const OrderItems = ({
         className: ""
       }, item.product_sku_name))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
         className: "plc-font-semibold"
-      }, getFormattedPriceByLocal(item.amount, order.currency, site.default_locale))));
+      }, getFormattedPriceByLocal(item.amount, order.currency, getPageOrDefaultLanguage()))));
     }), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
       colSpan: "3"
     }, /*#__PURE__*/React__default['default'].createElement("hr", {
@@ -20253,33 +20953,291 @@ const SavedItems = ({
   });
 };
 
-/**
- * @typedef {Object} AccordionPropsType
- * @property {string} initialActiveMenu the initial active menu
- */
-
-/**
- * Accordion component
- * @param {AccordionPropsType} AccordionProps
- * @return {JSX}
- */
+var _path$c;
 
-const Accordion = ({
-  children,
-  initialActiveMenu = ""
-}) => {
-  const [activeMenu, setActiveMenu] = React.useState(initialActiveMenu);
+function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 
-  const toggleActiveMenu = menuToToggle => {
-    if (activeMenu === menuToToggle) {
-      setActiveMenu("");
-    } else {
-      setActiveMenu(menuToToggle);
-    }
-  };
+function SvgRefresh(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+  })));
+}
+
+var _path$b;
+
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+
+function SvgCalendar(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-4 plc-w-4 plc-mr-1",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
+    clipRule: "evenodd"
+  })));
+}
+
+var _path$a;
+
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+
+function SvgPlus(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+    className: "plc-w-5 plc-h-5",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
+  })));
+}
+
+var _path$9;
+
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+
+function SvgCheckMark(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+    clipRule: "evenodd"
+  })));
+}
+
+const SubscriptionsMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default['default'].createElement("table", {
+    className: "plc-w-full plc-table-fixed"
+  }, /*#__PURE__*/React__default['default'].createElement("thead", {
+    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
+  }, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.plan")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.status.title")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.actions")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-2/12 "
+  }))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
+    className: "plc-h-4"
+  })), /*#__PURE__*/React__default['default'].createElement(Accordion, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionsItems, props)), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
+    colSpan: "4",
+    className: "plc-p-1"
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
+    variant: "ghost",
+    icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
+      className: "plc-w-4 plc-h-4 plc-mr-1"
+    }),
+    className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
+    onClick: props.displayProductSelect
+  }, t("labels.addSubscription")))), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
+    colSpan: "4",
+    className: "plc-p-1"
+  }, /*#__PURE__*/React__default['default'].createElement(Button, {
+    variant: "ghost",
+    icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, {
+      className: "plc-w-4 plc-h-4 plc-mr-1"
+    }),
+    className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
+    onClick: props.displayRedeem
+  }, t("labels.redeemGift"))))));
+};
+const SubscriptionsItems = ({
+  onClose,
+  cancelSubscription,
+  reactivateSubscription,
+  setProductAndPlan,
+  setSubscriptionIdToRenew,
+  setView,
+  getSubscriptionStatus,
+  disableSubmit,
+  activeMenu,
+  toggleActiveMenu
+}) => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  const subs = window.Pelcro.subscription.list();
+  if (!subs || subs.length === 0) return null;
+  return window.Pelcro.subscription.list().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+    const isActive = activeMenu === sub.id; // Cancel button click handlers
+
+    const onCancelClick = () => {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      notify.confirm((onSuccess, onFailure) => {
+        cancelSubscription(sub.id, 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")
+      });
+    }; // Reactivate button click handlers
+
+
+    const onReactivateClick = () => {
+      reactivateSubscription(sub.id);
+    }; // Renew click
+
+
+    const onRenewClick = () => {
+      const product_id = sub.plan.product.id;
+      const plan_id = sub.plan.id;
+      const product = window.Pelcro.product.getById(product_id);
+      const plan = window.Pelcro.plan.getById(plan_id);
+      setProductAndPlan(product, plan);
+      setSubscriptionIdToRenew(sub.id);
+      setView("plan-select");
+    };
+
+    const getPhases = () => {
+      if (!sub.schedule) return [];
+      const currentPhaseStartDate = sub.schedule.current_phase.start_date;
+      const currentPhase = sub.schedule.phases.find(phase => {
+        return phase.start_date === currentPhaseStartDate;
+      });
+      const futurePhases = sub.schedule.phases.filter(phase => {
+        return phase.start_date > currentPhaseStartDate;
+      });
+      return [currentPhase, ...futurePhases];
+    };
+
+    const hasPhases = getPhases().length > 0;
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
+      key: sub.id
+    }, /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
+      onClick: () => toggleActiveMenu(sub.id),
+      key: sub.id,
+      className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header ${isActive ? "plc-bg-gray-100" : "hover:plc-bg-gray-50"}`
+    }, /*#__PURE__*/React__default['default'].createElement("td", {
+      className: "plc-truncate"
+    }, sub.plan.nickname && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-semibold plc-text-gray-500"
+    }, sub.plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-text-xs plc-text-gray-400"
+    }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default['default'].createElement("td", {
+      className: "plc-py-2"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getSubscriptionStatus(sub).bgColor} plc-uppercase ${getSubscriptionStatus(sub).textColor} plc-rounded-lg`
+    }, getSubscriptionStatus(sub).icon, getSubscriptionStatus(sub).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-text-xs plc-text-gray-500"
+    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-inline-block plc-mt-1 plc-underline"
+    }, getSubscriptionStatus(sub).content), /*#__PURE__*/React__default['default'].createElement("br", null), sub.shipments_remaining ? /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-inline-block plc-mt-1"
+    }, sub.shipments_remaining, " ", t("labels.shipments")) : null)), /*#__PURE__*/React__default['default'].createElement("td", null, sub.cancel_at_period_end === 0 && /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
+      onClick: onCancelClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.unsubscribe")), sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-green-400 focus:plc-ring-green-300 pelcro-dashboard-sub-reactivate-button",
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
+      onClick: onReactivateClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
+      onClick: onRenewClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.renew"))), /*#__PURE__*/React__default['default'].createElement("td", null, hasPhases && /*#__PURE__*/React__default['default'].createElement("div", {
+      className: `plc-flex plc-items-center plc-justify-center plc-transition-transform plc-ease-out plc-transform plc-rounded-full plc-w-7 plc-h-7 ${isActive ? "plc-flex plc-place-items-center plc-w-7 plc-h-7 plc-p-1 plc-bg-primary-400 plc-rounded-full" : "accordion-chevron"}`
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: `plc-transition plc-ease-out  ${isActive && "plc-text-white plc-transform plc-rotate-90"}`
+    }, /*#__PURE__*/React__default['default'].createElement(SvgChevronRight, null)))))), /*#__PURE__*/React__default['default'].createElement("tbody", null, isActive && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getPhases().map((phase, i) => {
+      var _phase$plans;
+
+      const plan = (_phase$plans = phase.plans) === null || _phase$plans === void 0 ? void 0 : _phase$plans[0].plan;
+      const isCurrentPhase = i === 0;
+      const startDate = new Date(Number(`${phase.start_date}000`));
+      const endDate = new Date(Number(`${phase.end_date}000`));
+      const formattedStartDate = new Intl.DateTimeFormat("en-CA").format(startDate);
+      const formattedEndDate = new Intl.DateTimeFormat("en-CA").format(endDate);
+      const startDateString = `${t("labels.startsOn")} ${formattedStartDate}`;
+      const endDateString = `${t("labels.expiresOn")} ${formattedEndDate}`;
+      return /*#__PURE__*/React__default['default'].createElement("tr", {
+        key: `${phase.start_date}-${phase.end_date}`,
+        className: "pelcro-sub-phase-row plc-w-full plc-align-middle"
+      }, /*#__PURE__*/React__default['default'].createElement("td", {
+        className: "plc-truncate"
+      }, plan.nickname && /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "plc-font-semibold plc-text-gray-500"
+      }, plan.nickname)), /*#__PURE__*/React__default['default'].createElement("td", {
+        className: "plc-py-2"
+      }, /*#__PURE__*/React__default['default'].createElement("span", {
+        className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold plc-uppercase plc-rounded-lg ${isCurrentPhase ? "plc-text-green-700 plc-bg-green-100" : "plc-text-blue-700 plc-bg-blue-100"}
+                             `
+      }, isCurrentPhase ? /*#__PURE__*/React__default['default'].createElement(SvgCheckMark, null) : /*#__PURE__*/React__default['default'].createElement(SvgCalendar, null), isCurrentPhase ? t("labels.status.active") : t("labels.status.scheduled")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-text-xs plc-text-gray-500"
+      }, /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "plc-inline-block plc-mt-1 plc-underline"
+      }, isCurrentPhase ? endDateString : startDateString))));
+    }), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
+      colSpan: "4"
+    }, /*#__PURE__*/React__default['default'].createElement("hr", {
+      className: "plc-mt-4"
+    }))))));
+  });
+};
+
+/**
+ * @typedef {Object} AccordionPropsType
+ * @property {string} initialActiveMenu the initial active menu
+ */
+
+/**
+ * Accordion component
+ * @param {AccordionPropsType} AccordionProps
+ * @return {JSX}
+ */
+
+const Accordion = ({
+  children,
+  initialActiveMenu = ""
+}) => {
+  const [activeMenu, setActiveMenu] = React.useState(initialActiveMenu);
+
+  const toggleActiveMenu = menuToToggle => {
+    if (activeMenu === menuToToggle) {
+      setActiveMenu("");
+    } else {
+      setActiveMenu(menuToToggle);
+    }
+  };
 
   return React__default['default'].Children.map(children, (child, i) => {
-    if (child.type === Accordion.item || child.type === OrderItems || child.type === SavedItems) {
+    if (child.type === Accordion.item || child.type === OrderItems || child.type === SavedItems || child.type === SubscriptionsItems) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
         activeMenu,
         toggleActiveMenu,
@@ -20335,18 +21293,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$a;
+var _path$8;
 
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20354,34 +21312,17 @@ function SvgExit(props) {
   })));
 }
 
-var _path$9;
-
-function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-
-function SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-    clipRule: "evenodd"
-  })));
-}
-
-var _path$8;
+var _path$7;
 
-function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20389,37 +21330,37 @@ function SvgUser(props) {
   })));
 }
 
-var _path$7;
+var _path$6;
 
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 
-function SvgRefresh(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
+function SvgNewsletter(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
   })));
 }
 
-var _path$6;
+var _path$5;
 
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 
 function SvgPaymentCard(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20427,18 +21368,18 @@ function SvgPaymentCard(props) {
   })));
 }
 
-var _path$5, _path2;
+var _path$4, _path2;
 
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 
 function SvgLocationPin(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20453,10 +21394,10 @@ function SvgLocationPin(props) {
 
 var _switch;
 
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 
 function SvgSubscription(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -20471,30 +21412,11 @@ function SvgSubscription(props) {
   }))))));
 }
 
-var _path$4;
-
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-
-function SvgShopping(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-  })));
-}
-
 var _path$3;
 
 function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 
-function SvgBookmark(props) {
+function SvgShopping(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
@@ -20505,7 +21427,7 @@ function SvgBookmark(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
   })));
 }
 
@@ -20513,9 +21435,9 @@ var _path$2;
 
 function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
-function SvgPlus(props) {
+function SvgBookmark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
-    className: "plc-w-5 plc-h-5",
+    className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -20524,7 +21446,7 @@ function SvgPlus(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
+    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
   })));
 }
 
@@ -20624,6 +21546,24 @@ class Dashboard extends React.Component {
       });
     });
 
+    _defineProperty$3(this, "componentWillUnmount", () => {
+      document.removeEventListener("click", this.hideMenuIfClickedOutside);
+    });
+
+    _defineProperty$3(this, "initializeHideMenuHandler", () => {
+      document.addEventListener("click", this.hideMenuIfClickedOutside);
+    });
+
+    _defineProperty$3(this, "hideMenuIfClickedOutside", event => {
+      const didClickOutsideMenu = this.state.isOpen && this.menuRef.current && !this.menuRef.current.contains(event.target);
+
+      if (didClickOutsideMenu) {
+        this.setState({
+          isOpen: false
+        });
+      }
+    });
+
     _defineProperty$3(this, "cancelSubscription", (subscription_id, onSuccess, onFailure) => {
       // disable the Login button to prevent repeated clicks
       window.Pelcro.subscription.cancel({
@@ -20661,6 +21601,10 @@ class Dashboard extends React.Component {
       return this.props.setView("password-change");
     });
 
+    _defineProperty$3(this, "displayNewsletterUpdate", () => {
+      return this.props.setView("newsletter-update");
+    });
+
     _defineProperty$3(this, "displayProductSelect", ({
       isGift
     }) => {
@@ -20766,116 +21710,6 @@ class Dashboard extends React.Component {
       };
     });
 
-    _defineProperty$3(this, "renderSubscriptions", () => {
-      var _this$state$subscript;
-
-      const subscriptions = (_this$state$subscript = this.state.subscriptions) === null || _this$state$subscript === void 0 ? void 0 : _this$state$subscript.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
-        // Cancel button click handlers
-        const onCancelClick = () => {
-          this.props.onClose();
-          notify.confirm((onSuccess, onFailure) => {
-            this.cancelSubscription(sub.id, onSuccess, onFailure);
-          }, {
-            confirmMessage: this.locale("messages.subCancellation.isSureToCancel"),
-            loadingMessage: this.locale("messages.subCancellation.loading"),
-            successMessage: this.locale("messages.subCancellation.success"),
-            errorMessage: this.locale("messages.subCancellation.error")
-          }, {
-            closeButtonLabel: this.locale("labels.subCancellation.goBack")
-          });
-        }; // Reactivate button click handlers
-
-
-        const onReactivateClick = () => {
-          this.reactivateSubscription(sub.id);
-        }; // Renew click
-
-
-        const onRenewClick = () => {
-          const product_id = sub.plan.product.id;
-          const plan_id = sub.plan.id;
-          const product = window.Pelcro.product.getById(product_id);
-          const plan = window.Pelcro.plan.getById(plan_id);
-          this.props.setProductAndPlan(product, plan);
-          this.props.setSubscriptionIdToRenew(sub.id);
-          this.props.setView("plan-select");
-        };
-
-        return /*#__PURE__*/React__default['default'].createElement("tr", {
-          key: "dashboard-subscription-" + sub.id,
-          className: "plc-w-full plc-align-top"
-        }, /*#__PURE__*/React__default['default'].createElement("td", {
-          className: "plc-truncate"
-        }, sub.plan.nickname && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "plc-font-semibold plc-text-gray-500"
-        }, sub.plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "plc-text-xs plc-text-gray-400"
-        }, getFormattedPriceByLocal(sub.plan.amount, sub.plan.currency, this.site.default_locale)))), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
-          className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${this.getSubscriptionStatus(sub).bgColor} plc-uppercase ${this.getSubscriptionStatus(sub).textColor} plc-rounded-lg`
-        }, this.getSubscriptionStatus(sub).icon, this.getSubscriptionStatus(sub).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: "plc-mb-4 plc-text-xs plc-text-gray-500"
-        }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "plc-inline-block plc-mt-1 plc-underline"
-        }, this.getSubscriptionStatus(sub).content), /*#__PURE__*/React__default['default'].createElement("br", null), sub.shipments_remaining ? /*#__PURE__*/React__default['default'].createElement("span", {
-          className: "plc-inline-block plc-mt-1"
-        }, sub.shipments_remaining, " ", this.locale("labels.shipments")) : null)), /*#__PURE__*/React__default['default'].createElement("td", null, sub.cancel_at_period_end === 0 && /*#__PURE__*/React__default['default'].createElement(Button, {
-          variant: "ghost",
-          className: "plc-text-red-500 focus:plc-ring-red-500",
-          icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
-          onClick: onCancelClick,
-          disabled: this.state.disableSubmit,
-          "data-key": sub.id
-        }, this.locale("labels.unsubscribe")), sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default['default'].createElement(Button, {
-          variant: "ghost",
-          className: "plc-text-green-400 focus:plc-ring-green-300",
-          icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
-          onClick: onReactivateClick,
-          disabled: this.state.disableSubmit,
-          "data-key": sub.id
-        }, this.locale("labels.reactivate")), sub.cancel_at_period_end === 1 && /*#__PURE__*/React__default['default'].createElement(Button, {
-          variant: "ghost",
-          className: "plc-text-blue-400",
-          icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
-          onClick: onRenewClick,
-          disabled: this.state.disableSubmit,
-          "data-key": sub.id
-        }, this.locale("labels.renew"))));
-      });
-      return /*#__PURE__*/React__default['default'].createElement("table", {
-        className: "plc-w-full plc-table-fixed"
-      }, /*#__PURE__*/React__default['default'].createElement("thead", {
-        className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
-      }, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
-        className: "plc-w-5/12 "
-      }, this.locale("labels.plan")), /*#__PURE__*/React__default['default'].createElement("th", {
-        className: "plc-w-4/12 "
-      }, this.locale("labels.status.title")), /*#__PURE__*/React__default['default'].createElement("th", {
-        className: "plc-w-3/12 "
-      }, this.locale("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
-        className: "plc-h-4"
-      }), subscriptions, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
-        colSpan: "4",
-        className: "plc-p-1"
-      }, /*#__PURE__*/React__default['default'].createElement(Button, {
-        variant: "ghost",
-        icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
-          className: "plc-w-4 plc-h-4 plc-mr-1"
-        }),
-        className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
-        onClick: this.displayProductSelect
-      }, this.locale("labels.addSubscription")))), /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", {
-        colSpan: "4",
-        className: "plc-p-1"
-      }, /*#__PURE__*/React__default['default'].createElement(Button, {
-        variant: "ghost",
-        icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, {
-          className: "plc-w-4 plc-h-4 plc-mr-1"
-        }),
-        className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase plc-rounded-none hover:plc-bg-gray-100",
-        onClick: this.displayRedeem
-      }, this.locale("labels.redeemGift"))))));
-    });
-
     _defineProperty$3(this, "renderGiftRecipients", () => {
       var _giftRecipients$sort, _giftRecipients$sort$;
 
@@ -20913,7 +21747,7 @@ class Dashboard extends React.Component {
           className: "plc-font-semibold plc-text-gray-500"
         }, recipient.plan.nickname), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-text-xs plc-text-gray-400"
-        }, getFormattedPriceByLocal(recipient.plan.amount, recipient.plan.currency, this.site.default_locale)))), recipient.status && /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
+        }, getFormattedPriceByLocal(recipient.plan.amount, recipient.plan.currency, getPageOrDefaultLanguage())))), recipient.status && /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("span", {
           className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${this.getSubscriptionStatus(recipient).bgColor} plc-uppercase ${this.getSubscriptionStatus(recipient).textColor} plc-rounded-lg`
         }, this.getSubscriptionStatus(recipient).icon, this.getSubscriptionStatus(recipient).title), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-mb-4 plc-text-xs plc-text-gray-500"
@@ -21015,28 +21849,33 @@ class Dashboard extends React.Component {
     this.site = window.Pelcro.site.read();
     this.locale = this.props.t;
     this.user = window.Pelcro.user.read();
+    this.menuRef = /*#__PURE__*/React__default['default'].createRef();
   }
 
   render() {
-    var _window$Pelcro$user$r3, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;
+    var _window$Pelcro$user$r3, _window$Pelcro, _window$Pelcro$uiSett, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;
 
     const {
       isOpen
     } = this.state;
     const userHasName = this.user.first_name || this.user.last_name;
     const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
+    const newsletters = (_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.newsletters;
+    const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     return /*#__PURE__*/React__default['default'].createElement(Transition, {
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full plc-max-w-xl plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
       show: isOpen,
       enter: "plc-transform plc-transition plc-duration-500",
       enterFrom: "plc-translate-x-full",
       enterTo: "plc-translate-x-0",
+      afterEnter: this.initializeHideMenuHandler,
       leave: "plc-transform plc-transition plc-duration-500",
       leaveFrom: "plc-translate-x-0",
       leaveTo: "plc-translate-x-full",
       afterLeave: this.props.onClose
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "pelcro-view-dashboard"
+      id: "pelcro-view-dashboard",
+      ref: this.menuRef
     }, /*#__PURE__*/React__default['default'].createElement("header", {
       className: "plc-flex plc-flex-col plc-p-4 plc-pl-2 plc-min-h-40 sm:plc-pr-8 plc-bg-primary-500"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -21099,7 +21938,14 @@ class Dashboard extends React.Component {
         }),
         className: "plc-text-sm plc-text-gray-500 hover:plc-text-primary-700",
         onClick: this.displayChangePassword
-      }, this.locale("labels.changePassword")))
+      }, this.locale("labels.changePassword")), siteHasNewslettersDefined && /*#__PURE__*/React__default['default'].createElement(Button, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgNewsletter, {
+          className: "plc-w-5 plc-h-5 plc-mr-1"
+        }),
+        className: "plc-text-sm plc-text-gray-500 hover:plc-text-primary-700",
+        onClick: this.displayNewsletterUpdate
+      }, this.locale("labels.editNewsletters")))
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.PAYMENT_CARDS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgPaymentCard, null),
@@ -21138,7 +21984,18 @@ class Dashboard extends React.Component {
         className: "plc-w-10 plc-h-10 plc-pt-2 plc-pr-1 plc--ml-2"
       }),
       title: this.locale("labels.subscriptions"),
-      content: this.renderSubscriptions()
+      content: /*#__PURE__*/React__default['default'].createElement(SubscriptionsMenu, {
+        onClose: this.props.onClose,
+        cancelSubscription: this.cancelSubscription,
+        reactivateSubscription: this.reactivateSubscription,
+        setProductAndPlan: this.props.setProductAndPlan,
+        setSubscriptionIdToRenew: this.props.setSubscriptionIdToRenew,
+        setView: this.props.setView,
+        getSubscriptionStatus: this.getSubscriptionStatus,
+        disableSubmit: this.state.disableSubmit,
+        displayProductSelect: this.displayProductSelect,
+        displayRedeem: this.displayRedeem
+      })
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.GIFTS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, null),
@@ -21175,7 +22032,7 @@ const DashboardOpenButton = () => {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-fixed plc-right-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
-    className: "plc-bg-white plc-border-2 plc-rounded-full focus:plc-outline-none plc-border-primary-300",
+    className: "plc-bg-white plc-border-2 plc-rounded-full focus:plc-outline-none plc-border-primary-300 hover:plc-bg-white",
     name: "menu",
     id: "pelcro-view-menu",
     onClick: () => switchView("dashboard")
@@ -23040,6 +23897,7 @@ exports.AddressUpdateSubmit = AddressUpdateSubmit;
 exports.AddressUpdateTextInput = AddressUpdateTextInput;
 exports.AddressUpdateView = AddressUpdateView;
 exports.Alert = AlertWithContext;
+exports.AlertElement = Alert;
 exports.ApplyCouponButton = ApplyCouponButton;
 exports.Badge = Badge;
 exports.BankRedirection = BankRedirection;
@@ -23091,6 +23949,11 @@ exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.NewsLetter = NewsletterWithHook;
+exports.NewsletterUpdateButton = NewsletterUpdateButton;
+exports.NewsletterUpdateContainer = NewsletterUpdateContainer;
+exports.NewsletterUpdateList = NewsletterUpdateList;
+exports.NewsletterUpdateModal = NewsletterUpdateModal;
+exports.NewsletterUpdateView = NewsletterUpdateView;
 exports.Notification = Notification;
 exports.OrderConfirmModal = OrderConfirmModal;
 exports.OrderCreateContainer = OrderCreateContainer;
@@ -23169,6 +24032,7 @@ exports.SubscriptionCreateView = SubscriptionCreateView;
 exports.SubscriptionRenewContainer = SubscriptionRenewContainer;
 exports.SubscriptionRenewModal = SubscriptionRenewModal;
 exports.SubscriptionRenewView = SubscriptionRenewView;
+exports.TaxAmount = TaxAmount;
 exports.TextArea = TextArea;
 exports.Tooltip = Tooltip;
 exports.UserUpdateButton = UserUpdateButton;