@pelcro/react-pelcro-js 3.14.0 → 3.15.1-beta.1

package/dist/index.esm.js

@@ -3604,6 +3604,8 @@ var labels$Y = {
 	email: "Email",
 	firstName: "First name",
 	lastName: "Last name",
+	username: "Username",
+	displayname: "Display name",
 	phone: "Phone",
 	submit: "Submit",
 	required: "Required",
@@ -4537,6 +4539,8 @@ var labels$D = {
 	email: "Address courriel",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
+	username: "Nom d'utilisateur",
+	displayname: "Afficher un nom",
 	phone: "Numéro de téléphone",
 	submit: "Soumettre",
 	required: "Champs obligatoires",
@@ -5354,6 +5358,8 @@ var labels$o = {
 	email: "이메일",
 	firstName: "이름",
 	lastName: "성",
+	username: "사용자 이름",
+	displayname: "이름 표시하기",
 	phone: "전화번호",
 	submit: "제출",
 	required: "필수 항목",
@@ -6273,6 +6279,8 @@ var labels$9 = {
 	email: "Correo",
 	firstName: "Nombre",
 	lastName: "Apellido",
+	username: "Nombre de usuario",
+	displayname: "Nombre para mostrar",
 	phone: "Teléfono",
 	submit: "Enviar",
 	required: "Obligatorio",
@@ -8279,7 +8287,7 @@ class PelcroActions {
         return console.error("invalid subscription id");
       }
 
-      if ((subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : (_subscriptionToManage = subscriptionToManageMembers.plan) === null || _subscriptionToManage === void 0 ? void 0 : _subscriptionToManage.type) !== 'membership') {
+      if ((subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : (_subscriptionToManage = subscriptionToManageMembers.plan) === null || _subscriptionToManage === void 0 ? void 0 : _subscriptionToManage.type) !== "membership") {
         return console.error("subscription is not from type membership");
       }
 
@@ -8579,7 +8587,7 @@ const createPelcroHook = store => {
 
   pelcroHook.override = fn => {
     const partialState = fn(store.setState, store.getState);
-    usePelcro.setState(partialState);
+    usePelcro$1.setState(partialState);
   };
 
   pelcroHook.getStore = pelcroHook.getState;
@@ -8587,11 +8595,11 @@ const createPelcroHook = store => {
 };
 
 const pelcroStore = createPelcroStore();
-const usePelcro = createPelcroHook(pelcroStore);
+const usePelcro$1 = createPelcroHook(pelcroStore);
 /* istanbul ignore next */
 
 if (process.env.NODE_ENV === "development") {
-  c$1("Pelcro Store", usePelcro);
+  c$1("Pelcro Store", usePelcro$1);
 }
 
 /**
@@ -8796,7 +8804,7 @@ const trackSubscriptionOnGA = () => {
     product,
     plan,
     couponCode
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   /*   
   getting the latest subscription id from invoices instead of subscriptions
   to handle gifted subs which are not added to subs list
@@ -9116,7 +9124,7 @@ class SaveToMetadataButtonClass {
     _defineProperty$3(this, "unauthenticated", () => {
       const {
         switchView
-      } = usePelcro.getStore();
+      } = usePelcro$1.getStore();
 
       _classPrivateFieldGet(this, _onClick).call(this, () => switchView("login"));
 
@@ -9199,7 +9207,7 @@ class SaveToMetadataButtonClass {
         const user = window.Pelcro.user.read();
         const {
           switchView
-        } = usePelcro.getStore();
+        } = usePelcro$1.getStore();
         const {
           key,
           ...buttonMetadata
@@ -10303,7 +10311,7 @@ toast.confirm = (onConfirm, {
       ...options
     });
     setTimeout(() => {
-      notify.dismiss(id);
+      notify$1.dismiss(id);
     }, 3000);
   };
 
@@ -10313,12 +10321,12 @@ toast.confirm = (onConfirm, {
       ...options
     });
     setTimeout(() => {
-      notify.dismiss(id);
+      notify$1.dismiss(id);
     }, 3000);
   };
 };
 
-const notify = toast;
+const notify$1 = toast;
 
 const translations = i18next.t("common:buttons", {
   returnObjects: true
@@ -10335,7 +10343,7 @@ const init$1 = () => {
     addToCart,
     purchaseItem,
     setSubscriptionToManageMembers
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const pelcroDashboardButtonsByClass = document.getElementsByClassName("pelcro-dashboard-button");
 
   if (pelcroDashboardButtonsByClass.length !== 0) {
@@ -10389,7 +10397,7 @@ const init$1 = () => {
             const errorMessage = i18next.t("messages:invalidSubscription", {
               returnObjects: true
             });
-            return notify.error(errorMessage);
+            return notify$1.error(errorMessage);
           }
 
           switchView("manage-members");
@@ -10398,7 +10406,7 @@ const init$1 = () => {
         const errorMessage = i18next.t("messages:invalidSubscription", {
           returnObjects: true
         });
-        return notify.error(errorMessage);
+        return notify$1.error(errorMessage);
       }
     }
   }
@@ -10568,7 +10576,7 @@ const init$1 = () => {
             const errorMsg = i18next.t("shop:messages.currencyMismatch", {
               currency: userCurrency
             });
-            notify.error(errorMsg);
+            notify$1.error(errorMsg);
           }
         });
       }
@@ -10638,7 +10646,7 @@ const init = () => {
   const {
     switchView,
     set
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
 
   if (entitlementsProtectedElements.length === 0) {
@@ -10669,8 +10677,10 @@ const init = () => {
       disableKeyboardInteractions(elemDeepClone);
       elemDeepClone.setAttribute("style", "filter:blur(3px) !important; pointer-events:none !important; user-select:none !important");
       unblurElemWhenUserSubscribes(elemDeepClone, entitlements);
+      unblurElemWhenUserLogsIn(elemDeepClone, entitlements);
+      unblurElemWhenUserLogsOut(elemDeepClone, entitlements);
       const NOTIFICATION_ID = "entitlement";
-      notify( /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement(Trans, {
+      notify$1( /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement(Trans, {
         i18nKey: "messages:entitlement"
       }, "Some of the content on this page is available with one or more of our plans.", /*#__PURE__*/React__default.createElement(Link, {
         onClick: () => {
@@ -10687,7 +10697,7 @@ const init = () => {
             });
           }
 
-          notify.dismiss(NOTIFICATION_ID);
+          notify$1.dismiss(NOTIFICATION_ID);
           switchView("_plan-select-entitlements");
         }
       }, "Subscribe"), "now to get full page access.")), {
@@ -10727,7 +10737,7 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
   document.addEventListener("PelcroSubscriptionCreate", event => {
     const {
       isGift
-    } = usePelcro.getStore();
+    } = usePelcro$1.getStore();
     if (isGift) return;
     const latestSub = event.detail.data.subscriptions[event.detail.data.subscriptions.length - 1];
     const shouldUnblurContent = entitlements.some(ent => {
@@ -10742,6 +10752,22 @@ function unblurElemWhenUserSubscribes(elem, entitlements) {
   });
 }
 
+function unblurElemWhenUserLogsIn(elem, entitlements) {
+  document.addEventListener("PelcroUserLoggedIn", () => {
+    if (!shouldBlurContent(entitlements)) {
+      elem.setAttribute("style", "filter:inherit !important; pointer-events:inherit !important; user-select:inherit !important");
+    }
+  });
+}
+
+function unblurElemWhenUserLogsOut(elem, entitlements) {
+  document.addEventListener("PelcroUserLogout", () => {
+    if (shouldBlurContent(entitlements)) {
+      elem.setAttribute("style", "filter:blur(3px) !important; pointer-events:none !important; user-select:none !important");
+    }
+  });
+}
+
 function shouldBlurContent(entitlements) {
   return entitlements.every(entitlement => !window.Pelcro.user.isEntitledTo(entitlement));
 }
@@ -11049,7 +11075,7 @@ const initPaywalls = () => {
 
     const {
       switchView
-    } = usePelcro.getStore();
+    } = usePelcro$1.getStore();
 
     if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
       /* 
@@ -11071,7 +11097,7 @@ const loadPaymentSDKs = () => {
   // Lazy load stripe's SDK
   const {
     whenUserReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenUserReady(() => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
@@ -11119,7 +11145,7 @@ const loadAuth0SDK = () => {
 const initSecuritySdk = () => {
   const {
     whenSiteReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     var _window$Pelcro$site$r2;
 
@@ -11155,7 +11181,7 @@ const dispatchModalDisplayEvents = modalName => {
 const {
   whenSiteReady,
   whenEcommerceLoaded
-} = usePelcro.getStore();
+} = usePelcro$1.getStore();
 const renderShopView = shopComponent => {
   whenEcommerceLoaded(() => {
     const shopElement = document.getElementById("pelcro-shop");
@@ -11237,7 +11263,7 @@ const initViewFromURL = () => {
   const {
     switchView,
     whenSiteReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
 
   if (isValidViewFromURL(view)) {
     whenSiteReady(() => {
@@ -11295,7 +11321,7 @@ const initSubscriptionFromURL = () => {
     switchView,
     whenSiteReady,
     set
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     var _selectedProduct$plan;
 
@@ -11319,7 +11345,7 @@ const initSubscriptionFromURL = () => {
       isAuthenticated,
       switchToAddressView,
       switchToPaymentView
-    } = usePelcro.getStore();
+    } = usePelcro$1.getStore();
 
     if (!isAuthenticated()) {
       return switchView("register");
@@ -11351,7 +11377,7 @@ const initOfflineSubscriptionFromURL = offlinePlanId => {
     switchToPaymentView,
     switchToAddressView,
     set
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     window.Pelcro.plan.getPlan({
       plan_id: offlinePlanId
@@ -11398,7 +11424,7 @@ const initPurchaseFromUrl = () => {
   const {
     whenEcommerceLoaded,
     purchaseItem
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenEcommerceLoaded(() => {
     const skuId = window.Pelcro.helpers.getURLParameter("sku_id");
     purchaseItem(skuId);
@@ -11414,7 +11440,7 @@ const initCartFromUrl = () => {
     whenEcommerceLoaded,
     addToCart,
     switchView
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenEcommerceLoaded(() => {
     const skusIdsParam = window.Pelcro.helpers.getURLParameter("sku_id");
     const skusIds = skusIdsParam === null || skusIdsParam === void 0 ? void 0 : skusIdsParam.split(",");
@@ -11435,7 +11461,7 @@ const verifyEmailTokenFromUrl = () => {
 
   const {
     whenSiteReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const translations = i18next.t("verifyEmail:messages", {
     returnObjects: true
   });
@@ -11447,10 +11473,10 @@ const verifyEmailTokenFromUrl = () => {
       token: emailToken
     }, (err, res) => {
       if (err) {
-        return notify.error(getErrorMessages(err));
+        return notify$1.error(getErrorMessages(err));
       }
 
-      return notify.success(translations.success);
+      return notify$1.success(translations.success);
     });
   }, {
     once: true
@@ -11464,7 +11490,7 @@ const verifyLinkTokenFromUrl = () => {
     whenSiteReady,
     resetView,
     isAuthenticated
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const translations = i18next.t("verifyLinkToken:messages", {
     returnObjects: true
   });
@@ -11476,7 +11502,7 @@ const verifyLinkTokenFromUrl = () => {
       token: loginToken
     }, (err, res) => {
       if (err) {
-        return notify.error(getErrorMessages(err));
+        return notify$1.error(getErrorMessages(err));
       }
 
       const {
@@ -11486,11 +11512,11 @@ const verifyLinkTokenFromUrl = () => {
         auth_token
       }, (err, res) => {
         if (err) {
-          return notify.error(getErrorMessages(err));
+          return notify$1.error(getErrorMessages(err));
         }
 
         resetView();
-        return notify.success(translations.success);
+        return notify$1.success(translations.success);
       });
     });
   }, {
@@ -11503,12 +11529,12 @@ const showPasswordlessRequestFromUrl = () => {
 
   const {
     isAuthenticated
-  } = usePelcro.getStore();
+  } = usePelcro$1.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.getStore();
+  } = usePelcro$1.getStore();
   return switchView("passwordless-request");
 };
 
@@ -11519,7 +11545,7 @@ const showInvoiceDetailsFromUrl = () => {
     whenUserReady,
     whenSiteReady,
     switchView
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
@@ -11533,18 +11559,18 @@ const showInvoiceDetailsFromUrl = () => {
         const errorMessage = i18next.t("messages:invalidInvoice", {
           returnObjects: true
         });
-        return notify.error(errorMessage);
+        return notify$1.error(errorMessage);
       }
 
       const {
         invoice
-      } = usePelcro.getStore();
+      } = usePelcro$1.getStore();
 
       if (invoice.total === 0) {
         const errorMessage = i18next.t("messages:zeroTotalInvoice", {
           returnObjects: true
         });
-        return notify.error(errorMessage);
+        return notify$1.error(errorMessage);
       }
 
       return switchView("invoice-details");
@@ -11559,7 +11585,7 @@ const showSubscriptionManageMembersFromUrl = () => {
     whenUserReady,
     whenSiteReady,
     switchView
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
@@ -11573,7 +11599,7 @@ const showSubscriptionManageMembersFromUrl = () => {
         const errorMessage = i18next.t("messages:invalidSubscription", {
           returnObjects: true
         });
-        return notify.error(errorMessage);
+        return notify$1.error(errorMessage);
       }
 
       return switchView("manage-members");
@@ -11599,7 +11625,7 @@ const PelcroModalController = ({
     view,
     isAuthenticated,
     whenSiteReady
-  } = usePelcro();
+  } = usePelcro$1();
   React__default.useEffect(() => {
     init$1();
     renderShopView(React__default.Children.map(children, child => child).find(({
@@ -13360,7 +13386,7 @@ function Modal({
 }) {
   var _window$Pelcro, _window$Pelcro$site$r;
 
-  const resetView = usePelcro(state => state.resetView);
+  const resetView = usePelcro$1(state => state.resetView);
   useEffect(() => {
     onDisplay === null || onDisplay === void 0 ? void 0 : onDisplay();
     dispatchModalDisplayEvents(id);
@@ -13433,8 +13459,11 @@ function LoginModal({
   const {
     switchView,
     resetView,
-    invoice
-  } = usePelcro();
+    product,
+    order,
+    switchToAddressView,
+    switchToPaymentView
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _props$onSuccess;
@@ -13445,10 +13474,23 @@ function LoginModal({
       initPaywalls();
     }
 
+    if (product) {
+      if (product.address_required) {
+        return switchToAddressView();
+      } else {
+        return switchToPaymentView();
+      }
+    }
+
+    if (order) {
+      return switchToAddressView();
+    }
+
     resetView();
     const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
+    const viewsURLs = ["invoice-details", "gift-redeem", "plan-select"];
 
-    if (viewFromURL === "invoice-details") {
+    if (viewsURLs.includes(viewFromURL)) {
       initViewFromURL();
     }
   };
@@ -13771,7 +13813,7 @@ function RegisterView(props) {
   } = useTranslation("register");
   const {
     product
-  } = usePelcro();
+  } = usePelcro$1();
   const title = (_product$paywall$regi = product === null || product === void 0 ? void 0 : (_product$paywall = product.paywall) === null || _product$paywall === void 0 ? void 0 : _product$paywall.register_title) !== null && _product$paywall$regi !== void 0 ? _product$paywall$regi : t("title");
   const subtitle = (_product$paywall$regi2 = product === null || product === void 0 ? void 0 : (_product$paywall2 = product.paywall) === null || _product$paywall2 === void 0 ? void 0 : _product$paywall2.register_subtitle) !== null && _product$paywall$regi2 !== void 0 ? _product$paywall$regi2 : t("subtitle");
   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);
@@ -14002,7 +14044,7 @@ function RegisterModal(props) {
     order,
     giftCode,
     isGift
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _props$onSuccess;
@@ -14032,7 +14074,7 @@ function RegisterModal(props) {
 
 
     if (giftCode) {
-      return switchToAddressView();
+      return switchView("gift-redeem"); // return switchToAddressView();
     } // Check if the subscription is meant as a gift (if so, gather recipients info)
 
 
@@ -14124,7 +14166,7 @@ function SelectModalWithHook(props) {
     resetView,
     view,
     set
-  } = usePelcro();
+  } = usePelcro$1();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
   const entitlements = entitlementsProtectedElements.length > 0 ? getEntitlementsFromElem(entitlementsProtectedElements[0]) : null;
   return /*#__PURE__*/React__default.createElement(SelectModalWithTrans, {
@@ -14396,7 +14438,7 @@ class SelectModal extends Component {
       const {
         switchToAddressView,
         switchToPaymentView
-      } = usePelcro.getStore();
+      } = usePelcro$1.getStore();
 
       if (!isAuthenticated) {
         return setView("register");
@@ -16599,16 +16641,16 @@ const PaymentMethodContainerWithoutStripe = ({
   const {
     t
   } = useTranslation("payment");
-  const pelcroStore = usePelcro();
+  const pelcroStore = usePelcro$1();
   const {
     set,
     order,
     selectedPaymentMethodId,
     couponCode
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     whenUserReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.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;
@@ -18072,11 +18114,11 @@ const PaymentMethodContainerWithoutStripe = ({
 
     if (show) {
       injectCardAuthenticationIframe(source);
-      cardAuthContainer.classList.remove("plc-hidden");
-      cardAuthContainer.classList.add("plc-flex");
+      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.classList.add("plc-hidden");
-      cardAuthContainer.classList.remove("plc-flex");
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.add("plc-hidden");
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.remove("plc-flex");
     }
   };
 
@@ -18084,11 +18126,11 @@ const PaymentMethodContainerWithoutStripe = ({
     const cardAuthContainer = document.querySelector(".card-authentication-success-container");
 
     if (show) {
-      cardAuthContainer.classList.remove("plc-hidden");
-      cardAuthContainer.classList.add("plc-flex");
+      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.classList.add("plc-hidden");
-      cardAuthContainer.classList.remove("plc-flex");
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.add("plc-hidden");
+      cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.classList.remove("plc-flex");
     }
   };
 
@@ -18099,7 +18141,7 @@ const PaymentMethodContainerWithoutStripe = ({
     const iframe = document.createElement("iframe");
     iframe.src = source !== null && source !== void 0 && (_source$redirect = source.redirect) !== null && _source$redirect !== void 0 && _source$redirect.url ? source.redirect.url : source.threeDSecure_url;
     iframe.style = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; z-index: 10;";
-    cardAuthContainer.appendChild(iframe);
+    cardAuthContainer === null || cardAuthContainer === void 0 ? void 0 : cardAuthContainer.appendChild(iframe);
   };
 
   const [state, dispatch] = useReducerWithSideEffects((state, action) => {
@@ -18288,7 +18330,7 @@ const PaymentMethodContainer = props => {
   const [isStripeLoaded, setIsStripeLoaded] = useState(Boolean(window.Stripe));
   const {
     whenUserReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   useEffect(() => {
     whenUserReady(() => {
       if (!window.Stripe) {
@@ -18389,7 +18431,7 @@ const PelcroPaymentRequestButton = props => {
 const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
-  } = usePelcro();
+  } = usePelcro$1();
   const cardProcessor = getSiteCardProcessor();
 
   if (selectedPaymentMethodId) {
@@ -18444,7 +18486,7 @@ const DiscountedPrice = props => {
   const {
     order,
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   const isTaxInclusive = (_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tax_inclusive;
   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;
@@ -18480,7 +18522,7 @@ const SubmitPaymentMethod = ({
 
   const {
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("checkoutForm");
@@ -18912,7 +18954,7 @@ const PaypalSubscribeButton = props => {
     plan,
     invoice,
     selectedAddressId
-  } = usePelcro();
+  } = usePelcro$1();
   useEffect(() => {
     var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
@@ -19054,7 +19096,7 @@ const SelectedPaymentMethod = () => {
   const {
     switchView,
     selectedPaymentMethodId
-  } = usePelcro();
+  } = usePelcro$1();
   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;
   });
@@ -19095,7 +19137,7 @@ const TaxAmount = () => {
   } = useContext(store$k);
   const {
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   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());
   const isTaxInclusive = (_window$Pelcro$site = window.Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : (_window$Pelcro$site$r = _window$Pelcro$site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tax_inclusive;
@@ -19241,7 +19283,7 @@ const SubscriptionRenewView = ({
   const {
     product,
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   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;
 
@@ -19296,7 +19338,7 @@ function SubscriptionRenewModal({
 }) {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _otherProps$onSuccess, _ReactGA$event;
@@ -19501,7 +19543,7 @@ const SubscriptionCancelNowButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     state: {
       cancelationReason
@@ -19548,7 +19590,7 @@ const SubscriptionCancelNowButton = ({
 
     switchView(null); //Show confirmation alert after closing the modal
 
-    notify.confirm((onSuccess, onFailure) => {
+    notify$1.confirm((onSuccess, onFailure) => {
       cancelSubscription(payload, onSuccess, onFailure);
     }, {
       confirmMessage: t("messages.subCancellation.isSureToCancelNow"),
@@ -19573,7 +19615,7 @@ const SubscriptionCancelLaterButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     state: {
       cancelationReason
@@ -19620,7 +19662,7 @@ const SubscriptionCancelLaterButton = ({
 
     switchView(null); //Show confirmation alert after closing the modal
 
-    notify.confirm((onSuccess, onFailure) => {
+    notify$1.confirm((onSuccess, onFailure) => {
       cancelSubscription(payload, onSuccess, onFailure);
     }, {
       confirmMessage: t("messages.subCancellation.isSureToCancel"),
@@ -19641,7 +19683,7 @@ const SubscriptionCancelLaterButton = ({
 const SubscriptionCancelView = props => {
   const {
     subscriptionToCancel
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -19815,7 +19857,7 @@ const SubscriptionSuspendButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     state: {
       suspendDate,
@@ -19857,7 +19899,7 @@ const SubscriptionSuspendButton = ({
 
     switchView(null); //Show confirmation alert after closing the modal
 
-    notify.confirm((onSuccess, onFailure) => {
+    notify$1.confirm((onSuccess, onFailure) => {
       suspendSubscription(payload, onSuccess, onFailure);
     }, {
       confirmMessage: t("messages.subCancellation.isSureToSuspendNow"),
@@ -19879,7 +19921,7 @@ const SubscriptionSuspendButton = ({
 const SubscriptionSuspendView = props => {
   const {
     subscriptionToSuspend
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -19972,7 +20014,7 @@ const getCurrentFlow = () => {
     giftRecipient,
     giftCode,
     invoice
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
 
   if (invoice) {
     return "invoicePayment";
@@ -19991,7 +20033,7 @@ const getSuccessContent = i18n => {
   const flow = getCurrentFlow();
   const {
     product
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const wordingDictionary = {
     subscriptionSuccess: {
       successIcon: /*#__PURE__*/React__default.createElement(SvgCheckSolid, {
@@ -20035,7 +20077,7 @@ function PaymentSuccessModal({
 }) {
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onClose = () => {
     var _props$onClose;
@@ -20068,7 +20110,7 @@ function NewsletterWithHook(props) {
     switchView,
     resetView,
     product
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default.createElement(NewsLetter, {
     onClose: () => {
       var _props$onClose;
@@ -20567,7 +20609,7 @@ const MeterView = () => {
     switchView,
     product,
     isAuthenticated
-  } = usePelcro();
+  } = usePelcro$1();
   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}`;
@@ -20589,7 +20631,7 @@ const MeterView = () => {
 const MeterModal = props => {
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
   useEffect(() => {
     var _props$onDisplay;
 
@@ -20627,7 +20669,7 @@ const SubscriptionCreateView = ({
   const {
     product,
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   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;
 
@@ -20685,7 +20727,7 @@ function SubscriptionCreateModal({
   useTranslation("common");
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _otherProps$onSuccess;
@@ -20731,7 +20773,7 @@ const SubscriptionManageMembersContainer = ({
 }) => {
   const {
     subscriptionToManageMembers
-  } = usePelcro();
+  } = usePelcro$1();
   const subscription_id = subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : subscriptionToManageMembers.id;
 
   const handleListMembers = ({}, dispatch) => {
@@ -21026,8 +21068,8 @@ function SubscriptionManageMembersList(props) {
       return {
         title: sub.status,
         content: sub.status,
-        textColor: "plc-text-orange-700",
-        bgColor: "plc-bg-orange-100",
+        textColor: "plc-text-yellow-500",
+        bgColor: "plc-bg-yellow-100",
         icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
       };
     }
@@ -21083,7 +21125,8 @@ function SubscriptionManageMembersList(props) {
     key: member.id,
     className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
   }, /*#__PURE__*/React__default.createElement("td", {
-    className: "plc-truncate"
+    className: "plc-truncate plc-text-left",
+    title: member === null || member === void 0 ? void 0 : member.invitation_email
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
   }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default.createElement("td", {
@@ -21137,8 +21180,10 @@ function SubscriptionManageMembersView(props) {
     className: "plc-flex-shrink-0 plc-p-2 plc-text-xs plc-text-gray-400 plc-uppercase"
   }, t("labels.listOfMembers")), /*#__PURE__*/React__default.createElement("hr", {
     className: "plc-w-full plc-border-gray-300"
-  })), /*#__PURE__*/React__default.createElement("table", {
-    className: "plc-w-full plc-table-fixed"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-max-h-48 plc-overflow-x-hidden plc-overflow-y-auto"
+  }, /*#__PURE__*/React__default.createElement("table", {
+    className: "plc-w-full plc-table-fixed plc-text-center plc-p-2 plc-m-1"
   }, /*#__PURE__*/React__default.createElement("thead", {
     className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
   }, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
@@ -21147,7 +21192,7 @@ function SubscriptionManageMembersView(props) {
     className: "plc-w-3/12 "
   }, t("labels.status")), /*#__PURE__*/React__default.createElement("th", {
     className: "plc-w-3/12 "
-  }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement(SubscriptionManageMembersList, null)))))));
+  }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement(SubscriptionManageMembersList, null))))))));
 }
 
 /**
@@ -21176,7 +21221,7 @@ function SubscriptionManageMembersModal({
 }
 SubscriptionManageMembersModal.viewId = "manage-members";
 
-var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6;
+var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7;
 const initialState$f = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   emailError: null,
@@ -21184,10 +21229,12 @@ const initialState$f = {
   firstNameError: null,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
   lastNameError: null,
-  displayName: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.display_name,
-  phone: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.phone,
+  username: (_window$Pelcro$user$r4 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r4 === void 0 ? void 0 : _window$Pelcro$user$r4.username,
+  usernameError: null,
+  displayName: (_window$Pelcro$user$r5 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.display_name,
+  phone: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.phone,
   phoneError: null,
-  tin: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.tin,
+  tin: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.tin,
   buttonDisabled: false,
   textFields: {},
   alert: {
@@ -21218,26 +21265,29 @@ const UserUpdateContainer = ({
   }, []);
 
   const loadUserDataIntoFields = () => {
-    var _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12;
+    var _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10, _window$Pelcro$user$r11, _window$Pelcro$user$r12, _window$Pelcro$user$r13, _window$Pelcro$user$r14;
 
     const fields = [{
       type: SET_EMAIL,
-      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.email
+      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.email
     }, {
       type: SET_FIRST_NAME,
-      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.first_name
+      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.first_name
     }, {
       type: SET_LAST_NAME,
-      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.last_name
+      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.last_name
+    }, {
+      type: SET_USERNAME,
+      payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.username
     }, {
       type: SET_DISPLAY_NAME,
-      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.display_name
+      payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.display_name
     }, {
       type: SET_PHONE,
-      payload: (_window$Pelcro$user$r11 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r11 === void 0 ? void 0 : _window$Pelcro$user$r11.phone
+      payload: (_window$Pelcro$user$r13 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r13 === void 0 ? void 0 : _window$Pelcro$user$r13.phone
     }, {
       type: SET_TIN,
-      payload: (_window$Pelcro$user$r12 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r12 === void 0 ? void 0 : _window$Pelcro$user$r12.tin
+      payload: (_window$Pelcro$user$r14 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r14 === void 0 ? void 0 : _window$Pelcro$user$r14.tin
     }];
     fields.filter(field => Boolean(field.payload)).forEach(field => {
       dispatch(field);
@@ -21248,6 +21298,7 @@ const UserUpdateContainer = ({
     email,
     firstName,
     lastName,
+    username,
     phone,
     tin,
     textFields,
@@ -21258,6 +21309,9 @@ const UserUpdateContainer = ({
       email: email,
       first_name: firstName,
       last_name: lastName,
+      ...(username && {
+        username
+      }),
       display_name: displayName,
       phone: phone,
       tin: tin,
@@ -21343,6 +21397,18 @@ const UserUpdateContainer = ({
           lastName: ""
         });
 
+      case SET_USERNAME:
+        return lib_7({ ...state,
+          username: action.payload,
+          usernameError: null
+        });
+
+      case SET_USERNAME_ERROR:
+        return lib_7({ ...state,
+          usernameError: action.payload,
+          username: ""
+        });
+
       case SET_PHONE:
         return lib_7({ ...state,
           phone: action.payload,
@@ -21388,10 +21454,14 @@ const UserUpdateContainer = ({
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$f,
-    key: i
-  })) : /*#__PURE__*/React__default.cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        store: store$f,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default.cloneElement(children, {
     store: store$f
   })));
 };
@@ -21499,6 +21569,84 @@ const UserUpdateButton = ({
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.submit"));
 };
 
+function UpdateUserNameInput({
+  initWithUserName = true,
+  store,
+  ...otherProps
+}) {
+  const {
+    t
+  } = useTranslation("common");
+  const {
+    dispatch,
+    state: {
+      username: stateUsername,
+      usernameError
+    }
+  } = useContext(store);
+  const [username, setUsername] = useState(stateUsername);
+  const [finishedTyping, setFinishedTyping] = useState(false);
+  const handleInputChange = useCallback(value => {
+    setUsername(value);
+
+    if (finishedTyping) {
+      if (username !== null && username !== void 0 && username.length) {
+        dispatch({
+          type: SET_USERNAME,
+          payload: username
+        });
+      } else {
+        if (otherProps.required) {
+          dispatch({
+            type: SET_USERNAME_ERROR,
+            payload: t("validation.enterUsername")
+          });
+        } else {
+          dispatch({
+            type: SET_USERNAME,
+            payload: username
+          });
+        }
+      }
+    }
+  }, [dispatch, username, finishedTyping]);
+  useEffect(() => {
+    handleInputChange(username);
+  }, [finishedTyping, username, handleInputChange]); // Initialize username field with user's username
+
+  const loadFirstNameIntoField = () => {
+    handleInputChange(window.Pelcro.user.read().username);
+    dispatch({
+      type: SET_USERNAME,
+      payload: window.Pelcro.user.read().username
+    });
+  };
+
+  useEffect(() => {
+    if (initWithUserName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFirstNameIntoField();
+      });
+      loadFirstNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    type: "text",
+    error: usernameError,
+    value: username,
+    onChange: e => handleInputChange(e.target.value),
+    onBlur: () => setFinishedTyping(true),
+    onFocus: () => setFinishedTyping(false)
+  }, otherProps));
+}
+
+const UserUpdateUsername = props => /*#__PURE__*/React__default.createElement(UpdateUserNameInput, Object.assign({
+  store: store$f
+}, props));
+
 const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
   store: store$f
 }, props));
@@ -21598,13 +21746,45 @@ const UserUpdateTin = props => /*#__PURE__*/React__default.createElement(Tin, Ob
   store: store$f
 }, props));
 
+function DisplayName({
+  store,
+  ...otherProps
+}) {
+  const {
+    dispatch,
+    state
+  } = useContext(store);
+
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_DISPLAY_NAME,
+      payload: value
+    });
+  };
+
+  if (state.loading) {
+    return /*#__PURE__*/React__default.createElement(Loader, null);
+  }
+
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    type: "text",
+    value: state.displayName || null,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps));
+}
+
+const UserUpdateDisplayName = props => /*#__PURE__*/React__default.createElement(DisplayName, Object.assign({
+  store: store$f
+}, props));
+
 const UserUpdateView = props => {
-  var _window$Pelcro$site$r;
+  var _window$Pelcro$site$r, _window$Pelcro, _window$Pelcro$uiSett;
 
   const {
     t
   } = useTranslation("userEdit");
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
+  const showUsernameInput = (_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.enableLoginWithUsername;
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-user-update-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -21632,7 +21812,17 @@ const UserUpdateView = props => {
     errorId: "pelcro-input-last-name-error",
     label: t("labels.lastName"),
     required: supportsTap ? true : false
-  })), /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement(UserUpdateDisplayName, {
+    id: "pelcro-input-display-name",
+    autoComplete: "display-name",
+    errorId: "pelcro-input-display-name-error",
+    label: t("labels.displayname")
+  }), showUsernameInput && /*#__PURE__*/React__default.createElement(UserUpdateUsername, {
+    id: "pelcro-input-user-name",
+    autoComplete: "user-name",
+    errorId: "pelcro-input-user-name-error",
+    label: t("labels.username")
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(UserUpdatePhone, {
     id: "pelcro-input-phone",
@@ -21663,7 +21853,7 @@ function UserUpdateModal({
 }) {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onPictureClick = () => {
     switchView("profile-picture");
@@ -21679,37 +21869,6 @@ function UserUpdateModal({
 }
 UserUpdateModal.viewId = "user-edit";
 
-function DisplayName({
-  store,
-  ...otherProps
-}) {
-  const {
-    dispatch,
-    state
-  } = useContext(store);
-
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_DISPLAY_NAME,
-      payload: value
-    });
-  };
-
-  if (state.loading) {
-    return /*#__PURE__*/React__default.createElement(Loader, null);
-  }
-
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({
-    type: "text",
-    value: state.displayName || null,
-    onChange: e => handleInputChange(e.target.value)
-  }, otherProps));
-}
-
-const UserUpdateDisplayName = props => /*#__PURE__*/React__default.createElement(DisplayName, Object.assign({
-  store: store$f
-}, props));
-
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
     store: store$f
@@ -21772,7 +21931,7 @@ const AddressCreateContainer = ({
     order,
     set,
     selectedMembership
-  } = usePelcro();
+  } = usePelcro$1();
   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;
   useEffect(() => {
@@ -21877,7 +22036,7 @@ const AddressCreateContainer = ({
             return onFailure(err);
           }
 
-          notify.success(t("messages.addressUpdated"));
+          notify$1.success(t("messages.addressUpdated"));
           return onMembershipAdressUpdateSuccess(res);
         });
       }
@@ -22529,7 +22688,7 @@ const AddressCreateModal = ({
     switchView,
     switchToPaymentView,
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -22622,7 +22781,7 @@ const AddressUpdateContainer = ({
 
   const {
     addressIdToEdit
-  } = usePelcro();
+  } = usePelcro$1();
   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");
   useEffect(() => {
@@ -23713,7 +23872,7 @@ const PasswordForgotModal = ({
   } = useTranslation("passwordForgot");
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default.createElement(Modal, {
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
@@ -24298,7 +24457,7 @@ const CartContainer = ({
   const {
     cartItems,
     set
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("shop");
@@ -24403,7 +24562,7 @@ const CartRemoveItemButton = ({
 }) => {
   const {
     removeFromCart
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     variant: "icon",
     "data-key": itemId,
@@ -24466,7 +24625,7 @@ const CartTotalPrice = () => {
   } = useContext(store$8);
   const {
     cartItems
-  } = usePelcro();
+  } = usePelcro$1();
   const totalPriceCurrency = cartItems[0].currency;
   const {
     t
@@ -24486,7 +24645,7 @@ const CartTotalPrice = () => {
 const CartView = props => {
   const {
     cartItems
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("cart");
@@ -24547,7 +24706,7 @@ const CartModal = ({
     switchView,
     switchToAddressView,
     isAuthenticated
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = items => {
     var _otherProps$onSuccess;
@@ -24579,7 +24738,7 @@ const ShopSelectProductButton = ({
 }) => {
   const {
     addToCart
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("shop");
@@ -24611,7 +24770,7 @@ const ShopPurchaseButton = ({
 }) => {
   const {
     purchaseItem
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("shop");
@@ -24647,7 +24806,7 @@ const ShopView = () => {
       className: "plc-mt-2"
     }), /*#__PURE__*/React__default.createElement(ShopPurchaseButton, {
       itemId: item.id,
-      className: "plc-mt-2"
+      className: "plc-mt-2 pelcro-purchase-button"
     })));
   })));
 };
@@ -24687,7 +24846,7 @@ const OrderCreateModal = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -24717,7 +24876,7 @@ const OrderConfirmModal = props => {
   } = useTranslation("shop");
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onClose = () => {
     var _props$onClose;
@@ -24809,7 +24968,7 @@ const GiftCreateContainer = ({
   } = useTranslation("register");
   const {
     set
-  } = usePelcro();
+  } = usePelcro$1();
 
   const handleSubmit = (state, dispatch) => {
     const giftRecipient = {
@@ -25101,7 +25260,7 @@ const GiftCreateModal = ({
     switchToAddressView,
     switchToPaymentView,
     product
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = giftRecipient => {
     var _otherProps$onSuccess;
@@ -25129,6 +25288,7 @@ const GiftCreateModal = ({
 GiftCreateModal.viewId = "gift-create";
 
 const initialState$6 = {
+  isSubmitting: false,
   giftCode: "",
   buttonDisabled: true,
   alert: {
@@ -25147,14 +25307,24 @@ const GiftRedeemContainer = ({
   onSuccess = () => {},
   onFailure = () => {},
   onDisplay = () => {},
-  children
+  children,
+  ...props
 }) => {
+  var _ref, _props$subscriptionId;
+
   const {
     t
   } = useTranslation("register");
   const {
     set
-  } = usePelcro();
+  } = usePelcro$1();
+  const {
+    switchView,
+    switchToAddressView,
+    isAuthenticated,
+    subscriptionIdToRenew: subscriptionIdToRenewFromStore
+  } = usePelcro$1();
+  const subscriptionIdToRenew = (_ref = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : subscriptionIdToRenewFromStore) !== null && _ref !== void 0 ? _ref : undefined;
   useEffect(() => {
     onDisplay();
   }, []);
@@ -25175,7 +25345,41 @@ const GiftRedeemContainer = ({
       set({
         giftCode
       });
-      onSuccess(giftCode);
+
+      if (!isAuthenticated()) {
+        switchView("register");
+      } else {
+        console.log("Shaker");
+        window.Pelcro.subscription.redeemGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          gift_code: giftCode,
+          // redeem gift as a future phase of an existing subscription
+          subscription_id: subscriptionIdToRenew
+        }, (err, res) => {
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+
+          if (err) {
+            dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
+              }
+            });
+
+            if (getErrorMessages(err) === "Address ID is required") {
+              switchToAddressView();
+            } else {
+              return onFailure(err);
+            }
+          } else {
+            return onSuccess(giftCode);
+          }
+        });
+      }
     }
   };
 
@@ -25196,8 +25400,14 @@ const GiftRedeemContainer = ({
           buttonDisabled: action.payload
         });
 
+      case LOADING:
+        return lib_7({ ...state,
+          isSubmitting: action.payload
+        });
+
       case HANDLE_SUBMIT:
         return lib_5({ ...state,
+          isSubmitting: true,
           buttonDisabled: true
         }, (state, dispatch) => handleRedeem(state, dispatch));
 
@@ -25266,7 +25476,8 @@ const GiftRedeemSubmitButton = ({
   const {
     dispatch,
     state: {
-      disableSubmit
+      disableSubmit,
+      isSubmitting
     }
   } = useContext(store$6);
   const {
@@ -25279,7 +25490,8 @@ const GiftRedeemSubmitButton = ({
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: disableSubmit
+    disabled: disableSubmit,
+    isLoading: isSubmitting
   }, otherProps), name !== null && name !== void 0 ? name : t("redeem.buttons.redeem"));
 };
 
@@ -25324,18 +25536,13 @@ const GiftRedeemModal = ({
     switchView,
     switchToAddressView,
     isAuthenticated
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = giftCode => {
     var _otherProps$onSuccess;
 
     (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, giftCode);
-
-    if (isAuthenticated()) {
-      switchToAddressView();
-    } else {
-      switchView("register");
-    }
+    switchView("subscription-success");
   };
 
   return /*#__PURE__*/React__default.createElement(Modal, {
@@ -25396,7 +25603,7 @@ const AddressSelectContainer = ({
     subscriptionIdToRenew: subscriptionIdToRenewFromStore,
     set,
     selectedMembership
-  } = usePelcro();
+  } = usePelcro$1();
   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;
 
@@ -25433,7 +25640,7 @@ const AddressSelectContainer = ({
           return onFailure(err);
         }
 
-        notify.success(t("messages.addressUpdated"));
+        notify$1.success(t("messages.addressUpdated"));
         return onMembershipAdressUpdateSuccess(res);
       });
     }
@@ -25638,7 +25845,7 @@ const AddressSelectModal = ({
     switchView,
     switchToPaymentView,
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = selectedAddressId => {
     var _otherProps$onSuccess;
@@ -25716,7 +25923,7 @@ const PaymentMethodSelectContainer = ({
   const {
     set,
     selectedPaymentMethodId: selectedPaymentMethodIdFromStore
-  } = usePelcro();
+  } = usePelcro$1();
 
   const submitPaymentMethod = ({
     selectedPaymentMethodId
@@ -25899,7 +26106,7 @@ const PaymentMethodSelectModal = ({
     switchToCheckoutForm,
     set,
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   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(() => {
     if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
@@ -27207,7 +27414,7 @@ const SavedItems = ({
   const [isLoading, setLoading] = useState(false);
   const {
     isAuthenticated
-  } = usePelcro();
+  } = usePelcro$1();
 
   const removeItemFromMetadata = (category, title) => {
     const user = window.Pelcro.user.read();
@@ -27406,7 +27613,7 @@ const SubscriptionsItems = ({
     setSubscriptionToCancel,
     setSubscriptionToSuspend,
     set
-  } = usePelcro();
+  } = usePelcro$1();
   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 => {
@@ -27427,7 +27634,7 @@ const SubscriptionsItems = ({
       }
 
       onClose === null || onClose === void 0 ? void 0 : onClose();
-      notify.confirm((onSuccess, onFailure) => {
+      notify$1.confirm((onSuccess, onFailure) => {
         cancelSubscription(sub.id, onSuccess, onFailure);
       }, {
         confirmMessage: t("messages.subCancellation.isSureToCancel"),
@@ -27485,7 +27692,7 @@ const SubscriptionsItems = ({
       }
 
       onClose === null || onClose === void 0 ? void 0 : onClose();
-      notify.confirm((onSuccess, onFailure) => {
+      notify$1.confirm((onSuccess, onFailure) => {
         unSuspendSubscription(sub.id, onSuccess, onFailure);
       }, {
         confirmMessage: t("messages.subUnSuspend.isSureToUnSuspend"),
@@ -27931,11 +28138,56 @@ function SvgQrcode(props) {
   })));
 }
 
-const DonationsMenu = () => {
+const DonationsMenu = ({
+  reactivateSubscription,
+  disableSubmit,
+  cancelSubscription
+}) => {
   const {
     t
   } = useTranslation("dashboard");
+  const {
+    switchView,
+    setSubscriptionToCancel
+  } = usePelcro$1();
   const subscriptions = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+    // Cancel button click handlers
+    const onCancelClick = () => {
+      var _onClose;
+
+      const isImmediateCancelationEnabled = window.Pelcro.site.read().cancel_settings.status;
+
+      if (isImmediateCancelationEnabled) {
+        setSubscriptionToCancel(sub.id);
+        return switchView("subscription-cancel");
+      }
+
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
+      (_onClose = onClose) === null || _onClose === void 0 ? void 0 : _onClose();
+      notify.confirm((onSuccess, onFailure) => {
+        cancelSubscription(sub.id, onSuccess, onFailure);
+      }, {
+        confirmMessage: t("messages.subCancellation.isSureToCancel"),
+        loadingMessage: t("messages.subCancellation.loading"),
+        successMessage: t("messages.subCancellation.success"),
+        errorMessage: t("messages.subCancellation.error")
+      }, {
+        closeButtonLabel: t("labels.subCancellation.goBack")
+      });
+    }; // Reactivate button click handlers
+
+
+    const onReactivateClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
+      reactivateSubscription(sub.id);
+    };
+
     return /*#__PURE__*/React__default.createElement("tr", {
       key: sub.id,
       className: "plc-w-full plc-align-top pelcro-donation-row"
@@ -27947,7 +28199,21 @@ const DonationsMenu = () => {
       className: "plc-text-xs plc-text-gray-400 pelcro-donation-price"
     }, getFormattedPriceByLocal(sub.plan.amount * sub.quantity, sub.plan.currency, getPageOrDefaultLanguage())))), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-mb-4 plc-text-gray-500 pelcro-donation-date"
-    }, sub.status && /*#__PURE__*/React__default.createElement("span", null, formatStartDate(sub.start)))));
+    }, sub.status && /*#__PURE__*/React__default.createElement("span", null, formatStartDate(sub.start)))), /*#__PURE__*/React__default.createElement("td", null, sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-green-400 focus:plc-ring-green-300 pelcro-dashboard-sub-reactivate-button",
+      icon: /*#__PURE__*/React__default.createElement(SvgRefresh, null),
+      onClick: onReactivateClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.reactivate")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
+      icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
+      onClick: onCancelClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.unsubscribe")) : ""));
   });
   return /*#__PURE__*/React__default.createElement("table", {
     className: "plc-w-full plc-table-fixed pelcro-donations-table"
@@ -27957,7 +28223,9 @@ const DonationsMenu = () => {
     className: "plc-w-6/12 "
   }, t("labels.plan")), /*#__PURE__*/React__default.createElement("th", {
     className: "plc-w-6/12 "
-  }, t("labels.startDate")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
+  }, t("labels.startDate")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
     className: "plc-h-4"
   }), subscriptions));
 };
@@ -28003,7 +28271,7 @@ const InvoicesItems = () => {
   const {
     setInvoice,
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   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 => {
@@ -28134,7 +28402,7 @@ const MembershipsItems = () => {
     switchView,
     setSelectedMembership,
     switchToAddressView
-  } = usePelcro();
+  } = usePelcro$1();
   const memberships = getActiveMemberships();
 
   const onChangeAddressClick = membershipId => {
@@ -28214,7 +28482,7 @@ function DashboardWithHook(props) {
     resetView,
     logout,
     set
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default.createElement(DashboardWithTrans, {
     setAddress: addressIdToEdit => set({
       addressIdToEdit
@@ -28790,7 +29058,11 @@ class Dashboard extends Component {
         className: "plc-transform plc-scale-120 plc-w-7 plc-h-8 plc-mr-1 plc-pt-1"
       }),
       title: this.locale("labels.donations"),
-      content: /*#__PURE__*/React__default.createElement(DonationsMenu, null)
+      content: /*#__PURE__*/React__default.createElement(DonationsMenu, {
+        reactivateSubscription: this.reactivateSubscription,
+        disableSubmit: this.state.disableSubmit,
+        cancelSubscription: this.cancelSubscription
+      })
     }), /*#__PURE__*/React__default.createElement(Accordion.item, {
       name: SUB_MENUS.GIFTS,
       icon: /*#__PURE__*/React__default.createElement(SvgGift, null),
@@ -28850,7 +29122,7 @@ const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
 const DashboardOpenButton = () => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-fixed plc-right-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__default.createElement("button", {
@@ -30839,11 +31111,34 @@ const EmailVerifyModal = ({
   onClose,
   ...otherProps
 }) => {
+  const {
+    product,
+    plan,
+    switchToAddressView,
+    switchToPaymentView
+  } = usePelcro();
+
+  const onSuccess = res => {
+    var _props$onSuccess, _props;
+
+    (_props$onSuccess = (_props = props).onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(_props, res);
+
+    if (product) {
+      if (product.address_required) {
+        return switchToAddressView();
+      } else {
+        return switchToPaymentView();
+      }
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-email-verify-modal"
-  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(EmailVerifyView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(EmailVerifyView, Object.assign({
+    onSuccess: onSuccess
+  }, otherProps))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
 };
 EmailVerifyModal.viewId = "email-verify";
 
@@ -30991,14 +31286,14 @@ function VerifyLinkTokenModal({
   } = useTranslation("verifyLinkToken");
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _props$onSuccess;
 
     (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
     resetView();
-    notify.success(t("messages.success"));
+    notify$1.success(t("messages.success"));
   };
 
   return /*#__PURE__*/React__default.createElement(Modal, {
@@ -31041,7 +31336,7 @@ const InvoicePaymentModal = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -31118,7 +31413,7 @@ const InvoiceDetailsDownloadButton = ({
   } = useTranslation("invoiceDetails");
   const {
     invoice
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__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",
@@ -31155,7 +31450,7 @@ const InvoiceDetailsView = props => {
   } = useTranslation("invoiceDetails");
   const {
     invoice
-  } = usePelcro();
+  } = usePelcro$1();
   const showPayButton = canPayInvoice(invoice);
   const showDownloadButton = Boolean(invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf);
   const hasPlanDetails = Boolean(invoice.plan);
@@ -31223,7 +31518,7 @@ const InvoiceDetailsModal = ({
 }) => {
   const {
     switchToPaymentView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -32660,4 +32955,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro$1 as usePelcro };