@pelcro/react-pelcro-js 2.4.0 → 2.6.0-beta.11

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,
@@ -3658,12 +3658,14 @@ var cancel$1 = "Cancel your subscription online at anytime.";
 var giftSent$1 = "Subscription gift has been sent to";
 var successfully$1 = "successfully";
 var entitlement$1 = "Some of the content on this page is available with one or more of our plans. <1>Subscribe</1> now to get full page access.";
+var recaptcha$1 = "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <3>Terms of Service</3> apply.";
 var messages_en = {
 	youAreSafe: youAreSafe$1,
 	cancel: cancel$1,
 	giftSent: giftSent$1,
 	successfully: successfully$1,
-	entitlement: entitlement$1
+	entitlement: entitlement$1,
+	recaptcha: recaptcha$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3671,12 +3673,14 @@ var cancel = "Annuler votre abonnement en ligne à tout moment.";
 var giftSent = "Le cadeau d’abonnement a été envoyé à";
 var successfully = "avec succès.";
 var entitlement = "Une partie du contenu de cette page est disponible sous un ou plusieurs de nos plans. <1>Abonnez-vous</1> à l'un de nos plans disponibles pour accéder à plus de contenu";
+var recaptcha = "Ce site est protégé par reCAPTCHA - les <1>règles de confidentialité</1> Google ainsi que les <3>conditions d'utilisation</3> s'appliquent.";
 var messages_fr = {
 	youAreSafe: youAreSafe,
 	cancel: cancel,
 	giftSent: giftSent,
 	successfully: successfully,
-	entitlement: entitlement
+	entitlement: entitlement,
+	recaptcha: recaptcha
 };
 
 var labels$f = {
@@ -4359,7 +4363,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 +4380,7 @@ var labels$3 = {
 	profile: "Profile",
 	updateProfile: "Edit profile",
 	changePassword: "Change password",
+	editNewsletters: "Edit newsletters",
 	edit: "Edit",
 	gifts: "Gifts",
 	redeemGift: "Redeem gift",
@@ -4384,6 +4390,7 @@ var labels$3 = {
 	paymentSource: "Payment cards",
 	actions: "Actions",
 	expiresOn: "Ends",
+	startsOn: "Starts",
 	renewsOn: "Renews",
 	canceledOn: "Canceled on",
 	recipient: "Recipient",
@@ -4435,7 +4442,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 +4459,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 +4469,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 +4502,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 +5937,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$f;
+      } = initialState$g;
       this.set(otherStateFields);
     });
 
@@ -6217,7 +6227,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$f = {
+const initialState$g = {
   // View
   view: null,
   // Plans
@@ -6245,7 +6255,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$f,
+    ...initialState$g,
     // State actions
     ...actions,
     // Callbacks
@@ -6325,13 +6335,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 +6372,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 +6397,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 +6406,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 +6474,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 +6496,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 +6524,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 +6592,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 +6627,7 @@ const resources = {
     select: select_en,
     notification: notification_en
   },
-  "fr-CA": {
+  fr: {
     common: common_fr,
     paymentMethod: paymentMethod_fr,
     newsletter: newsletter_fr,
@@ -6577,13 +6649,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 +6667,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 +6929,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 +6944,7 @@ function _extends$t() {
     return target;
   };
 
-  return _extends$t.apply(this, arguments);
+  return _extends$v.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -6951,7 +7034,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 +7044,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 +7073,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 +7083,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 +7151,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 +7166,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 +7216,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 +7562,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 +7592,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 +7619,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 +7654,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 +7955,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) {
@@ -8197,6 +8290,175 @@ 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
@@ -8222,6 +8484,7 @@ const optionsController = options => {
     enableURLTriggers: initViewFromURL,
     enableTheme: applyPelcroTheme,
     enablePaywalls: initPaywalls,
+    loadSecuritySDK: initSecuritySdk,
     enableGoogleAnalytics: initGATracking
   }; // Only execute enabled options
 
@@ -8266,8 +8529,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);
 
@@ -8276,6 +8546,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;
 
@@ -8362,9 +8644,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;
@@ -8563,6 +8845,7 @@ const defaultOptions = {
   enableURLTriggers: true,
   enableTheme: true,
   enablePaywalls: true,
+  loadSecuritySDK: true,
   enableGoogleAnalytics: false
 };
 const PelcroModalController = ({
@@ -8861,6 +9144,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";
@@ -8889,6 +9173,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
@@ -8950,7 +9237,7 @@ const debounce = (func, waitTime) => {
   };
 };
 
-const initialState$e = {
+const initialState$f = {
   email: "",
   password: "",
   emailError: null,
@@ -8961,10 +9248,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,
@@ -9071,7 +9358,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$e;
+        return initialState$f;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9089,12 +9376,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
@@ -9102,12 +9389,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
   })));
 };
 
@@ -9352,7 +9639,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("login");
@@ -9373,23 +9660,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"
@@ -9454,7 +9741,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$d = {
+const initialState$e = {
   email: "",
   password: "",
   emailError: null,
@@ -9471,10 +9758,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,
@@ -9499,35 +9786,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$1()) {
+      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 = ({
@@ -9639,7 +9944,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$d;
+        return initialState$e;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -9657,12 +9962,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
@@ -9670,24 +9975,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}
+ */
 
-var _path$k;
+function hasSecurityTokenEnabled$1() {
+  const hasSecuritySdkLoaded = Boolean(window.grecaptcha);
+  return hasSecuritySdkLoaded;
+}
 
-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); }
+var _path$m;
+
+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"
   })));
@@ -9699,15 +10013,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({
@@ -9738,7 +10052,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,
@@ -9760,15 +10074,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", {
@@ -9794,10 +10108,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;
@@ -9902,15 +10216,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"
@@ -10057,18 +10371,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,
@@ -10078,7 +10395,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("register");
@@ -10094,7 +10411,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"));
 };
 
@@ -10213,7 +10533,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function LastName({
@@ -10244,7 +10564,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 /**
@@ -10298,7 +10618,17 @@ function RegisterView(props) {
     className: "plc-w-full plc-mt-2",
     id: "pelcro-submit",
     name: t("messages.createAccount")
-  }), socialLoginEnabled && /*#__PURE__*/React__default['default'].createElement("div", {
+  }), hasSecurityTokenEnabled() && /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-gray-500 plc-mt-1"
+  }, /*#__PURE__*/React__default['default'].createElement(Trans, {
+    i18nKey: "messages:recaptcha"
+  }, "This site is protected by reCAPTCHA and the Google", /*#__PURE__*/React__default['default'].createElement(Link, {
+    href: "https://policies.google.com/privacy",
+    className: "plc-text-sm plc-text-gray-500"
+  }, "Privacy Policy"), "and", /*#__PURE__*/React__default['default'].createElement(Link, {
+    href: "https://policies.google.com/terms",
+    className: "plc-text-sm plc-text-gray-500"
+  }, "Terms of Service"), "apply.")), socialLoginEnabled && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mt-5"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-justify-between "
@@ -10312,6 +10642,16 @@ function RegisterView(props) {
     className: "plc-flex plc-justify-center plc-px-5 plc-mt-1 plc-space-x-3"
   }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null))))));
 }
+/**
+ * Checks if the current site has security token enabled
+ * @return {boolean}
+ */
+
+function hasSecurityTokenEnabled() {
+  var _window$Pelcro$site, _window$Pelcro$site$r3;
+
+  return Boolean((_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r3 = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.security_key);
+}
 
 function TextInput({
   store,
@@ -10348,7 +10688,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -12313,13 +12653,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,
@@ -12331,16 +12672,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,
@@ -12381,6 +12723,7 @@ const PaymentMethodContainerWithoutStripe = ({
     dispatch({
       type: INIT_CONTAINER
     });
+    updateTotalAmountWithTax();
   }, []);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -12447,6 +12790,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 {
@@ -12473,6 +12855,10 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
+      dispatch({
+        type: SET_COUPON_ERROR,
+        payload: ""
+      });
       dispatch({
         type: SHOW_ALERT,
         payload: {
@@ -12488,6 +12874,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
@@ -12497,6 +12887,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,
@@ -12883,16 +13296,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);
@@ -12901,15 +13318,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) {
@@ -12922,14 +13339,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
+        });
       });
     });
   };
@@ -12984,13 +13405,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);
       }
     }
@@ -13118,6 +13539,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
@@ -13135,7 +13561,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
       case SET_COUPON:
         return lib_7({ ...state,
-          coupon: action.payload
+          couponObject: action.payload
         });
 
       case SET_COUPON_ERROR:
@@ -13161,34 +13587,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))));
   }
 
@@ -13241,7 +13676,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.
@@ -13294,24 +13729,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 "";
@@ -13336,13 +13772,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",
@@ -13360,17 +13793,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,
@@ -13389,7 +13822,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13423,7 +13856,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -13441,6 +13874,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"),
@@ -13451,17 +13885,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,
@@ -13478,7 +13912,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13492,16 +13926,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)));
 };
 
@@ -13586,7 +14020,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
@@ -13683,7 +14117,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()
         };
       }
     });
@@ -13692,7 +14126,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,
@@ -13735,7 +14169,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     product,
     plan,
@@ -13820,16 +14254,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"
@@ -13846,7 +14280,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     switchView,
     selectedPaymentMethodId
@@ -13878,6 +14312,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;
+};
+
 /**
  *
  */
@@ -13914,7 +14376,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)))))));
 }
@@ -14021,12 +14485,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",
@@ -14035,7 +14499,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"
   })));
 }
@@ -14366,44 +14830,330 @@ class DefaultNewsLetter extends React.Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const MeterView = () => {
-  var _paywallProduct$paywa, _paywallProduct$paywa2;
-
-  const {
-    t
-  } = useTranslation("meter");
-  const {
-    switchView,
-    product,
-    isAuthenticated
-  } = usePelcro();
-  const paywallProduct = product !== null && product !== void 0 ? product : window.Pelcro.paywall.getProduct();
-  const visitsLeft = window.Pelcro.paywall.freeVisitsLeft();
-  const title = `${paywallProduct === null || paywallProduct === void 0 ? void 0 : (_paywallProduct$paywa = paywallProduct.paywall) === null || _paywallProduct$paywa === void 0 ? void 0 : _paywallProduct$paywa.meter_title}: ${visitsLeft}`;
-  const subtitle = paywallProduct === null || paywallProduct === void 0 ? void 0 : (_paywallProduct$paywa2 = paywallProduct.paywall) === null || _paywallProduct$paywa2 === void 0 ? void 0 : _paywallProduct$paywa2.meter_subtitle;
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h4", {
-    className: "plc-mb-2 plc-text-2xl plc-font-semibold plc-text-gray-600"
-  }, title), /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "plc-text-sm plc-text-gray-600"
-  }, subtitle, " ", /*#__PURE__*/React__default['default'].createElement(Link, {
-    className: "plc-ml-1",
-    onClick: () => switchView("plan-select")
-  }, t("messages.subscribeNow")), !isAuthenticated() && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", null, t("messages.alreadyHaveAccount") + " ", /*#__PURE__*/React__default['default'].createElement(Link, {
-    className: "plc-ml-1",
-    onClick: () => switchView("login")
-  }, t("messages.loginHere"))))));
+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;
 
-// Meter view.
-const MeterModal = props => {
-  const {
-    resetView
-  } = usePelcro();
-  React.useEffect(() => {
-    var _props$onDisplay;
-
-    (_props$onDisplay = props.onDisplay) === null || _props$onDisplay === void 0 ? void 0 : _props$onDisplay.call(props);
-  }, []);
+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;
+
+  const {
+    t
+  } = useTranslation("meter");
+  const {
+    switchView,
+    product,
+    isAuthenticated
+  } = usePelcro();
+  const paywallProduct = product !== null && product !== void 0 ? product : window.Pelcro.paywall.getProduct();
+  const visitsLeft = window.Pelcro.paywall.freeVisitsLeft();
+  const title = `${paywallProduct === null || paywallProduct === void 0 ? void 0 : (_paywallProduct$paywa = paywallProduct.paywall) === null || _paywallProduct$paywa === void 0 ? void 0 : _paywallProduct$paywa.meter_title}: ${visitsLeft}`;
+  const subtitle = paywallProduct === null || paywallProduct === void 0 ? void 0 : (_paywallProduct$paywa2 = paywallProduct.paywall) === null || _paywallProduct$paywa2 === void 0 ? void 0 : _paywallProduct$paywa2.meter_subtitle;
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-mb-2 plc-text-2xl plc-font-semibold plc-text-gray-600"
+  }, title), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-text-sm plc-text-gray-600"
+  }, subtitle, " ", /*#__PURE__*/React__default['default'].createElement(Link, {
+    className: "plc-ml-1",
+    onClick: () => switchView("plan-select")
+  }, t("messages.subscribeNow")), !isAuthenticated() && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", null, t("messages.alreadyHaveAccount") + " ", /*#__PURE__*/React__default['default'].createElement(Link, {
+    className: "plc-ml-1",
+    onClick: () => switchView("login")
+  }, t("messages.loginHere"))))));
+};
+
+// Meter view.
+const MeterModal = props => {
+  const {
+    resetView
+  } = usePelcro();
+  React.useEffect(() => {
+    var _props$onDisplay;
+
+    (_props$onDisplay = props.onDisplay) === null || _props$onDisplay === void 0 ? void 0 : _props$onDisplay.call(props);
+  }, []);
 
   const onClose = () => {
     var _props$onClose;
@@ -14417,7 +15167,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)));
@@ -14450,10 +15200,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", {
@@ -14753,17 +15500,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"
   })));
 }
@@ -17630,7 +18377,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");
@@ -17689,7 +18435,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",
@@ -17751,9 +18497,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({
@@ -17874,18 +18620,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,
@@ -18872,8 +19618,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];
 
@@ -18887,7 +19633,7 @@ function _extends$d() {
     return target;
   };
 
-  return _extends$d.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -19071,7 +19817,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'
@@ -19599,7 +20345,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) {
@@ -19643,7 +20389,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)));
@@ -19770,12 +20516,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) {
@@ -19794,7 +20540,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -19805,19 +20551,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
@@ -19830,7 +20576,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;
@@ -19869,19 +20615,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) {
@@ -19902,7 +20648,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$f({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -19915,10 +20661,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
   });
@@ -19926,11 +20672,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
@@ -19943,7 +20689,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;
@@ -20004,18 +20750,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,
@@ -20058,7 +20804,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"
@@ -20074,7 +20819,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)
@@ -20103,7 +20848,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", {
@@ -20232,9 +20977,267 @@ const SavedItems = ({
   });
 };
 
-/**
- * @typedef {Object} AccordionPropsType
- * @property {string} initialActiveMenu the initial active menu
+var _path$c;
+
+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); }
+
+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
  */
 
 /**
@@ -20258,7 +21261,7 @@ const Accordion = ({
   };
 
   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,
@@ -20314,18 +21317,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,
@@ -20333,34 +21336,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,
@@ -20368,37 +21354,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,
@@ -20406,18 +21392,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,
@@ -20432,10 +21418,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"
@@ -20450,30 +21436,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",
@@ -20484,7 +21451,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"
   })));
 }
 
@@ -20492,9 +21459,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",
@@ -20503,7 +21470,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"
   })));
 }
 
@@ -20603,6 +21570,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({
@@ -20640,6 +21625,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
     }) => {
@@ -20745,116 +21734,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$;
 
@@ -20892,7 +21771,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"
@@ -20994,28 +21873,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", {
@@ -21078,7 +21962,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),
@@ -21117,7 +22008,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),
@@ -21154,7 +22056,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")
@@ -23019,6 +23921,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;
@@ -23070,6 +23973,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;
@@ -23148,6 +24056,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;