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

package/dist/index.cjs.js

@@ -3634,6 +3634,8 @@ var labels$Y = {
 	email: "Email",
 	firstName: "First name",
 	lastName: "Last name",
+	username: "Username",
+	displayname: "Display name",
 	phone: "Phone",
 	submit: "Submit",
 	required: "Required",
@@ -4567,6 +4569,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",
@@ -5384,6 +5388,8 @@ var labels$o = {
 	email: "이메일",
 	firstName: "이름",
 	lastName: "성",
+	username: "사용자 이름",
+	displayname: "이름 표시하기",
 	phone: "전화번호",
 	submit: "제출",
 	required: "필수 항목",
@@ -6303,6 +6309,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",
@@ -8309,7 +8317,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");
       }
 
@@ -8609,7 +8617,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;
@@ -8617,11 +8625,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);
 }
 
 /**
@@ -8826,7 +8834,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
@@ -9146,7 +9154,7 @@ class SaveToMetadataButtonClass {
     _defineProperty$3(this, "unauthenticated", () => {
       const {
         switchView
-      } = usePelcro.getStore();
+      } = usePelcro$1.getStore();
 
       _classPrivateFieldGet(this, _onClick).call(this, () => switchView("login"));
 
@@ -9229,7 +9237,7 @@ class SaveToMetadataButtonClass {
         const user = window.Pelcro.user.read();
         const {
           switchView
-        } = usePelcro.getStore();
+        } = usePelcro$1.getStore();
         const {
           key,
           ...buttonMetadata
@@ -10333,7 +10341,7 @@ toast.confirm = (onConfirm, {
       ...options
     });
     setTimeout(() => {
-      notify.dismiss(id);
+      notify$1.dismiss(id);
     }, 3000);
   };
 
@@ -10343,12 +10351,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
@@ -10365,7 +10373,7 @@ const init$1 = () => {
     addToCart,
     purchaseItem,
     setSubscriptionToManageMembers
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const pelcroDashboardButtonsByClass = document.getElementsByClassName("pelcro-dashboard-button");
 
   if (pelcroDashboardButtonsByClass.length !== 0) {
@@ -10419,7 +10427,7 @@ const init$1 = () => {
             const errorMessage = i18next.t("messages:invalidSubscription", {
               returnObjects: true
             });
-            return notify.error(errorMessage);
+            return notify$1.error(errorMessage);
           }
 
           switchView("manage-members");
@@ -10428,7 +10436,7 @@ const init$1 = () => {
         const errorMessage = i18next.t("messages:invalidSubscription", {
           returnObjects: true
         });
-        return notify.error(errorMessage);
+        return notify$1.error(errorMessage);
       }
     }
   }
@@ -10598,7 +10606,7 @@ const init$1 = () => {
             const errorMsg = i18next.t("shop:messages.currencyMismatch", {
               currency: userCurrency
             });
-            notify.error(errorMsg);
+            notify$1.error(errorMsg);
           }
         });
       }
@@ -10668,7 +10676,7 @@ const init = () => {
   const {
     switchView,
     set
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
 
   if (entitlementsProtectedElements.length === 0) {
@@ -10699,8 +10707,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['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement(Trans, {
+      notify$1( /*#__PURE__*/React__default['default'].createElement("p", null, /*#__PURE__*/React__default['default'].createElement(Trans, {
         i18nKey: "messages:entitlement"
       }, "Some of the content on this page is available with one or more of our plans.", /*#__PURE__*/React__default['default'].createElement(Link, {
         onClick: () => {
@@ -10717,7 +10727,7 @@ const init = () => {
             });
           }
 
-          notify.dismiss(NOTIFICATION_ID);
+          notify$1.dismiss(NOTIFICATION_ID);
           switchView("_plan-select-entitlements");
         }
       }, "Subscribe"), "now to get full page access.")), {
@@ -10757,7 +10767,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 => {
@@ -10772,6 +10782,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));
 }
@@ -11079,7 +11105,7 @@ const initPaywalls = () => {
 
     const {
       switchView
-    } = usePelcro.getStore();
+    } = usePelcro$1.getStore();
 
     if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
       /* 
@@ -11101,7 +11127,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);
@@ -11149,7 +11175,7 @@ const loadAuth0SDK = () => {
 const initSecuritySdk = () => {
   const {
     whenSiteReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     var _window$Pelcro$site$r2;
 
@@ -11185,7 +11211,7 @@ const dispatchModalDisplayEvents = modalName => {
 const {
   whenSiteReady,
   whenEcommerceLoaded
-} = usePelcro.getStore();
+} = usePelcro$1.getStore();
 const renderShopView = shopComponent => {
   whenEcommerceLoaded(() => {
     const shopElement = document.getElementById("pelcro-shop");
@@ -11267,7 +11293,7 @@ const initViewFromURL = () => {
   const {
     switchView,
     whenSiteReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
 
   if (isValidViewFromURL(view)) {
     whenSiteReady(() => {
@@ -11325,7 +11351,7 @@ const initSubscriptionFromURL = () => {
     switchView,
     whenSiteReady,
     set
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     var _selectedProduct$plan;
 
@@ -11349,7 +11375,7 @@ const initSubscriptionFromURL = () => {
       isAuthenticated,
       switchToAddressView,
       switchToPaymentView
-    } = usePelcro.getStore();
+    } = usePelcro$1.getStore();
 
     if (!isAuthenticated()) {
       return switchView("register");
@@ -11381,7 +11407,7 @@ const initOfflineSubscriptionFromURL = offlinePlanId => {
     switchToPaymentView,
     switchToAddressView,
     set
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     window.Pelcro.plan.getPlan({
       plan_id: offlinePlanId
@@ -11428,7 +11454,7 @@ const initPurchaseFromUrl = () => {
   const {
     whenEcommerceLoaded,
     purchaseItem
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenEcommerceLoaded(() => {
     const skuId = window.Pelcro.helpers.getURLParameter("sku_id");
     purchaseItem(skuId);
@@ -11444,7 +11470,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(",");
@@ -11465,7 +11491,7 @@ const verifyEmailTokenFromUrl = () => {
 
   const {
     whenSiteReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const translations = i18next.t("verifyEmail:messages", {
     returnObjects: true
   });
@@ -11477,10 +11503,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
@@ -11494,7 +11520,7 @@ const verifyLinkTokenFromUrl = () => {
     whenSiteReady,
     resetView,
     isAuthenticated
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const translations = i18next.t("verifyLinkToken:messages", {
     returnObjects: true
   });
@@ -11506,7 +11532,7 @@ const verifyLinkTokenFromUrl = () => {
       token: loginToken
     }, (err, res) => {
       if (err) {
-        return notify.error(getErrorMessages(err));
+        return notify$1.error(getErrorMessages(err));
       }
 
       const {
@@ -11516,11 +11542,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);
       });
     });
   }, {
@@ -11533,12 +11559,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");
 };
 
@@ -11549,7 +11575,7 @@ const showInvoiceDetailsFromUrl = () => {
     whenUserReady,
     whenSiteReady,
     switchView
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
@@ -11563,18 +11589,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");
@@ -11589,7 +11615,7 @@ const showSubscriptionManageMembersFromUrl = () => {
     whenUserReady,
     whenSiteReady,
     switchView
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
@@ -11603,7 +11629,7 @@ const showSubscriptionManageMembersFromUrl = () => {
         const errorMessage = i18next.t("messages:invalidSubscription", {
           returnObjects: true
         });
-        return notify.error(errorMessage);
+        return notify$1.error(errorMessage);
       }
 
       return switchView("manage-members");
@@ -11629,7 +11655,7 @@ const PelcroModalController = ({
     view,
     isAuthenticated,
     whenSiteReady
-  } = usePelcro();
+  } = usePelcro$1();
   React__default['default'].useEffect(() => {
     init$1();
     renderShopView(React__default['default'].Children.map(children, child => child).find(({
@@ -13390,7 +13416,7 @@ function Modal({
 }) {
   var _window$Pelcro, _window$Pelcro$site$r;
 
-  const resetView = usePelcro(state => state.resetView);
+  const resetView = usePelcro$1(state => state.resetView);
   React.useEffect(() => {
     onDisplay === null || onDisplay === void 0 ? void 0 : onDisplay();
     dispatchModalDisplayEvents(id);
@@ -13463,8 +13489,11 @@ function LoginModal({
   const {
     switchView,
     resetView,
-    invoice
-  } = usePelcro();
+    product,
+    order,
+    switchToAddressView,
+    switchToPaymentView
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _props$onSuccess;
@@ -13475,10 +13504,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();
     }
   };
@@ -13801,7 +13843,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);
@@ -14032,7 +14074,7 @@ function RegisterModal(props) {
     order,
     giftCode,
     isGift
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _props$onSuccess;
@@ -14062,7 +14104,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)
 
 
@@ -14154,7 +14196,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['default'].createElement(SelectModalWithTrans, {
@@ -14426,7 +14468,7 @@ class SelectModal extends React.Component {
       const {
         switchToAddressView,
         switchToPaymentView
-      } = usePelcro.getStore();
+      } = usePelcro$1.getStore();
 
       if (!isAuthenticated) {
         return setView("register");
@@ -16629,16 +16671,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;
@@ -18102,11 +18144,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");
     }
   };
 
@@ -18114,11 +18156,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");
     }
   };
 
@@ -18129,7 +18171,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) => {
@@ -18318,7 +18360,7 @@ const PaymentMethodContainer = props => {
   const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
   const {
     whenUserReady
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   React.useEffect(() => {
     whenUserReady(() => {
       if (!window.Stripe) {
@@ -18419,7 +18461,7 @@ const PelcroPaymentRequestButton = props => {
 const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
-  } = usePelcro();
+  } = usePelcro$1();
   const cardProcessor = getSiteCardProcessor();
 
   if (selectedPaymentMethodId) {
@@ -18474,7 +18516,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;
@@ -18510,7 +18552,7 @@ const SubmitPaymentMethod = ({
 
   const {
     plan
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("checkoutForm");
@@ -18942,7 +18984,7 @@ const PaypalSubscribeButton = props => {
     plan,
     invoice,
     selectedAddressId
-  } = usePelcro();
+  } = usePelcro$1();
   React.useEffect(() => {
     var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
@@ -19084,7 +19126,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;
   });
@@ -19125,7 +19167,7 @@ const TaxAmount = () => {
   } = React.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;
@@ -19271,7 +19313,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;
 
@@ -19326,7 +19368,7 @@ function SubscriptionRenewModal({
 }) {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _otherProps$onSuccess, _ReactGA$event;
@@ -19531,7 +19573,7 @@ const SubscriptionCancelNowButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     state: {
       cancelationReason
@@ -19578,7 +19620,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"),
@@ -19603,7 +19645,7 @@ const SubscriptionCancelLaterButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     state: {
       cancelationReason
@@ -19650,7 +19692,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"),
@@ -19671,7 +19713,7 @@ const SubscriptionCancelLaterButton = ({
 const SubscriptionCancelView = props => {
   const {
     subscriptionToCancel
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -19845,7 +19887,7 @@ const SubscriptionSuspendButton = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     state: {
       suspendDate,
@@ -19887,7 +19929,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"),
@@ -19909,7 +19951,7 @@ const SubscriptionSuspendButton = ({
 const SubscriptionSuspendView = props => {
   const {
     subscriptionToSuspend
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -20002,7 +20044,7 @@ const getCurrentFlow = () => {
     giftRecipient,
     giftCode,
     invoice
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
 
   if (invoice) {
     return "invoicePayment";
@@ -20021,7 +20063,7 @@ const getSuccessContent = i18n => {
   const flow = getCurrentFlow();
   const {
     product
-  } = usePelcro.getStore();
+  } = usePelcro$1.getStore();
   const wordingDictionary = {
     subscriptionSuccess: {
       successIcon: /*#__PURE__*/React__default['default'].createElement(SvgCheckSolid, {
@@ -20065,7 +20107,7 @@ function PaymentSuccessModal({
 }) {
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onClose = () => {
     var _props$onClose;
@@ -20098,7 +20140,7 @@ function NewsletterWithHook(props) {
     switchView,
     resetView,
     product
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default['default'].createElement(NewsLetter, {
     onClose: () => {
       var _props$onClose;
@@ -20597,7 +20639,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}`;
@@ -20619,7 +20661,7 @@ const MeterView = () => {
 const MeterModal = props => {
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
   React.useEffect(() => {
     var _props$onDisplay;
 
@@ -20657,7 +20699,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;
 
@@ -20715,7 +20757,7 @@ function SubscriptionCreateModal({
   useTranslation("common");
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = res => {
     var _otherProps$onSuccess;
@@ -20761,7 +20803,7 @@ const SubscriptionManageMembersContainer = ({
 }) => {
   const {
     subscriptionToManageMembers
-  } = usePelcro();
+  } = usePelcro$1();
   const subscription_id = subscriptionToManageMembers === null || subscriptionToManageMembers === void 0 ? void 0 : subscriptionToManageMembers.id;
 
   const handleListMembers = ({}, dispatch) => {
@@ -21056,8 +21098,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['default'].createElement(SvgExclamation, null)
       };
     }
@@ -21113,7 +21155,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['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['default'].createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
   }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default['default'].createElement("td", {
@@ -21167,8 +21210,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['default'].createElement("hr", {
     className: "plc-w-full plc-border-gray-300"
-  })), /*#__PURE__*/React__default['default'].createElement("table", {
-    className: "plc-w-full plc-table-fixed"
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-max-h-48 plc-overflow-x-hidden plc-overflow-y-auto"
+  }, /*#__PURE__*/React__default['default'].createElement("table", {
+    className: "plc-w-full plc-table-fixed plc-text-center plc-p-2 plc-m-1"
   }, /*#__PURE__*/React__default['default'].createElement("thead", {
     className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
   }, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
@@ -21177,7 +21222,7 @@ function SubscriptionManageMembersView(props) {
     className: "plc-w-3/12 "
   }, t("labels.status")), /*#__PURE__*/React__default['default'].createElement("th", {
     className: "plc-w-3/12 "
-  }, t("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersList, null)))))));
+  }, t("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement(SubscriptionManageMembersList, null))))))));
 }
 
 /**
@@ -21206,7 +21251,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,
@@ -21214,10 +21259,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: {
@@ -21248,26 +21295,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);
@@ -21278,6 +21328,7 @@ const UserUpdateContainer = ({
     email,
     firstName,
     lastName,
+    username,
     phone,
     tin,
     textFields,
@@ -21288,6 +21339,9 @@ const UserUpdateContainer = ({
       email: email,
       first_name: firstName,
       last_name: lastName,
+      ...(username && {
+        username
+      }),
       display_name: displayName,
       phone: phone,
       tin: tin,
@@ -21373,6 +21427,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,
@@ -21418,10 +21484,14 @@ const UserUpdateContainer = ({
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$f,
-    key: i
-  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$f,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
     store: store$f
   })));
 };
@@ -21529,6 +21599,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
+    }
+  } = React.useContext(store);
+  const [username, setUsername] = React.useState(stateUsername);
+  const [finishedTyping, setFinishedTyping] = React.useState(false);
+  const handleInputChange = React.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]);
+  React.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
+    });
+  };
+
+  React.useEffect(() => {
+    if (initWithUserName) {
+      document.addEventListener("PelcroUserLoaded", () => {
+        loadFirstNameIntoField();
+      });
+      loadFirstNameIntoField();
+      return () => {
+        document.removeEventListener("PelcroUserLoaded", handleInputChange);
+      };
+    }
+  }, []);
+  return /*#__PURE__*/React__default['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['default'].createElement(UpdateUserNameInput, Object.assign({
+  store: store$f
+}, props));
+
 const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
   store: store$f
 }, props));
@@ -21628,13 +21776,45 @@ const UserUpdateTin = props => /*#__PURE__*/React__default['default'].createElem
   store: store$f
 }, props));
 
+function DisplayName({
+  store,
+  ...otherProps
+}) {
+  const {
+    dispatch,
+    state
+  } = React.useContext(store);
+
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_DISPLAY_NAME,
+      payload: value
+    });
+  };
+
+  if (state.loading) {
+    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
+    type: "text",
+    value: state.displayName || null,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps));
+}
+
+const UserUpdateDisplayName = props => /*#__PURE__*/React__default['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['default'].createElement("div", {
     id: "pelcro-user-update-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -21662,7 +21842,17 @@ const UserUpdateView = props => {
     errorId: "pelcro-input-last-name-error",
     label: t("labels.lastName"),
     required: supportsTap ? true : false
-  })), /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['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['default'].createElement(UserUpdateUsername, {
+    id: "pelcro-input-user-name",
+    autoComplete: "user-name",
+    errorId: "pelcro-input-user-name-error",
+    label: t("labels.username")
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdatePhone, {
     id: "pelcro-input-phone",
@@ -21693,7 +21883,7 @@ function UserUpdateModal({
 }) {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onPictureClick = () => {
     switchView("profile-picture");
@@ -21709,37 +21899,6 @@ function UserUpdateModal({
 }
 UserUpdateModal.viewId = "user-edit";
 
-function DisplayName({
-  store,
-  ...otherProps
-}) {
-  const {
-    dispatch,
-    state
-  } = React.useContext(store);
-
-  const handleInputChange = value => {
-    dispatch({
-      type: SET_DISPLAY_NAME,
-      payload: value
-    });
-  };
-
-  if (state.loading) {
-    return /*#__PURE__*/React__default['default'].createElement(Loader, null);
-  }
-
-  return /*#__PURE__*/React__default['default'].createElement(Input, Object.assign({
-    type: "text",
-    value: state.displayName || null,
-    onChange: e => handleInputChange(e.target.value)
-  }, otherProps));
-}
-
-const UserUpdateDisplayName = props => /*#__PURE__*/React__default['default'].createElement(DisplayName, Object.assign({
-  store: store$f
-}, props));
-
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
     store: store$f
@@ -21802,7 +21961,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;
   React.useEffect(() => {
@@ -21907,7 +22066,7 @@ const AddressCreateContainer = ({
             return onFailure(err);
           }
 
-          notify.success(t("messages.addressUpdated"));
+          notify$1.success(t("messages.addressUpdated"));
           return onMembershipAdressUpdateSuccess(res);
         });
       }
@@ -22559,7 +22718,7 @@ const AddressCreateModal = ({
     switchView,
     switchToPaymentView,
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = newAddressId => {
     var _otherProps$onSuccess;
@@ -22652,7 +22811,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");
   React.useEffect(() => {
@@ -23743,7 +23902,7 @@ const PasswordForgotModal = ({
   } = useTranslation("passwordForgot");
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
     id: "pelcro-password-forgot-modal",
     onDisplay: onDisplay,
@@ -24328,7 +24487,7 @@ const CartContainer = ({
   const {
     cartItems,
     set
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("shop");
@@ -24433,7 +24592,7 @@ const CartRemoveItemButton = ({
 }) => {
   const {
     removeFromCart
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     variant: "icon",
     "data-key": itemId,
@@ -24496,7 +24655,7 @@ const CartTotalPrice = () => {
   } = React.useContext(store$8);
   const {
     cartItems
-  } = usePelcro();
+  } = usePelcro$1();
   const totalPriceCurrency = cartItems[0].currency;
   const {
     t
@@ -24516,7 +24675,7 @@ const CartTotalPrice = () => {
 const CartView = props => {
   const {
     cartItems
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("cart");
@@ -24577,7 +24736,7 @@ const CartModal = ({
     switchView,
     switchToAddressView,
     isAuthenticated
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = items => {
     var _otherProps$onSuccess;
@@ -24609,7 +24768,7 @@ const ShopSelectProductButton = ({
 }) => {
   const {
     addToCart
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("shop");
@@ -24641,7 +24800,7 @@ const ShopPurchaseButton = ({
 }) => {
   const {
     purchaseItem
-  } = usePelcro();
+  } = usePelcro$1();
   const {
     t
   } = useTranslation("shop");
@@ -24677,7 +24836,7 @@ const ShopView = () => {
       className: "plc-mt-2"
     }), /*#__PURE__*/React__default['default'].createElement(ShopPurchaseButton, {
       itemId: item.id,
-      className: "plc-mt-2"
+      className: "plc-mt-2 pelcro-purchase-button"
     })));
   })));
 };
@@ -24717,7 +24876,7 @@ const OrderCreateModal = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -24747,7 +24906,7 @@ const OrderConfirmModal = props => {
   } = useTranslation("shop");
   const {
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onClose = () => {
     var _props$onClose;
@@ -24839,7 +24998,7 @@ const GiftCreateContainer = ({
   } = useTranslation("register");
   const {
     set
-  } = usePelcro();
+  } = usePelcro$1();
 
   const handleSubmit = (state, dispatch) => {
     const giftRecipient = {
@@ -25131,7 +25290,7 @@ const GiftCreateModal = ({
     switchToAddressView,
     switchToPaymentView,
     product
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = giftRecipient => {
     var _otherProps$onSuccess;
@@ -25159,6 +25318,7 @@ const GiftCreateModal = ({
 GiftCreateModal.viewId = "gift-create";
 
 const initialState$6 = {
+  isSubmitting: false,
   giftCode: "",
   buttonDisabled: true,
   alert: {
@@ -25177,14 +25337,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;
   React.useEffect(() => {
     onDisplay();
   }, []);
@@ -25205,7 +25375,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);
+          }
+        });
+      }
     }
   };
 
@@ -25226,8 +25430,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));
 
@@ -25296,7 +25506,8 @@ const GiftRedeemSubmitButton = ({
   const {
     dispatch,
     state: {
-      disableSubmit
+      disableSubmit,
+      isSubmitting
     }
   } = React.useContext(store$6);
   const {
@@ -25309,7 +25520,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"));
 };
 
@@ -25354,18 +25566,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['default'].createElement(Modal, {
@@ -25426,7 +25633,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;
 
@@ -25463,7 +25670,7 @@ const AddressSelectContainer = ({
           return onFailure(err);
         }
 
-        notify.success(t("messages.addressUpdated"));
+        notify$1.success(t("messages.addressUpdated"));
         return onMembershipAdressUpdateSuccess(res);
       });
     }
@@ -25668,7 +25875,7 @@ const AddressSelectModal = ({
     switchView,
     switchToPaymentView,
     resetView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = selectedAddressId => {
     var _otherProps$onSuccess;
@@ -25746,7 +25953,7 @@ const PaymentMethodSelectContainer = ({
   const {
     set,
     selectedPaymentMethodId: selectedPaymentMethodIdFromStore
-  } = usePelcro();
+  } = usePelcro$1();
 
   const submitPaymentMethod = ({
     selectedPaymentMethodId
@@ -25929,7 +26136,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;
   React.useEffect(() => {
     if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
@@ -27237,7 +27444,7 @@ const SavedItems = ({
   const [isLoading, setLoading] = React.useState(false);
   const {
     isAuthenticated
-  } = usePelcro();
+  } = usePelcro$1();
 
   const removeItemFromMetadata = (category, title) => {
     const user = window.Pelcro.user.read();
@@ -27436,7 +27643,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 => {
@@ -27457,7 +27664,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"),
@@ -27515,7 +27722,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"),
@@ -27961,11 +28168,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['default'].createElement("tr", {
       key: sub.id,
       className: "plc-w-full plc-align-top pelcro-donation-row"
@@ -27977,7 +28229,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['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-mb-4 plc-text-gray-500 pelcro-donation-date"
-    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", null, formatStartDate(sub.start)))));
+    }, sub.status && /*#__PURE__*/React__default['default'].createElement("span", null, formatStartDate(sub.start)))), /*#__PURE__*/React__default['default'].createElement("td", null, sub.cancel_at_period_end === 1 && sub.plan.auto_renew && !sub.is_gift_recipient && /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-green-400 focus:plc-ring-green-300 pelcro-dashboard-sub-reactivate-button",
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
+      onClick: onReactivateClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.reactivate")), !sub.plan.auto_renew || sub.plan.auto_renew && sub.cancel_at_period_end === 0 ? /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-red-500 focus:plc-ring-red-500 pelcro-dashboard-sub-cancel-button",
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
+      onClick: onCancelClick,
+      disabled: disableSubmit,
+      "data-key": sub.id
+    }, t("labels.unsubscribe")) : ""));
   });
   return /*#__PURE__*/React__default['default'].createElement("table", {
     className: "plc-w-full plc-table-fixed pelcro-donations-table"
@@ -27987,7 +28253,9 @@ const DonationsMenu = () => {
     className: "plc-w-6/12 "
   }, t("labels.plan")), /*#__PURE__*/React__default['default'].createElement("th", {
     className: "plc-w-6/12 "
-  }, t("labels.startDate")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
+  }, t("labels.startDate")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
     className: "plc-h-4"
   }), subscriptions));
 };
@@ -28033,7 +28301,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 => {
@@ -28164,7 +28432,7 @@ const MembershipsItems = () => {
     switchView,
     setSelectedMembership,
     switchToAddressView
-  } = usePelcro();
+  } = usePelcro$1();
   const memberships = getActiveMemberships();
 
   const onChangeAddressClick = membershipId => {
@@ -28244,7 +28512,7 @@ function DashboardWithHook(props) {
     resetView,
     logout,
     set
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default['default'].createElement(DashboardWithTrans, {
     setAddress: addressIdToEdit => set({
       addressIdToEdit
@@ -28820,7 +29088,11 @@ class Dashboard extends React.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['default'].createElement(DonationsMenu, null)
+      content: /*#__PURE__*/React__default['default'].createElement(DonationsMenu, {
+        reactivateSubscription: this.reactivateSubscription,
+        disableSubmit: this.state.disableSubmit,
+        cancelSubscription: this.cancelSubscription
+      })
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.GIFTS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgGift, null),
@@ -28880,7 +29152,7 @@ const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
 const DashboardOpenButton = () => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-fixed plc-right-4 plc-bottom-4 pelcro-open-dashboard-btn"
   }, /*#__PURE__*/React__default['default'].createElement("button", {
@@ -30869,11 +31141,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['default'].createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-email-verify-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(EmailVerifyView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(EmailVerifyView, Object.assign({
+    onSuccess: onSuccess
+  }, otherProps))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
 };
 EmailVerifyModal.viewId = "email-verify";
 
@@ -31021,14 +31316,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['default'].createElement(Modal, {
@@ -31071,7 +31366,7 @@ const InvoicePaymentModal = ({
 }) => {
   const {
     switchView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -31148,7 +31443,7 @@ const InvoiceDetailsDownloadButton = ({
   } = useTranslation("invoiceDetails");
   const {
     invoice
-  } = usePelcro();
+  } = usePelcro$1();
   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",
@@ -31185,7 +31480,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);
@@ -31253,7 +31548,7 @@ const InvoiceDetailsModal = ({
 }) => {
   const {
     switchToPaymentView
-  } = usePelcro();
+  } = usePelcro$1();
 
   const onSuccess = () => {
     var _otherProps$onSuccess;
@@ -32911,6 +33206,7 @@ exports.UserUpdatePhone = UserUpdatePhone;
 exports.UserUpdateProfilePic = UserUpdateProfilePic;
 exports.UserUpdateTextInput = UserUpdateTextInput;
 exports.UserUpdateTin = UserUpdateTin;
+exports.UserUpdateUsername = UserUpdateUsername;
 exports.UserUpdateView = UserUpdateView;
 exports.VerifyLinkTokenContainer = VerifyLinkTokenContainer;
 exports.VerifyLinkTokenLoader = VerifyLinkTokenLoader;
@@ -32921,6 +33217,6 @@ exports.i18n = i18next;
 exports.initButtons = init$1;
 exports.initContentEntitlement = init;
 exports.invoicePaymentSubmitButton = invoicePaymentSubmitButton;
-exports.notify = notify;
+exports.notify = notify$1;
 exports.unauthenticatedButtons = unauthenticatedButtons;
-exports.usePelcro = usePelcro;
+exports.usePelcro = usePelcro$1;