@pelcro/react-pelcro-js 3.2.0-beta.1 → 3.2.0-beta.4

package/dist/index.esm.js

@@ -3431,9 +3431,9 @@ var paymentMethod_fr = {
 	select: select
 };
 
-var title$f = "Enter your email to subscribe to our newsletter";
+var title$h = "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 subtitle$9 = "We may use your email for other marketing communication";
 var labels$p = {
 	submit: "Submit",
 	firstName: "First name",
@@ -3450,16 +3450,16 @@ var messages$r = {
 	here: "here"
 };
 var newsletter_en = {
-	title: title$f,
+	title: title$h,
 	updateTitle: updateTitle$1,
-	subtitle: subtitle$7,
+	subtitle: subtitle$9,
 	labels: labels$p,
 	messages: messages$r
 };
 
-var title$e = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
+var title$g = "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 subtitle$8 = "Nous pouvons utiliser votre adresse courriel pour d’autres communications marketing";
 var labels$o = {
 	submit: "Lire l’article !",
 	firstName: "Prénom",
@@ -3476,9 +3476,9 @@ var messages$q = {
 	here: "ici"
 };
 var newsletter_fr = {
-	title: title$e,
+	title: title$g,
 	updateTitle: updateTitle,
-	subtitle: subtitle$6,
+	subtitle: subtitle$8,
 	labels: labels$o,
 	messages: messages$q
 };
@@ -3735,8 +3735,8 @@ var login_fr = {
 	errors: errors$4
 };
 
-var title$d = "Create an account";
-var subtitle$5 = "Enter your email and password below";
+var title$f = "Create an account";
+var subtitle$7 = "Enter your email and password below";
 var labels$h = {
 	signUpFacebook: "Sign up with Facebook",
 	signUpGoogle: "Sign up with Google",
@@ -3821,8 +3821,8 @@ var redeem$1 = {
 	}
 };
 var register_en = {
-	title: title$d,
-	subtitle: subtitle$5,
+	title: title$f,
+	subtitle: subtitle$7,
 	labels: labels$h,
 	messages: messages$h,
 	errors: errors$3,
@@ -3830,8 +3830,8 @@ var register_en = {
 	redeem: redeem$1
 };
 
-var title$c = "Créer un compte";
-var subtitle$4 = "Entrez votre courriel et votre mot de passe ci-dessous";
+var title$e = "Créer un compte";
+var subtitle$6 = "Entrez votre courriel et votre mot de passe ci-dessous";
 var labels$g = {
 	signUpFacebook: "Inscrivez-vous avec Facebook",
 	signUpGoogle: "Inscrivez-vous avec Google",
@@ -3917,8 +3917,8 @@ var redeem = {
 	}
 };
 var register_fr = {
-	title: title$c,
-	subtitle: subtitle$4,
+	title: title$e,
+	subtitle: subtitle$6,
 	labels: labels$g,
 	messages: messages$g,
 	errors: errors$2,
@@ -3978,7 +3978,7 @@ var userEdit_fr = {
 	messages: messages$e
 };
 
-var title$b = "Enter your shipping address";
+var title$d = "Enter your shipping address";
 var selectAddressTitle$1 = "Please select an address";
 var selectAddressSubtitle$1 = "Select one of your saved addresses, or add a new one";
 var labels$d = {
@@ -4001,7 +4001,7 @@ var messages$d = {
 	subRedeemed: "Your subscription has been redeemed."
 };
 var address_en = {
-	title: title$b,
+	title: title$d,
 	selectAddressTitle: selectAddressTitle$1,
 	selectAddressSubtitle: selectAddressSubtitle$1,
 	labels: labels$d,
@@ -4009,7 +4009,7 @@ var address_en = {
 	messages: messages$d
 };
 
-var title$a = "Entrez votre adresse de livraison";
+var title$c = "Entrez votre adresse de livraison";
 var selectAddressTitle = "Veuillez sélectionner une adresse";
 var selectAddressSubtitle = "Choisissez l'une de vos adresses ou créez-en une nouvelle";
 var labels$c = {
@@ -4032,7 +4032,7 @@ var messages$c = {
 	subRedeemed: "Votre abonnement a bien été activé."
 };
 var address_fr = {
-	title: title$a,
+	title: title$c,
 	selectAddressTitle: selectAddressTitle,
 	selectAddressSubtitle: selectAddressSubtitle,
 	labels: labels$c,
@@ -4040,8 +4040,8 @@ var address_fr = {
 	messages: messages$c
 };
 
-var title$9 = "Reset your password";
-var subtitle$3 = "Enter a new password below";
+var title$b = "Reset your password";
+var subtitle$5 = "Enter a new password below";
 var email$3 = "Email";
 var password$3 = "Password";
 var confirmPassword$1 = "Confirm password";
@@ -4049,8 +4049,8 @@ var submit$5 = "Submit";
 var required$5 = "Required";
 var passwordUpdated$1 = "Password has been updated, please login with the new password";
 var passwordReset_en = {
-	title: title$9,
-	subtitle: subtitle$3,
+	title: title$b,
+	subtitle: subtitle$5,
 	email: email$3,
 	password: password$3,
 	confirmPassword: confirmPassword$1,
@@ -4059,8 +4059,8 @@ var passwordReset_en = {
 	passwordUpdated: passwordUpdated$1
 };
 
-var title$8 = "Réinitialiser votre mot de passe";
-var subtitle$2 = "Entrez un nouveau mot de passe ci-dessous";
+var title$a = "Réinitialiser votre mot de passe";
+var subtitle$4 = "Entrez un nouveau mot de passe ci-dessous";
 var email$2 = "Adresse courriel";
 var password$2 = "Mot de passe";
 var confirmPassword = "Confirmer le mot de passe";
@@ -4068,8 +4068,8 @@ var submit$4 = "Soumettre";
 var required$4 = "Champs obligatoires";
 var passwordUpdated = "Votre mot de passe a été mis à jour, veuillez vous connecter avec celui-ci";
 var passwordReset_fr = {
-	title: title$8,
-	subtitle: subtitle$2,
+	title: title$a,
+	subtitle: subtitle$4,
 	email: email$2,
 	password: password$2,
 	confirmPassword: confirmPassword,
@@ -4078,7 +4078,7 @@ var passwordReset_fr = {
 	passwordUpdated: passwordUpdated
 };
 
-var title$7 = "Forgot your password?";
+var title$9 = "Forgot your password?";
 var email$1 = "Email";
 var password$1 = "Password";
 var submit$3 = "Submit";
@@ -4089,7 +4089,7 @@ var messages$b = {
 	loginHere: "login here."
 };
 var passwordForgot_en = {
-	title: title$7,
+	title: title$9,
 	email: email$1,
 	password: password$1,
 	submit: submit$3,
@@ -4098,7 +4098,7 @@ var passwordForgot_en = {
 	messages: messages$b
 };
 
-var title$6 = "Mot de passe oublié ?";
+var title$8 = "Mot de passe oublié ?";
 var email = "Courriel";
 var password = "Mot de passe";
 var submit$2 = "Soumettre";
@@ -4109,7 +4109,7 @@ var messages$a = {
 	loginHere: "Connectez-vous ici"
 };
 var passwordForgot_fr = {
-	title: title$6,
+	title: title$8,
 	email: email,
 	password: password,
 	submit: submit$2,
@@ -4118,7 +4118,7 @@ var passwordForgot_fr = {
 	messages: messages$a
 };
 
-var title$5 = "Change your password";
+var title$7 = "Change your password";
 var currentPassword$1 = "Current password";
 var newPassword$1 = "New password";
 var confirmNewPassword$1 = "Confirm new password";
@@ -4128,7 +4128,7 @@ var passwordChanged$1 = "Password has been changed, please login with the new pa
 var passwordsNotMatching$1 = "Passwords don't match";
 var weakPassword$1 = "Your password must contain at least 6 characters";
 var passwordChange_en = {
-	title: title$5,
+	title: title$7,
 	currentPassword: currentPassword$1,
 	newPassword: newPassword$1,
 	confirmNewPassword: confirmNewPassword$1,
@@ -4139,7 +4139,7 @@ var passwordChange_en = {
 	weakPassword: weakPassword$1
 };
 
-var title$4 = "Changez votre mot de passe";
+var title$6 = "Changez votre mot de passe";
 var currentPassword = "Mot de passe actuel";
 var newPassword = "Nouveau mot de passe";
 var confirmNewPassword = "Confirmer le nouveau mot de passe";
@@ -4149,7 +4149,7 @@ var passwordChanged = "Le mot de passe a été modifié, veuillez vous connecter
 var passwordsNotMatching = "Les mots de passe ne correspondent pas";
 var weakPassword = "Votre mot de passe doit contenir au moins 6";
 var passwordChange_fr = {
-	title: title$4,
+	title: title$6,
 	currentPassword: currentPassword,
 	newPassword: newPassword,
 	confirmNewPassword: confirmNewPassword,
@@ -4160,8 +4160,8 @@ var passwordChange_fr = {
 	weakPassword: weakPassword
 };
 
-var title$3 = "Votre panier";
-var subtitle$1 = "Terminez votre achat ci-dessous";
+var title$5 = "Votre panier";
+var subtitle$3 = "Terminez votre achat ci-dessous";
 var name$1 = "Produit";
 var quantity$1 = "Quantité";
 var price$1 = "Prix";
@@ -4172,8 +4172,8 @@ var confirm$3 = "Passer à la caisse";
 var empty$1 = "Votre panier est vide.";
 var removeAll$1 = "Vider";
 var cart_fr = {
-	title: title$3,
-	subtitle: subtitle$1,
+	title: title$5,
+	subtitle: subtitle$3,
 	name: name$1,
 	quantity: quantity$1,
 	price: price$1,
@@ -4185,8 +4185,8 @@ var cart_fr = {
 	removeAll: removeAll$1
 };
 
-var title$2 = "Your shopping cart";
-var subtitle = "Comple your purchase below";
+var title$4 = "Your shopping cart";
+var subtitle$2 = "Comple your purchase below";
 var name = "Name";
 var quantity = "Quantity";
 var price = "Price";
@@ -4197,8 +4197,8 @@ var confirm$2 = "Checkout";
 var empty = "Your cart is empty.";
 var removeAll = "Remove all";
 var cart_en = {
-	title: title$2,
-	subtitle: subtitle,
+	title: title$4,
+	subtitle: subtitle$2,
 	name: name,
 	quantity: quantity,
 	price: price,
@@ -4636,7 +4636,7 @@ var verifyEmail_fr = {
 	messages: messages
 };
 
-var title$1 = "Invoice details";
+var title$3 = "Invoice details";
 var labels$1 = {
 	summary: "Summary",
 	total: "Total",
@@ -4649,12 +4649,12 @@ var buttons$1 = {
 	pay: "Pay now"
 };
 var invoiceDetails_en = {
-	title: title$1,
+	title: title$3,
 	labels: labels$1,
 	buttons: buttons$1
 };
 
-var title = "Invoice details";
+var title$2 = "Invoice details";
 var labels = {
 	summary: "Summary",
 	total: "Total",
@@ -4667,11 +4667,37 @@ var buttons = {
 	pay: "Pay now"
 };
 var invoiceDetails_fr = {
-	title: title,
+	title: title$2,
 	labels: labels,
 	buttons: buttons
 };
 
+var title$1 = "Renewal options";
+var subtitle$1 = "Select one of the options below to continue";
+var next$1 = "Next";
+var addNew$1 = "Add Another Subscription";
+var renew$1 = "Renew Existing Subscription";
+var subscriptionOptions_en = {
+	title: title$1,
+	subtitle: subtitle$1,
+	next: next$1,
+	addNew: addNew$1,
+	renew: renew$1
+};
+
+var title = "Renewal options";
+var subtitle = "Select one of the options below to continue";
+var next = "Next";
+var addNew = "Add Another Subscription";
+var renew = "Renew Existing Subscription";
+var subscriptionOptions_fr = {
+	title: title,
+	subtitle: subtitle,
+	next: next,
+	addNew: addNew,
+	renew: renew
+};
+
 function create$1(createState) {
   let state;
   const listeners = new Set();
@@ -6021,7 +6047,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$i;
+      } = initialState$j;
       this.set(otherStateFields);
     });
 
@@ -6045,6 +6071,16 @@ class PelcroActions {
         });
       }
 
+      if (view === "subscription-options") {
+        const noRenewableProducts = getRenewableProducts().length === 0;
+
+        if (noRenewableProducts) {
+          return this.set({
+            view: "plan-select"
+          });
+        }
+      }
+
       this.set({
         view
       });
@@ -6119,6 +6155,26 @@ class PelcroActions {
       }
     });
 
+    _defineProperty$3(this, "setProductsList", products => {
+      if (!Array.isArray(products)) {
+        return console.error(`setProductsList expects an array of products as an argument, got an argument of type ${typeof products} instead`);
+      }
+
+      const allowedProducts = window.Pelcro.product.list();
+      const validProducts = products.filter(product => {
+        const isValidProduct = allowedProducts.some(allowedProduct => allowedProduct.id === (product === null || product === void 0 ? void 0 : product.id) && allowedProduct.name === (product === null || product === void 0 ? void 0 : product.name));
+
+        if (!isValidProduct) {
+          console.warn(`setProductsList expects an array of products that exist in the list of valid products (window.Pelcro.product.list()), but it recieved a product which doesn't exist in that list:`, product);
+        }
+
+        return isValidProduct;
+      });
+      this.set({
+        productsList: validProducts
+      });
+    });
+
     _defineProperty$3(this, "setProduct", id => {
       const product = window.Pelcro.product.getById(id);
       if (!product) return console.error("invalid product id");
@@ -6340,10 +6396,12 @@ class PelcroCallbacks {
 
 }
 
-const initialState$i = {
+var _window$Pelcro$produc, _window$Pelcro;
+const initialState$j = {
   // View
   view: null,
   // Plans
+  productsList: (_window$Pelcro$produc = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : _window$Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [],
   product: null,
   plan: null,
   isGift: false,
@@ -6370,7 +6428,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$i,
+    ...initialState$j,
     // State actions
     ...actions,
     // Callbacks
@@ -6725,6 +6783,28 @@ function userMustVerifyEmail() {
   const isUserEmailVerified = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.email_confirm) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : false;
   return window.Pelcro.user.isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified;
 }
+function getRenewableProducts() {
+  const renewableSubs = window.Pelcro.subscription.list().filter(sub => sub.status === "active" && sub.cancel_at_period_end === 1);
+  const renewableProductsIds = [...new Set(renewableSubs.map(sub => sub.plan.product.id))];
+  const renewablePlansIds = [...new Set(renewableSubs.map(sub => sub.plan.id))];
+  const {
+    productsList
+  } = usePelcro.getStore();
+  return productsList.map(product => {
+    if (renewableProductsIds.includes(product.id)) {
+      const renewablePlans = getRenewablePlansOnly(product);
+      return { ...product,
+        plans: renewablePlans
+      };
+    }
+  }).filter(product => product);
+
+  function getRenewablePlansOnly(product) {
+    var _product$plans$filter, _product$plans;
+
+    return (_product$plans$filter = product === null || product === void 0 ? void 0 : (_product$plans = product.plans) === null || _product$plans === void 0 ? void 0 : _product$plans.filter(plan => renewablePlansIds.includes(plan.id))) !== null && _product$plans$filter !== void 0 ? _product$plans$filter : [];
+  }
+}
 
 const resources = {
   en: {
@@ -6749,7 +6829,8 @@ const resources = {
     dashboard: dashboard_en,
     select: select_en,
     notification: notification_en,
-    invoiceDetails: invoiceDetails_en
+    invoiceDetails: invoiceDetails_en,
+    subscriptionOptions: subscriptionOptions_en
   },
   fr: {
     common: common_fr,
@@ -6773,7 +6854,8 @@ const resources = {
     dashboard: dashboard_fr,
     select: select_fr,
     notification: notification_fr,
-    invoiceDetails: invoiceDetails_fr
+    invoiceDetails: invoiceDetails_fr,
+    subscriptionOptions: subscriptionOptions_fr
   }
 }; // set UI language to the page language or default to the language in site settings
 
@@ -7064,8 +7146,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"undefined"!=typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(})/g,a=/\/\*[^]*?\*\/|\s\s+|\n/g,n=(e,t)=>{let r,l="",a="",o="";for(let c in e){let s=e[c];"object"==typeof s?(r=t?t.replace(/([^,])+/g,e=>c.replace(/([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):c,a+="@"==c[0]?"f"==c[1]?n(s,c):c+"{"+n(s,"k"==c[1]?"":t)+"}":n(s,r)):"@"==c[0]&&"i"==c[1]?l=c+" "+s+";":(c=c.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=n.p?n.p(c,s):c+":"+s+";");}return o[0]?(r=t?t+"{"+o+"}":o,l+r+a):l+a},o={},c=e=>{let t="";for(let r in e)t+=r+("object"==typeof e[r]?c(e[r]):e[r]);return t},s=(e,t,r,s,i)=>{let p="object"==typeof e?c(e):e,u=o[p]||(o[p]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(p));if(!o[u]){let t="object"==typeof e?e:(e=>{let t,r=[{}];for(;t=l.exec(e.replace(a,""));)t[4]&&r.shift(),t[3]?r.unshift(r[0][t[3]]=r[0][t[3]]||{}):t[4]||(r[0][t[1]]=t[2]);return r[0]})(e);o[u]=n(i?{["@keyframes "+u]:t}:t,r?"":"."+u);}return ((e,t,r)=>{-1==t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(o[u],t,s),u},i=(e,t,r)=>e.reduce((e,l,a)=>{let o=t[a];if(o&&o.call){let e=o(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;o=t?"."+t:e&&"object"==typeof e?e.props?"":n(e,""):e;}return e+l+(null==o?"":o)},"");function p(e){let r=this||{},l=e.call?e(r.p):e;return s(l.unshift?l.raw?i(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>t?Object.assign(e,t.call?t(r.p):t):e,{}):l,t(r.target),r.g,r.o,r.k)}let u,f,d;p.bind({g:1});let b=p.bind({k:1});function h(e,t,r,l){n.p=t,u=e,f=r,d=l;}function y(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=p.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=c.as||e;return d&&i[0]&&d(c),u(i,c)}return t?t(a):a}}
 
-function _extends$y() {
-  _extends$y = Object.assign || function (target) {
+function _extends$A() {
+  _extends$A = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7079,7 +7161,7 @@ function _extends$y() {
     return target;
   };
 
-  return _extends$y.apply(this, arguments);
+  return _extends$A.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -7169,7 +7251,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$y({}, state, {
+      return _extends$A({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -7179,9 +7261,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$y({}, state, {
+      return _extends$A({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$y({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$A({}, t, action.toast) : t;
         })
       });
 
@@ -7208,9 +7290,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$y({}, state, {
+      return _extends$A({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$y({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$A({}, t, {
             visible: false
           }) : t;
         })
@@ -7218,28 +7300,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$y({}, state, {
+        return _extends$A({}, state, {
           toasts: []
         });
       }
 
-      return _extends$y({}, state, {
+      return _extends$A({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$y({}, state, {
+      return _extends$A({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$y({}, state, {
+      return _extends$A({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$y({}, t, {
+          return _extends$A({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -7286,12 +7368,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$y({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$A({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$y({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$A({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$y({}, state, {
+  return _extends$A({}, state, {
     toasts: mergedToasts
   });
 };
@@ -7301,7 +7383,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$y({
+  return _extends$A({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7351,14 +7433,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$y({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$A({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$y({
+    toast.success(resolveValue(msgs.success, p), _extends$A({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$y({
+    toast.error(resolveValue(msgs.error, e), _extends$A({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -7697,7 +7779,7 @@ var ToastBar = /*#__PURE__*/memo(function (_ref2) {
   var message = createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$y({}, animationStyle, style, toast.style)
+    style: _extends$A({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -7727,7 +7809,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$y({
+  return _extends$A({
     left: 0,
     right: 0,
     display: 'flex',
@@ -7754,7 +7836,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return createElement("div", {
-    style: _extends$y({
+    style: _extends$A({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7789,82 +7871,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$v;
+var _path$x;
 
-function _extends$x() { _extends$x = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+function _extends$z() { _extends$z = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$z.apply(this, arguments); }
 
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$x({
+  return /*#__PURE__*/React.createElement("svg", _extends$z({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$u;
+var _path$w;
 
-function _extends$w() { _extends$w = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+function _extends$y() { _extends$y = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 
 function SvgXIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$w({
+  return /*#__PURE__*/React.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$t;
+var _path$v;
 
-function _extends$v() { _extends$v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+function _extends$x() { _extends$x = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$v({
+  return /*#__PURE__*/React.createElement("svg", _extends$x({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$s;
+var _path$u;
 
-function _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+function _extends$w() { _extends$w = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 
 function SvgExclamation(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$u({
+  return /*#__PURE__*/React.createElement("svg", _extends$w({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$r, _path2$4;
+var _path$t, _path2$4;
 
-function _extends$t() { _extends$t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+function _extends$v() { _extends$v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 
 function SvgSpinner(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$t({
+  return /*#__PURE__*/React.createElement("svg", _extends$v({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -8154,7 +8236,9 @@ const init$1 = () => {
           return switchToAddressView();
         });
       } else {
-        pelcroSubscribeButtonsByClass[j].addEventListener("click", () => switchView("plan-select"));
+        pelcroSubscribeButtonsByClass[j].addEventListener("click", () => {
+          return switchView("subscription-options");
+        });
       }
     }
   }
@@ -8316,7 +8400,8 @@ function Link({
 const init = () => {
   const {
     switchView,
-    set
+    set,
+    setProductsList
   } = usePelcro.getStore();
   const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
 
@@ -8367,7 +8452,8 @@ const init = () => {
           }
 
           notify.dismiss(NOTIFICATION_ID);
-          switchView("_plan-select-entitlements");
+          setProductsList(window.Pelcro.product.getByEntitlements(entitlements));
+          switchView("plan-select");
         }
       }, "Subscribe"), "now to get full page access.")), {
         className: "pelcro-notification-entitlement",
@@ -8922,8 +9008,7 @@ const initViewFromURL = () => {
       }
 
       if (view === "invoice-details") {
-        // FIXME: commented out to remove from the release
-        return false; // return showInvoiceDetailsFromUrl();
+        return showInvoiceDetailsFromUrl();
       }
 
       switchView(view);
@@ -9102,6 +9187,43 @@ const verifyEmailTokenFromUrl = () => {
   });
 };
 
+const showInvoiceDetailsFromUrl = () => {
+  const {
+    isAuthenticated,
+    setInvoice,
+    whenSiteReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+
+    const invoiceId = window.Pelcro.helpers.getURLParameter("id");
+    const wasSetSuccessfully = setInvoice(invoiceId);
+
+    if (!wasSetSuccessfully) {
+      const errorMessage = i18next.t("messages:invalidInvoice", {
+        returnObjects: true
+      });
+      return notify.error(errorMessage);
+    }
+
+    const {
+      invoice
+    } = usePelcro.getStore();
+
+    if (invoice.total === 0) {
+      const errorMessage = i18next.t("messages:zeroTotalInvoice", {
+        returnObjects: true
+      });
+      return notify.error(errorMessage);
+    }
+
+    return switchView("invoice-details");
+  });
+};
+
 const defaultOptions = {
   loadPaymentSDKs: true,
   loadAuth0SDK: true,
@@ -9159,7 +9281,7 @@ const PelcroModalController = ({
     type
   }) => (type === null || type === void 0 ? void 0 : type.viewId) === "dashboard-open"), React__default.Children.map(children, child => child).find(({
     type
-  }) => (type === null || type === void 0 ? void 0 : type.viewId) === "notification"), view === "_plan-select-entitlements" && React__default.Children.map(children, child => child).find(({
+  }) => (type === null || type === void 0 ? void 0 : type.viewId) === "notification"), view === "_plan-select-renew" && React__default.Children.map(children, child => child).find(({
     type
   }) => (type === null || type === void 0 ? void 0 : type.viewId) === "plan-select"), React__default.Children.map(children, child => child).find(({
     type
@@ -9440,8 +9562,10 @@ 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 SWITCH_TO_RENEW = "SWITCH_TO_RENEW";
+const SWITCH_TO_NEW = "SWITCH_TO_NEW";
 
-const initialState$h = {
+const initialState$i = {
   email: "",
   password: "",
   emailError: null,
@@ -9452,10 +9576,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/createContext(initialState$h);
+const store$i = /*#__PURE__*/createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 
 const LoginContainer = ({
   style,
@@ -9562,7 +9686,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$h;
+        return initialState$i;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9580,12 +9704,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+  }, /*#__PURE__*/React__default.createElement(Provider$i, {
     value: {
       state,
       dispatch
@@ -9593,12 +9717,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$h,
+        store: store$i,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -9843,7 +9967,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     t
   } = useTranslation("login");
@@ -9864,23 +9988,23 @@ const LoginButton = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$h
+  store: store$i
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$h
+  store: store$i
 }, props));
 
-var _path$q;
+var _path$s;
 
-function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+function _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 
 function SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$s({
+  return /*#__PURE__*/React.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -9945,7 +10069,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$g = {
+const initialState$h = {
   email: "",
   password: "",
   emailError: null,
@@ -9962,10 +10086,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/createContext(initialState$g);
+const store$h = /*#__PURE__*/createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 
 const RegisterContainer = ({
   style,
@@ -10148,7 +10272,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$g;
+        return initialState$h;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -10166,12 +10290,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$g, {
+  }, /*#__PURE__*/React__default.createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -10179,12 +10303,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 /**
@@ -10199,15 +10323,15 @@ function hasSecurityTokenEnabled$1() {
   return hasSecuritySdkLoaded;
 }
 
-var _path$p;
+var _path$r;
 
-function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+function _extends$t() { _extends$t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 
 function SvgFacebookLogo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$r({
+  return /*#__PURE__*/React.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -10224,10 +10348,10 @@ const FacebookLoginButton = ({
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     dispatch: registerDispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -10280,15 +10404,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$o, _path2$3, _path3$1, _path4;
+var _path$q, _path2$3, _path3$1, _path4;
 
-function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 
 function SvgGoogleLogo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$q({
+  return /*#__PURE__*/React.createElement("svg", _extends$s({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
@@ -10314,10 +10438,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     dispatch: registerDispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -10365,15 +10489,15 @@ const GoogleLoginButton = ({
   }) : null;
 };
 
-var _path$n;
+var _path$p;
 
-function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 
 function SvgAuth0Logo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$p({
+  return /*#__PURE__*/React.createElement("svg", _extends$r({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React.createElement("path", {
     d: "M220.412 0h-92.415l28.562 89.006h92.416l-74.77 53.077 28.57 89.511c48.128-35.06 63.854-88.12 46.208-142.588L220.413 0zM7.018 89.006h92.416L127.997 0H35.589L7.019 89.006c-17.655 54.468-1.92 107.529 46.207 142.588l28.563-89.51-74.77-53.078zm46.208 142.588l74.77 52.97 74.77-52.97-74.77-53.847-74.77 53.847z"
   })));
 }
@@ -10413,10 +10537,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     dispatch: registerDispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -10549,15 +10673,15 @@ function LoginView(props) {
   }, /*#__PURE__*/React__default.createElement(GoogleLoginButton, null), /*#__PURE__*/React__default.createElement(FacebookLoginButton, null), /*#__PURE__*/React__default.createElement(Auth0LoginButton, null))))));
 }
 
-var _path$m, _path2$2, _path3;
+var _path$o, _path2$2, _path3;
 
-function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 
 function SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$o({
+  return /*#__PURE__*/React.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     fill: "none",
     stroke: "#4a4a4a",
     d: "M487.89 42.299c0 13.158-10.671 23.829-23.829 23.829H37.074c-13.162 0-23.832-10.671-23.832-23.829v-63.552c0-13.158 10.67-23.831 23.832-23.831H464.06c13.158 0 23.829 10.672 23.829 23.831l.001 63.552z"
@@ -10704,11 +10828,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 const RegisterButton = ({
@@ -10728,7 +10852,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$g);
+  } = useContext(store$h);
   const {
     t
   } = useTranslation("register");
@@ -10866,7 +10990,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 function LastName({
@@ -10897,7 +11021,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 /**
@@ -11021,7 +11145,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$g
+    store: store$h
   }));
 };
 
@@ -11168,6 +11292,7 @@ function SelectModalWithHook(props) {
     (_props$onDisplay = props.onDisplay) === null || _props$onDisplay === void 0 ? void 0 : _props$onDisplay.call(props);
   }, []);
   const {
+    productsList,
     isGift,
     plan,
     product,
@@ -11177,11 +11302,12 @@ function SelectModalWithHook(props) {
     view,
     set
   } = usePelcro();
-  const entitlementsProtectedElements = document.querySelectorAll("[data-pelcro-entitlements]");
-  const entitlements = entitlementsProtectedElements.length > 0 ? getEntitlementsFromElem(entitlementsProtectedElements[0]) : null;
+  const isRenewingSub = view === "_plan-select-renew";
   return /*#__PURE__*/React__default.createElement(SelectModalWithTrans, {
+    productsList: productsList,
     isGift: isGift,
-    disableGifting: isRenewingGift,
+    disableGifting: isRenewingGift || isRenewingSub,
+    isRenewingSub: isRenewingSub,
     plan: plan,
     product: product,
     onClose: () => {
@@ -11195,8 +11321,10 @@ function SelectModalWithHook(props) {
       plan,
       isGift
     }),
-    setView: switchView,
-    matchingEntitlements: view === "_plan-select-entitlements" ? entitlements : null
+    setSubscriptionIdToRenew: subscriptionIdToRenew => set({
+      subscriptionIdToRenew
+    }),
+    setView: switchView
   });
 }
 SelectModalWithHook.viewId = "plan-select";
@@ -11228,10 +11356,10 @@ class SelectModal extends Component {
         });
       }
 
-      if (this.state.productList.length === 1) {
+      if (this.props.productsList.length === 1) {
         this.setState({
-          product: this.state.productList[0],
-          planList: this.state.productList[0].plans,
+          product: this.props.productsList[0],
+          planList: this.props.productsList[0].plans,
           mode: "plan"
         });
       }
@@ -11248,7 +11376,7 @@ class SelectModal extends Component {
     });
 
     _defineProperty$3(this, "onProductChange", e => {
-      const product = window.Pelcro.product.list()[e.target.selectedIndex];
+      const product = productsList[e.target.selectedIndex];
       this.setState({
         product: product,
         plan: product.plans[0]
@@ -11314,7 +11442,7 @@ class SelectModal extends Component {
 
     _defineProperty$3(this, "renderProducts", () => {
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
-      const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
+      const productsToShow = userDidSelectProduct ? [this.state.product] : this.props.productsList;
       return productsToShow.map((product, index) => {
         return this.renderOneProduct(product, index);
       });
@@ -11327,7 +11455,7 @@ class SelectModal extends Component {
         return this.renderOneProduct(this.state.product);
       }
 
-      const [productsThatMatchArticleTag, allProductsMinusMatched] = productsWithMatchedTaggedFirst(); // Render normal products if there are no available matching products
+      const [productsThatMatchArticleTag, allProductsMinusMatched] = productsWithMatchedTaggedFirst(this.props.productsList); // Render normal products if there are no available matching products
 
       if (!(productsThatMatchArticleTag !== null && productsThatMatchArticleTag !== void 0 && productsThatMatchArticleTag.length)) {
         return this.renderProducts();
@@ -11343,10 +11471,7 @@ class SelectModal extends Component {
         className: "plc-text-sm plc-font-semibold"
       }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
 
-      function productsWithMatchedTaggedFirst() {
-        var _window$Pelcro$produc;
-
-        const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
+      function productsWithMatchedTaggedFirst(allProducts) {
         const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
         const allProductsMinusMatched = allProducts.filter(product => !productsThatMatchArticleTag.some(matchedProduct => matchedProduct.id === product.id));
         return [productsThatMatchArticleTag, allProductsMinusMatched];
@@ -11380,7 +11505,7 @@ class SelectModal extends Component {
     _defineProperty$3(this, "selectProduct", e => {
       const id = e.target.dataset.key;
 
-      for (const product of this.state.productList) {
+      for (const product of this.props.productsList) {
         if (+product.id === +id) {
           var _this$state$plan;
 
@@ -11433,6 +11558,14 @@ class SelectModal extends Component {
 
     _defineProperty$3(this, "submitOption", () => {
       this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift);
+
+      if (this.props.isRenewingSub) {
+        var _matchingSub$id;
+
+        const matchingSub = window.Pelcro.subscription.list().find(sub => sub.plan.id === this.state.plan.id && sub.status === "active" && sub.cancel_at_period_end === 1);
+        this.props.setSubscriptionIdToRenew((_matchingSub$id = matchingSub === null || matchingSub === void 0 ? void 0 : matchingSub.id) !== null && _matchingSub$id !== void 0 ? _matchingSub$id : null);
+      }
+
       const {
         product,
         isGift
@@ -11470,8 +11603,7 @@ class SelectModal extends Component {
       plan: {},
       isGift: props.isGift,
       disabled: true,
-      mode: "product",
-      productList: props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(props.matchingEntitlements) : window.Pelcro.product.list()
+      mode: "product"
     };
     this.product = this.props.product || window.Pelcro.paywall.getProduct();
     this.locale = this.props.t;
@@ -11479,7 +11611,7 @@ class SelectModal extends Component {
   }
 
   render() {
-    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
+    var _this$props$productsL, _this$props$productsL2, _window$Pelcro$site$r;
 
     const {
       disableGifting
@@ -11513,7 +11645,7 @@ class SelectModal extends Component {
       className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
     }, /*#__PURE__*/React__default.createElement("h4", {
       className: "plc-text-2xl plc-font-semibold"
-    }, this.product && this.product.paywall.select_title || ((_window$Pelcro$produc2 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc2 === void 0 ? void 0 : _window$Pelcro$produc2.paywall.select_title)), /*#__PURE__*/React__default.createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_window$Pelcro$produc3 = window.Pelcro.product.list()[0]) === null || _window$Pelcro$produc3 === void 0 ? void 0 : _window$Pelcro$produc3.paywall.select_subtitle))), /*#__PURE__*/React__default.createElement("div", {
+    }, this.product && this.product.paywall.select_title || ((_this$props$productsL = this.props.productsList[0]) === null || _this$props$productsL === void 0 ? void 0 : _this$props$productsL.paywall.select_title)), /*#__PURE__*/React__default.createElement("p", null, this.product && this.product.paywall.select_subtitle || ((_this$props$productsL2 = this.props.productsList[0]) === null || _this$props$productsL2 === void 0 ? void 0 : _this$props$productsL2.paywall.select_subtitle))), /*#__PURE__*/React__default.createElement("div", {
       className: "pelcro-select-products-wrapper"
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-overflow-y-scroll plc-max-h-72 pelcro-select-plans-wrapper"
@@ -13073,6 +13205,12 @@ var _paymentGateway3 = /*#__PURE__*/new WeakMap();
 
 var _createSubscription3 = /*#__PURE__*/new WeakMap();
 
+var _renewSubscription2 = /*#__PURE__*/new WeakMap();
+
+var _createGiftedSubscription3 = /*#__PURE__*/new WeakMap();
+
+var _renewGiftedSubscription2 = /*#__PURE__*/new WeakMap();
+
 class VantivGateway {
   constructor() {
     _paymentGateway3.set(this, {
@@ -13087,6 +13225,18 @@ class VantivGateway {
         case types.CREATE_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
 
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription2).call(this, options, callback);
+
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription3).call(this, options, callback);
+
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription2).call(this, options, callback);
+        // TODO: implement paying invoices as well
+        // case types.PAY_INVOICE:
+        //   return this.#payInvoice(options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: vantiv Gateway");
       }
@@ -13101,46 +13251,151 @@ class VantivGateway {
           couponCode,
           product,
           quantity = 1,
-          addressId
+          addressId,
+          isExistingSource
         } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
         window.Pelcro.subscription.create({
           quantity,
-          gateway_token: token,
-          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
           auth_token: window.Pelcro.user.read().auth_token,
           plan_id: plan.id,
           coupon_code: couponCode,
-          address_id: product.address_required ? addressId : null
+          address_id: product.address_required ? addressId : null,
+          ...params
         }, (err, res) => {
           callback(err, res);
         });
       }
     });
-  }
-
-}
 
-/**
- * @typedef {Object} PaymentStateType
- * @property {boolean} disableSubmit
- * @property {boolean} isLoading
- * @property {boolean} disableCouponButton
- * @property {object} couponObject
- * @property {string} couponCode
- * @property {string} couponError
- * @property {boolean} enableCouponField
- * @property {string} percentOff
- * @property {unknown} canMakePayment
- * @property {unknown} paymentRequest
- * @property {number} updatedPrice
- * @property {number} taxAmount
- * @property {object} currentPlan
- * @property {object} alert
- */
+    _renewSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _createGiftedSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+
+    _renewGiftedSubscription2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+
+}
+
+/**
+ * @typedef {Object} PaymentStateType
+ * @property {boolean} disableSubmit
+ * @property {boolean} isLoading
+ * @property {boolean} disableCouponButton
+ * @property {object} couponObject
+ * @property {string} couponCode
+ * @property {string} couponError
+ * @property {boolean} enableCouponField
+ * @property {string} percentOff
+ * @property {unknown} canMakePayment
+ * @property {unknown} paymentRequest
+ * @property {number} updatedPrice
+ * @property {number} taxAmount
+ * @property {object} currentPlan
+ * @property {object} alert
+ */
 
 /** @type {PaymentStateType} */
 
-const initialState$f = {
+const initialState$g = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -13159,10 +13414,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/createContext(initialState$f);
+const store$g = /*#__PURE__*/createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -13175,7 +13430,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift, _props$invoice;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice;
 
   const {
     t
@@ -13191,6 +13446,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
   const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
   const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
+  const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
   useEffect(() => {
@@ -13208,53 +13464,134 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
 
   function submitVantivPayment() {
-    if (!vantivInstanceRef.current) {
-      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
-    }
+    if (!selectedPaymentMethodId) {
+      if (!vantivInstanceRef.current) {
+        return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+      }
 
-    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+      const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
 
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
+      vantivInstanceRef.current.getPaypageRegistrationId({
+        id: orderId,
+        orderId: orderId
+      });
+    } else {
+      handleVantivPayment(null);
+    }
   }
 
   function handleVantivPayment(paymentRequest) {
-    const SUCCESS_STATUS = "870";
+    if (paymentRequest) {
+      const SUCCESS_STATUS = "870";
 
-    if (paymentRequest.response !== SUCCESS_STATUS) {
-      return handlePaymentError({
-        error: new Error(paymentRequest.message)
-      });
+      if (paymentRequest.response !== SUCCESS_STATUS) {
+        return handlePaymentError({
+          error: new Error(paymentRequest.message)
+        });
+      }
     }
 
     const subscription = new Subscription(new VantivGateway());
-    const {
-      couponCode
-    } = state;
-    return subscription.execute({
-      type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
-      token: paymentRequest,
-      quantity: plan.quantity,
-      plan,
-      couponCode,
-      product,
-      addressId: selectedAddressId
-    }, (err, res) => {
-      if (err) {
-        return handlePaymentError(err);
-      }
 
-      onSuccess(res);
-    });
+    if (type === "createPayment") {
+      handleVantivSubscription();
+    } // TODO: handle other types of payments
+    // } else if (type === "orderCreate") {
+    //   purchase(stripeSource, state, dispatch);
+    // } else if (type === "invoicePayment") {
+    //   payInvoice(new StripeGateway(), stripeSource.id, dispatch);
+    // }
+
+
+    function handleVantivSubscription() {
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      const {
+        couponCode
+      } = state;
+      const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+      if (renewGift) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return subscription.execute({
+          type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      }
+    }
   }
 
   const vantivInstanceRef = React__default.useRef(null);
   useEffect(() => {
     const cardProcessor = getSiteCardProcessor();
 
-    if (cardProcessor === "vantiv") {
+    if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       var _window$Pelcro$site$r;
 
       const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_pay_page_id;
@@ -13277,7 +13614,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, []);
+  }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
     try {
@@ -14196,6 +14533,10 @@ const PaymentMethodContainerWithoutStripe = ({
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitVantivPayment();
+          }
+
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -14208,10 +14549,6 @@ const PaymentMethodContainerWithoutStripe = ({
             return updatePaymentSource(state, dispatch);
           }
 
-          if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
-          }
-
           submitPayment(state);
         });
 
@@ -14280,21 +14617,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$f, {
+  }, /*#__PURE__*/React__default.createElement(Provider$g, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$f,
+    store: store$g,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 
@@ -14316,7 +14653,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
-      store: store$f
+      store: store$g
     }, props))));
   }
 
@@ -14369,7 +14706,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -14445,7 +14782,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     order,
     plan
@@ -14495,7 +14832,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = useContext(store$f);
+  } = 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());
@@ -14516,17 +14853,17 @@ const SubmitPaymentMethod = ({
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$l;
+var _path$n;
 
-function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 
 function SvgArrowLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$n({
+  return /*#__PURE__*/React.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14545,7 +14882,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -14579,7 +14916,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -14608,17 +14945,17 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$k;
+var _path$m;
 
-function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 
 function SvgTicket(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$m({
+  return /*#__PURE__*/React.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14635,7 +14972,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -14892,7 +15229,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     product,
     plan,
@@ -14978,16 +15315,16 @@ const BankRedirection = () => {
   }));
 };
 
-var _path$j;
+var _path$l;
 
-function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 
 function SvgLock(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$l({
+  return /*#__PURE__*/React.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -15004,7 +15341,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     switchView,
     selectedPaymentMethodId
@@ -15046,7 +15383,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = useContext(store$f);
+  } = useContext(store$g);
   const {
     plan
   } = usePelcro();
@@ -15210,12 +15547,12 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-var _path$i;
+var _path$k;
 
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 
 function SvgGift(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$k({
+  return /*#__PURE__*/React.createElement("svg", _extends$m({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -15224,7 +15561,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -15565,7 +15902,7 @@ class DefaultNewsLetter extends Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$e = {
+const initialState$f = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -15575,10 +15912,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/createContext(initialState$e);
+const store$f = /*#__PURE__*/createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const NewsletterUpdateContainer = ({
   style,
@@ -15691,7 +16028,7 @@ const NewsletterUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -15735,7 +16072,7 @@ const NewsletterUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$e, {
+  }, /*#__PURE__*/React__default.createElement(Provider$f, {
     value: {
       state,
       dispatch
@@ -15743,12 +16080,12 @@ const NewsletterUpdateContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$e,
+        store: store$f,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -15763,7 +16100,7 @@ const NewsletterUpdateButton = ({
       isSubmitting,
       isListLoading
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
   const {
     t
   } = useTranslation("newsletter");
@@ -15793,7 +16130,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = useContext(store$e);
+  } = useContext(store$f);
 
   if (isListLoading) {
     return /*#__PURE__*/React__default.createElement(Loader, {
@@ -15997,7 +16334,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,
@@ -16010,10 +16347,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/createContext(initialState$d);
+const store$e = /*#__PURE__*/createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const UserUpdateContainer = ({
   style,
@@ -16145,27 +16482,27 @@ const UserUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$d, {
+  }, /*#__PURE__*/React__default.createElement(Provider$e, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$d,
+    store: store$e,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
 const UserUpdateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
   disabled: true,
-  store: store$d
+  store: store$e
 }, props));
 
 const UserUpdateButton = ({
@@ -16178,7 +16515,7 @@ const UserUpdateButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$d);
+  } = useContext(store$e);
   const {
     t
   } = useTranslation("userEdit");
@@ -16195,11 +16532,11 @@ const UserUpdateButton = ({
 };
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function Phone({
@@ -16228,22 +16565,22 @@ function Phone({
 }
 
 const UserUpdatePhone = props => /*#__PURE__*/React__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";
 
-var _path$h;
+var _path$j;
 
-function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 
 function SvgEdit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.createElement("svg", _extends$l({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -16375,16 +16712,16 @@ function DisplayName({
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default.createElement(DisplayName, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
-const initialState$c = {
+const initialState$d = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -16409,10 +16746,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/createContext(initialState$c);
+const store$d = /*#__PURE__*/createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 
@@ -16619,7 +16956,7 @@ const AddressCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -16651,16 +16988,16 @@ const AddressCreateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$c, {
+  }, /*#__PURE__*/React__default.createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
@@ -16671,7 +17008,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -16714,7 +17051,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -16757,7 +17094,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -16800,7 +17137,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -16843,7 +17180,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
 
   const handleBlur = () => {
     return dispatch({
@@ -16889,7 +17226,7 @@ const AddressCreateSubmit = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$c);
+  } = useContext(store$d);
   const {
     t
   } = useTranslation("address");
@@ -17000,7 +17337,7 @@ function CountrySelect({
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 function StateSelect({
@@ -17088,7 +17425,7 @@ function StateSelect({
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const AddressCreateView = props => {
@@ -17193,18 +17530,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$c
+    store: store$d
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$c
+    store: store$d
   }, props));
 };
 
-const initialState$b = {
+const initialState$c = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -17229,10 +17566,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/createContext(initialState$b);
+const store$c = /*#__PURE__*/createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 
 const AddressUpdateContainer = ({
   style,
@@ -17284,7 +17621,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,
@@ -17417,7 +17754,7 @@ const AddressUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -17449,21 +17786,21 @@ const AddressUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$b, {
+  }, /*#__PURE__*/React__default.createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default.createElement(CountrySelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -17473,7 +17810,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -17516,7 +17853,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -17559,7 +17896,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -17599,7 +17936,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$b
+    store: store$c
   }));
 };
 
@@ -17610,7 +17947,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -17653,7 +17990,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -17699,7 +18036,7 @@ const AddressUpdateSubmit = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$b);
+  } = useContext(store$c);
   const {
     t
   } = useTranslation("address");
@@ -17715,7 +18052,7 @@ const AddressUpdateSubmit = ({
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default.createElement(StateSelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const AddressUpdateView = props => {
@@ -17798,7 +18135,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$b
+    store: store$c
   }));
 };
 
@@ -17881,7 +18218,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$a = {
+const initialState$b = {
   email: "",
   password: "",
   passwordError: null,
@@ -17894,10 +18231,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/createContext(initialState$a);
+const store$b = /*#__PURE__*/createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 
 const PasswordResetContainer = ({
   style,
@@ -17954,7 +18291,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")
@@ -18014,26 +18351,26 @@ const PasswordResetContainer = ({
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$a, {
+  }, /*#__PURE__*/React__default.createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordResetButton = ({
@@ -18046,7 +18383,7 @@ const PasswordResetButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$a);
+  } = useContext(store$b);
   const {
     t
   } = useTranslation("passwordReset");
@@ -18063,14 +18400,14 @@ const PasswordResetButton = ({
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__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.createElement(ConfirmPassword, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordResetView = props => {
@@ -18122,7 +18459,7 @@ const PasswordResetModal = ({
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$9 = {
+const initialState$a = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -18131,10 +18468,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/createContext(initialState$9);
+const store$a = /*#__PURE__*/createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 
 const PasswordForgotContainer = ({
   style,
@@ -18212,21 +18549,21 @@ const PasswordForgotContainer = ({
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$9, {
+  }, /*#__PURE__*/React__default.createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
@@ -18242,7 +18579,7 @@ const PasswordForgotButton = ({
       emailError
     },
     dispatch
-  } = useContext(store$9);
+  } = useContext(store$a);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -18263,7 +18600,7 @@ const PasswordForgotButton = ({
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$9
+  store: store$a
 }, props));
 
 const PasswordForgotView = props => {
@@ -18313,7 +18650,7 @@ const PasswordForgotModal = ({
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$8 = {
+const initialState$9 = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -18327,10 +18664,10 @@ const initialState$8 = {
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/createContext(initialState$8);
+const store$9 = /*#__PURE__*/createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 const PasswordChangeContainer = ({
   style,
   className = "",
@@ -18482,21 +18819,21 @@ const PasswordChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$8, {
+  }, /*#__PURE__*/React__default.createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -18507,7 +18844,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = useContext(store$8);
+  } = useContext(store$9);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -18541,7 +18878,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = useContext(store$8);
+  } = useContext(store$9);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -18575,7 +18912,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = useContext(store$8);
+  } = useContext(store$9);
   const handleBlur = useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -18616,7 +18953,7 @@ const PasswordChangeButton = ({
       confirmNewPasswordError
     },
     dispatch
-  } = useContext(store$8);
+  } = useContext(store$9);
   const {
     t
   } = useTranslation("passwordChange");
@@ -18682,17 +19019,17 @@ const PasswordChangeModal = ({
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$7 = {
+const initialState$8 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/createContext(initialState$7);
+const store$8 = /*#__PURE__*/createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 
 const CartContainer = ({
   style,
@@ -18783,21 +19120,21 @@ const CartContainer = ({
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$7, {
+  }, /*#__PURE__*/React__default.createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -18834,7 +19171,7 @@ const CartSubmit = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$7);
+  } = useContext(store$8);
   const {
     t
   } = useTranslation("cart");
@@ -18865,7 +19202,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = useContext(store$7);
+  } = useContext(store$8);
   const {
     cartItems
   } = usePelcro();
@@ -19178,7 +19515,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$6 = {
+const initialState$7 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -19190,10 +19527,10 @@ const initialState$6 = {
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/createContext(initialState$6);
+const store$7 = /*#__PURE__*/createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 
 const GiftCreateContainer = ({
   style,
@@ -19297,21 +19634,21 @@ const GiftCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$6, {
+  }, /*#__PURE__*/React__default.createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -19325,7 +19662,7 @@ const GiftCreateSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = useContext(store$6);
+  } = useContext(store$7);
   const {
     t
   } = useTranslation("register");
@@ -19342,29 +19679,29 @@ const GiftCreateSubmitButton = ({
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
-var _path$g;
+var _path$i;
 
-function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 
 function SvgInfoCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$i({
+  return /*#__PURE__*/React.createElement("svg", _extends$k({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-5 plc-h-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -19435,7 +19772,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = useContext(store$6);
+  } = useContext(store$7);
 
   const handleInputChange = value => {
     dispatch({
@@ -19508,7 +19845,7 @@ function GiftCreateMessage(props) {
   const {
     dispatch,
     state
-  } = useContext(store$6);
+  } = 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;
 
@@ -19632,7 +19969,7 @@ const GiftCreateModal = ({
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$5 = {
+const initialState$6 = {
   giftCode: "",
   buttonDisabled: true,
   alert: {
@@ -19640,10 +19977,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/createContext(initialState$5);
+const store$6 = /*#__PURE__*/createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 
 const GiftRedeemContainer = ({
   style,
@@ -19708,21 +20045,21 @@ const GiftRedeemContainer = ({
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$5, {
+  }, /*#__PURE__*/React__default.createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -19759,7 +20096,7 @@ function GiftCode({
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default.createElement(GiftCode, Object.assign({
-  store: store$5
+  store: store$6
 }, props));
 
 const GiftRedeemSubmitButton = ({
@@ -19772,7 +20109,7 @@ const GiftRedeemSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = useContext(store$5);
+  } = useContext(store$6);
   const {
     t
   } = useTranslation("register");
@@ -19865,7 +20202,7 @@ const moveDefaultAddressToStart = addresses => {
   return [defaultAddress, ...addressesWithoutDefault];
 };
 
-const initialState$4 = {
+const initialState$5 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -19874,10 +20211,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/createContext(initialState$4);
+const store$5 = /*#__PURE__*/createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 
 const AddressSelectContainer = ({
   style,
@@ -19972,7 +20309,7 @@ const AddressSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   useEffect(() => {
     var _window$Pelcro$user$r;
 
@@ -19985,16 +20322,16 @@ const AddressSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$4, {
+  }, /*#__PURE__*/React__default.createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -20005,7 +20342,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
 
   const handleAddressSelect = event => {
     dispatch({
@@ -20049,7 +20386,7 @@ const AddressSelectSubmit = ({
       selectedAddressId,
       isSubmitting
     }
-  } = useContext(store$4);
+  } = useContext(store$5);
   const {
     t
   } = useTranslation("address");
@@ -20145,7 +20482,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
 
-const initialState$3 = {
+const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -20154,10 +20491,10 @@ const initialState$3 = {
     content: ""
   }
 };
-const store$3 = /*#__PURE__*/createContext(initialState$3);
+const store$4 = /*#__PURE__*/createContext(initialState$4);
 const {
-  Provider: Provider$3
-} = store$3;
+  Provider: Provider$4
+} = store$4;
 
 const PaymentMethodSelectContainer = ({
   style,
@@ -20216,7 +20553,7 @@ const PaymentMethodSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$3);
+  }, initialState$4);
   useEffect(() => {
     var _window$Pelcro$user$r3;
 
@@ -20229,16 +20566,16 @@ const PaymentMethodSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$3, {
+  }, /*#__PURE__*/React__default.createElement(Provider$4, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$3,
+    store: store$4,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$3
+    store: store$4
   })));
 };
 
@@ -20252,7 +20589,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = useContext(store$3);
+  } = useContext(store$4);
 
   const handlePaymentMethodSelect = event => {
     dispatch({
@@ -20302,7 +20639,7 @@ const PaymentMethodSelectSubmit = ({
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = useContext(store$3);
+  } = useContext(store$4);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -20376,8 +20713,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$j() {
+  _extends$j = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -20391,7 +20728,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -20575,7 +20912,7 @@ function render(props, propsBag, defaultTag, features, visible) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$h({}, _rest, {
+      return _render(_extends$j({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -21103,7 +21440,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default.createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$j({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -21147,7 +21484,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default.createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$j({}, sharedProps, {
     as: Fragment,
     children: React__default.createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -21274,12 +21611,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -21298,7 +21635,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -21309,19 +21646,19 @@ var ActionTypes;
 
     return ((_item$dataRef$current = item.dataRef.current.textValue) == null ? void 0 : _item$dataRef$current.startsWith(searchQuery)) && !item.dataRef.current.disabled;
   });
-  if (match === -1 || match === state.activeItemIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$j({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -21334,7 +21671,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -21373,19 +21710,19 @@ var ActionTypes$1;
 (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -21406,7 +21743,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -21419,10 +21756,10 @@ var ActionTypes$1;
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$j({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -21430,11 +21767,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -21447,7 +21784,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$j({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -21508,18 +21845,18 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$f;
+var _path$h;
 
-function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
 
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21735,18 +22072,18 @@ const SavedItems = ({
   });
 };
 
-var _path$e;
+var _path$g;
 
-function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 
 function SvgRefresh(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21754,35 +22091,35 @@ function SvgRefresh(props) {
   })));
 }
 
-var _path$d;
+var _path$f;
 
-function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 
 function SvgCalendar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-4 plc-w-4 plc-mr-1",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$c;
+var _path$e;
 
-function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 
 function SvgPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21790,17 +22127,17 @@ function SvgPlus(props) {
   })));
 }
 
-var _path$b;
+var _path$d;
 
-function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 
 function SvgCheckMark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
@@ -21864,7 +22201,8 @@ const SubscriptionsItems = ({
   } = useTranslation("dashboard");
   const {
     switchView,
-    isAuthenticated
+    switchToAddressView,
+    switchToPaymentView
   } = usePelcro();
   const subs = getNonDonationSubs();
   if (subs.length === 0) return null;
@@ -21906,7 +22244,12 @@ const SubscriptionsItems = ({
       const plan = window.Pelcro.plan.getById(plan_id);
       setProductAndPlan(product, plan);
       setSubscriptionIdToRenew(sub.id);
-      setView("plan-select");
+
+      if (product.address_required) {
+        return switchToAddressView();
+      }
+
+      return switchToPaymentView();
     };
 
     const getPhases = () => {
@@ -22095,18 +22438,18 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
-var _path$a;
+var _path$c;
 
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22114,17 +22457,17 @@ function SvgExit(props) {
   })));
 }
 
-var _path$9;
+var _path$b;
 
-function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22132,18 +22475,18 @@ function SvgUser(props) {
   })));
 }
 
-var _path$8;
+var _path$a;
 
-function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 
 function SvgNewsletter(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22151,18 +22494,37 @@ function SvgNewsletter(props) {
   })));
 }
 
-var _path$7;
+var _path$9;
 
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+
+function SvgDocument(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-6 plc-w-6 plc-mr-2",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+  })));
+}
+
+var _path$8;
+
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 
 function SvgPaymentCard(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22170,18 +22532,18 @@ function SvgPaymentCard(props) {
   })));
 }
 
-var _path$6, _path2$1;
+var _path$7, _path2$1;
 
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 
 function SvgLocationPin(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22196,10 +22558,10 @@ function SvgLocationPin(props) {
 
 var _switch;
 
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 
 function SvgSubscription(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -22214,18 +22576,18 @@ function SvgSubscription(props) {
   }))))));
 }
 
-var _path$5;
+var _path$6;
 
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 
 function SvgShopping(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22233,18 +22595,18 @@ function SvgShopping(props) {
   })));
 }
 
-var _path$4;
+var _path$5;
 
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 
 function SvgBookmark(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -22252,33 +22614,33 @@ function SvgBookmark(props) {
   })));
 }
 
-var _path$3;
+var _path$4;
 
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 
 function SvgKey(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     d: "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$2;
+var _path$3;
 
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 
 function SvgDonate(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     width: 24,
     height: 24,
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     d: "M4 21h9.62a3.995 3.995 0 003.037-1.397l5.102-5.952a1 1 0 00-.442-1.6l-1.968-.656a3.043 3.043 0 00-2.823.503l-3.185 2.547-.617-1.235A3.98 3.98 0 009.146 11H4c-1.103 0-2 .897-2 2v6c0 1.103.897 2 2 2zm0-8h5.146c.763 0 1.448.423 1.789 1.105l.447.895H7v2h6.014a.996.996 0 00.442-.11l.003-.001.004-.002h.003l.002-.001h.004l.001-.001c.009.003.003-.001.003-.001.01 0 .002-.001.002-.001h.001l.002-.001.003-.001.002-.001.002-.001.003-.001.002-.001c.003 0 .001-.001.002-.001l.003-.002.002-.001.002-.001.003-.001.002-.001h.001l.002-.001h.001l.002-.001.002-.001c.009-.001.003-.001.003-.001l.002-.001a.915.915 0 00.11-.078l4.146-3.317c.262-.208.623-.273.94-.167l.557.186-4.133 4.823a2.029 2.029 0 01-1.52.688H4v-6zM16 2h-.017c-.163.002-1.006.039-1.983.705-.951-.648-1.774-.7-1.968-.704L12.002 2h-.004c-.801 0-1.555.313-2.119.878C9.313 3.445 9 4.198 9 5s.313 1.555.861 2.104l3.414 3.586a1.006 1.006 0 001.45-.001l3.396-3.568C18.688 6.555 19 5.802 19 5s-.313-1.555-.878-2.121A2.978 2.978 0 0016.002 2H16zm1 3c0 .267-.104.518-.311.725L14 8.55l-2.707-2.843C11.104 5.518 11 5.267 11 5s.104-.518.294-.708A.977.977 0 0111.979 4c.025.001.502.032 1.067.485.081.065.163.139.247.222l.707.707.707-.707c.084-.083.166-.157.247-.222.529-.425.976-.478 1.052-.484a.987.987 0 01.701.292c.189.189.293.44.293.707z"
   })));
 }
@@ -22314,17 +22676,149 @@ const DonationsMenu = () => {
   }), subscriptions));
 };
 
-function getDonationSubs() {
-  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+function getDonationSubs() {
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
+
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  return [...donations, ...canceledDonations];
+}
+
+function formatStartDate(date) {
+  const startDate = new Date(date);
+  return new Intl.DateTimeFormat("en-CA").format(startDate);
+}
+
+const InvoicesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default.createElement("table", {
+    className: "plc-w-full plc-table-fixed"
+  }, /*#__PURE__*/React__default.createElement("thead", {
+    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
+  }, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.details")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.status.title")), /*#__PURE__*/React__default.createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.actions")))), /*#__PURE__*/React__default.createElement("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
+    className: "plc-h-4"
+  }), /*#__PURE__*/React__default.createElement(InvoicesItems, props)));
+};
+
+const InvoicesItems = () => {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const {
+    t
+  } = useTranslation("dashboard");
+  const {
+    setInvoice,
+    switchView
+  } = usePelcro();
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+
+  const showInvoiceDetails = event => {
+    if (setInvoice(event.target.dataset.id)) {
+      switchView("invoice-details");
+    }
+  };
+
+  if (invoices.length === 0) return null;
+  return invoices.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).map(invoice => {
+    const invoiceStatus = getInvoiceStatus(invoice);
+    const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(new Date(invoice.created_at));
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: invoice.id,
+      className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50`
+    }, /*#__PURE__*/React__default.createElement("td", {
+      className: "plc-truncate"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-font-semibold plc-text-gray-500"
+    }, `#${invoice.id}`), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, formattedCreationDate)), /*#__PURE__*/React__default.createElement("td", {
+      className: "plc-py-2"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${invoiceStatus.bgColor} plc-uppercase ${invoiceStatus.textColor} plc-rounded-lg`
+    }, invoiceStatus.icon, invoiceStatus.title)), /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-blue-400 focus:plc-ring-blue-400 pelcro-dashboard-view-invoice-button",
+      icon: /*#__PURE__*/React__default.createElement(SvgDocument, {
+        className: "plc-w-4 plc-h-4"
+      }),
+      onClick: showInvoiceDetails,
+      "data-id": invoice.id
+    }, t("labels.view"))));
+  });
+};
+
+function getInvoiceStatus(invoice) {
+  const translations = i18next.t("dashboard:labels", {
+    returnObjects: true
+  });
+
+  switch (invoice.status) {
+    case "paid":
+      return {
+        textColor: "plc-text-green-700",
+        bgColor: "plc-bg-green-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null),
+        title: translations.paid
+      };
+
+    case "past_due":
+      return {
+        textColor: "plc-text-orange-700",
+        bgColor: "plc-bg-orange-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null),
+        title: translations.pastDue
+      };
 
-  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
-  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
-  return [...donations, ...canceledDonations];
-}
+    case "open":
+      return {
+        textColor: "plc-text-yellow-700",
+        bgColor: "plc-bg-yellow-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null),
+        title: translations.open
+      };
 
-function formatStartDate(date) {
-  const startDate = new Date(date);
-  return new Intl.DateTimeFormat("en-CA").format(startDate);
+    case "draft":
+      return {
+        textColor: "plc-text-blue-700",
+        bgColor: "plc-bg-blue-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgEdit, null),
+        title: translations.draft
+      };
+
+    case "scheduled":
+      return {
+        textColor: "plc-text-blue-700",
+        bgColor: "plc-bg-blue-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgCalendar, null),
+        title: translations.scheduled
+      };
+
+    case "uncollectible":
+      return {
+        textColor: "plc-text-red-700",
+        bgColor: "plc-bg-red-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
+        title: translations.uncollectible
+      };
+
+    case "void":
+      return {
+        textColor: "plc-text-gray-700",
+        bgColor: "plc-bg-gray-100",
+        icon: /*#__PURE__*/React__default.createElement(SvgXIconSolid, null),
+        title: translations.void
+      };
+  }
 }
 
 const SUB_MENUS = {
@@ -22473,9 +22967,10 @@ class Dashboard extends Component {
     }) => {
       if (isGift) {
         this.props.setProductAndPlan(null, null, true);
+        return this.props.setView("plan-select");
       }
 
-      return this.props.setView("plan-select");
+      return this.props.setView("subscription-options");
     });
 
     _defineProperty$3(this, "displayAddressCreate", () => {
@@ -22880,6 +23375,12 @@ class Dashboard extends Component {
       icon: /*#__PURE__*/React__default.createElement(SvgShopping, null),
       title: this.locale("labels.orders.label"),
       content: /*#__PURE__*/React__default.createElement(OrdersMenu, null)
+    }), /*#__PURE__*/React__default.createElement(Accordion.item, {
+      show: hasInvoices(),
+      name: SUB_MENUS.INVOICES,
+      icon: /*#__PURE__*/React__default.createElement(SvgDocument, null),
+      title: this.locale("labels.invoices"),
+      content: /*#__PURE__*/React__default.createElement(InvoicesMenu, null)
     }), /*#__PURE__*/React__default.createElement(Accordion.item, {
       name: SUB_MENUS.SAVED_ITEMS,
       icon: /*#__PURE__*/React__default.createElement(SvgBookmark, null),
@@ -22895,6 +23396,13 @@ class Dashboard extends Component {
 
 }
 
+function hasInvoices() {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  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 : [];
+  return invoices.length > 0;
+}
+
 function hasDonationSubs() {
   var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 
@@ -22930,7 +23438,7 @@ const DashboardOpenButton = () => {
 };
 DashboardOpenButton.viewId = "dashboard-open";
 
-const initialState$2 = {
+const initialState$3 = {
   imageSrc: null,
   crop: {
     x: 0,
@@ -22944,10 +23452,10 @@ const initialState$2 = {
     content: ""
   }
 };
-const store$2 = /*#__PURE__*/createContext(initialState$2);
+const store$3 = /*#__PURE__*/createContext(initialState$3);
 const {
-  Provider: Provider$2
-} = store$2;
+  Provider: Provider$3
+} = store$3;
 
 const ProfilePicChangeContainer = ({
   style,
@@ -23081,21 +23589,21 @@ const ProfilePicChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$2);
+  }, initialState$3);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-profile-picture-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$2, {
+  }, /*#__PURE__*/React__default.createElement(Provider$3, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$2,
+    store: store$3,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$2
+    store: store$3
   })));
 };
 /**
@@ -23157,7 +23665,7 @@ const ProfilePicChangeButton = ({
       isSubmitting
     },
     dispatch
-  } = useContext(store$2);
+  } = useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -24525,7 +25033,7 @@ const ProfilePicChangeCropper = ({
       zoom
     },
     dispatch
-  } = useContext(store$2);
+  } = useContext(store$3);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `plc-relative plc-w-full plc-h-52 sm:plc-h-96 ${className}`
   }, /*#__PURE__*/React__default.createElement(Cropper, Object.assign({
@@ -24567,7 +25075,7 @@ const ProfilePicChangeZoom = ({
       zoom
     },
     dispatch
-  } = useContext(store$2);
+  } = useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -24590,18 +25098,18 @@ const ProfilePicChangeZoom = ({
   }, otherProps)));
 };
 
-var _path$1;
+var _path$2;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
 function SvgPhotograph(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-6 plc-w-6",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -24619,7 +25127,7 @@ const ProfilePicChangeSelectButton = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$2);
+  } = useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -24661,7 +25169,7 @@ const ProfilePicChangeRemoveButton = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$2);
+  } = useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -24684,7 +25192,7 @@ const ProfilePicChangeWrapper = () => {
     state: {
       imageSrc
     }
-  } = useContext(store$2);
+  } = useContext(store$3);
   const {
     t
   } = useTranslation("userEdit");
@@ -24746,17 +25254,17 @@ function ProfilePicChangeModal({
 }
 ProfilePicChangeModal.viewId = "profile-picture";
 
-const initialState$1 = {
+const initialState$2 = {
   isSubmitting: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$1 = /*#__PURE__*/createContext(initialState$1);
+const store$2 = /*#__PURE__*/createContext(initialState$2);
 const {
-  Provider: Provider$1
-} = store$1;
+  Provider: Provider$2
+} = store$2;
 
 const EmailVerifyContainer = ({
   style,
@@ -24819,21 +25327,21 @@ const EmailVerifyContainer = ({
       default:
         return state;
     }
-  }, initialState$1);
+  }, initialState$2);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-email-verify-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$1, {
+  }, /*#__PURE__*/React__default.createElement(Provider$2, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$1,
+    store: store$2,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$1
+    store: store$2
   })));
 };
 
@@ -24847,7 +25355,7 @@ const EmailVerifyResendButton = ({
     state: {
       isSubmitting
     }
-  } = useContext(store$1);
+  } = useContext(store$2);
   const {
     t
   } = useTranslation("verifyEmail");
@@ -24862,16 +25370,16 @@ const EmailVerifyResendButton = ({
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.resend"));
 };
 
-var _path, _path2;
+var _path$1, _path2;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
 function SvgEmailVerify(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     className: "plc-w-6 plc-h-6",
     viewBox: "0 0 700 700",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     d: "M583.01 231.93a15.008 15.008 0 00-.887-3.875c-.562-1.254-1.129-2.508-1.695-3.762a14.686 14.686 0 00-1.898-1.789c-.438-.437-.653-1.027-1.153-1.414l-56.266-44.164v-52.484a15.555 15.555 0 00-15.554-15.555H434.56l-74.945-58.895a15.547 15.547 0 00-19.227 0l-74.945 58.895h-70.996a15.555 15.555 0 00-15.555 15.555v52.484l-56.266 44.16c-.496.39-.715.996-1.152 1.43v.004a13.37 13.37 0 00-1.898 1.773c-.22.426-.414.86-.59 1.305a14.158 14.158 0 00-1.106 2.457 15.009 15.009 0 00-.886 3.875c0 .48-.329.918-.329 1.398l.004 264.45a15.555 15.555 0 0015.555 15.555h435.55a15.555 15.555 0 0015.555-15.555v-264.45c0-.48-.278-.918-.325-1.398zm-41.176.809l-20.723 14.809v-31.11zm-191.83-150.73l34.223 26.883h-68.445zm-140 57.992h280v124.45c.07 1.593.383 3.168.934 4.664l-140.93 100.66-140.46-100.33c.214-.77.37-1.555.464-2.348zm-31.109 107.55l-20.719-14.81 20.719-16.27zm-31.113 234.67V263.56l193.18 137.99a15.562 15.562 0 0018.078 0l193.18-137.99v218.66z"
   })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
     d: "M324.33 291.81a15.56 15.56 0 0020.582-.297l85.555-77.777a15.56 15.56 0 00-20.938-23.023l-75.398 68.539-44.023-37.723a15.54 15.54 0 00-11.46-4.106 15.553 15.553 0 00-8.758 27.718z"
@@ -24975,11 +25483,11 @@ const invoicePaymentSubmitButton = props => {
   return /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, props);
 };
 
-const initialState = {};
-const store = /*#__PURE__*/createContext(initialState);
+const initialState$1 = {};
+const store$1 = /*#__PURE__*/createContext(initialState$1);
 const {
-  Provider
-} = store;
+  Provider: Provider$1
+} = store$1;
 
 const InvoiceDetailsContainer = ({
   style,
@@ -25000,21 +25508,21 @@ const InvoiceDetailsContainer = ({
       default:
         return state;
     }
-  }, initialState);
+  }, initialState$1);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-invoice-details-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider, {
+  }, /*#__PURE__*/React__default.createElement(Provider$1, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store,
+    store: store$1,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store
+    store: store$1
   })));
 };
 
@@ -25046,7 +25554,7 @@ const InvoiceDetailsPayButton = ({
 }) => {
   const {
     dispatch
-  } = useContext(store);
+  } = useContext(store$1);
   const {
     t
   } = useTranslation("invoiceDetails");
@@ -25151,4 +25659,230 @@ const InvoiceDetailsModal = ({
 };
 InvoiceDetailsModal.viewId = "invoice-details";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+const initialState = {
+  selectedOption: ""
+};
+const store = /*#__PURE__*/createContext(initialState);
+const {
+  Provider
+} = store;
+
+const SubscriptionOptionsContainer = ({
+  style,
+  className = "",
+  onRenewSubSuccess = () => {},
+  onNewSubSuccess = () => {},
+  children,
+  ...props
+}) => {
+  const submit = ({
+    selectedOption
+  }, dispatch) => {
+    if (selectedOption === "renew") return onRenewSubSuccess();
+    if (selectedOption === "new") return onNewSubSuccess();
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SWITCH_TO_NEW:
+        return lib_7({ ...state,
+          selectedOption: "new"
+        });
+
+      case SWITCH_TO_RENEW:
+        return lib_7({ ...state,
+          selectedOption: "renew"
+        });
+
+      case HANDLE_SUBMIT:
+        return lib_4((state, dispatch) => submit(state));
+
+      default:
+        return state;
+    }
+  }, initialState);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-subscription-options-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(children, {
+    store
+  })));
+};
+
+var _path;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgPlusCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-6 plc-w-6",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+  })));
+}
+
+const SubscriptionOptionsNewButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch,
+    state: {
+      selectedOption
+    }
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("subscriptionOptions");
+  const isChecked = selectedOption === "new";
+  return /*#__PURE__*/React__default.createElement(Radio, Object.assign({
+    className: "plc-hidden pelcro-new-sub-option",
+    labelClassName: `plc-flex plc-flex-col plc-items-center plc-justify-center plc-text-lg plc-font-semibold plc-ml-0 plc-w-52 plc-h-52 plc-text-black plc-p-2 hover:plc-bg-gray-200 pelcro-new-sub-option-label plc-border-2 plc-text-center ${isChecked ? "plc-border-black" : "plc-border-gray-300"}`,
+    id: "pelcro-new-sub-option",
+    name: "option",
+    onChange: () => {
+      dispatch({
+        type: SWITCH_TO_NEW
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    checked: isChecked
+  }, otherProps), name !== null && name !== void 0 ? name : t("addNew"), /*#__PURE__*/React__default.createElement(SvgPlusCircle, {
+    className: "plc-w-full plc-h-full plc-mr-0"
+  }));
+};
+
+const SubscriptionOptionsRenewButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch,
+    state: {
+      selectedOption
+    }
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("subscriptionOptions");
+  const isChecked = selectedOption === "renew";
+  return /*#__PURE__*/React__default.createElement(Radio, Object.assign({
+    className: "plc-hidden pelcro-renew-sub-option",
+    labelClassName: `plc-flex plc-flex-col plc-items-center plc-justify-center plc-text-lg plc-font-semibold plc-ml-0 plc-w-52 plc-h-52 plc-text-black plc-p-2 hover:plc-bg-gray-200  pelcro-renew-sub-option-label plc-border-2 plc-text-center ${isChecked ? "plc-border-black" : "plc-border-gray-300"}`,
+    id: "pelcro-renew-sub-option",
+    name: "option",
+    onChange: () => {
+      dispatch({
+        type: SWITCH_TO_RENEW
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    checked: isChecked
+  }, otherProps), name !== null && name !== void 0 ? name : t("renew"), /*#__PURE__*/React__default.createElement(SvgRefresh, {
+    className: "plc-w-full plc-h-full plc-mr-0"
+  }));
+};
+
+const SubscriptionOptionsSubmit = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch,
+    state: {
+      selectedOption
+    }
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("subscriptionOptions");
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: !selectedOption
+  }, otherProps), name !== null && name !== void 0 ? name : t("next"));
+};
+
+const SubscriptionOptionsView = props => {
+  const {
+    t
+  } = useTranslation("subscriptionOptions");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-subscription-options-view"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("title")), /*#__PURE__*/React__default.createElement("p", null, t("subtitle"))), /*#__PURE__*/React__default.createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default.createElement(SubscriptionOptionsContainer, props, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-justify-between plc-items-center"
+  }, /*#__PURE__*/React__default.createElement(SubscriptionOptionsRenewButton, null), /*#__PURE__*/React__default.createElement(SubscriptionOptionsNewButton, null)), /*#__PURE__*/React__default.createElement(SubscriptionOptionsSubmit, {
+    role: "submit",
+    className: "plc-mt-4 plc-w-full",
+    name: t("next"),
+    id: "pelcro-submit"
+  }))));
+};
+
+const SubscriptionOptionsModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchView,
+    setProductsList
+  } = usePelcro();
+
+  const onRenewSubSuccess = () => {
+    var _otherProps$onRenewSu;
+
+    (_otherProps$onRenewSu = otherProps.onRenewSubSuccess) === null || _otherProps$onRenewSu === void 0 ? void 0 : _otherProps$onRenewSu.call(otherProps);
+    setProductsList(getRenewableProducts());
+    switchView("_plan-select-renew");
+  };
+
+  const onNewSubSuccess = () => {
+    var _otherProps$onNewSubS;
+
+    (_otherProps$onNewSubS = otherProps.onNewSubSuccess) === null || _otherProps$onNewSubS === void 0 ? void 0 : _otherProps$onNewSubS.call(otherProps);
+    switchView("plan-select");
+  };
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-subscription-options-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionOptionsView, Object.assign({}, otherProps, {
+    onNewSubSuccess: onNewSubSuccess,
+    onRenewSubSuccess: onRenewSubSuccess
+  }))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
+};
+SubscriptionOptionsModal.viewId = "subscription-options";
+
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionOptionsContainer, SubscriptionOptionsModal, SubscriptionOptionsNewButton, SubscriptionOptionsRenewButton, SubscriptionOptionsSubmit, SubscriptionOptionsView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };