@pelcro/react-pelcro-js 3.2.0-beta.15 → 3.2.0-beta.19

package/dist/index.cjs.js

@@ -3466,7 +3466,7 @@ var paymentMethod_fr = {
 var title$f = "Enter your email to subscribe to our newsletter";
 var updateTitle$1 = "Update newsletter selections";
 var subtitle$7 = "We may use your email for other marketing communication";
-var labels$p = {
+var labels$r = {
 	submit: "Submit",
 	firstName: "First name",
 	lastName: "Last name",
@@ -3474,7 +3474,7 @@ var labels$p = {
 	postalCode: "Postal code",
 	required: "required"
 };
-var messages$r = {
+var messages$t = {
 	alreadyHaveAccount: "Already have an account?",
 	success: "Newsletters were successfully updated",
 	loginHere: "Login here.",
@@ -3485,14 +3485,14 @@ var newsletter_en = {
 	title: title$f,
 	updateTitle: updateTitle$1,
 	subtitle: subtitle$7,
-	labels: labels$p,
-	messages: messages$r
+	labels: labels$r,
+	messages: messages$t
 };
 
 var title$e = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
 var updateTitle = "Mettre à jour son choix d'infolettres";
 var subtitle$6 = "Nous pouvons utiliser votre adresse courriel pour d’autres communications marketing";
-var labels$o = {
+var labels$q = {
 	submit: "Lire l’article !",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
@@ -3500,7 +3500,7 @@ var labels$o = {
 	postalCode: "Code postal",
 	required: "Champs obligatoires"
 };
-var messages$q = {
+var messages$s = {
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
 	success: "Votre choix d'infolettres à été mis à jour",
 	loginHere: "Connectez-vous ici",
@@ -3511,14 +3511,14 @@ var newsletter_fr = {
 	title: title$e,
 	updateTitle: updateTitle,
 	subtitle: subtitle$6,
-	labels: labels$o,
-	messages: messages$q
+	labels: labels$q,
+	messages: messages$s
 };
 
-var labels$n = {
+var labels$p = {
 	"continue": "Continue to content"
 };
-var messages$p = {
+var messages$r = {
 	yourFreeTrial: "Subscription successful!",
 	youHaveAccess: "Hope you enjoy the subscription. Please contact us if you have any questions or concerns.",
 	clickToLearn: {
@@ -3544,15 +3544,15 @@ var errors$9 = {
 	"": ""
 };
 var success_en = {
-	labels: labels$n,
-	messages: messages$p,
+	labels: labels$p,
+	messages: messages$r,
 	errors: errors$9
 };
 
-var labels$m = {
+var labels$o = {
 	"continue": "Abonnement réussi !"
 };
-var messages$o = {
+var messages$q = {
 	yourFreeTrial: "Votre essai gratuit vient de débuter",
 	youHaveAccess: "Nous espérons que vous allez apprécier votre abonnement. Veuillez nous contacter si vous avez des questions ou des préoccupations.",
 	clickToLearn: {
@@ -3578,12 +3578,12 @@ var errors$8 = {
 	"": ""
 };
 var success_fr = {
-	labels: labels$m,
-	messages: messages$o,
+	labels: labels$o,
+	messages: messages$q,
 	errors: errors$8
 };
 
-var messages$n = {
+var messages$p = {
 	freeVisits: "Free visits left:",
 	subscribeNow: "Subscribe",
 	alreadyHaveAccount: "Already have an account?",
@@ -3593,11 +3593,11 @@ var errors$7 = {
 	"": ""
 };
 var meter_en = {
-	messages: messages$n,
+	messages: messages$p,
 	errors: errors$7
 };
 
-var messages$m = {
+var messages$o = {
 	freeVisits: "Visites gratuites restantes:",
 	subscribeNow: "Abonnez-vous maintenant !",
 	alreadyHaveAccount: "Vous avez déjà un compte ?",
@@ -3607,15 +3607,15 @@ var errors$6 = {
 	"": ""
 };
 var meter_fr = {
-	messages: messages$m,
+	messages: messages$o,
 	errors: errors$6
 };
 
-var messages$l = {
+var messages$n = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
 	bankRedirection: "Please hold, redirecting you to your bank."
 };
-var labels$l = {
+var labels$n = {
 	card: "Enter card number",
 	date: "Expiration date",
 	CVC: "CVC",
@@ -3634,15 +3634,15 @@ var labels$l = {
 	removeCoupon: "REMOVE"
 };
 var checkoutForm_en = {
-	messages: messages$l,
-	labels: labels$l
+	messages: messages$n,
+	labels: labels$n
 };
 
-var messages$k = {
+var messages$m = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
 	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque."
 };
-var labels$k = {
+var labels$m = {
 	card: "Entrez le numéro de carte",
 	date: "Date d’expiration",
 	CVC: "CVC",
@@ -3661,8 +3661,8 @@ var labels$k = {
 	removeCoupon: "RETIRER"
 };
 var checkoutForm_fr = {
-	messages: messages$k,
-	labels: labels$k
+	messages: messages$m,
+	labels: labels$m
 };
 
 var youAreSafe$1 = "You're safe - PCI compliant 128 SSL by";
@@ -3703,7 +3703,7 @@ var messages_fr = {
 	zeroTotalInvoice: zeroTotalInvoice
 };
 
-var labels$j = {
+var labels$l = {
 	email: "Enter email",
 	password: "Enter password",
 	required: "required",
@@ -3711,7 +3711,7 @@ var labels$j = {
 	passwordPlaceholder: "Password",
 	login: "Login"
 };
-var messages$j = {
+var messages$l = {
 	loginTo: "Login to your account",
 	welcome: "Welcome back, sign in with your existing account.",
 	dontHaveAccount: "Don't have an account yet?",
@@ -3730,12 +3730,12 @@ var errors$5 = {
 	"": ""
 };
 var login_en = {
-	labels: labels$j,
-	messages: messages$j,
+	labels: labels$l,
+	messages: messages$l,
 	errors: errors$5
 };
 
-var labels$i = {
+var labels$k = {
 	email: "Entrez votre adresse courriel",
 	password: "Entrez votre mot de passe",
 	required: "Champs obligatoires",
@@ -3743,7 +3743,7 @@ var labels$i = {
 	passwordPlaceholder: "Mot de passe",
 	login: "Connexion"
 };
-var messages$i = {
+var messages$k = {
 	loginTo: "Connectez-vous à votre compte",
 	welcome: "Bienvenue, connectez-vous avec votre compte existant.",
 	dontHaveAccount: "Vous n’avez pas encore de compte ?",
@@ -3762,11 +3762,39 @@ var errors$4 = {
 	"": ""
 };
 var login_fr = {
-	labels: labels$i,
-	messages: messages$i,
+	labels: labels$k,
+	messages: messages$k,
 	errors: errors$4
 };
 
+var labels$j = {
+	title: "Verifying Magin Link",
+	instructions: "You're on your way!\nLet's confirm your email address.\nClick on the verification link we've sent to your email:",
+	resend: "Resend email"
+};
+var messages$j = {
+	resent: "Resent successfully",
+	success: "Link verified successfully!"
+};
+var verifyLinkToken_en = {
+	labels: labels$j,
+	messages: messages$j
+};
+
+var labels$i = {
+	title: "Confirmez votre courriel",
+	instructions: "Confirmez votre courriel.\nVeuillez cliquer sur le lien de vérification, qui vous a été envoyé à:",
+	resend: "Renvoyer le courriel"
+};
+var messages$i = {
+	resent: "Renvoyé avec succès",
+	success: "Lien vérifiée avec succès"
+};
+var verifyLinkToken_fr = {
+	labels: labels$i,
+	messages: messages$i
+};
+
 var title$d = "Create an account";
 var subtitle$5 = "Enter your email and password below";
 var labels$h = {
@@ -6053,7 +6081,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$i;
+      } = initialState$j;
       this.set(otherStateFields);
     });
 
@@ -6372,7 +6400,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$i = {
+const initialState$j = {
   // View
   view: null,
   // Plans
@@ -6402,7 +6430,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$i,
+    ...initialState$j,
     // State actions
     ...actions,
     // Callbacks
@@ -6566,7 +6594,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
  */
 
 const isValidViewFromURL = viewID => {
-  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart", "email-verify", "invoice-details"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
+  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "passwordless-login", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart", "email-verify", "invoice-details"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
     return true;
   }
 
@@ -6782,6 +6810,7 @@ const resources = {
     checkoutForm: checkoutForm_en,
     messages: messages_en,
     login: login_en,
+    verifyLinkToken: verifyLinkToken_en,
     register: register_en,
     userEdit: userEdit_en,
     address: address_en,
@@ -6806,6 +6835,7 @@ const resources = {
     checkoutForm: checkoutForm_fr,
     messages: messages_fr,
     login: login_fr,
+    verifyLinkToken: verifyLinkToken_fr,
     register: register_fr,
     userEdit: userEdit_fr,
     address: address_fr,
@@ -8978,6 +9008,10 @@ const initViewFromURL = () => {
         return verifyEmailTokenFromUrl();
       }
 
+      if (view === "passwordless-login") {
+        return verifyLinkTokenFromUrl();
+      }
+
       if (view === "invoice-details") {
         return showInvoiceDetailsFromUrl();
       }
@@ -9158,6 +9192,18 @@ const verifyEmailTokenFromUrl = () => {
   });
 };
 
+const verifyLinkTokenFromUrl = () => {
+  var _window$Pelcro$user$i, _window$Pelcro$user;
+
+  const isAlreadyLoggedIn = (_window$Pelcro$user$i = (_window$Pelcro$user = window.Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.isAuthenticated()) !== null && _window$Pelcro$user$i !== void 0 ? _window$Pelcro$user$i : false;
+  const loginToken = window.Pelcro.helpers.getURLParameter("token");
+  if (isAlreadyLoggedIn || !loginToken) return;
+  const {
+    switchView
+  } = usePelcro.getStore();
+  return switchView("passwordless-login");
+};
+
 const showInvoiceDetailsFromUrl = () => {
   const {
     isAuthenticated,
@@ -9533,8 +9579,9 @@ const LOAD_PAYMENT_METHODS = "LOAD_PAYMENT_METHODS";
 const GET_NEWSLETTERS_FETCH = "GET_NEWSLETTERS_FETCH";
 const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
 const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
+const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
 
-const initialState$h = {
+const initialState$i = {
   email: "",
   password: "",
   emailError: null,
@@ -9545,10 +9592,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/React.createContext(initialState$h);
+const store$i = /*#__PURE__*/React.createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 
 const LoginContainer = ({
   style,
@@ -9655,7 +9702,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$h;
+        return initialState$i;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9673,12 +9720,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
     value: {
       state,
       dispatch
@@ -9686,12 +9733,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$h,
+        store: store$i,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -9939,7 +9986,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     t
   } = useTranslation("login");
@@ -9960,11 +10007,11 @@ const LoginButton = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$h
+  store: store$i
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$h
+  store: store$i
 }, props));
 
 var _path$r;
@@ -10041,7 +10088,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$g = {
+const initialState$h = {
   email: "",
   password: "",
   emailError: null,
@@ -10058,10 +10105,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/React.createContext(initialState$g);
+const store$h = /*#__PURE__*/React.createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 
 const RegisterContainer = ({
   style,
@@ -10244,7 +10291,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$g;
+        return initialState$h;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -10262,12 +10309,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -10275,12 +10322,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 /**
@@ -10320,10 +10367,10 @@ const FacebookLoginButton = ({
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -10410,10 +10457,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -10509,10 +10556,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -10800,11 +10847,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 const RegisterButton = ({
@@ -10824,7 +10871,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     t
   } = useTranslation("register");
@@ -10962,7 +11009,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 function LastName({
@@ -10993,7 +11040,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 /**
@@ -11117,7 +11164,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$g
+    store: store$h
   }));
 };
 
@@ -13461,7 +13508,7 @@ class VantivGateway {
 
 /** @type {PaymentStateType} */
 
-const initialState$f = {
+const initialState$g = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -13480,10 +13527,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/React.createContext(initialState$f);
+const store$g = /*#__PURE__*/React.createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -14735,21 +14782,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$f,
+    store: store$g,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 
@@ -14771,7 +14818,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$f
+      store: store$g
     }, props))));
   }
 
@@ -14824,7 +14871,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -14900,7 +14947,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     order,
     plan
@@ -14950,7 +14997,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -15000,7 +15047,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -15034,7 +15081,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -15090,7 +15137,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -15347,7 +15394,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     product,
     plan,
@@ -15480,7 +15527,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     switchView,
     selectedPaymentMethodId
@@ -15522,7 +15569,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     plan
   } = usePelcro();
@@ -16041,7 +16088,7 @@ class DefaultNewsLetter extends React.Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$e = {
+const initialState$f = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -16051,10 +16098,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/React.createContext(initialState$e);
+const store$f = /*#__PURE__*/React.createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const NewsletterUpdateContainer = ({
   style,
@@ -16167,7 +16214,7 @@ const NewsletterUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   React.useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -16211,7 +16258,7 @@ const NewsletterUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
     value: {
       state,
       dispatch
@@ -16219,12 +16266,12 @@ const NewsletterUpdateContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$e,
+        store: store$f,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -16239,7 +16286,7 @@ const NewsletterUpdateButton = ({
       isSubmitting,
       isListLoading
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("newsletter");
@@ -16269,7 +16316,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
 
   if (isListLoading) {
     return /*#__PURE__*/React__default['default'].createElement(Loader, {
@@ -16473,7 +16520,7 @@ function SubscriptionCreateModal({
 SubscriptionCreateModal.viewId = "subscription-create";
 
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
-const initialState$d = {
+const initialState$e = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
@@ -16486,10 +16533,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/React.createContext(initialState$d);
+const store$e = /*#__PURE__*/React.createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const UserUpdateContainer = ({
   style,
@@ -16509,20 +16556,23 @@ const UserUpdateContainer = ({
   }, []);
 
   const loadUserDataIntoFields = () => {
-    var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9;
+    var _window$Pelcro$user$r6, _window$Pelcro$user$r7, _window$Pelcro$user$r8, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
 
     const fields = [{
+      type: SET_EMAIL,
+      payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.email
+    }, {
       type: SET_FIRST_NAME,
-      payload: (_window$Pelcro$user$r6 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r6 === void 0 ? void 0 : _window$Pelcro$user$r6.first_name
+      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.first_name
     }, {
       type: SET_LAST_NAME,
-      payload: (_window$Pelcro$user$r7 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r7 === void 0 ? void 0 : _window$Pelcro$user$r7.last_name
+      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.last_name
     }, {
       type: SET_DISPLAY_NAME,
-      payload: (_window$Pelcro$user$r8 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r8 === void 0 ? void 0 : _window$Pelcro$user$r8.display_name
+      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.display_name
     }, {
       type: SET_PHONE,
-      payload: (_window$Pelcro$user$r9 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r9 === void 0 ? void 0 : _window$Pelcro$user$r9.phone
+      payload: (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.phone
     }];
     fields.filter(field => Boolean(field.payload)).forEach(field => {
       dispatch(field);
@@ -16530,6 +16580,7 @@ const UserUpdateContainer = ({
   };
 
   const handleUpdateUser = ({
+    email,
     firstName,
     lastName,
     phone,
@@ -16538,6 +16589,7 @@ const UserUpdateContainer = ({
   }, dispatch) => {
     window.Pelcro.user.update({
       auth_token: window.Pelcro.user.read().auth_token,
+      email: email,
       first_name: firstName,
       last_name: lastName,
       display_name: displayName,
@@ -16583,6 +16635,11 @@ const UserUpdateContainer = ({
           }
         });
 
+      case SET_EMAIL:
+        return lib_7({ ...state,
+          email: action.payload
+        });
+
       case SET_FIRST_NAME:
         return lib_7({ ...state,
           firstName: action.payload
@@ -16621,27 +16678,26 @@ const UserUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$d,
+    store: store$e,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
 const UserUpdateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  disabled: true,
-  store: store$d
+  store: store$e
 }, props));
 
 const UserUpdateButton = ({
@@ -16654,7 +16710,7 @@ const UserUpdateButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("userEdit");
@@ -16671,11 +16727,11 @@ const UserUpdateButton = ({
 };
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function Phone({
@@ -16704,7 +16760,7 @@ function Phone({
 }
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
@@ -16742,7 +16798,7 @@ const UserUpdateProfilePic = ({
     onClick: onClick
   }, otherProps)), /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "icon",
-    className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600",
+    className: "plc-absolute plc-bg-gray-500 plc-text-white plc-w-10 plc-h-10 plc-top-24 plc-right-2 hover:plc-bg-gray-600 hover:plc-text-white",
     icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
     id: "pelcro-user-update-picture-button",
     onClick: onClick
@@ -16767,15 +16823,15 @@ const UserUpdateView = props => {
   }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateEmail, {
-    label: t("labels.email")
+    label: t("labels.email"),
+    autoFocus: true
   })), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(UserUpdateFirstName, {
     autoComplete: "first-name",
     id: "pelcro-input-first-name",
     errorId: "pelcro-input-first-name-error",
-    label: t("labels.firstName"),
-    autoFocus: true
+    label: t("labels.firstName")
   }), /*#__PURE__*/React__default['default'].createElement(UserUpdateLastName, {
     wrapperClassName: "plc-ml-3",
     autoComplete: "last-name",
@@ -16851,16 +16907,16 @@ function DisplayName({
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default['default'].createElement(DisplayName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
-const initialState$c = {
+const initialState$d = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -16885,10 +16941,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const store$d = /*#__PURE__*/React.createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 
@@ -17095,7 +17151,7 @@ const AddressCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -17127,16 +17183,16 @@ const AddressCreateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
@@ -17147,7 +17203,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -17190,7 +17246,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -17233,7 +17289,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -17276,7 +17332,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -17319,7 +17375,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -17365,7 +17421,7 @@ const AddressCreateSubmit = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("address");
@@ -17476,7 +17532,7 @@ function CountrySelect({
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 function StateSelect({
@@ -17564,7 +17620,7 @@ function StateSelect({
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const AddressCreateView = props => {
@@ -17669,18 +17725,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$c
+    store: store$d
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$c
+    store: store$d
   }, props));
 };
 
-const initialState$b = {
+const initialState$c = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -17705,10 +17761,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/React.createContext(initialState$b);
+const store$c = /*#__PURE__*/React.createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 
 const AddressUpdateContainer = ({
   style,
@@ -17760,7 +17816,7 @@ const AddressUpdateContainer = ({
       const thisAddress = addresses[address];
 
       if (+thisAddress.id === +addressId) {
-        const newState = { ...initialState$b,
+        const newState = { ...initialState$c,
           firstName: thisAddress.first_name,
           lastName: thisAddress.last_name,
           line1: thisAddress.line1,
@@ -17893,7 +17949,7 @@ const AddressUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -17925,21 +17981,21 @@ const AddressUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -17949,7 +18005,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -17992,7 +18048,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -18035,7 +18091,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -18075,7 +18131,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$b
+    store: store$c
   }));
 };
 
@@ -18086,7 +18142,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -18129,7 +18185,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -18175,7 +18231,7 @@ const AddressUpdateSubmit = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
   const {
     t
   } = useTranslation("address");
@@ -18191,7 +18247,7 @@ const AddressUpdateSubmit = ({
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const AddressUpdateView = props => {
@@ -18274,7 +18330,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$b
+    store: store$c
   }));
 };
 
@@ -18357,7 +18413,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$a = {
+const initialState$b = {
   email: "",
   password: "",
   passwordError: null,
@@ -18370,10 +18426,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/React.createContext(initialState$a);
+const store$b = /*#__PURE__*/React.createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 
 const PasswordResetContainer = ({
   style,
@@ -18430,7 +18486,7 @@ const PasswordResetContainer = ({
       type: SET_EMAIL,
       payload: window.Pelcro.helpers.getURLParameter("email")
     });
-    initialState$a.email = window.Pelcro.helpers.getURLParameter("email");
+    initialState$b.email = window.Pelcro.helpers.getURLParameter("email");
     dispatch({
       type: SET_TOKEN,
       payload: window.Pelcro.helpers.getURLParameter("token")
@@ -18490,26 +18546,26 @@ const PasswordResetContainer = ({
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordResetButton = ({
@@ -18522,7 +18578,7 @@ const PasswordResetButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
   const {
     t
   } = useTranslation("passwordReset");
@@ -18539,14 +18595,14 @@ const PasswordResetButton = ({
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$a
+  store: store$b
 }, props, {
   value: window.Pelcro.helpers.getURLParameter("email"),
   disabled: true
 }));
 
 const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default['default'].createElement(ConfirmPassword, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordResetView = props => {
@@ -18598,7 +18654,7 @@ const PasswordResetModal = ({
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$9 = {
+const initialState$a = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -18607,10 +18663,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/React.createContext(initialState$9);
+const store$a = /*#__PURE__*/React.createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 
 const PasswordForgotContainer = ({
   style,
@@ -18688,21 +18744,21 @@ const PasswordForgotContainer = ({
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
@@ -18718,7 +18774,7 @@ const PasswordForgotButton = ({
       emailError
     },
     dispatch
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -18739,7 +18795,7 @@ const PasswordForgotButton = ({
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$9
+  store: store$a
 }, props));
 
 const PasswordForgotView = props => {
@@ -18789,7 +18845,7 @@ const PasswordForgotModal = ({
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$8 = {
+const initialState$9 = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -18803,10 +18859,10 @@ const initialState$8 = {
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/React.createContext(initialState$8);
+const store$9 = /*#__PURE__*/React.createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 const PasswordChangeContainer = ({
   style,
   className = "",
@@ -18958,21 +19014,21 @@ const PasswordChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -18983,7 +19039,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -19017,7 +19073,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -19051,7 +19107,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -19092,7 +19148,7 @@ const PasswordChangeButton = ({
       confirmNewPasswordError
     },
     dispatch
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const {
     t
   } = useTranslation("passwordChange");
@@ -19158,17 +19214,17 @@ const PasswordChangeModal = ({
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$7 = {
+const initialState$8 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/React.createContext(initialState$7);
+const store$8 = /*#__PURE__*/React.createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 
 const CartContainer = ({
   style,
@@ -19259,21 +19315,21 @@ const CartContainer = ({
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -19310,7 +19366,7 @@ const CartSubmit = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const {
     t
   } = useTranslation("cart");
@@ -19341,7 +19397,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const {
     cartItems
   } = usePelcro();
@@ -19654,7 +19710,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$6 = {
+const initialState$7 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -19666,10 +19722,10 @@ const initialState$6 = {
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/React.createContext(initialState$6);
+const store$7 = /*#__PURE__*/React.createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 
 const GiftCreateContainer = ({
   style,
@@ -19773,21 +19829,21 @@ const GiftCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -19801,7 +19857,7 @@ const GiftCreateSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
   const {
     t
   } = useTranslation("register");
@@ -19818,15 +19874,15 @@ const GiftCreateSubmitButton = ({
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 var _path$h;
@@ -19911,7 +19967,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
 
   const handleInputChange = value => {
     dispatch({
@@ -19984,7 +20040,7 @@ function GiftCreateMessage(props) {
   const {
     dispatch,
     state
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
   const MAX_CHARS_COUNT = 200;
   const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
@@ -20108,7 +20164,7 @@ const GiftCreateModal = ({
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$5 = {
+const initialState$6 = {
   giftCode: "",
   buttonDisabled: true,
   alert: {
@@ -20116,10 +20172,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/React.createContext(initialState$5);
+const store$6 = /*#__PURE__*/React.createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 
 const GiftRedeemContainer = ({
   style,
@@ -20184,21 +20240,21 @@ const GiftRedeemContainer = ({
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -20235,7 +20291,7 @@ function GiftCode({
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default['default'].createElement(GiftCode, Object.assign({
-  store: store$5
+  store: store$6
 }, props));
 
 const GiftRedeemSubmitButton = ({
@@ -20248,7 +20304,7 @@ const GiftRedeemSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
   const {
     t
   } = useTranslation("register");
@@ -20341,7 +20397,7 @@ const moveDefaultAddressToStart = addresses => {
   return [defaultAddress, ...addressesWithoutDefault];
 };
 
-const initialState$4 = {
+const initialState$5 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -20350,10 +20406,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/React.createContext(initialState$4);
+const store$5 = /*#__PURE__*/React.createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 
 const AddressSelectContainer = ({
   style,
@@ -20448,7 +20504,7 @@ const AddressSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   React.useEffect(() => {
     var _window$Pelcro$user$r;
 
@@ -20461,16 +20517,16 @@ const AddressSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -20481,7 +20537,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
 
   const handleAddressSelect = event => {
     dispatch({
@@ -20525,7 +20581,7 @@ const AddressSelectSubmit = ({
       selectedAddressId,
       isSubmitting
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
   const {
     t
   } = useTranslation("address");
@@ -20621,7 +20677,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
 
-const initialState$3 = {
+const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -20630,10 +20686,10 @@ const initialState$3 = {
     content: ""
   }
 };
-const store$3 = /*#__PURE__*/React.createContext(initialState$3);
+const store$4 = /*#__PURE__*/React.createContext(initialState$4);
 const {
-  Provider: Provider$3
-} = store$3;
+  Provider: Provider$4
+} = store$4;
 
 const PaymentMethodSelectContainer = ({
   style,
@@ -20692,7 +20748,7 @@ const PaymentMethodSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$3);
+  }, initialState$4);
   React.useEffect(() => {
     var _window$Pelcro$user$r3;
 
@@ -20705,16 +20761,16 @@ const PaymentMethodSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$3, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$3,
+    store: store$4,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$3
+    store: store$4
   })));
 };
 
@@ -20728,7 +20784,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = React.useContext(store$3);
+  } = React.useContext(store$4);
 
   const handlePaymentMethodSelect = event => {
     dispatch({
@@ -20778,7 +20834,7 @@ const PaymentMethodSelectSubmit = ({
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = React.useContext(store$3);
+  } = React.useContext(store$4);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -23570,7 +23626,7 @@ const DashboardOpenButton = () => {
 };
 DashboardOpenButton.viewId = "dashboard-open";
 
-const initialState$2 = {
+const initialState$3 = {
   imageSrc: null,
   crop: {
     x: 0,
@@ -23584,10 +23640,10 @@ const initialState$2 = {
     content: ""
   }
 };
-const store$2 = /*#__PURE__*/React.createContext(initialState$2);
+const store$3 = /*#__PURE__*/React.createContext(initialState$3);
 const {
-  Provider: Provider$2
-} = store$2;
+  Provider: Provider$3
+} = store$3;
 
 const ProfilePicChangeContainer = ({
   style,
@@ -23721,21 +23777,21 @@ const ProfilePicChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$2);
+  }, initialState$3);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-profile-picture-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$2, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$3, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$2,
+    store: store$3,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$2
+    store: store$3
   })));
 };
 /**
@@ -23797,7 +23853,7 @@ const ProfilePicChangeButton = ({
       isSubmitting
     },
     dispatch
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -25165,7 +25221,7 @@ const ProfilePicChangeCropper = ({
       zoom
     },
     dispatch
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `plc-relative plc-w-full plc-h-52 sm:plc-h-96 ${className}`
   }, /*#__PURE__*/React__default['default'].createElement(Cropper, Object.assign({
@@ -25207,7 +25263,7 @@ const ProfilePicChangeZoom = ({
       zoom
     },
     dispatch
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -25259,7 +25315,7 @@ const ProfilePicChangeSelectButton = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -25301,7 +25357,7 @@ const ProfilePicChangeRemoveButton = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -25324,7 +25380,7 @@ const ProfilePicChangeWrapper = () => {
     state: {
       imageSrc
     }
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -25386,17 +25442,17 @@ function ProfilePicChangeModal({
 }
 ProfilePicChangeModal.viewId = "profile-picture";
 
-const initialState$1 = {
+const initialState$2 = {
   isSubmitting: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$1 = /*#__PURE__*/React.createContext(initialState$1);
+const store$2 = /*#__PURE__*/React.createContext(initialState$2);
 const {
-  Provider: Provider$1
-} = store$1;
+  Provider: Provider$2
+} = store$2;
 
 const EmailVerifyContainer = ({
   style,
@@ -25459,21 +25515,21 @@ const EmailVerifyContainer = ({
       default:
         return state;
     }
-  }, initialState$1);
+  }, initialState$2);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-email-verify-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$2, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$1,
+    store: store$2,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$1
+    store: store$2
   })));
 };
 
@@ -25487,7 +25543,7 @@ const EmailVerifyResendButton = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   const {
     t
   } = useTranslation("verifyEmail");
@@ -25562,6 +25618,167 @@ const EmailVerifyModal = ({
 };
 EmailVerifyModal.viewId = "email-verify";
 
+const initialState$1 = {
+  isLoading: true,
+  isTokenValid: false,
+  alert: {
+    type: "error",
+    content: ""
+  }
+};
+const store$1 = /*#__PURE__*/React.createContext(initialState$1);
+const {
+  Provider: Provider$1
+} = store$1;
+
+const VerifyLinkTokenContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  onFailure = () => {},
+  children
+}) => {
+  const handleVerifyLinkToken = ({}, dispatch) => {
+    const token = window.Pelcro.helpers.getURLParameter("token");
+    window.Pelcro.user.verifyLoginToken({
+      token
+    }, (err, res) => {
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+
+      if (err) {
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+        onFailure(err);
+      } else {
+        onSuccess(res);
+      }
+    });
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SHOW_ALERT:
+        return lib_7({ ...state,
+          alert: action.payload
+        });
+
+      case LOADING:
+        return lib_7({ ...state,
+          isLoading: action.payload
+        });
+
+      case LINK_TOKEN_VERIFY:
+        return lib_5({ ...state,
+          isLoading: true
+        }, (state, dispatch) => handleVerifyLinkToken(state, dispatch));
+
+      default:
+        return state;
+    }
+  }, initialState$1);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-login-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$1, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$1,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store: store$1
+  })));
+};
+
+const VerifyLinkTokenLoader = () => {
+  React.useEffect(() => {
+    dispatch({
+      type: LINK_TOKEN_VERIFY
+    });
+  }, []);
+  const {
+    dispatch,
+    state: {
+      isLoading
+    }
+  } = React.useContext(store$1);
+
+  if (isLoading) {
+    return /*#__PURE__*/React__default['default'].createElement(Loader, {
+      width: 60,
+      height: 100
+    });
+  }
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-max-h-80 plc-overflow-y-auto pelcro-newsletters-wrapper"
+  });
+};
+
+/**
+ *
+ */
+
+function VerifyLinkTokenView(props) {
+  const {
+    t
+  } = useTranslation("verifyLinkToken");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-login-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-2xl plc-font-semibold plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", null, t("labels.title"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(VerifyLinkTokenContainer, props, /*#__PURE__*/React__default['default'].createElement(VerifyLinkTokenLoader, null), /*#__PURE__*/React__default['default'].createElement(AlertWithContext, null))));
+}
+
+/**
+ *
+ */
+
+function VerifyLinkTokenModal({
+  onDisplay,
+  onClose,
+  ...props
+}) {
+  useTranslation("verifyLinkToken");
+  const {
+    resetView
+  } = usePelcro();
+
+  const onSuccess = res => {
+    var _props$onSuccess;
+
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
+    resetView();
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-login-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(VerifyLinkTokenView, Object.assign({}, props, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+}
+VerifyLinkTokenModal.viewId = "passwordless-login";
+
 const InvoicePaymentContainer = props => /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainer, Object.assign({
   type: "invoicePayment",
   className: "pelcro-invoice-payment-container"
@@ -25987,6 +26204,10 @@ exports.UserUpdatePhone = UserUpdatePhone;
 exports.UserUpdateProfilePic = UserUpdateProfilePic;
 exports.UserUpdateTextInput = UserUpdateTextInput;
 exports.UserUpdateView = UserUpdateView;
+exports.VerifyLinkTokenContainer = VerifyLinkTokenContainer;
+exports.VerifyLinkTokenLoader = VerifyLinkTokenLoader;
+exports.VerifyLinkTokenModal = VerifyLinkTokenModal;
+exports.VerifyLinkTokenView = VerifyLinkTokenView;
 exports.authenticatedButtons = authenticatedButtons;
 exports.i18n = i18next;
 exports.initButtons = init$1;