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

package/dist/index.esm.js

@@ -3432,6 +3432,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",
@@ -3443,22 +3444,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 !",
@@ -3470,19 +3470,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 = {
@@ -3591,7 +3589,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,
@@ -3616,7 +3615,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,
@@ -4345,6 +4345,7 @@ var labels$3 = {
 	profile: "Profile",
 	updateProfile: "Edit profile",
 	changePassword: "Change password",
+	editNewsletters: "Edit newsletters",
 	edit: "Edit",
 	gifts: "Gifts",
 	redeemGift: "Redeem gift",
@@ -4421,6 +4422,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",
@@ -5897,7 +5899,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$f;
+      } = initialState$g;
       this.set(otherStateFields);
     });
 
@@ -6187,7 +6189,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$f = {
+const initialState$g = {
   // View
   view: null,
   // Plans
@@ -6215,7 +6217,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$f,
+    ...initialState$g,
     // State actions
     ...actions,
     // Callbacks
@@ -6346,11 +6348,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
@@ -6382,7 +6413,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,
@@ -6404,7 +6435,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,
@@ -6432,9 +6463,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;
 };
 /**
@@ -6816,8 +6847,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];
 
@@ -6831,7 +6862,7 @@ function _extends$t() {
     return target;
   };
 
-  return _extends$t.apply(this, arguments);
+  return _extends$u.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -6921,7 +6952,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)
       });
 
@@ -6931,9 +6962,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;
         })
       });
 
@@ -6960,9 +6991,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;
         })
@@ -6970,28 +7001,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
           });
         })
@@ -7038,12 +7069,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
   });
 };
@@ -7053,7 +7084,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$t({
+  return _extends$u({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7103,14 +7134,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));
   });
@@ -7449,7 +7480,7 @@ var ToastBar = /*#__PURE__*/memo(function (_ref2) {
   var message = createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return 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
@@ -7479,7 +7510,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',
@@ -7506,7 +7537,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return createElement("div", {
-    style: _extends$t({
+    style: _extends$u({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7541,82 +7572,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.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.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.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.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.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.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.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.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.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -7842,6 +7873,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) {
@@ -8167,6 +8208,175 @@ function shouldBlurContent(entitlements) {
   return entitlements.every(entitlement => !window.Pelcro.user.isEntitledTo(entitlement));
 }
 
+var pure$1 = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+var V3_URL = 'https://js.stripe.com/v3';
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = 'loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used';
+var findScript = function findScript() {
+  var scripts = document.querySelectorAll("script[src^=\"".concat(V3_URL, "\"]"));
+
+  for (var i = 0; i < scripts.length; i++) {
+    var script = scripts[i];
+
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+
+    return script;
+  }
+
+  return null;
+};
+
+var injectScript = function injectScript(params) {
+  var queryString = params && !params.advancedFraudSignals ? '?advancedFraudSignals=false' : '';
+  var script = document.createElement('script');
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+
+  if (!headOrBody) {
+    throw new Error('Expected document.body not to be null. Stripe.js requires a <body> element.');
+  }
+
+  headOrBody.appendChild(script);
+  return script;
+};
+
+var registerWrapper = function registerWrapper(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+
+  stripe._registerWrapper({
+    name: 'stripe-js',
+    version: "1.21.1",
+    startTime: startTime
+  });
+};
+
+var stripePromise = null;
+var loadScript = function loadScript(params) {
+  // Ensure that we only attempt to load Stripe.js at most once
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+
+  stripePromise = new Promise(function (resolve, reject) {
+    if (typeof window === 'undefined') {
+      // Resolve to null when imported server side. This makes the module
+      // safe to import in an isomorphic code base.
+      resolve(null);
+      return;
+    }
+
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+
+    try {
+      var script = findScript();
+
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      }
+
+      script.addEventListener('load', function () {
+        if (window.Stripe) {
+          resolve(window.Stripe);
+        } else {
+          reject(new Error('Stripe.js not available'));
+        }
+      });
+      script.addEventListener('error', function () {
+        reject(new Error('Failed to load Stripe.js'));
+      });
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise;
+};
+var initStripe = function initStripe(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+
+  var stripe = maybeStripe.apply(undefined, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var validateLoadParams = function validateLoadParams(params) {
+  var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
+
+  if (params === null || _typeof(params) !== 'object') {
+    throw new Error(errorMessage);
+  }
+
+  if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === 'boolean') {
+    return params;
+  }
+
+  throw new Error(errorMessage);
+};
+
+var loadParams;
+var loadStripeCalled = false;
+var loadStripe = function loadStripe() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  loadStripeCalled = true;
+  var startTime = Date.now();
+  return loadScript(loadParams).then(function (maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+
+loadStripe.setLoadParameters = function (params) {
+  if (loadStripeCalled) {
+    throw new Error('You cannot change load parameters after calling loadStripe');
+  }
+
+  loadParams = validateLoadParams(params);
+};
+
+exports.loadStripe = loadStripe;
+});
+
+unwrapExports(pure$1);
+pure$1.loadStripe;
+
+var pure = pure$1;
+var pure_1 = pure.loadStripe;
+
 /**
  * @typedef {Object} OptionsType
  * @property {boolean} loadPaymentSDKs
@@ -8236,8 +8446,15 @@ const initPaywalls = () => {
   }
 };
 const loadPaymentSDKs = () => {
-  // Load stripe's SDK
-  window.Pelcro.helpers.loadSDK("https://js.stripe.com/v3/", "pelcro-sdk-stripe-id"); // Load PayPal SDK's
+  // Lazy load stripe's SDK
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
+  whenUserReady(() => {
+    if (!window.Stripe) {
+      pure_1(window.Pelcro.environment.stripe);
+    }
+  }); // Load PayPal SDK's
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
@@ -8831,6 +9048,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";
@@ -8859,6 +9077,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
@@ -8920,7 +9141,7 @@ const debounce = (func, waitTime) => {
   };
 };
 
-const initialState$e = {
+const initialState$f = {
   email: "",
   password: "",
   emailError: null,
@@ -8931,10 +9152,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/createContext(initialState$e);
+const store$f = /*#__PURE__*/createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const LoginContainer = ({
   style,
@@ -9041,7 +9262,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$e;
+        return initialState$f;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9059,12 +9280,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$e, {
+  }, /*#__PURE__*/React__default.createElement(Provider$f, {
     value: {
       state,
       dispatch
@@ -9072,12 +9293,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$e,
+        store: store$f,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -9322,7 +9543,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     t
   } = useTranslation("login");
@@ -9343,23 +9564,23 @@ const LoginButton = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__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.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.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"
@@ -9424,7 +9645,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$d = {
+const initialState$e = {
   email: "",
   password: "",
   emailError: null,
@@ -9441,10 +9662,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/createContext(initialState$d);
+const store$e = /*#__PURE__*/createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const RegisterContainer = ({
   style,
@@ -9609,7 +9830,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$d;
+        return initialState$e;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -9627,12 +9848,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$d, {
+  }, /*#__PURE__*/React__default.createElement(Provider$e, {
     value: {
       state,
       dispatch
@@ -9640,24 +9861,24 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$d,
+        store: store$e,
         key: i
       });
     }
   }) : /*#__PURE__*/React__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.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.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"
   })));
@@ -9674,10 +9895,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
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     dispatch: registerDispatch
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -9730,15 +9951,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.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.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.createElement("path", {
@@ -9764,10 +9985,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
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     dispatch: registerDispatch
-  } = useContext(store$d);
+  } = useContext(store$e);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -9872,15 +10093,15 @@ function LoginView(props) {
   }, /*#__PURE__*/React__default.createElement(GoogleLoginButton, null), /*#__PURE__*/React__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.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.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"
@@ -10027,11 +10248,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const RegisterButton = ({
@@ -10048,7 +10269,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$d);
+  } = useContext(store$e);
   const {
     t
   } = useTranslation("register");
@@ -10183,7 +10404,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function LastName({
@@ -10214,7 +10435,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 /**
@@ -10318,7 +10539,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -12283,13 +12504,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,
@@ -12301,16 +12523,17 @@ const initialState$c = {
   canMakePayment: false,
   paymentRequest: null,
   updatedPrice: null,
+  taxAmount: null,
   currentPlan: null,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$c = /*#__PURE__*/createContext(initialState$c);
+const store$d = /*#__PURE__*/createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -12351,6 +12574,7 @@ const PaymentMethodContainerWithoutStripe = ({
     dispatch({
       type: INIT_CONTAINER
     });
+    updateTotalAmountWithTax();
   }, []);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -12417,6 +12641,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 {
@@ -12443,6 +12706,10 @@ const PaymentMethodContainerWithoutStripe = ({
         });
       }
 
+      dispatch({
+        type: SET_COUPON_ERROR,
+        payload: ""
+      });
       dispatch({
         type: SHOW_ALERT,
         payload: {
@@ -12459,7 +12726,11 @@ const PaymentMethodContainerWithoutStripe = ({
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
       });
       dispatch({
-        type: SET_UPDATED_PRICE,
+        type: SET_TAX_AMOUNT,
+        payload: res.data.taxes
+      });
+      dispatch({
+        type: SET_UPDATED_PRICE,
         payload: res.data.total
       });
       dispatch({
@@ -12467,6 +12738,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,
@@ -12853,16 +13147,20 @@ const PaymentMethodContainerWithoutStripe = ({
       const totalAmount = (_ref = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
 
       if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required" && totalAmount > 0) {
-        return resolveTaxCalculation().then(totalAmountWithTax => generate3DSecureSource(source, totalAmountWithTax !== null && totalAmountWithTax !== void 0 ? totalAmountWithTax : totalAmount).then(({
-          source,
-          error
-        }) => {
-          if (error) {
-            return handlePaymentError(error);
-          }
+        return resolveTaxCalculation().then(res => {
+          var _res$totalAmountWithT;
 
-          toggleAuthenticationPendingView(true, source);
-        }));
+          return generate3DSecureSource(source, (_res$totalAmountWithT = res === null || res === void 0 ? void 0 : res.totalAmountWithTax) !== null && _res$totalAmountWithT !== void 0 ? _res$totalAmountWithT : totalAmount).then(({
+            source,
+            error
+          }) => {
+            if (error) {
+              return handlePaymentError(error);
+            }
+
+            toggleAuthenticationPendingView(true, source);
+          });
+        });
       }
 
       return handlePayment(source);
@@ -12871,15 +13169,15 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
   /**
-   * Resolves with the total including taxes incase taxes enabled by site
+   * Resolves with the total & tax amount incase taxes enabled by site
    * @return {Promise}
    */
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r;
+    var _window$Pelcro$site$r2;
 
-    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -12892,14 +13190,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
+        });
       });
     });
   };
@@ -12954,13 +13256,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);
       }
     }
@@ -13088,6 +13390,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
@@ -13105,7 +13412,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
       case SET_COUPON:
         return lib_7({ ...state,
-          coupon: action.payload
+          couponObject: action.payload
         });
 
       case SET_COUPON_ERROR:
@@ -13131,21 +13438,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$c, {
+  }, /*#__PURE__*/React__default.createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
@@ -13158,7 +13465,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getCanonicalLocaleFormat(window.Pelcro.site.read().default_locale)
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
-      store: store$c
+      store: store$d
     }, props))));
   }
 
@@ -13211,7 +13518,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -13264,9 +13571,10 @@ const DiscountedPrice = props => {
   const {
     state: {
       updatedPrice,
+      taxAmount,
       percentOff
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     default_locale
   } = Pelcro.site.read();
@@ -13276,12 +13584,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.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.createElement("span", {
+      className: "plc-font-bold pelcro-discounted-price"
+    }, priceFormatted));
   }
 
   return "";
@@ -13306,7 +13617,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     default_locale
   } = Pelcro.site.read();
@@ -13330,17 +13641,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.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13359,7 +13670,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13393,7 +13704,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -13411,6 +13722,7 @@ const CouponCodeField = props => {
 
   return /*#__PURE__*/React__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"),
@@ -13421,17 +13733,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.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -13448,7 +13760,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -13462,16 +13774,16 @@ const CouponCode = ({
   };
 
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-my-4"
+    className: "plc-mt-4"
   }, /*#__PURE__*/React__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.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.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.createElement(CouponCodeField, null), /*#__PURE__*/React__default.createElement(ApplyCouponButton, null)));
 };
 
@@ -13705,7 +14017,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     product,
     plan,
@@ -13790,16 +14102,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.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.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"
@@ -13816,7 +14128,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     switchView,
     selectedPaymentMethodId
@@ -13848,6 +14160,37 @@ const SelectedPaymentMethod = () => {
   }, t("select.buttons.changePaymentMethod")))));
 };
 
+const TaxAmount = () => {
+  var _plan$quantity;
+
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const {
+    state: {
+      taxAmount
+    }
+  } = 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.createElement("div", {
+      className: "plc-text-center pelcro-tax-amount"
+    }, t("labels.tax"), " ", /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-font-bold"
+    }, priceFormatted));
+  }
+
+  return null;
+};
+
 /**
  *
  */
@@ -13884,7 +14227,9 @@ function PaymentMethodView({
     onFailure: onFailure
   }, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-2"
+  }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)))))));
 }
@@ -13991,12 +14336,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.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -14005,7 +14350,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.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.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"
   })));
 }
@@ -14336,6 +14681,292 @@ class DefaultNewsLetter extends Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
+const initialState$c = {
+  didSubToNewslettersBefore: false,
+  newsletters: [],
+  isListLoading: true,
+  isSubmitting: false,
+  alert: {
+    type: "error",
+    content: ""
+  }
+};
+const store$c = /*#__PURE__*/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);
+  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.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-newsletter-update-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider$c, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        store: store$c,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default.cloneElement(children, {
+    store: store$c
+  })));
+};
+
+const NewsletterUpdateButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch,
+    state: {
+      isSubmitting,
+      isListLoading
+    }
+  } = useContext(store$c);
+  const {
+    t
+  } = useTranslation("newsletter");
+  return /*#__PURE__*/React__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
+    }
+  } = useContext(store$c);
+
+  if (isListLoading) {
+    return /*#__PURE__*/React__default.createElement(Loader, {
+      width: 60,
+      height: 100
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-max-h-80 plc-overflow-y-auto pelcro-newsletters-wrapper"
+  }, newsletters.map(newsletter => /*#__PURE__*/React__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.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.createElement("div", {
+    id: "pelcro-newsletter-update-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("updateTitle"))), /*#__PURE__*/React__default.createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default.createElement(NewsletterUpdateContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(NewsletterUpdateList, null), /*#__PURE__*/React__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.createElement(Modal, {
+    id: "pelcro-newsletter-update-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(NewsletterUpdateView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+NewsletterUpdateModal.viewId = "newsletter-update";
+
 const MeterView = () => {
   var _paywallProduct$paywa, _paywallProduct$paywa2;
 
@@ -14387,7 +15018,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.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.createElement("span", null, "\xD7")), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(MeterView, props)));
@@ -14723,17 +15354,17 @@ const UserUpdatePhone = props => /*#__PURE__*/React__default.createElement(Phone
 
 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.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.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"
   })));
 }
@@ -17844,18 +18475,18 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(La
   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.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -18842,8 +19473,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];
 
@@ -18857,7 +19488,7 @@ function _extends$d() {
     return target;
   };
 
-  return _extends$d.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -19041,7 +19672,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'
@@ -19569,7 +20200,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__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) {
@@ -19613,7 +20244,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default.createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$d({}, sharedProps, {
+  }, render(_extends$e({}, sharedProps, {
     as: Fragment,
     children: React__default.createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -19740,12 +20371,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) {
@@ -19764,7 +20395,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -19775,19 +20406,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
@@ -19800,7 +20431,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;
@@ -19839,19 +20470,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) {
@@ -19872,7 +20503,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$d({}, state, {
+  return _extends$e({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -19885,10 +20516,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
   });
@@ -19896,11 +20527,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
@@ -19913,7 +20544,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;
@@ -19974,18 +20605,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.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20284,18 +20915,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.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20303,30 +20934,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.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.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.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.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.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"
@@ -20334,7 +20984,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"
   })));
 }
 
@@ -20573,6 +21223,24 @@ class Dashboard extends 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({
@@ -20610,6 +21278,10 @@ class Dashboard extends Component {
       return this.props.setView("password-change");
     });
 
+    _defineProperty$3(this, "displayNewsletterUpdate", () => {
+      return this.props.setView("newsletter-update");
+    });
+
     _defineProperty$3(this, "displayProductSelect", ({
       isGift
     }) => {
@@ -20769,21 +21441,21 @@ class Dashboard extends Component {
           className: "plc-inline-block plc-mt-1"
         }, sub.shipments_remaining, " ", this.locale("labels.shipments")) : null)), /*#__PURE__*/React__default.createElement("td", null, sub.cancel_at_period_end === 0 && /*#__PURE__*/React__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.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.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.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.createElement(Button, {
           variant: "ghost",
-          className: "plc-text-blue-400",
+          className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
           icon: /*#__PURE__*/React__default.createElement(SvgRefresh, null),
           onClick: onRenewClick,
           disabled: this.state.disableSubmit,
@@ -20964,28 +21636,33 @@ class Dashboard extends Component {
     this.site = window.Pelcro.site.read();
     this.locale = this.props.t;
     this.user = window.Pelcro.user.read();
+    this.menuRef = /*#__PURE__*/React__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.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.createElement("div", {
-      id: "pelcro-view-dashboard"
+      id: "pelcro-view-dashboard",
+      ref: this.menuRef
     }, /*#__PURE__*/React__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.createElement("div", {
@@ -21048,7 +21725,14 @@ class Dashboard extends 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.createElement(Button, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React__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.createElement(Accordion.item, {
       name: SUB_MENUS.PAYMENT_CARDS,
       icon: /*#__PURE__*/React__default.createElement(SvgPaymentCard, null),
@@ -21124,7 +21808,7 @@ const DashboardOpenButton = () => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-fixed plc-right-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__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")
@@ -22957,4 +23641,4 @@ function ProfilePicChangeModal({
 }
 ProfilePicChangeModal.viewId = "profile-picture";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, ApplyCouponButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, notify, unauthenticatedButtons, usePelcro };