npm - @pelcro/react-pelcro-js - Versions diffs - 4.0.0-alpha.22 → 4.0.0-alpha.24 - Mend

@pelcro/react-pelcro-js 4.0.0-alpha.22 → 4.0.0-alpha.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -8697,7 +8697,7 @@ const createPelcroHook = store => {
   pelcroHook.override = fn => {
     const partialState = fn(store.setState, store.getState);
-    usePelcro$1.setState(partialState);
+    usePelcro.setState(partialState);
   };
   pelcroHook.getStore = pelcroHook.getState;
@@ -8705,11 +8705,11 @@ const createPelcroHook = store => {
 };
 const pelcroStore = createPelcroStore();
-const usePelcro$1 = createPelcroHook(pelcroStore);
+const usePelcro = createPelcroHook(pelcroStore);
 /* istanbul ignore next */
 if (process.env.NODE_ENV === "development") {
-  c$1("Pelcro Store", usePelcro$1);
+  c$1("Pelcro Store", usePelcro);
 }
 /**
@@ -8914,7 +8914,7 @@ const trackSubscriptionOnGA = () => {
     product,
     plan,
     couponCode
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   /*
   getting the latest subscription id from invoices instead of subscriptions
   to handle gifted subs which are not added to subs list
@@ -9239,7 +9239,7 @@ class SaveToMetadataButtonClass {
     _defineProperty$3(this, "unauthenticated", () => {
       const {
         switchView
-      } = usePelcro$1.getStore();
+      } = usePelcro.getStore();
       _classPrivateFieldGet(this, _onClick).call(this, () => switchView("login"));
@@ -9322,7 +9322,7 @@ class SaveToMetadataButtonClass {
         const user = window.Pelcro.user.read();
         const {
           switchView
-        } = usePelcro$1.getStore();
+        } = usePelcro.getStore();
         const {
           key,
           ...buttonMetadata
@@ -9454,8 +9454,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$1=(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$1(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$C() {
-  _extends$C = Object.assign || function (target) {
+function _extends$D() {
+  _extends$D = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
@@ -9469,7 +9469,7 @@ function _extends$C() {
     return target;
   };
-  return _extends$C.apply(this, arguments);
+  return _extends$D.apply(this, arguments);
 }
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -9559,7 +9559,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$C({}, state, {
+      return _extends$D({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
@@ -9569,9 +9569,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
-      return _extends$C({}, state, {
+      return _extends$D({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$C({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$D({}, t, action.toast) : t;
         })
       });
@@ -9598,9 +9598,9 @@ var reducer = function reducer(state, action) {
         });
       }
-      return _extends$C({}, state, {
+      return _extends$D({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$C({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$D({}, t, {
             visible: false
           }) : t;
         })
@@ -9608,28 +9608,28 @@ var reducer = function reducer(state, action) {
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$C({}, state, {
+        return _extends$D({}, state, {
           toasts: []
         });
       }
-      return _extends$C({}, state, {
+      return _extends$D({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
     case ActionType.START_PAUSE:
-      return _extends$C({}, state, {
+      return _extends$D({}, state, {
         pausedAt: action.time
       });
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$C({}, state, {
+      return _extends$D({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$C({}, t, {
+          return _extends$D({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -9676,12 +9676,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
-    return _extends$C({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$D({}, 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$C({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$D({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$C({}, state, {
+  return _extends$D({}, state, {
     toasts: mergedToasts
   });
 };
@@ -9691,7 +9691,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
-  return _extends$C({
+  return _extends$D({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -9741,14 +9741,14 @@ toast.remove = function (toastId) {
 };
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$C({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$D({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$C({
+    toast.success(resolveValue(msgs.success, p), _extends$D({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$C({
+    toast.error(resolveValue(msgs.error, e), _extends$D({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -10087,7 +10087,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$C({}, animationStyle, style, toast.style)
+    style: _extends$D({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -10117,7 +10117,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$C({
+  return _extends$D({
     left: 0,
     right: 0,
     display: 'flex',
@@ -10144,7 +10144,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
   return React.createElement("div", {
-    style: _extends$C({
+    style: _extends$D({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -10179,82 +10179,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
-var _path$y;
+var _path$z;
-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 SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
-var _path$x;
+var _path$y;
-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 SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
     width: 24,
     height: 24,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
     clipRule: "evenodd",
     d: "M4.227 4.227a.774.774 0 011.095 0L12 10.905l6.678-6.678a.774.774 0 111.095 1.095L13.095 12l6.678 6.678a.774.774 0 11-1.095 1.095L12 13.095l-6.678 6.678a.774.774 0 11-1.095-1.095L10.905 12 4.227 5.322a.774.774 0 010-1.095z"
   })));
 }
-var _path$w;
+var _path$x;
-function _extends$z() { _extends$z = 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$z.apply(this, arguments); }
+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 SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
-var _path$v;
+var _path$w;
-function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
+function _extends$z() { _extends$z = 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$z.apply(this, arguments); }
 function SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     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$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
-var _path$u, _path2$3;
+var _path$v, _path2$3;
-function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
+function _extends$y() { _extends$y = 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$y.apply(this, arguments); }
 function SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -10458,7 +10458,7 @@ const init$1 = () => {
     addToCart,
     purchaseItem,
     setSubscriptionToManageMembers
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   const pelcroDashboardButtonsByClass = document.getElementsByClassName("pelcro-dashboard-button");
   if (pelcroDashboardButtonsByClass.length !== 0) {
@@ -10761,7 +10761,7 @@ const init = () => {
   const {
     switchView,
     set
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
   if (entitlementsProtectedElements.length === 0) {
@@ -10852,7 +10852,7 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
   document.addEventListener("PelcroSubscriptionCreate", event => {
     const {
       isGift
-    } = usePelcro$1.getStore();
+    } = usePelcro.getStore();
     if (isGift) return;
     const latestSub = event.detail.data.subscriptions[event.detail.data.subscriptions.length - 1];
     const shouldUnblurContent = entitlements.some(ent => {
@@ -11190,7 +11190,7 @@ const initPaywalls = () => {
     const {
       switchView
-    } = usePelcro$1.getStore();
+    } = usePelcro.getStore();
     if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
       /*
@@ -11212,7 +11212,7 @@ const loadPaymentSDKs = () => {
   // Lazy load stripe's SDK
   const {
     whenUserReady
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenUserReady(() => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
@@ -11260,7 +11260,7 @@ const loadAuth0SDK = () => {
 const initSecuritySdk = () => {
   const {
     whenSiteReady
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenSiteReady(() => {
     var _window$Pelcro$site$r2;
@@ -11296,7 +11296,7 @@ const dispatchModalDisplayEvents = modalName => {
 const {
   whenSiteReady,
   whenEcommerceLoaded
-} = usePelcro$1.getStore();
+} = usePelcro.getStore();
 const renderShopView = shopComponent => {
   whenEcommerceLoaded(() => {
     const shopElement = document.getElementById("pelcro-shop");
@@ -11378,7 +11378,7 @@ const initViewFromURL = () => {
   const {
     switchView,
     whenSiteReady
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   if (isValidViewFromURL(view)) {
     whenSiteReady(() => {
@@ -11436,7 +11436,7 @@ const initSubscriptionFromURL = () => {
     switchView,
     whenSiteReady,
     set
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenSiteReady(() => {
     var _selectedProduct$plan;
@@ -11460,7 +11460,7 @@ const initSubscriptionFromURL = () => {
       isAuthenticated,
       switchToAddressView,
       switchToPaymentView
-    } = usePelcro$1.getStore();
+    } = usePelcro.getStore();
     if (!isAuthenticated()) {
       return switchView("register");
@@ -11492,7 +11492,7 @@ const initOfflineSubscriptionFromURL = offlinePlanId => {
     switchToPaymentView,
     switchToAddressView,
     set
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenSiteReady(() => {
     window.Pelcro.plan.getPlan({
       plan_id: offlinePlanId
@@ -11539,7 +11539,7 @@ const initPurchaseFromUrl = () => {
   const {
     whenEcommerceLoaded,
     purchaseItem
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenEcommerceLoaded(() => {
     const skuId = window.Pelcro.helpers.getURLParameter("sku_id");
     purchaseItem(skuId);
@@ -11555,7 +11555,7 @@ const initCartFromUrl = () => {
     whenEcommerceLoaded,
     addToCart,
     switchView
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenEcommerceLoaded(() => {
     const skusIdsParam = window.Pelcro.helpers.getURLParameter("sku_id");
     const skusIds = skusIdsParam === null || skusIdsParam === void 0 ? void 0 : skusIdsParam.split(",");
@@ -11576,7 +11576,7 @@ const verifyEmailTokenFromUrl = () => {
   const {
     whenSiteReady
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   const translations = i18next.t("verifyEmail:messages", {
     returnObjects: true
   });
@@ -11605,7 +11605,7 @@ const verifyLinkTokenFromUrl = () => {
     whenSiteReady,
     resetView,
     isAuthenticated
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   const translations = i18next.t("verifyLinkToken:messages", {
     returnObjects: true
   });
@@ -11644,12 +11644,12 @@ const showPasswordlessRequestFromUrl = () => {
   const {
     isAuthenticated
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   const passwordlessEnabled = (_window$Pelcro$site$r8 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r8 === void 0 ? void 0 : _window$Pelcro$site$r8.passwordless_enabled;
   if (!passwordlessEnabled || isAuthenticated()) return;
   const {
     switchView
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   return switchView("passwordless-request");
 };
@@ -11659,7 +11659,7 @@ const showInvoiceDetailsFromUrl = () => {
     setInvoice,
     whenSiteReady,
     switchView
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
@@ -11677,7 +11677,7 @@ const showInvoiceDetailsFromUrl = () => {
     const {
       invoice
-    } = usePelcro$1.getStore();
+    } = usePelcro.getStore();
     if (invoice.total === 0) {
       const errorMessage = i18next.t("messages:zeroTotalInvoice", {
@@ -11697,7 +11697,7 @@ const showSubscriptionManageMembersFromUrl = () => {
     whenUserReady,
     whenSiteReady,
     switchView
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
@@ -11737,7 +11737,7 @@ const PelcroModalController = ({
     view,
     isAuthenticated,
     whenSiteReady
-  } = usePelcro$1();
+  } = usePelcro();
   React__default['default'].useEffect(() => {
     init$1();
     renderShopView(React__default['default'].Children.map(children, child => child).find(({
@@ -11989,6 +11989,9 @@ const SET_PASSWORD = "SET_PASSWORD";
 const SET_EMAIL_ERROR = "SET_EMAIL_ERROR";
 const SET_USERNAME_ERROR = "SET_USERNAME_ERROR";
 const SET_PASSWORD_ERROR = "SET_PASSWORD_ERROR";
+const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
+const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
+const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
 const SET_TOKEN = "SET_TOKEN";
 const SET_GIFT_CODE = "SET_GIFT_CODE";
@@ -12577,16 +12580,16 @@ const LoginButton = ({
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.login"));
 };
-var _path$t, _path2$2;
+var _path$u, _path2$2;
-function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
+function _extends$x() { _extends$x = 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$x.apply(this, arguments); }
 function SvgEmailVerify(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     className: "plc-w-6 plc-h-6",
     viewBox: "0 0 700 700",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M583.01 231.93a15.008 15.008 0 00-.887-3.875c-.562-1.254-1.129-2.508-1.695-3.762a14.686 14.686 0 00-1.898-1.789c-.438-.437-.653-1.027-1.153-1.414l-56.266-44.164v-52.484a15.555 15.555 0 00-15.554-15.555H434.56l-74.945-58.895a15.547 15.547 0 00-19.227 0l-74.945 58.895h-70.996a15.555 15.555 0 00-15.555 15.555v52.484l-56.266 44.16c-.496.39-.715.996-1.152 1.43v.004a13.37 13.37 0 00-1.898 1.773c-.22.426-.414.86-.59 1.305a14.158 14.158 0 00-1.106 2.457 15.009 15.009 0 00-.886 3.875c0 .48-.329.918-.329 1.398l.004 264.45a15.555 15.555 0 0015.555 15.555h435.55a15.555 15.555 0 0015.555-15.555v-264.45c0-.48-.278-.918-.325-1.398zm-41.176.809l-20.723 14.809v-31.11zm-191.83-150.73l34.223 26.883h-68.445zm-140 57.992h280v124.45c.07 1.593.383 3.168.934 4.664l-140.93 100.66-140.46-100.33c.214-.77.37-1.555.464-2.348zm-31.109 107.55l-20.719-14.81 20.719-16.27zm-31.113 234.67V263.56l193.18 137.99a15.562 15.562 0 0018.078 0l193.18-137.99v218.66z"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M324.33 291.81a15.56 15.56 0 0020.582-.297l85.555-77.777a15.56 15.56 0 00-20.938-23.023l-75.398 68.539-44.023-37.723a15.54 15.54 0 00-11.46-4.106 15.553 15.553 0 00-8.758 27.718z"
@@ -12627,16 +12630,16 @@ const LoginPassword = props => /*#__PURE__*/React__default['default'].createElem
   store: store$m
 }, props));
-var _path$s;
+var _path$t;
-function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
+function _extends$w() { _extends$w = 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$w.apply(this, arguments); }
 function SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -12972,15 +12975,15 @@ function hasSecurityTokenEnabled$1() {
   return hasSecuritySdkLoaded;
 }
-var _path$r;
+var _path$s;
-function _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+function _extends$v() { _extends$v = 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$v.apply(this, arguments); }
 function SvgFacebookLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -13054,15 +13057,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
-var _path$q, _path2$1, _path3, _path4;
+var _path$r, _path2$1, _path3, _path4;
-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 _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 function SvgGoogleLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -13225,15 +13228,15 @@ const GoogleLoginButton = ({
   }) : null;
 };
-var _path$p;
+var _path$q;
-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 SvgAuth0Logo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M220.412 0h-92.415l28.562 89.006h92.416l-74.77 53.077 28.57 89.511c48.128-35.06 63.854-88.12 46.208-142.588L220.413 0zM7.018 89.006h92.416L127.997 0H35.589L7.019 89.006c-17.655 54.468-1.92 107.529 46.207 142.588l28.563-89.51-74.77-53.078zm46.208 142.588l74.77 52.97 74.77-52.97-74.77-53.847-74.77 53.847z"
   })));
 }
@@ -13444,10 +13447,10 @@ function LoginView(props) {
   }))));
 }
-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 SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: 75.306,
@@ -13518,7 +13521,7 @@ const ModalHeader = ({
 }) => {
   var _window$Pelcro, _window$Pelcro$site$r;
-  const resetView = usePelcro$1(state => state.resetView);
+  const resetView = usePelcro(state => state.resetView);
   React.useEffect(() => {
     onDisplay === null || onDisplay === void 0 ? void 0 : onDisplay();
     dispatchModalDisplayEvents(id);
@@ -13582,7 +13585,7 @@ function LoginModal({
     order,
     switchToAddressView,
     switchToPaymentView
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = res => {
     var _props$onSuccess;
@@ -13858,7 +13861,7 @@ function RegisterView(props) {
   const {
     t
   } = useTranslation("register");
-  usePelcro$1();
+  usePelcro();
   const socialLoginEnabled = ((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id) || ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.google_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.auth0_client_id);
   const showNameFields = (_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.enableNameFieldsInRegister;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -14006,7 +14009,7 @@ function RegisterModal(props) {
     order,
     giftCode,
     isGift
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = res => {
     var _props$onSuccess;
@@ -18762,34 +18765,34 @@ exports["default"] = _default;
 var Slider = unwrapExports(lib$1);
-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 SvgArrowThinRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 14.121 25.414",
     fill: "none",
     stroke: "#fff"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     "data-name": "Path 25368",
     d: "M.707.705l12 12-12 12",
     strokeWidth: 2
   })));
 }
-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 SvgArrowThinLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 14.121 25.414",
     fill: "none",
     stroke: "#fff"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     "data-name": "Path 25368",
     d: "M13.414.705l-12 12 12 12",
     strokeWidth: 2
@@ -18861,17 +18864,17 @@ function Carousel({
   }, settings), children));
 }
-var _path$m;
+var _path$n;
-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 SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -18898,7 +18901,7 @@ function SelectModalWithHook(props) {
     resetView,
     view,
     set
-  } = usePelcro$1();
+  } = usePelcro();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
   const entitlements = entitlementsProtectedElements.length > 0 ? getEntitlementsFromElem(entitlementsProtectedElements[0]) : null;
   return /*#__PURE__*/React__default['default'].createElement(SelectModalWithTrans, {
@@ -19235,7 +19238,7 @@ class SelectModal extends React.Component {
       const {
         switchToAddressView,
         switchToPaymentView
-      } = usePelcro$1.getStore();
+      } = usePelcro.getStore();
       if (!isAuthenticated) {
         return setView("register");
@@ -21426,6 +21429,12 @@ const initialState$k = {
   updatedPrice: null,
   taxAmount: null,
   currentPlan: null,
+  firstName: "",
+  lastName: "",
+  phone: "",
+  firstNameError: null,
+  lastNameError: null,
+  phoneError: null,
   alert: {
     type: "error",
     content: ""
@@ -21452,13 +21461,16 @@ const PaymentMethodContainerWithoutStripe = ({
   const {
     t
   } = useTranslation("payment");
-  const pelcroStore = usePelcro$1();
+  const pelcroStore = usePelcro();
   const {
     set,
     order,
     selectedPaymentMethodId,
     couponCode
-  } = usePelcro$1();
+  } = usePelcro();
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
   const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -21468,6 +21480,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
   const skipPayment = (_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.skipPaymentForFreePlans;
+  const cardProcessor = getSiteCardProcessor();
   React.useEffect(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -21489,7 +21502,7 @@ const PaymentMethodContainerWithoutStripe = ({
   /*====== Start Tap integration ========*/
   const submitUsingTap = () => {
-    var _ref, _ref2, _state$updatedPrice;
+    var _ref, _ref2, _ref3, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -21522,7 +21535,7 @@ const PaymentMethodContainerWithoutStripe = ({
       }, 0);
     };
-    const totalAmount = (_ref = (_ref2 = (_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 && _ref2 !== void 0 ? _ref2 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
+    const totalAmount = (_ref = (_ref2 = (_ref3 = (_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 && _ref3 !== void 0 ? _ref3 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref2 !== void 0 ? _ref2 : getOrderItemsTotal()) !== null && _ref !== void 0 ? _ref : 10;
     tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
       if (result.error) {
         // Inform the user if there was an error
@@ -21543,9 +21556,11 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
-        console.log("Tap API Call result", result);
         window.Pelcro.payment.authorize({
           auth_token: window.Pelcro.user.read().auth_token,
+          first_name: window.Pelcro.user.read().first_name || state.firstName,
+          last_name: window.Pelcro.user.read().last_name || state.lastName,
+          phone: window.Pelcro.user.read().phone || state.phone,
           site_id: window.Pelcro.siteid,
           amount: totalAmount,
           currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
@@ -21582,6 +21597,7 @@ const PaymentMethodContainerWithoutStripe = ({
                 if (data.message === "3DS-authentication-complete") {
                   const tapID = data.tapID;
                   toggleAuthenticationPendingView(false);
+                  toggleAuthenticationSuccessPendingView(true);
                   window.removeEventListener("message", retrieveSourceInfoFromIframe);
                   dispatch({
                     type: SHOW_ALERT,
@@ -21606,21 +21622,6 @@ const PaymentMethodContainerWithoutStripe = ({
   };
   function handleTapPayment(paymentRequest) {
-    // if (paymentRequest) {
-    //   const SUCCESS_STATUS = "870";
-    //   if (paymentRequest.response !== SUCCESS_STATUS) {
-    //     switch (paymentRequest.response) {
-    //       case "871":
-    //         return handlePaymentError({
-    //           error: new Error("Invalid account number")
-    //         });
-    //       default:
-    //         return handlePaymentError({
-    //           error: new Error(paymentRequest.message)
-    //         });
-    //     }
-    //   }
-    // }
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (type === "createPayment") {
@@ -21753,6 +21754,52 @@ const PaymentMethodContainerWithoutStripe = ({
       }
     }
   }
+  const initTapScript = () => {
+    var _window$Pelcro$site$r;
+    const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
+    let elements = tapKey.elements({});
+    let style = {
+      base: {
+        color: "#535353",
+        lineHeight: "18px",
+        fontFamily: "sans-serif",
+        fontSmoothing: "antialiased",
+        fontSize: "16px",
+        "::placeholder": {
+          color: "rgba(0, 0, 0, 0.26)",
+          fontSize: "15px"
+        }
+      },
+      invalid: {
+        color: "red"
+      }
+    }; // input labels/placeholders
+    let labels = {
+      cardNumber: "Card Number",
+      expirationDate: "MM/YY",
+      cvv: "CVV",
+      cardHolder: "Card Holder Name"
+    }; //payment options
+    let paymentOptions = {
+      labels: labels,
+      TextDirection: "ltr"
+    }; //create element, pass style and payment options
+    let card = elements.create("card", {
+      style: style
+    }, paymentOptions); //mount element
+    card.mount("#tapPaymentIframe"); //card change event listener
+    card.addEventListener("change", function (event) {//If needed
+    });
+    tapInstanceRef.current = tapKey;
+    tapInstanceCard.current = card;
+  };
   /*====== End Tap integration ========*/
@@ -21935,13 +21982,11 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
   React.useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+      var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
-      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
+      const payPageId = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -21963,72 +22008,21 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
+  }, [selectedPaymentMethodId]);
+  React.useEffect(() => {
+    whenUserReady(() => {
+      if (cardProcessor === "tap" && !window.Tapjsli) {
+        window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
+        window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
+        document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
+          initTapScript();
+        });
+      }
-    if (cardProcessor === "tap" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r3;
-      const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
-      let elements = tapKey.elements({});
-      let style = {
-        base: {
-          color: "#535353",
-          lineHeight: "18px",
-          fontFamily: "sans-serif",
-          fontSmoothing: "antialiased",
-          fontSize: "16px",
-          "::placeholder": {
-            color: "rgba(0, 0, 0, 0.26)",
-            fontSize: "15px"
-          }
-        },
-        invalid: {
-          color: "red"
-        }
-      }; // input labels/placeholders
-      let labels = {
-        cardNumber: "Card Number",
-        expirationDate: "MM/YY",
-        cvv: "CVV",
-        cardHolder: "Card Holder Name"
-      }; //payment options
-      let paymentOptions = {
-        labels: labels,
-        TextDirection: "ltr"
-      }; //create element, pass style and payment options
-      let card = elements.create("card", {
-        style: style
-      }, paymentOptions); //mount element
-      card.mount("#tapPaymentIframe"); //card change event listener
-      card.addEventListener("change", function (event) {// if (event.error_interactive) {
-        //   onFailure(event.error_interactive);
-        //   return dispatch({
-        //     type: SHOW_ALERT,
-        //     payload: {
-        //       type: "error",
-        //       content: getErrorMessages(event.error_interactive)
-        //     }
-        //   });
-        // } else {
-        //   dispatch({
-        //     type: SHOW_ALERT,
-        //     payload: { type: "error", content: "" }
-        //   });
-        // }
-        // let displayError = document.getElementById("error-handler");
-        // if (event.error) {
-        //   displayError.textContent = event.error.message;
-        // } else {
-        //   displayError.textContent = "";
-        // }
-      });
-      tapInstanceRef.current = tapKey;
-      tapInstanceCard.current = card;
-    }
+      if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
+        initTapScript();
+      }
+    });
   }, [selectedPaymentMethodId]);
   const initPaymentRequest = (state, dispatch) => {
@@ -22094,7 +22088,7 @@ const PaymentMethodContainerWithoutStripe = ({
         payload: paymentRequest
       });
     } catch {
-      console.log("Google Pay/Apple pay isn't available in this country");
+      console.log("Google Pay/Apple pay isn't available/supported in this country");
     }
   };
   /**
@@ -22750,7 +22744,7 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _ref3, _ref4, _state$updatedPrice2;
+      var _ref4, _ref5, _state$updatedPrice2;
       if (error) {
         return handlePaymentError(error);
@@ -22776,7 +22770,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }, 0);
       };
-      (_ref3 = (_ref4 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref4 !== void 0 ? _ref4 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref3 !== void 0 ? _ref3 : getOrderItemsTotal();
+      (_ref4 = (_ref5 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref5 !== void 0 ? _ref5 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref4 !== void 0 ? _ref4 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -22877,6 +22871,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const handlePaymentError = error => {
     var _getErrorMessages;
+    toggleAuthenticationSuccessPendingView(false);
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -22946,6 +22942,18 @@ const PaymentMethodContainerWithoutStripe = ({
     }
   };
+  const toggleAuthenticationSuccessPendingView = show => {
+    const cardAuthContainer = document.querySelector(".card-authentication-success-container");
+    if (show) {
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.remove("plc-hidden");
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.add("plc-flex");
+    } else {
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.add("plc-hidden");
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.remove("plc-flex");
+    }
+  };
   const injectCardAuthenticationIframe = source => {
     var _source$redirect;
@@ -23074,6 +23082,42 @@ const PaymentMethodContainerWithoutStripe = ({
           percentOff: action.payload
         });
+      case SET_FIRST_NAME:
+        return lib_7({ ...state,
+          firstName: action.payload,
+          firstNameError: null
+        });
+      case SET_LAST_NAME:
+        return lib_7({ ...state,
+          lastName: action.payload,
+          lastNameError: null
+        });
+      case SET_PHONE:
+        return lib_7({ ...state,
+          phone: action.payload,
+          phoneError: null
+        });
+      case SET_FIRST_NAME_ERROR:
+        return lib_7({ ...state,
+          firstNameError: action.payload,
+          firstName: ""
+        });
+      case SET_LAST_NAME_ERROR:
+        return lib_7({ ...state,
+          lastNameError: action.payload,
+          lastName: ""
+        });
+      case SET_PHONE_ERROR:
+        return lib_7({ ...state,
+          phoneError: action.payload,
+          phone: null
+        });
       case SHOW_ALERT:
         return lib_7({ ...state,
           alert: action.payload
@@ -23104,12 +23148,17 @@ const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
 const PaymentMethodContainer = props => {
   const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   React.useEffect(() => {
-    if (!window.Stripe) {
-      document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
-        setIsStripeLoaded(true);
-      });
-    }
+    whenUserReady(() => {
+      if (!window.Stripe) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          setIsStripeLoaded(true);
+        });
+      }
+    });
   }, []);
   if (isStripeLoaded) {
@@ -23202,7 +23251,7 @@ const PelcroPaymentRequestButton = props => {
 const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
-  } = usePelcro$1();
+  } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
   if (selectedPaymentMethodId) {
@@ -23257,7 +23306,7 @@ const DiscountedPrice = props => {
   const {
     order,
     plan
-  } = usePelcro$1();
+  } = 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 discountedPriceWithoutTax = updatedPrice - taxAmount;
@@ -23292,7 +23341,7 @@ const SubmitPaymentMethod = ({
   const {
     plan
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("checkoutForm");
@@ -23398,17 +23447,17 @@ const CouponCodeField = props => {
   }, 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 SvgTicket(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -23688,7 +23737,7 @@ const PaypalSubscribeButton = props => {
     plan,
     invoice,
     selectedAddressId
-  } = usePelcro$1();
+  } = usePelcro();
   React.useEffect(() => {
     var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
@@ -23789,16 +23838,16 @@ const BankRedirection = () => {
   }));
 };
-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 SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -23819,7 +23868,7 @@ const SelectedPaymentMethod = () => {
   const {
     switchView,
     selectedPaymentMethodId
-  } = usePelcro$1();
+  } = usePelcro();
   const paymentMethod = (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : (_window$Pelcro$user$r2 = _window$Pelcro$user$r.sources) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : (_window$Pelcro$user$r3 = _window$Pelcro$user$r2.find) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.call(_window$Pelcro$user$r2, source => {
     return source.id == selectedPaymentMethodId;
   });
@@ -23860,7 +23909,7 @@ const TaxAmount = () => {
   } = React.useContext(store$k);
   const {
     plan
-  } = usePelcro$1();
+  } = usePelcro();
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const priceFormatted = getFormattedPriceByLocal(taxAmount * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -23947,6 +23996,17 @@ const SubscriptionCreateFreePlanButton = ({
   }, otherProps), t("buttons.subscribe"));
 };
+const BankAuthenticationSuccess = () => {
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-absolute plc-inset-0 plc-flex-col plc-items-center plc-justify-center plc-hidden plc-text-lg plc-bg-white plc-z-max plc-text-primary-500 card-authentication-success-container"
+  }, t("messages.bankAuthenticationSuccess"), /*#__PURE__*/React__default['default'].createElement(SvgSpinner, {
+    className: "plc-w-10 plc-h-10 plc-mt-5 plc-animate-spin"
+  }));
+};
 /**
  *
  */
@@ -23968,6 +24028,9 @@ function PaymentMethodView({
   const cardProcessor = getSiteCardProcessor();
   const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
   const supportsTap = Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
+  const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
+  const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
+  const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
   }, cardProcessor === "stripe" && !showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement("div", {
@@ -24027,7 +24090,7 @@ const SubscriptionRenewView = ({
   const {
     product,
     plan
-  } = usePelcro$1();
+  } = usePelcro();
   const skipPayment = (_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.skipPaymentForFreePlans;
   const showSubscriptionButton = skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0;
@@ -24083,7 +24146,7 @@ function SubscriptionRenewModal({
   const {
     product,
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = res => {
     var _otherProps$onSuccess, _ReactGA$event;
@@ -24169,18 +24232,18 @@ const SubscriptionCancelContainer = ({
   })));
 };
-var _path$j;
+var _path$k;
-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 SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     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$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -24267,10 +24330,10 @@ const SubscriptionCancelReason = props => {
 var _switch;
-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 SvgSubscription(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -24292,7 +24355,7 @@ const SubscriptionCancelNowButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     state: {
       cancelationReason
@@ -24364,7 +24427,7 @@ const SubscriptionCancelLaterButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     state: {
       cancelationReason
@@ -24432,7 +24495,7 @@ const SubscriptionCancelLaterButton = ({
 const SubscriptionCancelView = props => {
   const {
     subscriptionToCancel
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -24463,7 +24526,7 @@ const SubscriptionCancelModal = ({
 }) => {
   const {
     subscriptionToCancel
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -24612,7 +24675,7 @@ const SubscriptionSuspendButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     state: {
       suspendDate,
@@ -24676,7 +24739,7 @@ const SubscriptionSuspendButton = ({
 const SubscriptionSuspendView = props => {
   const {
     subscriptionToSuspend
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -24703,7 +24766,7 @@ function SubscriptionSuspendModal({
 }) {
   const {
     subscriptionToSuspend
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -24721,12 +24784,12 @@ function SubscriptionSuspendModal({
 }
 SubscriptionSuspendModal.viewId = "subscription-suspend";
-var _path$i;
+var _path$j;
-function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$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 SvgGift(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -24735,7 +24798,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -24775,7 +24838,7 @@ const getCurrentFlow = () => {
     giftRecipient,
     giftCode,
     invoice
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   if (invoice) {
     return "invoicePayment";
@@ -24794,7 +24857,7 @@ const getSuccessContent = i18n => {
   const flow = getCurrentFlow();
   const {
     product
-  } = usePelcro$1.getStore();
+  } = usePelcro.getStore();
   const wordingDictionary = {
     subscriptionSuccess: {
       successIcon: /*#__PURE__*/React__default['default'].createElement(SvgCheckSolid, {
@@ -24838,7 +24901,7 @@ function PaymentSuccessModal({
 }) {
   const {
     resetView
-  } = usePelcro$1();
+  } = usePelcro();
   const onClose = () => {
     var _props$onClose;
@@ -24871,7 +24934,7 @@ function NewsletterWithHook(props) {
     switchView,
     resetView,
     product
-  } = usePelcro$1();
+  } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(NewsLetter, {
     onClose: () => {
       var _props$onClose;
@@ -25381,7 +25444,7 @@ const MeterView = () => {
     switchView,
     product,
     isAuthenticated
-  } = usePelcro$1();
+  } = usePelcro();
   const paywallProduct = product !== null && product !== void 0 ? product : window.Pelcro.paywall.getProduct();
   const visitsLeft = window.Pelcro.paywall.freeVisitsLeft();
   const title = `${paywallProduct === null || paywallProduct === void 0 ? void 0 : (_paywallProduct$paywa = paywallProduct.paywall) === null || _paywallProduct$paywa === void 0 ? void 0 : _paywallProduct$paywa.meter_title}: ${visitsLeft}`;
@@ -25403,7 +25466,7 @@ const MeterView = () => {
 const MeterModal = props => {
   const {
     resetView
-  } = usePelcro$1();
+  } = usePelcro();
   React.useEffect(() => {
     var _props$onDisplay;
@@ -25441,7 +25504,7 @@ const SubscriptionCreateView = ({
   const {
     product,
     plan
-  } = usePelcro$1();
+  } = usePelcro();
   const skipPayment = (_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.skipPaymentForFreePlans;
   const showSubscriptionButton = skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0;
@@ -25499,7 +25562,7 @@ function SubscriptionCreateModal({
   const {
     product,
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = res => {
     var _otherProps$onSuccess;
@@ -25549,7 +25612,7 @@ const SubscriptionManageMembersContainer = ({
 }) => {
   const {
     subscriptionToManageMembers
-  } = usePelcro$1();
+  } = usePelcro();
   const subscription_id = subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : subscriptionToManageMembers.id;
   const handleListMembers = ({}, dispatch) => {
@@ -25810,17 +25873,17 @@ function SubscriptionManageMembersEmails(props) {
   }, props));
 }
-var _path$h;
+var _path$i;
-function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$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 SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     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$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
@@ -25930,11 +25993,7 @@ function SubscriptionManageMembersView(props) {
   } = useTranslation("subscriptionManageMembers");
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-login-view"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-font-semibold plc-text-center plc-text-gray-900 pelcro-title-wrapper"
-  }, /*#__PURE__*/React__default['default'].createElement("h4", {
-    className: "plc-text-2xl"
-  }, t("labels.inviteMembers")), /*#__PURE__*/React__default['default'].createElement("p", null, "Comma-separated list e.g. 'john@example.com,jane@example.com'")), /*#__PURE__*/React__default['default'].createElement("form", {
+  }, /*#__PURE__*/React__default['default'].createElement("form", {
     action: "javascript:void(0);",
     className: "plc-mt-2 pelcro-form"
   }, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null), /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersEmails, {
@@ -25980,6 +26039,10 @@ function SubscriptionManageMembersModal({
   onClose,
   ...props
 }) {
+  const {
+    t
+  } = useTranslation("subscriptionManageMembers");
   const onSuccess = res => {
     var _props$onSuccess;
@@ -25991,9 +26054,13 @@ function SubscriptionManageMembersModal({
     onDisplay: onDisplay,
     onClose: onClose,
     className: "plc-max-w-xl"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersView, Object.assign({}, props, {
+  }, /*#__PURE__*/React__default['default'].createElement(ModalHeader, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-center plc-text-gray-900 pelcro-title-wrapper plc-flex-1 plc-flex plc-flex-col plc-justify-center"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("labels.inviteMembers")), /*#__PURE__*/React__default['default'].createElement("p", null, "Comma-separated list e.g. 'john@example.com,jane@example.com'"))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersView, Object.assign({}, props, {
     onSuccess: onSuccess
-  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 }
 SubscriptionManageMembersModal.viewId = "manage-members";
@@ -26207,17 +26274,17 @@ const UserUpdateContainer = ({
   })));
 };
-var _path$g;
+var _path$h;
-function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
+function _extends$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 SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -26571,7 +26638,7 @@ function UserUpdateModal({
 }) {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("userEdit");
@@ -26656,7 +26723,7 @@ const AddressCreateContainer = ({
     order,
     set,
     selectedMembership
-  } = usePelcro$1();
+  } = usePelcro();
   const giftCode = (_props$giftCode = props.giftCode) !== null && _props$giftCode !== void 0 ? _props$giftCode : giftCodeFromStore;
   const subscriptionIdToRenew = (_ref = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : subscriptionIdToRenewFromStore) !== null && _ref !== void 0 ? _ref : undefined;
   React.useEffect(() => {
@@ -27414,7 +27481,7 @@ const AddressCreateModal = ({
     switchToPaymentView,
     resetView,
     giftRecipient
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("address");
@@ -27512,7 +27579,7 @@ const AddressUpdateContainer = ({
   const {
     addressIdToEdit
-  } = usePelcro$1();
+  } = usePelcro();
   const addressId = (_props$addressId = props === null || props === void 0 ? void 0 : props.addressId) !== null && _props$addressId !== void 0 ? _props$addressId : addressIdToEdit;
   const [t] = useTranslation("address");
   React.useEffect(() => {
@@ -28606,7 +28673,7 @@ const PasswordForgotModal = ({
   } = useTranslation("passwordForgot");
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
@@ -29205,7 +29272,7 @@ const CartContainer = ({
   const {
     cartItems,
     set
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("shop");
@@ -29310,15 +29377,16 @@ const CartRemoveItemButton = ({
 }) => {
   const {
     removeFromCart
-  } = usePelcro$1();
+  } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     variant: "icon",
     "data-key": itemId,
     icon: /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
       "aria-hidden": "true",
-      focusable: "false"
+      focusable: "false",
+      className: "plc-fill-current"
     }),
-    className: "plc-bg-transparent plc-w-9 plc-h-9 plc-p-2",
+    className: "plc-bg-transparent plc-w-9 plc-h-9 plc-p-2 hover:plc-text-red-500 hover:plc-bg-transparent",
     onClick: () => {
       removeFromCart(itemId);
       onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -29373,7 +29441,7 @@ const CartTotalPrice = () => {
   } = React.useContext(store$8);
   const {
     cartItems
-  } = usePelcro$1();
+  } = usePelcro();
   const totalPriceCurrency = cartItems[0].currency;
   const {
     t
@@ -29393,7 +29461,7 @@ const CartTotalPrice = () => {
 const CartView = props => {
   const {
     cartItems
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("cart");
@@ -29452,7 +29520,7 @@ const CartModal = ({
     switchView,
     switchToAddressView,
     isAuthenticated
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("cart");
@@ -29491,7 +29559,7 @@ const ShopSelectProductButton = ({
 }) => {
   const {
     addToCart
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("shop");
@@ -29523,7 +29591,7 @@ const ShopPurchaseButton = ({
 }) => {
   const {
     purchaseItem
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("shop");
@@ -29594,7 +29662,7 @@ const OrderCreateModal = ({
 }) => {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("payment");
@@ -29631,7 +29699,7 @@ const OrderConfirmModal = props => {
   } = useTranslation("shop");
   const {
     resetView
-  } = usePelcro$1();
+  } = usePelcro();
   const onClose = () => {
     var _props$onClose;
@@ -29723,7 +29791,7 @@ const GiftCreateContainer = ({
   } = useTranslation("register");
   const {
     set
-  } = usePelcro$1();
+  } = usePelcro();
   const handleSubmit = (state, dispatch) => {
     const giftRecipient = {
@@ -30011,7 +30079,7 @@ const GiftCreateModal = ({
     switchToAddressView,
     switchToPaymentView,
     product
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = giftRecipient => {
     var _otherProps$onSuccess;
@@ -30076,13 +30144,13 @@ const GiftRedeemContainer = ({
   } = useTranslation("register");
   const {
     set
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     switchView,
     switchToAddressView,
     isAuthenticated,
     subscriptionIdToRenew: subscriptionIdToRenewFromStore
-  } = usePelcro$1();
+  } = usePelcro();
   const subscriptionIdToRenew = (_ref = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : subscriptionIdToRenewFromStore) !== null && _ref !== void 0 ? _ref : undefined;
   React.useEffect(() => {
     onDisplay();
@@ -30290,7 +30358,7 @@ const GiftRedeemModal = ({
     switchView,
     switchToAddressView,
     isAuthenticated
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = giftCode => {
     var _otherProps$onSuccess;
@@ -30367,7 +30435,7 @@ const AddressSelectContainer = ({
     subscriptionIdToRenew: subscriptionIdToRenewFromStore,
     set,
     selectedMembership
-  } = usePelcro$1();
+  } = usePelcro();
   const giftCode = (_props$giftCode = props.giftCode) !== null && _props$giftCode !== void 0 ? _props$giftCode : giftCodeFromStore;
   const subscriptionIdToRenew = (_ref = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : subscriptionIdToRenewFromStore) !== null && _ref !== void 0 ? _ref : undefined;
@@ -30606,7 +30674,7 @@ const AddressSelectModal = ({
     switchView,
     switchToPaymentView,
     resetView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("address");
@@ -30691,7 +30759,7 @@ const PaymentMethodSelectContainer = ({
   const {
     set,
     selectedPaymentMethodId: selectedPaymentMethodIdFromStore
-  } = usePelcro$1();
+  } = usePelcro();
   const submitPaymentMethod = ({
     selectedPaymentMethodId
@@ -30870,12 +30938,12 @@ const PaymentMethodSelectModal = ({
     switchToCheckoutForm,
     set,
     plan
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("paymentMethod");
   const skipPayment = (_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.skipPaymentForFreePlans;
-  useEffect(() => {
+  React.useEffect(() => {
     if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
       switchToCheckoutForm();
     }
@@ -30911,8 +30979,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
-function _extends$g() {
-  _extends$g = Object.assign || function (target) {
+function _extends$h() {
+  _extends$h = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
@@ -30926,7 +30994,7 @@ function _extends$g() {
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -31110,7 +31178,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$g({}, _rest, {
+      return _render(_extends$h({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -31638,7 +31706,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['default'].createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$g({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 function Transition(props) {
@@ -31682,7 +31750,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$g({}, sharedProps, {
+  }, render(_extends$h({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -31809,12 +31877,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -31833,7 +31901,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -31844,19 +31912,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$g({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$h({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -31869,7 +31937,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -31908,19 +31976,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$g({}, state, {
+  return _extends$h({}, 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$g({}, state, {
+  return _extends$h({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -31941,7 +32009,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -31954,10 +32022,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$g({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$h({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -31965,11 +32033,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -31982,7 +32050,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$g({}, state, {
+  return _extends$h({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -32000,13 +32068,31 @@ Features.RenderStrategy | Features.Static;
 var GroupContext = /*#__PURE__*/React.createContext(null);
 GroupContext.displayName = 'GroupContext';
+var _path$g;
+function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function SvgExit(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+    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$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+  })));
+}
 var _path$f;
 function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
-function SvgExit(props) {
+function SvgUser(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
-    className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -32015,7 +32101,7 @@ function SvgExit(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+    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"
   })));
 }
@@ -32023,9 +32109,10 @@ var _path$e;
 function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
-function SvgUser(props) {
+function SvgNewsletter(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -32033,7 +32120,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"
   })));
 }
@@ -32041,10 +32128,10 @@ var _path$d;
 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 SvgNewsletter(props) {
+function SvgRefresh(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+    className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -32052,7 +32139,7 @@ function SvgNewsletter(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    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"
+    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
   })));
 }
@@ -32060,10 +32147,10 @@ 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 SvgRefresh(props) {
+function SvgDocument(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
-    className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -32071,7 +32158,7 @@ function SvgRefresh(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
   })));
 }
@@ -32079,10 +32166,10 @@ 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 SvgDocument(props) {
+function SvgPaymentCard(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+    className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -32090,15 +32177,15 @@ function SvgDocument(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
   })));
 }
-var _path$a;
+var _path$a, _path2;
 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 SvgPaymentCard(props) {
+function SvgLocationPin(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
@@ -32109,15 +32196,20 @@ function SvgPaymentCard(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+    d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
   })));
 }
-var _path$9, _path2;
+var _path$9;
 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 SvgLocationPin(props) {
+function SvgShopping(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
@@ -32128,12 +32220,7 @@ function SvgLocationPin(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
   })));
 }
@@ -32141,7 +32228,7 @@ var _path$8;
 function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-function SvgShopping(props) {
+function SvgBookmark(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
@@ -32152,7 +32239,7 @@ function SvgShopping(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
   })));
 }
@@ -32160,9 +32247,9 @@ var _path$7;
 function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
-function SvgBookmark(props) {
+function SvgPlus(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
-    className: "plc-w-6 plc-h-6 plc-mr-2",
+    className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -32171,7 +32258,7 @@ function SvgBookmark(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
   })));
 }
@@ -32179,18 +32266,15 @@ var _path$6;
 function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-function SvgPlus(props) {
+function SvgKey(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
-    className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
   }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M12 6v6m0 0v6m0-6h6m-6 0H6"
+    fillRule: "evenodd",
+    d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
+    clipRule: "evenodd"
   })));
 }
@@ -32315,7 +32399,7 @@ const SavedItems = ({
   const [isLoading, setLoading] = React.useState(false);
   const {
     isAuthenticated
-  } = usePelcro$1();
+  } = usePelcro();
   const removeItemFromMetadata = (category, title) => {
     const user = window.Pelcro.user.read();
@@ -32486,7 +32570,7 @@ const SubscriptionsItems = ({
     setSubscriptionToCancel,
     setSubscriptionToSuspend,
     set
-  } = usePelcro$1();
+  } = usePelcro();
   const subs = getNonDonationSubs();
   if (subs.length === 0) return null;
   return subs.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
@@ -32506,6 +32590,7 @@ const SubscriptionsItems = ({
         return switchView("email-verify");
       }
+      switchView(null);
       onClose === null || onClose === void 0 ? void 0 : onClose();
       notify.confirm((onSuccess, onFailure) => {
         cancelSubscription(sub.id, onSuccess, onFailure);
@@ -32904,7 +32989,7 @@ const DonationsMenu = ({
   const {
     t
   } = useTranslation("dashboard");
-  usePelcro$1();
+  usePelcro();
   const subscriptions = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
     return /*#__PURE__*/React__default['default'].createElement("tr", {
@@ -32982,7 +33067,7 @@ const InvoicesItems = () => {
   const {
     setInvoice,
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
   const showInvoiceDetails = event => {
@@ -33131,7 +33216,7 @@ const MembershipsItems = props => {
     switchView,
     setSelectedMembership,
     switchToAddressView
-  } = usePelcro$1();
+  } = usePelcro();
   const memberships = getActiveMemberships();
   const onChangeAddressClick = membershipId => {
@@ -33359,7 +33444,7 @@ const AddressesItems = props => {
   useTranslation("dashboard");
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const [selectedAddressId, setSelectedAddressId] = React.useState(null);
   const allAddresses = (_window$Pelcro$user$r = window.Pelcro.user.read().addresses) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
@@ -34903,7 +34988,7 @@ const ProfileMenu = props => {
   } = useTranslation("dashboard");
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const onPictureClick = () => {
     switchView("profile-picture");
@@ -35068,9 +35153,21 @@ const NewsLettersItems = ({
   });
 };
+const PasswordChangeMenu = () => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default['default'].createElement(Card, {
+    id: "pelcro-dashboard-profile-menu",
+    className: "plc-max-w-100% md:plc-max-w-80% plc-m-auto",
+    title: t("labels.changePassword")
+  }, /*#__PURE__*/React__default['default'].createElement(PasswordChangeView, null));
+};
 const SUB_MENUS = {
   PROFILE: "profile",
   QRCODE: "qr-code",
+  PASSWORDCHANGE: "passwordChange",
   SUBSCRIPTIONS: "subscriptions",
   DONATIONS: "donations",
   MEMBERSHIPS: "memberships",
@@ -35098,7 +35195,7 @@ function DashboardWithHook(props) {
     resetView,
     logout,
     set
-  } = usePelcro$1();
+  } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(DashboardWithTrans, {
     setAddress: addressIdToEdit => set({
       addressIdToEdit
@@ -35477,7 +35574,16 @@ class Dashboard extends React.Component {
       className: "plc-font-bold"
     }, this.user.first_name, " ", this.user.last_name), /*#__PURE__*/React__default['default'].createElement("p", {
       className: `plc-m-0 plc-text-sm ${userHasName ? "plc-text-sm" : "plc-text-lg plc-font-bold plc-mt-auto"}`
-    }, this.user.email)))), /*#__PURE__*/React__default['default'].createElement("section", {
+    }, this.user.email)), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "lg:plc-hidden"
+    }, /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      type: "button",
+      className: "plc-text-gray-500 plc-rounded-2xl plc-absolute plc-z-max plc-top-5 plc-right-10",
+      onClick: this.closeDashboard
+    }, /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
+      className: "plc-fill-current"
+    }))))), /*#__PURE__*/React__default['default'].createElement("section", {
       className: "plc-mt-6 plc-shadow-sm"
     }, /*#__PURE__*/React__default['default'].createElement("header", {
       className: "plc-pl-4 plc-mb-2 sm:plc-pl-8"
@@ -35499,6 +35605,14 @@ class Dashboard extends React.Component {
       title: "My QR code",
       setActiveDashboardLink: this.setActiveDashboardLink,
       activeDashboardLink: this.state.activeDashboardLink
+    }), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
+      name: SUB_MENUS.PASSWORDCHANGE,
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgKey, {
+        className: "plc-w-6 plc-h-6 plc-mr-2"
+      }),
+      title: "Change password",
+      setActiveDashboardLink: this.setActiveDashboardLink,
+      activeDashboardLink: this.state.activeDashboardLink
     }), /*#__PURE__*/React__default['default'].createElement(DashboardLink, {
       name: SUB_MENUS.SAVED_ITEMS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
@@ -35586,7 +35700,7 @@ class Dashboard extends React.Component {
     }))), this.state.activeDashboardLink && isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
       id: "pelcro-view-dashboard-submenus",
       className: "plc-fixed plc-inset-y-0 plc-right-0 plc-h-full lg:plc-w-9/12 plc-w-full plc-bg-gray-100 plc-z-max plc-overflow-auto"
-    }, this.state.activeDashboardLink === SUB_MENUS.PROFILE && /*#__PURE__*/React__default['default'].createElement(ProfileMenu, null), this.state.activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default['default'].createElement(QRCodeMenu, null), this.state.activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default['default'].createElement(SavedItemsMenu, null), this.state.activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default['default'].createElement(PaymentCardsMenu, {
+    }, this.state.activeDashboardLink === SUB_MENUS.PROFILE && /*#__PURE__*/React__default['default'].createElement(ProfileMenu, null), this.state.activeDashboardLink === SUB_MENUS.QRCODE && /*#__PURE__*/React__default['default'].createElement(QRCodeMenu, null), this.state.activeDashboardLink === SUB_MENUS.PASSWORDCHANGE && /*#__PURE__*/React__default['default'].createElement(PasswordChangeMenu, null), this.state.activeDashboardLink === SUB_MENUS.SAVED_ITEMS && /*#__PURE__*/React__default['default'].createElement(SavedItemsMenu, null), this.state.activeDashboardLink === SUB_MENUS.PAYMENT_CARDS && /*#__PURE__*/React__default['default'].createElement(PaymentCardsMenu, {
       displaySourceCreate: this.displaySourceCreate
     }), this.state.activeDashboardLink === SUB_MENUS.ADDRESSES && /*#__PURE__*/React__default['default'].createElement(AddressesMenu, {
       displayAddressCreate: this.displayAddressCreate,
@@ -35647,7 +35761,7 @@ const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
 const DashboardOpenButton = () => {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-fixed plc-left-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
@@ -37405,7 +37519,7 @@ const ProfilePicChangeRemoveButton = ({
   } = useTranslation("userEdit");
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     icon: /*#__PURE__*/React__default['default'].createElement(SvgXIcon, {
-      className: "plc-h-6 plc-w-6"
+      className: "plc-h-6 plc-w-6 plc-fill-current"
     }),
     isLoading: isSubmitting,
     onClick: () => {
@@ -37640,9 +37754,9 @@ const EmailVerifyModal = ({
   } = usePelcro();
   const onSuccess = res => {
-    var _props$onSuccess, _props;
+    var _otherProps$onSuccess;
-    (_props$onSuccess = (_props = props).onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(_props, res);
+    otherProps === null || otherProps === void 0 ? void 0 : (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, res);
     if (product) {
       if (product.address_required) {
@@ -37801,7 +37915,7 @@ function VerifyLinkTokenModal({
   } = useTranslation("verifyLinkToken");
   const {
     resetView
-  } = usePelcro$1();
+  } = usePelcro();
   const onSuccess = res => {
     var _props$onSuccess;
@@ -37850,7 +37964,7 @@ const InvoicePaymentModal = ({
 }) => {
   const {
     switchView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("payment");
@@ -37934,7 +38048,7 @@ const InvoiceDetailsDownloadButton = ({
   } = useTranslation("invoiceDetails");
   const {
     invoice
-  } = usePelcro$1();
+  } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(Link, Object.assign({
     className: `plc-px-6 plc-py-2 plc-uppercase plc-bg-transparent plc-text-primary-500 plc-border plc-border-primary-500 plc-rounded focus:plc-outline-none focus:plc-ring-2 focus:plc-ring-primary-300 plc-tracking-wider hover:plc-bg-primary-600 focus:plc-bg-primary-600 hover:plc-text-white focus:plc-text-white hover:plc-shadow-none plc-no-underline ${className}`,
     id: "pelcro-download-invoice-link",
@@ -37971,7 +38085,7 @@ const InvoiceDetailsView = props => {
   } = useTranslation("invoiceDetails");
   const {
     invoice
-  } = usePelcro$1();
+  } = usePelcro();
   const showPayButton = canPayInvoice(invoice);
   const showDownloadButton = Boolean(invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf);
   const hasPlanDetails = Boolean(invoice.plan);
@@ -38035,7 +38149,7 @@ const InvoiceDetailsModal = ({
 }) => {
   const {
     switchToPaymentView
-  } = usePelcro$1();
+  } = usePelcro();
   const {
     t
   } = useTranslation("invoiceDetails");
@@ -38325,4 +38439,4 @@ exports.initContentEntitlement = init;
 exports.invoicePaymentSubmitButton = invoicePaymentSubmitButton;
 exports.notify = notify;
 exports.unauthenticatedButtons = unauthenticatedButtons;
-exports.usePelcro = usePelcro$1;
+exports.usePelcro = usePelcro;