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

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,
@@ -4375,6 +4375,7 @@ var labels$3 = {
 	profile: "Profile",
 	updateProfile: "Edit profile",
 	changePassword: "Change password",
+	editNewsletters: "Edit newsletters",
 	edit: "Edit",
 	gifts: "Gifts",
 	redeemGift: "Redeem gift",
@@ -4451,6 +4452,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",
@@ -5927,7 +5929,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$f;
+      } = initialState$g;
       this.set(otherStateFields);
     });
 
@@ -6217,7 +6219,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$f = {
+const initialState$g = {
   // View
   view: null,
   // Plans
@@ -6245,7 +6247,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$f,
+    ...initialState$g,
     // State actions
     ...actions,
     // Callbacks
@@ -6376,11 +6378,40 @@ 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$Pelcro, _window$Pelcro$uiSett;
+
+    if (viewID !== "newsletter-update") return false;
+    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;
+
+    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 +6443,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 +6465,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 +6493,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;
 };
 /**
@@ -6846,8 +6877,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$u() {
+  _extends$u = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -6861,7 +6892,7 @@ function _extends$t() {
     return target;
   };
 
-  return _extends$t.apply(this, arguments);
+  return _extends$u.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -6951,7 +6982,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$u({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -6961,9 +6992,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$t({}, state, {
+      return _extends$u({}, 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$u({}, t, action.toast) : t;
         })
       });
 
@@ -6990,9 +7021,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$t({}, state, {
+      return _extends$u({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$t({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$u({}, t, {
             visible: false
           }) : t;
         })
@@ -7000,28 +7031,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$t({}, state, {
+        return _extends$u({}, state, {
           toasts: []
         });
       }
 
-      return _extends$t({}, state, {
+      return _extends$u({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$t({}, state, {
+      return _extends$u({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$t({}, state, {
+      return _extends$u({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$t({}, t, {
+          return _extends$u({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -7068,12 +7099,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$u({}, 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$u({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$t({}, state, {
+  return _extends$u({}, state, {
     toasts: mergedToasts
   });
 };
@@ -7083,7 +7114,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$t({
+  return _extends$u({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7133,14 +7164,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$u({}, 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$u({
       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$u({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -7479,7 +7510,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$u({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -7509,7 +7540,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$t({
+  return _extends$u({
     left: 0,
     right: 0,
     display: 'flex',
@@ -7536,7 +7567,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$t({
+    style: _extends$u({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7571,82 +7602,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$q;
+var _path$r;
 
-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$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 SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     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$r || (_path$r = /*#__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$q;
 
-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$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 SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     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$q || (_path$q = /*#__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$p;
 
-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$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 SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     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$p || (_path$p = /*#__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$o;
 
-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$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 SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     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$o || (_path$o = /*#__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$n, _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$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 SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     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$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -7872,6 +7903,16 @@ const init$1 = () => {
     }
   }
 
+  const pelcroUpdateNewslettersButtons = document.getElementsByClassName("pelcro-update-newsletters-button");
+
+  if (pelcroUpdateNewslettersButtons.length !== 0) {
+    for (let i = 0; i < pelcroUpdateNewslettersButtons.length; i++) {
+      pelcroUpdateNewslettersButtons[i].addEventListener("click", () => {
+        switchView("newsletter-update");
+      });
+    }
+  }
+
   const pelcroCartButtonsByClass = document.getElementsByClassName("pelcro-cart-button");
 
   if (pelcroCartButtonsByClass.length !== 0) {
@@ -8087,87 +8128,71 @@ function Link({
 
 const init = () => {
   const {
-    whenSiteReady,
-    view,
-    resetView,
     switchView,
     set
   } = usePelcro.getStore();
-  whenSiteReady(() => {
-    const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
+  const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
 
-    if (entitlementsProtectedElements.length === 0) {
-      return;
-    }
+  if (entitlementsProtectedElements.length === 0) {
+    return false;
+  }
 
-    if (!allElemsHaveSameEntitlements(entitlementsProtectedElements)) {
-      console.error("not all elements protected by entitlements have the same entitlements, all elements protected by entitlements must have the exact same data-pelcro-entitlements attribute value");
-      return;
-    }
+  if (!allElemsHaveSameEntitlements(entitlementsProtectedElements)) {
+    console.error("not all elements protected by entitlements have the same entitlements, all elements protected by entitlements must have the exact same data-pelcro-entitlements attribute value");
+    return false;
+  }
 
-    entitlementsProtectedElements.forEach(elem => {
-      const entitlements = getEntitlementsFromElem(elem);
+  for (const elem of entitlementsProtectedElements) {
+    const entitlements = getEntitlementsFromElem(elem);
 
-      if (entitlements.length === 0) {
-        console.error("invalid data-pelcro-entitlements attribute value", elem);
-        return;
-      }
+    if (entitlements.length === 0) {
+      console.error("invalid data-pelcro-entitlements attribute value", elem);
+      return false;
+    }
 
-      if (window.Pelcro.product.getByEntitlements(entitlements).length === 0) {
-        console.warn("user can't subscribe to any plan that has any of the entitlement(s) needed, this is usually unintentional, make sure that the entitlements are spelled correctly, entitlements are case sensitive. make sure that your plans are configured in a way that allows users from all supported countries, using all supported currencies, to have access to your content by subscribing to certain plans that provide the needed entitlement(s)");
-      }
+    if (window.Pelcro.product.getByEntitlements(entitlements).length === 0) {
+      console.warn("user can't subscribe to any plan that has any of the entitlement(s) needed, this is usually unintentional, make sure that the entitlements are spelled correctly, entitlements are case sensitive. make sure that your plans are configured in a way that allows users from all supported countries, using all supported currencies, to have access to your content by subscribing to certain plans that provide the needed entitlement(s)");
+    }
 
-      if (shouldBlurContent(entitlements)) {
-        // remove all event listeners from the elem by replacing it with a deep clone of itself
-        const elemDeepClone = elem.cloneNode(true);
-        elem.replaceWith(elemDeepClone);
-        disableKeyboardInteractions(elemDeepClone);
-        elemDeepClone.setAttribute("style", "filter:blur(3px) !important; pointer-events:none !important; user-select:none !important");
-        unblurElemWhenUserSubscribes(elemDeepClone, entitlements);
-        /* 
-        showing both the meter and the entitlements notification doesn't make sense from
-        a product prespective + they would take half the screen on mobile devies, so we're
-        hiding the meter, and showing the entitlements notification only.
-        */
+    if (shouldBlurContent(entitlements)) {
+      // remove all event listeners from the elem by replacing it with a deep clone of itself
+      const elemDeepClone = elem.cloneNode(true);
+      elem.replaceWith(elemDeepClone);
+      disableKeyboardInteractions(elemDeepClone);
+      elemDeepClone.setAttribute("style", "filter:blur(3px) !important; pointer-events:none !important; user-select:none !important");
+      unblurElemWhenUserSubscribes(elemDeepClone, entitlements);
+      const NOTIFICATION_ID = "entitlement";
+      notify( /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement(Trans, {
+        i18nKey: "messages:entitlement"
+      }, "Some of the content on this page is available with one or more of our plans.", /*#__PURE__*/React__default['default'].createElement(Link, {
+        onClick: () => {
+          const productId = Number(elem.dataset.productId);
+          const planId = Number(elem.dataset.planId);
+          const selectedProduct = window.Pelcro.product.getById(productId);
+          const selectedPlan = window.Pelcro.plan.getById(planId);
+          const hasValidProductAndPlan = Boolean(selectedProduct && selectedPlan);
 
-        if (view === "meter") {
-          resetView();
-        }
+          if (hasValidProductAndPlan) {
+            set({
+              product: selectedProduct,
+              plan: selectedPlan
+            });
+          }
 
-        const NOTIFICATION_ID = "entitlement";
-        notify( /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement(Trans, {
-          i18nKey: "messages:entitlement"
-        }, "Some of the content on this page is available with one or more of our plans.", /*#__PURE__*/React__default['default'].createElement(Link, {
-          onClick: () => {
-            const productId = Number(elem.dataset.productId);
-            const planId = Number(elem.dataset.planId);
-            const selectedProduct = window.Pelcro.product.getById(productId);
-            const selectedPlan = window.Pelcro.plan.getById(planId);
-            const hasValidProductAndPlan = Boolean(selectedProduct && selectedPlan);
-
-            if (hasValidProductAndPlan) {
-              set({
-                product: selectedProduct,
-                plan: selectedPlan
-              });
-            }
+          notify.dismiss(NOTIFICATION_ID);
+          switchView("_plan-select-entitlements");
+        }
+      }, "Subscribe"), "now to get full page access.")), {
+        className: "pelcro-notification-entitlement",
+        position: "bottom-right",
+        duration: Infinity,
+        id: NOTIFICATION_ID
+      });
+    }
+  }
 
-            notify.dismiss(NOTIFICATION_ID);
-            switchView("_plan-select-entitlements");
-          }
-        }, "Subscribe"), "now to get full page access.")), {
-          className: "pelcro-notification-entitlement",
-          position: "bottom-right",
-          duration: Infinity,
-          id: NOTIFICATION_ID
-        });
-      }
-    });
-  });
+  return true;
 };
-/**
- *
- */
 
 function allElemsHaveSameEntitlements(elems) {
   const entitlements = getEntitlementsFromElem(elems[0]);
@@ -8177,10 +8202,6 @@ function allElemsHaveSameEntitlements(elems) {
     return entitlements.every(ent => elemEntitlements.includes(ent));
   });
 }
-/**
- *
- */
-
 
 function disableKeyboardInteractions(elem) {
   elem.addEventListener("keydown", event => {
@@ -8193,10 +8214,6 @@ function disableKeyboardInteractions(elem) {
     }
   }, true);
 }
-/**
- *
- */
-
 
 function unblurElemWhenUserSubscribes(elem, entitlements) {
   document.addEventListener("PelcroSubscriptionCreate", event => {
@@ -8204,11 +8221,11 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
       isGift
     } = usePelcro.getStore();
     if (isGift) return;
-    const latestSub = event.detail.data.subscriptions[0];
+    const latestSub = event.detail.data.subscriptions[event.detail.data.subscriptions.length - 1];
     const shouldUnblurContent = entitlements.some(ent => {
-      var _latestSub$plan$entit, _latestSub$plan$entit2;
+      var _latestSub$plan$entit, _latestSub$plan, _latestSub$plan$entit2;
 
-      return (_latestSub$plan$entit = (_latestSub$plan$entit2 = latestSub.plan.entitlements) === null || _latestSub$plan$entit2 === void 0 ? void 0 : _latestSub$plan$entit2.includes(ent)) !== null && _latestSub$plan$entit !== void 0 ? _latestSub$plan$entit : false;
+      return (_latestSub$plan$entit = latestSub === null || latestSub === void 0 ? void 0 : (_latestSub$plan = latestSub.plan) === null || _latestSub$plan === void 0 ? void 0 : (_latestSub$plan$entit2 = _latestSub$plan.entitlements) === null || _latestSub$plan$entit2 === void 0 ? void 0 : _latestSub$plan$entit2.includes(ent)) !== null && _latestSub$plan$entit !== void 0 ? _latestSub$plan$entit : false;
     });
 
     if (shouldUnblurContent) {
@@ -8216,10 +8233,6 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
     }
   });
 }
-/**
- *
- */
-
 
 function shouldBlurContent(entitlements) {
   return entitlements.every(entitlement => !window.Pelcro.user.isEntitledTo(entitlement));
@@ -8266,7 +8279,9 @@ const initPaywalls = () => {
   const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
 
   if (((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.settings) === "subscription") {
-    // Skip if article is not restricted
+    // blur entitlements based content
+    const didBlurContent = init(); // Skip paywall if article is not restricted
+
     if (isValidViewFromURL(viewFromURL) || !paywallMethods.isArticleRestricted()) {
       return;
     }
@@ -8276,9 +8291,14 @@ const initPaywalls = () => {
     } = usePelcro.getStore();
 
     if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
-      switchView("meter"); // initializing content entitlement here because it interacts with meter
-
-      init();
+      /* 
+        showing both the meter and the entitlements notification doesn't make sense from
+        a product prespective + they would take half the screen on mobile devies, so we're
+        not showing the meter, and only showing the entitlements notification.
+        */
+      if (!didBlurContent) {
+        switchView("meter");
+      }
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
       switchView("newsletter");
     } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
@@ -8882,6 +8902,7 @@ const GET_STATES_SUCCESS = "GET_STATES_SUCCESS";
 const GET_STATES_FETCH = "GET_STATES_FETCH";
 const HANDLE_SUBMIT = "HANDLE_SUBMIT";
 const SET_UPDATED_PRICE = "SET_UPDATED_PRICE";
+const SET_TAX_AMOUNT = "SET_TAX_AMOUNT";
 const SET_CAN_MAKE_PAYMENT = "SET_CAN_MAKE_PAYMENT";
 const SET_PAYMENT_REQUEST = "SET_PAYMENT_REQUEST";
 const INIT_CONTAINER = "INIT_CONTAINER";
@@ -8910,6 +8931,9 @@ const SET_IMAGE_SRC = "SET_IMAGE_SRC";
 const PASSWORD_CHANGE_SUCCESS = "PASSWORD_CHANGE_SUCCESS";
 const SELECT_PAYMENT_METHOD = "SELECT_PAYMENT_METHOD";
 const LOAD_PAYMENT_METHODS = "LOAD_PAYMENT_METHODS";
+const GET_NEWSLETTERS_FETCH = "GET_NEWSLETTERS_FETCH";
+const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
+const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 
 /**
  * Extracts error message from the response error object
@@ -8971,7 +8995,7 @@ const debounce = (func, waitTime) => {
   };
 };
 
-const initialState$e = {
+const initialState$f = {
   email: "",
   password: "",
   emailError: null,
@@ -8982,10 +9006,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/React.createContext(initialState$e);
+const store$f = /*#__PURE__*/React.createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const LoginContainer = ({
   style,
@@ -9092,7 +9116,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$e;
+        return initialState$f;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9110,12 +9134,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
     value: {
       state,
       dispatch
@@ -9123,12 +9147,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$e,
+        store: store$f,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -9373,7 +9397,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("login");
@@ -9394,23 +9418,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$m;
 
-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$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 SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     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$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -9475,7 +9499,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$d = {
+const initialState$e = {
   email: "",
   password: "",
   emailError: null,
@@ -9492,10 +9516,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,
@@ -9660,7 +9684,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$d;
+        return initialState$e;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -9678,12 +9702,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
     value: {
       state,
       dispatch
@@ -9691,24 +9715,24 @@ 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
   })));
 };
 
-var _path$k;
+var _path$l;
 
-function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$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 SvgFacebookLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     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$l || (_path$l = /*#__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"
   })));
@@ -9725,10 +9749,10 @@ const FacebookLoginButton = ({
   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({
@@ -9781,15 +9805,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$j, _path2$2, _path3$1, _path4;
+var _path$k, _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$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 SvgGoogleLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -9815,10 +9839,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -9923,15 +9947,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$j, _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$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 SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     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$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "#4a4a4a",
     d: "M487.89 42.299c0 13.158-10.671 23.829-23.829 23.829H37.074c-13.162 0-23.832-10.671-23.832-23.829v-63.552c0-13.158 10.67-23.831 23.832-23.831H464.06c13.158 0 23.829 10.672 23.829 23.831l.001 63.552z"
@@ -10078,11 +10102,11 @@ 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 = ({
@@ -10099,7 +10123,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("register");
@@ -10234,7 +10258,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function LastName({
@@ -10265,7 +10289,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 /**
@@ -10369,7 +10393,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -12334,13 +12358,14 @@ class PaypalGateWay {
  * @property {unknown} canMakePayment
  * @property {unknown} paymentRequest
  * @property {number} updatedPrice
+ * @property {number} taxAmount
  * @property {object} currentPlan
  * @property {object} alert
  */
 
 /** @type {PaymentStateType} */
 
-const initialState$c = {
+const initialState$d = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -12352,16 +12377,17 @@ const initialState$c = {
   canMakePayment: false,
   paymentRequest: null,
   updatedPrice: null,
+  taxAmount: null,
   currentPlan: null,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const store$d = /*#__PURE__*/React.createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -12402,6 +12428,7 @@ const PaymentMethodContainerWithoutStripe = ({
     dispatch({
       type: INIT_CONTAINER
     });
+    updateTotalAmountWithTax();
   }, []);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -12468,6 +12495,45 @@ const PaymentMethodContainerWithoutStripe = ({
       console.log("Google Pay/Apple pay isn't available in this country");
     }
   };
+  /**
+   * Updates the total amount after adding taxes only if site taxes are enabled
+   */
+
+
+  const updateTotalAmountWithTax = () => {
+    var _window$Pelcro$site$r;
+
+    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+
+    if (taxesEnabled && type === "createPayment") {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      resolveTaxCalculation().then(res => {
+        if (res) {
+          dispatch({
+            type: SET_TAX_AMOUNT,
+            payload: res.taxAmount
+          });
+          dispatch({
+            type: SET_UPDATED_PRICE,
+            payload: res.totalAmountWithTax
+          });
+          dispatch({
+            type: UPDATE_PAYMENT_REQUEST
+          });
+        }
+      }).catch(error => {
+        handlePaymentError(error);
+      }).finally(() => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+      });
+    }
+  };
 
   const onApplyCouponCode = (state, dispatch) => {
     const {
@@ -12494,6 +12560,10 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
+      dispatch({
+        type: SET_COUPON_ERROR,
+        payload: ""
+      });
       dispatch({
         type: SHOW_ALERT,
         payload: {
@@ -12509,6 +12579,10 @@ const PaymentMethodContainerWithoutStripe = ({
         type: SET_PERCENT_OFF,
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
       });
+      dispatch({
+        type: SET_TAX_AMOUNT,
+        payload: res.data.taxes
+      });
       dispatch({
         type: SET_UPDATED_PRICE,
         payload: res.data.total
@@ -12518,6 +12592,29 @@ const PaymentMethodContainerWithoutStripe = ({
       });
     };
 
+    if ((couponCode === null || couponCode === void 0 ? void 0 : couponCode.trim()) === "") {
+      dispatch({
+        type: SET_COUPON,
+        payload: null
+      });
+      dispatch({
+        type: SET_PERCENT_OFF,
+        payload: ""
+      });
+      dispatch({
+        type: SET_UPDATED_PRICE,
+        payload: null
+      });
+      dispatch({
+        type: SET_TAX_AMOUNT,
+        payload: null
+      });
+      dispatch({
+        type: UPDATE_PAYMENT_REQUEST
+      });
+      updateTotalAmountWithTax();
+    }
+
     if (couponCode !== null && couponCode !== void 0 && couponCode.trim()) {
       dispatch({
         type: DISABLE_COUPON_BUTTON,
@@ -12904,33 +13001,37 @@ 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);
-          }
-
-          toggleAuthenticationPendingView(true, source);
-        }));
-      }
+        return resolveTaxCalculation().then(res => {
+          var _res$totalAmountWithT;
 
-      return handlePayment(source);
-    }).catch(error => {
-      return handlePaymentError(error);
-    });
+          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);
+    }).catch(error => {
+      return handlePaymentError(error);
+    });
   };
   /**
-   * Resolves with the total including taxes incase taxes enabled by site
+   * Resolves with the total & tax amount incase taxes enabled by site
    * @return {Promise}
    */
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r;
+    var _window$Pelcro$site$r2;
 
-    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -12943,14 +13044,18 @@ const PaymentMethodContainerWithoutStripe = ({
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data;
+        var _res$data, _res$data2;
 
         if (error) {
           return reject(error);
         }
 
-        const totalAmountWithTax = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.total;
-        resolve(totalAmountWithTax);
+        const taxAmount = (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.taxes;
+        const totalAmountWithTax = (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.total;
+        resolve({
+          totalAmountWithTax,
+          taxAmount
+        });
       });
     });
   };
@@ -13005,13 +13110,13 @@ const PaymentMethodContainerWithoutStripe = ({
   const handlePaymentError = error => {
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
-      var _state$coupon;
+      var _state$couponObject;
 
       const {
         updatedPrice
       } = state; // When price is 0, we allow submitting without card info
 
-      if (updatedPrice === 0 && ((_state$coupon = state.coupon) === null || _state$coupon === void 0 ? void 0 : _state$coupon.duration) === "forever") {
+      if (updatedPrice === 0 && ((_state$couponObject = state.couponObject) === null || _state$couponObject === void 0 ? void 0 : _state$couponObject.duration) === "forever") {
         return subscribe({}, state, dispatch);
       }
     }
@@ -13139,6 +13244,11 @@ const PaymentMethodContainerWithoutStripe = ({
           updatedPrice: action.payload
         });
 
+      case SET_TAX_AMOUNT:
+        return lib_7({ ...state,
+          taxAmount: action.payload
+        });
+
       case SET_CAN_MAKE_PAYMENT:
         return lib_7({ ...state,
           canMakePayment: action.payload
@@ -13156,7 +13266,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
       case SET_COUPON:
         return lib_7({ ...state,
-          coupon: action.payload
+          couponObject: action.payload
         });
 
       case SET_COUPON_ERROR:
@@ -13182,21 +13292,21 @@ 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
   })));
 };
 
@@ -13209,7 +13319,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getCanonicalLocaleFormat(window.Pelcro.site.read().default_locale)
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$c
+      store: store$d
     }, props))));
   }
 
@@ -13262,7 +13372,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -13315,9 +13425,10 @@ const DiscountedPrice = props => {
   const {
     state: {
       updatedPrice,
+      taxAmount,
       percentOff
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     default_locale
   } = Pelcro.site.read();
@@ -13327,12 +13438,15 @@ const DiscountedPrice = props => {
   } = 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, default_locale);
 
   if (percentOff) {
     return /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
-      className: "plc-my-2"
-    }, props), "(-", percentOff, ") ", priceFormatted);
+      className: "plc-flex plc-justify-center plc-mt-2 pelcro-discount"
+    }, props), "(-", percentOff, ")", " ", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-bold pelcro-discounted-price"
+    }, priceFormatted));
   }
 
   return "";
@@ -13357,7 +13471,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     default_locale
   } = Pelcro.site.read();
@@ -13381,17 +13495,17 @@ const SubmitPaymentMethod = ({
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$h;
+var _path$i;
 
-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$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 SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  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$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13410,7 +13524,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13444,7 +13558,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -13462,6 +13576,7 @@ const CouponCodeField = props => {
 
   return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
     className: "plc-h-12",
+    wrapperClassName: "plc-mb-1",
     errorClassName: "plc-h-12 sm:plc-h-8",
     error: couponError,
     "aria-label": t("labels.code"),
@@ -13472,17 +13587,17 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$g;
+var _path$h;
 
-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$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 SvgTicket(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     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$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13499,7 +13614,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13513,16 +13628,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)));
 };
 
@@ -13756,7 +13871,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     product,
     plan,
@@ -13841,16 +13956,16 @@ const BankRedirection = () => {
   }));
 };
 
-var _path$f;
+var _path$g;
 
-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$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 SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     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$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -13867,7 +13982,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     switchView,
     selectedPaymentMethodId
@@ -13899,6 +14014,37 @@ const SelectedPaymentMethod = () => {
   }, t("select.buttons.changePaymentMethod")))));
 };
 
+const TaxAmount = () => {
+  var _plan$quantity;
+
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    state: {
+      taxAmount
+    }
+  } = React.useContext(store$d);
+  const {
+    default_locale
+  } = Pelcro.site.read();
+  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, default_locale);
+
+  if (taxAmount) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-text-center pelcro-tax-amount"
+    }, t("labels.tax"), " ", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-bold"
+    }, priceFormatted));
+  }
+
+  return null;
+};
+
 /**
  *
  */
@@ -13935,7 +14081,9 @@ function PaymentMethodView({
     onFailure: onFailure
   }, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-2"
+  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)))))));
 }
@@ -14042,12 +14190,12 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-var _path$e;
+var _path$f;
 
-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$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 SvgGift(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -14056,7 +14204,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$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -14387,6 +14535,292 @@ class DefaultNewsLetter extends React.Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
+const initialState$c = {
+  didSubToNewslettersBefore: false,
+  newsletters: [],
+  isListLoading: true,
+  isSubmitting: false,
+  alert: {
+    type: "error",
+    content: ""
+  }
+};
+const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const {
+  Provider: Provider$c
+} = store$c;
+
+const NewsletterUpdateContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  onFailure = () => {},
+  children
+}) => {
+  const [t] = useTranslation("newsletter");
+
+  const handleSubmit = ({
+    newsletters,
+    didSubToNewslettersBefore
+  }, dispatch) => {
+    var _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+    const callback = (err, res) => {
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+
+      if (err) {
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+        onFailure(err);
+      } else {
+        if (!didSubToNewslettersBefore) {
+          dispatch({
+            type: SWITCH_TO_UPDATE
+          });
+        }
+
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.success")
+          }
+        });
+        onSuccess(res);
+      }
+    };
+
+    const requestData = {
+      email: (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : window.Pelcro.helpers.getURLParameter("email"),
+      source: "web",
+      lists: newsletters.filter(newsletter => newsletter.selected).map(newsletter => newsletter.id).join(",")
+    };
+
+    if (didSubToNewslettersBefore) {
+      window.Pelcro.newsletter.update(requestData, callback);
+    } else {
+      window.Pelcro.newsletter.create(requestData, callback);
+    }
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case GET_NEWSLETTERS_FETCH:
+        return lib_7({ ...state,
+          isListLoading: true
+        });
+
+      case GET_NEWSLETTERS_SUCCESS:
+        return lib_7({ ...state,
+          newsletters: action.payload.newsletters,
+          didSubToNewslettersBefore: action.payload.didSubToNewslettersBefore,
+          isListLoading: false
+        });
+
+      case SET_SELECT:
+        return lib_7({ ...state,
+          newsletters: state.newsletters.map(newsletter => {
+            if (newsletter.id === action.payload) {
+              return { ...newsletter,
+                selected: !newsletter.selected
+              };
+            }
+
+            return newsletter;
+          })
+        });
+
+      case SWITCH_TO_UPDATE:
+        return lib_7({ ...state,
+          didSubToNewslettersBefore: true
+        });
+
+      case SHOW_ALERT:
+        return lib_7({ ...state,
+          alert: action.payload
+        });
+
+      case LOADING:
+        return lib_7({ ...state,
+          isSubmitting: action.payload
+        });
+
+      case HANDLE_SUBMIT:
+        return lib_5({ ...state,
+          isSubmitting: true
+        }, (state, dispatch) => handleSubmit(state, dispatch));
+
+      default:
+        return state;
+    }
+  }, initialState$c);
+  React.useEffect(() => {
+    const getUserNewsletters = () => {
+      var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
+
+      dispatch({
+        type: GET_NEWSLETTERS_FETCH
+      });
+      const email = (_window$Pelcro$user$r3 = (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.email) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : window.Pelcro.helpers.getURLParameter("email");
+      window.Pelcro.newsletter.getByEmail(email, (err, res) => {
+        var _window$Pelcro$uiSett, _window$Pelcro, _window$Pelcro$uiSett2, _res$data$lists$split, _res$data$lists;
+
+        if (err) {
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+
+        const newsletters = (_window$Pelcro$uiSett = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett2 = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett2 === void 0 ? void 0 : _window$Pelcro$uiSett2.newsletters) !== null && _window$Pelcro$uiSett !== void 0 ? _window$Pelcro$uiSett : [];
+        const selectedNewsletters = (_res$data$lists$split = (_res$data$lists = res.data.lists) === null || _res$data$lists === void 0 ? void 0 : _res$data$lists.split(",")) !== null && _res$data$lists$split !== void 0 ? _res$data$lists$split : [];
+        const allNewslettersWithSelectedField = newsletters.map(newsletter => ({ ...newsletter,
+          id: String(newsletter.id),
+          selected: selectedNewsletters.includes(String(newsletter.id))
+        }));
+        dispatch({
+          type: GET_NEWSLETTERS_SUCCESS,
+          payload: {
+            newsletters: allNewslettersWithSelectedField,
+            didSubToNewslettersBefore: Boolean(res.data.email)
+          }
+        });
+      });
+    };
+
+    getUserNewsletters();
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-newsletter-update-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$c,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store: store$c
+  })));
+};
+
+const NewsletterUpdateButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch,
+    state: {
+      isSubmitting,
+      isListLoading
+    }
+  } = React.useContext(store$c);
+  const {
+    t
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isListLoading,
+    isLoading: isSubmitting
+  }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
+};
+
+const NewsletterUpdateList = () => {
+  const handleSelectNewsletter = event => {
+    dispatch({
+      type: SET_SELECT,
+      payload: event.target.value
+    });
+  };
+
+  const {
+    dispatch,
+    state: {
+      newsletters,
+      isListLoading
+    }
+  } = React.useContext(store$c);
+
+  if (isListLoading) {
+    return /*#__PURE__*/React__default['default'].createElement(Loader, {
+      width: 60,
+      height: 100
+    });
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-max-h-80 plc-overflow-y-auto pelcro-newsletters-wrapper"
+  }, newsletters.map(newsletter => /*#__PURE__*/React__default['default'].createElement("div", {
+    key: newsletter.id,
+    className: "plc-p-2 plc-mx-3 plc-mt-2 plc-border plc-border-gray-400 plc-border-solid plc-rounded plc-text-gray-900 pelcro-newsletter-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement(Checkbox, {
+    className: "pelcro-select-newsletter-checkbox",
+    labelClassName: "plc-cursor-pointer plc-w-full",
+    id: `pelcro-newsletter-update-${newsletter.id}`,
+    checked: newsletter.selected,
+    value: newsletter.id,
+    onChange: handleSelectNewsletter
+  }, newsletter.label))));
+};
+
+const NewsletterUpdateView = props => {
+  const {
+    t
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-newsletter-update-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("updateTitle"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateList, null), /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateButton, {
+    role: "submit",
+    className: "plc-mt-4 plc-w-full",
+    name: t("labels.submit"),
+    id: "pelcro-submit"
+  }))));
+};
+
+const NewsletterUpdateModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-newsletter-update-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(NewsletterUpdateView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+NewsletterUpdateModal.viewId = "newsletter-update";
+
 const MeterView = () => {
   var _paywallProduct$paywa, _paywallProduct$paywa2;
 
@@ -14438,7 +14872,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)));
@@ -14774,17 +15208,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$e;
 
-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$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 SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     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$e || (_path$e = /*#__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"
   })));
 }
@@ -17895,18 +18329,18 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].creat
   store: store$4
 }, props));
 
-var _path$c;
+var _path$d;
 
-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$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 SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     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$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -18893,8 +19327,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$d() {
-  _extends$d = Object.assign || function (target) {
+function _extends$e() {
+  _extends$e = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -18908,7 +19342,7 @@ function _extends$d() {
     return target;
   };
 
-  return _extends$d.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -19092,7 +19526,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$e({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -19620,7 +20054,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$e({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -19664,7 +20098,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$d({}, sharedProps, {
+  }, render(_extends$e({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -19791,12 +20225,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -19815,7 +20249,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -19826,19 +20260,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$e({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -19851,7 +20285,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -19890,19 +20324,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$e({}, 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$e({}, 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$e({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -19923,7 +20357,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -19936,10 +20370,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$e({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -19947,11 +20381,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$e({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -19964,7 +20398,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -20025,18 +20459,18 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$b;
+var _path$c;
 
-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$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 SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     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$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20335,18 +20769,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$a;
+var _path$b;
 
-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$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 SvgExit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     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$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20354,30 +20788,49 @@ function SvgExit(props) {
   })));
 }
 
-var _path$9;
+var _path$a;
 
-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 _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 SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     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", {
+  }, props), _path$a || (_path$a = /*#__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$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 SvgUser(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+  })));
+}
+
 var _path$8;
 
 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 SvgUser(props) {
+function SvgNewsletter(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -20385,7 +20838,7 @@ function SvgUser(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    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"
   })));
 }
 
@@ -20624,6 +21077,24 @@ class Dashboard extends React.Component {
       });
     });
 
+    _defineProperty$3(this, "componentWillUnmount", () => {
+      document.removeEventListener("click", this.hideMenuIfClickedOutside);
+    });
+
+    _defineProperty$3(this, "initializeHideMenuHandler", () => {
+      document.addEventListener("click", this.hideMenuIfClickedOutside);
+    });
+
+    _defineProperty$3(this, "hideMenuIfClickedOutside", event => {
+      const didClickOutsideMenu = this.state.isOpen && this.menuRef.current && !this.menuRef.current.contains(event.target);
+
+      if (didClickOutsideMenu) {
+        this.setState({
+          isOpen: false
+        });
+      }
+    });
+
     _defineProperty$3(this, "cancelSubscription", (subscription_id, onSuccess, onFailure) => {
       // disable the Login button to prevent repeated clicks
       window.Pelcro.subscription.cancel({
@@ -20661,6 +21132,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
     }) => {
@@ -20820,21 +21295,21 @@ class Dashboard extends React.Component {
           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",
+          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: 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",
+          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: 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",
+          className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
           icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
           onClick: onRenewClick,
           disabled: this.state.disableSubmit,
@@ -21015,28 +21490,33 @@ class Dashboard extends React.Component {
     this.site = window.Pelcro.site.read();
     this.locale = this.props.t;
     this.user = window.Pelcro.user.read();
+    this.menuRef = /*#__PURE__*/React__default['default'].createRef();
   }
 
   render() {
-    var _window$Pelcro$user$r3, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;
+    var _window$Pelcro$user$r3, _window$Pelcro, _window$Pelcro$uiSett, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;
 
     const {
       isOpen
     } = this.state;
     const userHasName = this.user.first_name || this.user.last_name;
     const profilePicture = (_window$Pelcro$user$r3 = window.Pelcro.user.read().profile_photo) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : userSolidIcon;
+    const newsletters = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.newsletters;
+    const siteHasNewslettersDefined = Array.isArray(newsletters) && newsletters.length > 0;
     return /*#__PURE__*/React__default['default'].createElement(Transition, {
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full plc-max-w-xl plc-overflow-y-auto plc-text-left plc-bg-white plc-shadow-xl plc-z-max",
       show: isOpen,
       enter: "plc-transform plc-transition plc-duration-500",
       enterFrom: "plc-translate-x-full",
       enterTo: "plc-translate-x-0",
+      afterEnter: this.initializeHideMenuHandler,
       leave: "plc-transform plc-transition plc-duration-500",
       leaveFrom: "plc-translate-x-0",
       leaveTo: "plc-translate-x-full",
       afterLeave: this.props.onClose
     }, /*#__PURE__*/React__default['default'].createElement("div", {
-      id: "pelcro-view-dashboard"
+      id: "pelcro-view-dashboard",
+      ref: this.menuRef
     }, /*#__PURE__*/React__default['default'].createElement("header", {
       className: "plc-flex plc-flex-col plc-p-4 plc-pl-2 plc-min-h-40 sm:plc-pr-8 plc-bg-primary-500"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -21099,7 +21579,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),
@@ -21175,7 +21662,7 @@ const DashboardOpenButton = () => {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-fixed plc-right-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
-    className: "plc-bg-white plc-border-2 plc-rounded-full focus:plc-outline-none plc-border-primary-300",
+    className: "plc-bg-white plc-border-2 plc-rounded-full focus:plc-outline-none plc-border-primary-300 hover:plc-bg-white",
     name: "menu",
     id: "pelcro-view-menu",
     onClick: () => switchView("dashboard")
@@ -23040,6 +23527,7 @@ exports.AddressUpdateSubmit = AddressUpdateSubmit;
 exports.AddressUpdateTextInput = AddressUpdateTextInput;
 exports.AddressUpdateView = AddressUpdateView;
 exports.Alert = AlertWithContext;
+exports.AlertElement = Alert;
 exports.ApplyCouponButton = ApplyCouponButton;
 exports.Badge = Badge;
 exports.BankRedirection = BankRedirection;
@@ -23091,6 +23579,11 @@ exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.NewsLetter = NewsletterWithHook;
+exports.NewsletterUpdateButton = NewsletterUpdateButton;
+exports.NewsletterUpdateContainer = NewsletterUpdateContainer;
+exports.NewsletterUpdateList = NewsletterUpdateList;
+exports.NewsletterUpdateModal = NewsletterUpdateModal;
+exports.NewsletterUpdateView = NewsletterUpdateView;
 exports.Notification = Notification;
 exports.OrderConfirmModal = OrderConfirmModal;
 exports.OrderCreateContainer = OrderCreateContainer;
@@ -23169,6 +23662,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;