@pelcro/react-pelcro-js 3.32.0 → 3.33.0

package/dist/index.cjs.js

@@ -3354,9 +3354,23 @@ var select$6 = {
 		changePaymentMethod: "Change"
 	}
 };
+var create$5 = {
+	title: "Add a new payment method",
+	subtitle: "Enter the fields below to add your credit card information"
+};
 var paymentMethod_en = {
 	update: update$3,
-	select: select$6
+	select: select$6,
+	"delete": {
+	title: "Delete payment method",
+	subtitle: "This payment method could be associated with active subscriptions or serve as the default payment method. Please choose from the available options below for replacement.",
+	options: {
+		select: "Select an existing payment method",
+		add: "Add a new payment method"
+	},
+	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced"
+},
+	create: create$5
 };
 
 var title$z = "Enter your email to subscribe to our newsletter";
@@ -3458,7 +3472,8 @@ var labels$11 = {
 	firstName: "First name",
 	lastName: "Last name",
 	phone: "Phone",
-	freeItems: "Free Items"
+	freeItems: "Free Items",
+	isDefault: "Set as default"
 };
 var checkoutForm_en = {
 	messages: messages$14,
@@ -3844,6 +3859,7 @@ var messages$X = {
 	cancel: "Cancel your subscription online at anytime.",
 	giftSent: "Subscription gift has been sent to",
 	successfully: "successfully",
+	sourceCreated: "Payment information has been added",
 	sourceUpdated: "Your payment information has been updated",
 	cardAuthFailed: "We are unable to authenticate your payment method. Please choose a different payment method and try again.",
 	cardAuthNotSupported: "Updating your payment method to one that requires authentication is currently not possible. Please use a different payment method or contact customer service.",
@@ -3921,6 +3937,8 @@ var labels$V = {
 	renewsOn: "Renews",
 	canceledOn: "Canceled on",
 	recipient: "Recipient",
+	addPaymentSource: "Add payment method",
+	setDefault: "Set as default",
 	addAddress: "Add address",
 	editAddress: "Edit address",
 	addSubscription: "New Subscription",
@@ -3963,6 +3981,13 @@ var messages$W = {
 		loading: "Unsuspending your subscription",
 		success: "Subscription is successfully unsuspended",
 		error: "Error while unsuspending your subscription"
+	},
+	paymentMethodDeletion: {
+		isSureToDelete: "Are you sure you want to delete this payment method?",
+		loading: "Deleting your payment method",
+		success: "Payment method is successfully deleted",
+		error: "Error while deleting your payment method",
+		nonDeletable: "This payment method can't be deleted"
 	}
 };
 var dashboard_en = {
@@ -4225,9 +4250,23 @@ var select$4 = {
 		changePaymentMethod: "Modifier"
 	}
 };
+var create$4 = {
+	title: "Ajouter un nouveau mode de paiement",
+	subtitle: "Saisissez les champs ci-dessous pour ajouter les informations relatives à votre carte de crédit"
+};
 var paymentMethod_fr = {
 	update: update$2,
-	select: select$4
+	select: select$4,
+	"delete": {
+	title: "Supprimer un mode de paiement",
+	subtitle: "Ce mode de paiement peut être associé à des abonnements actifs ou servir de mode de paiement par défaut. Veuillez choisir parmi les options disponibles ci-dessous pour le remplacement.",
+	options: {
+		select: "Sélectionner un mode de paiement existant",
+		add: "Ajouter un nouveau mode de paiement"
+	},
+	paymentMethodReplaced: "Méthode de paiement supprimée et remplacée avec succès"
+},
+	create: create$4
 };
 
 var title$q = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
@@ -4329,7 +4368,8 @@ var labels$M = {
 	firstName: "Prénom",
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
-	freeItems: "Articles gratuits"
+	freeItems: "Articles gratuits",
+	isDefault: "Défini comme valeur par défaut"
 };
 var checkoutForm_fr = {
 	messages: messages$O,
@@ -4716,6 +4756,7 @@ var messages$F = {
 	cancel: "Annuler votre abonnement en ligne à tout moment.",
 	giftSent: "Le cadeau d’abonnement a été envoyé à",
 	successfully: "avec succès.",
+	sourceCreated: "Les informations de paiement ont été ajoutées",
 	sourceUpdated: "Vos informations de paiement ont été mises à jour",
 	cardAuthFailed: "Nous ne parvenons pas à authentifier votre mode de paiement. Veuillez choisir un autre mode de paiement et essayer à nouveau.",
 	cardAuthNotSupported: "Votre carte ne peut être mise à jour puisqu'elle nécessite une authentification. Veuillez utiliser un autre mode de paiement ou contacter le service client.",
@@ -5096,9 +5137,23 @@ var select$2 = {
 		changePaymentMethod: "변경"
 	}
 };
+var create$3 = {
+	title: "새 결제 방법 추가",
+	subtitle: "신용카드 정보를 추가하려면 아래 입력란을 입력하세요."
+};
 var paymentMethod_ko = {
 	update: update$1,
-	select: select$2
+	select: select$2,
+	"delete": {
+	title: "결제 방법 삭제",
+	subtitle: "이 결제 방법은 활성 구독과 연결되거나 기본 결제 방법으로 사용될 수 있습니다. 아래에서 사용 가능한 옵션 중에서 선택하여 대체하세요.",
+	options: {
+		select: "기존 결제 방법 선택",
+		add: "새 결제 방법 추가"
+	},
+	paymentMethodReplaced: "결제 방법 삭제 및 교체 성공"
+},
+	create: create$3
 };
 
 var title$h = "Frieze 뉴스레터를 구독하려면 이메일을 입력하세요.";
@@ -5200,7 +5255,8 @@ var labels$v = {
 	firstName: "이름",
 	lastName: "성",
 	phone: "핸드폰",
-	freeItems: "무료 아이템"
+	freeItems: "무료 아이템",
+	isDefault: "기본값으로 설정"
 };
 var checkoutForm_ko = {
 	messages: messages$w,
@@ -5586,6 +5642,7 @@ var messages$n = {
 	cancel: "유료 멤버십은 언제든 온라인으로 취소가 가능합니다.",
 	giftSent: "유료 멤버십 선물이 ",
 	successfully: "님께 성공적으로 전송되었습니다.",
+	sourceCreated: "결제 정보가 추가되었습니다.",
 	sourceUpdated: "귀하의 결제 정보가 업데이트되었습니다.",
 	cardAuthFailed: "해당 결제 수단은 인증할 수 없습니다. 다른 결제 수단을 선택하여 다시 시도해보시기 바랍니다.",
 	cardAuthNotSupported: "인증이 요구되는 결제 수단으로의 업데이트는 현재 지원되지 않습니다. 다른 결제 수단을 이용하거나 고객센터로 문의하시기 바랍니다.",
@@ -6071,9 +6128,23 @@ var select = {
 		changePaymentMethod: "Cambiar"
 	}
 };
+var create$2 = {
+	title: "Añadir un nuevo método de pago",
+	subtitle: "Introduzca los campos siguientes para añadir los datos de su tarjeta de crédito"
+};
 var paymentMethod_es = {
 	update: update,
-	select: select
+	select: select,
+	"delete": {
+	title: "Eliminar método de pago",
+	subtitle: "Este método de pago podría estar asociado a suscripciones activas o servir como método de pago predeterminado. Elija entre las opciones disponibles a continuación para sustituirlo.",
+	options: {
+		select: "Seleccione un método de pago existente",
+		add: "Añadir un nuevo método de pago"
+	},
+	paymentMethodReplaced: "Método de pago eliminado y sustituido correctamente"
+},
+	create: create$2
 };
 
 var title$8 = "Ingresa tu correo para suscribirte a nuestro boletín";
@@ -6175,7 +6246,8 @@ var labels$e = {
 	firstName: "Nombre",
 	lastName: "Apellido",
 	phone: "Teléfono",
-	freeItems: "Artículos gratis"
+	freeItems: "Artículos gratis",
+	isDefault: "Fijar por defecto"
 };
 var checkoutForm_es = {
 	messages: messages$e,
@@ -6558,6 +6630,7 @@ var messages$5 = {
 	cancel: "Cancela tu suscripción en línea en cualquier momento.",
 	giftSent: "La suscripción de regalo se ha enviado a",
 	successfully: "exitosamente",
+	sourceCreated: "Se ha añadido la información de pago",
 	sourceUpdated: "Tu información de pago se ha actualizado",
 	cardAuthFailed: "No pudimos autenticar tu método de pago. Por favor, elige un método de pago diferente e intenta de nuevo.",
 	cardAuthNotSupported: "Actualmente no es posible actualizar tu método de pago a uno que requiere autenticación. Por favor, utiliza un método de pago diferente o contacta a atención al cliente.",
@@ -8756,7 +8829,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$n;
+      } = initialState$o;
       this.set(otherStateFields);
     });
     _defineProperty$3(this, "switchView", view => {
@@ -9061,6 +9134,38 @@ class PelcroActions {
       }
       switchToAddressView();
     });
+    _defineProperty$3(this, "setPaymentMethodToEdit", id => {
+      window.Pelcro.paymentMethods.getPaymentMethod({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: id
+      }, (err, res) => {
+        if (err) {
+          return console.error("invalid payment method id");
+        }
+        if (res) {
+          const paymentMethodToEdit = res.data;
+          this.set({
+            paymentMethodToEdit
+          });
+        }
+      });
+    });
+    _defineProperty$3(this, "setPaymentMethodToDelete", id => {
+      window.Pelcro.paymentMethods.getPaymentMethod({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: id
+      }, (err, res) => {
+        if (err) {
+          return console.error("invalid payment method id");
+        }
+        if (res) {
+          const paymentMethodToDelete = res.data;
+          this.set({
+            paymentMethodToDelete
+          });
+        }
+      });
+    });
     this.set = storeSetter;
     this.get = storeGetter;
   }
@@ -9105,7 +9210,7 @@ class PelcroCallbacks {
   }
 }
 
-const initialState$n = {
+const initialState$o = {
   // View
   view: null,
   // Plans
@@ -9128,6 +9233,9 @@ const initialState$n = {
   couponCode: null,
   // memberships
   selectedMembership: null,
+  // paymentMethods
+  paymentMethodToDelete: null,
+  paymentMethodToEdit: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -9140,7 +9248,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$n,
+    ...initialState$o,
     // State actions
     ...actions,
     // Callbacks
@@ -9910,8 +10018,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"object"==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-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n=/\n+/g,o=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o(c,n):n+"{"+o(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o(c,t?t.replace(/([^,])+/g,e=>n.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o.p?o.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},i$1=(e,t,r,i,p)=>{let u=s(e),d=c[u]||(c[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n," ").trim();return o[0]})(e);c[d]=o(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}let f=r&&c.g?c.g:null;return r&&(c.g=c[d]),((e,t,r,l)=>{l?t.data=t.data.replace(l,e):-1===t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c[d],t,i,f),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o(e,""):!1===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i$1(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}let d,f,g;u.bind({g:1});let h=u.bind({k:1});function m(e,t,r,l){o.p=t,d=e,f=r,g=l;}function j(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=u.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=e;return e[0]&&(i=c.as||e,delete c.as),g&&i[0]&&g(c),d(i,c)}return t?t(a):a}}
 
-function _extends$B() {
-  _extends$B = Object.assign || function (target) {
+function _extends$C() {
+  _extends$C = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -9925,7 +10033,7 @@ function _extends$B() {
     return target;
   };
 
-  return _extends$B.apply(this, arguments);
+  return _extends$C.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -10015,7 +10123,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -10025,9 +10133,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$B({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$C({}, t, action.toast) : t;
         })
       });
 
@@ -10054,9 +10162,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$B({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$C({}, t, {
             visible: false
           }) : t;
         })
@@ -10064,28 +10172,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$B({}, state, {
+        return _extends$C({}, state, {
           toasts: []
         });
       }
 
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$B({}, state, {
+      return _extends$C({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$B({}, t, {
+          return _extends$C({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -10132,12 +10240,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$B({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$C({}, 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$B({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$C({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$B({}, state, {
+  return _extends$C({}, state, {
     toasts: mergedToasts
   });
 };
@@ -10147,7 +10255,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$B({
+  return _extends$C({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -10197,14 +10305,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$B({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$C({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$B({
+    toast.success(resolveValue(msgs.success, p), _extends$C({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$B({
+    toast.error(resolveValue(msgs.error, e), _extends$C({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -10543,7 +10651,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$B({}, animationStyle, style, toast.style)
+    style: _extends$C({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -10573,7 +10681,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$B({
+  return _extends$C({
     left: 0,
     right: 0,
     display: 'flex',
@@ -10600,7 +10708,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$B({
+    style: _extends$C({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -10635,72 +10743,72 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$y;
-function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : 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); }
+var _path$z;
+function _extends$B() { _extends$B = Object.assign ? Object.assign.bind() : 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 SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$B({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$z || (_path$z = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$x;
-function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : 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); }
+var _path$y;
+function _extends$A() { _extends$A = Object.assign ? Object.assign.bind() : 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 SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$A({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$y || (_path$y = /*#__PURE__*/React__namespace.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$w;
-function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : 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); }
+var _path$x;
+function _extends$z() { _extends$z = Object.assign ? Object.assign.bind() : 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 SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$z({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$x || (_path$x = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$v;
-function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : 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); }
+var _path$w;
+function _extends$y() { _extends$y = Object.assign ? Object.assign.bind() : 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 SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$u, _path2$4;
-function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : 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); }
+var _path$v, _path2$4;
+function _extends$x() { _extends$x = Object.assign ? Object.assign.bind() : 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 SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -11509,6 +11617,17 @@ function getSiteCardProcessor() {
   }
   return "stripe";
 }
+function getFourDigitYear(lastTwoDigits) {
+  // Get the current year
+  const currentYear = new Date().getFullYear();
+
+  // Extract the current century (first two digits)
+  const currentCentury = Math.floor(currentYear / 100);
+
+  // Combine the century and the provided last two digits
+  const fourDigitYear = currentCentury * 100 + lastTwoDigits;
+  return fourDigitYear;
+}
 
 /**
  * @typedef {Object} OptionsType
@@ -12422,6 +12541,7 @@ const SET_CONFIRM_PASSWORD = "SET_CONFIRM_PASSWORD";
 const CONFIRM_PASSWORD_USED = "CONFIRM_PASSWORD_USED";
 const DISABLE_SUBMIT = "DISABLE_SUBMIT";
 const LOADING = "LOADING";
+const SKELETON_LOADER = "SKELETON_LOADER";
 const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
 const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
@@ -12489,6 +12609,9 @@ const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
 const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
 const SET_CANCEL_SUBSCRIPTION_OPTION = "SET_CANCEL_SUBSCRIPTION_OPTION";
 const HANDLE_CHECKBOX_CHANGE = "HANDLE_CHECKBOX_CHANGE";
+const SET_IS_DEFAULT_PAYMENT_METHOD = "SET_IS_DEFAULT_PAYMENT_METHOD";
+const SET_DELETE_PAYMENT_METHOD_OPTION = "SET_DELETE_PAYMENT_METHOD_OPTION";
+const SET_PAYMENT_METHODS = "SET_PAYMENT_METHODS";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
 const SET_EMAILS_ERROR = "SET_EMAILS_ERROR";
@@ -12500,7 +12623,7 @@ const UPDATE_MEMBERS = "UPDATE_MEMBERS";
 const UPDATE_REMOVE_MEMBER_ID = "UPDATE_REMOVE_MEMBER_ID";
 const UPDATE_CYBERSOURCE_SESSION_ID = "UPDATE_CYBERSOURCE_SESSION_ID";
 
-const initialState$m = {
+const initialState$n = {
   email: "",
   username: "",
   password: "",
@@ -12513,10 +12636,10 @@ const initialState$m = {
     content: ""
   }
 };
-const store$m = /*#__PURE__*/React.createContext(initialState$m);
+const store$n = /*#__PURE__*/React.createContext(initialState$n);
 const {
-  Provider: Provider$m
-} = store$m;
+  Provider: Provider$n
+} = store$n;
 const LoginContainer = _ref => {
   var _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
@@ -12653,7 +12776,7 @@ const LoginContainer = _ref => {
           alert: action.payload
         });
       case RESET_LOGIN_FORM:
-        return initialState$m;
+        return initialState$n;
       case DISABLE_LOGIN_BUTTON:
         return lib_7({
           ...state,
@@ -12669,13 +12792,13 @@ const LoginContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$m);
+  }, initialState$n);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$m, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$n, {
     value: {
       state,
       dispatch
@@ -12683,12 +12806,12 @@ const LoginContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$m,
+        store: store$n,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$m
+    store: store$n
   })));
 };
 
@@ -12997,7 +13120,7 @@ const LoginButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     t
   } = useTranslation("login");
@@ -13017,14 +13140,14 @@ const LoginButton = _ref => {
   }, otherProps), name !== null && name !== void 0 ? name : t("labels.login"));
 };
 
-var _path$t, _path2$3;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : 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); }
+var _path$u, _path2$3;
+function _extends$w() { _extends$w = Object.assign ? Object.assign.bind() : 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 SvgEmailVerify(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     className: "plc-w-6 plc-h-6",
     viewBox: "0 0 700 700",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M583.01 231.93a15.008 15.008 0 00-.887-3.875c-.562-1.254-1.129-2.508-1.695-3.762a14.686 14.686 0 00-1.898-1.789c-.438-.437-.653-1.027-1.153-1.414l-56.266-44.164v-52.484a15.555 15.555 0 00-15.554-15.555H434.56l-74.945-58.895a15.547 15.547 0 00-19.227 0l-74.945 58.895h-70.996a15.555 15.555 0 00-15.555 15.555v52.484l-56.266 44.16c-.496.39-.715.996-1.152 1.43v.004a13.37 13.37 0 00-1.898 1.773c-.22.426-.414.86-.59 1.305a14.158 14.158 0 00-1.106 2.457 15.009 15.009 0 00-.886 3.875c0 .48-.329.918-.329 1.398l.004 264.45a15.555 15.555 0 0015.555 15.555h435.55a15.555 15.555 0 0015.555-15.555v-264.45c0-.48-.278-.918-.325-1.398zm-41.176.809l-20.723 14.809v-31.11zm-191.83-150.73l34.223 26.883h-68.445zm-140 57.992h280v124.45c.07 1.593.383 3.168.934 4.664l-140.93 100.66-140.46-100.33c.214-.77.37-1.555.464-2.348zm-31.109 107.55l-20.719-14.81 20.719-16.27zm-31.113 234.67V263.56l193.18 137.99a15.562 15.562 0 0018.078 0l193.18-137.99v218.66z"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M324.33 291.81a15.56 15.56 0 0020.582-.297l85.555-77.777a15.56 15.56 0 00-20.938-23.023l-75.398 68.539-44.023-37.723a15.54 15.54 0 00-11.46-4.106 15.553 15.553 0 00-8.758 27.718z"
@@ -13054,25 +13177,25 @@ const LoginRequestLoginToken = _ref => {
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginUsername = props => /*#__PURE__*/React__default['default'].createElement(UserNameInput, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$m
+  store: store$n
 }, props));
 
-var _path$s;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : 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); }
+var _path$t;
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : 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 SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -13138,7 +13261,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$l = {
+const initialState$m = {
   email: "",
   password: "",
   firstName: "",
@@ -13159,10 +13282,10 @@ const initialState$l = {
     content: ""
   }
 };
-const store$l = /*#__PURE__*/React.createContext(initialState$l);
+const store$m = /*#__PURE__*/React.createContext(initialState$m);
 const {
-  Provider: Provider$l
-} = store$l;
+  Provider: Provider$m
+} = store$m;
 const RegisterContainer = _ref => {
   let {
     style,
@@ -13374,7 +13497,7 @@ const RegisterContainer = _ref => {
           alert: action.payload
         });
       case RESET_LOGIN_FORM:
-        return initialState$l;
+        return initialState$m;
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({
           ...state,
@@ -13390,13 +13513,13 @@ const RegisterContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$l);
+  }, initialState$m);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$l, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$m, {
     value: {
       state,
       dispatch
@@ -13404,12 +13527,12 @@ const RegisterContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$l,
+        store: store$m,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$l
+    store: store$m
   })));
 };
 
@@ -13423,13 +13546,13 @@ function hasSecurityTokenEnabled$1() {
   return hasSecuritySdkLoaded;
 }
 
-var _path$r;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : 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); }
+var _path$s;
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : 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 SvgFacebookLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -13446,10 +13569,10 @@ const FacebookLoginButton = _ref => {
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
       type: HANDLE_SOCIAL_LOGIN,
@@ -13499,13 +13622,13 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$q, _path2$2, _path3$1, _path4;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : 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); }
+var _path$r, _path2$2, _path3$1, _path4;
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : 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 SvgGoogleLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -13609,10 +13732,10 @@ const GoogleLoginButton = _ref => {
   const googleClientId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   React.useEffect(() => {
     gapi.load("client:auth2", () => {
       gapi.auth2.init({
@@ -13663,13 +13786,13 @@ const GoogleLoginButton = _ref => {
   }) : null;
 };
 
-var _path$p;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : 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); }
+var _path$q;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : 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 SvgAuth0Logo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M220.412 0h-92.415l28.562 89.006h92.416l-74.77 53.077 28.57 89.511c48.128-35.06 63.854-88.12 46.208-142.588L220.413 0zM7.018 89.006h92.416L127.997 0H35.589L7.019 89.006c-17.655 54.468-1.92 107.529 46.207 142.588l28.563-89.51-74.77-53.078zm46.208 142.588l74.77 52.97 74.77-52.97-74.77-53.847-74.77 53.847z"
   })));
 }
@@ -13707,10 +13830,10 @@ const Auth0LoginButton = _ref => {
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$m);
+  } = React.useContext(store$n);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
     if (!auth0Loaded) {
@@ -13853,13 +13976,13 @@ function LoginView(props) {
   }))));
 }
 
-var _path$o, _path2$1, _path3;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : 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); }
+var _path$p, _path2$1, _path3;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : 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 SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.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"
@@ -14031,11 +14154,11 @@ function LoginModal(_ref) {
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 const RegisterButton = _ref => {
@@ -14055,7 +14178,7 @@ const RegisterButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$l);
+  } = React.useContext(store$m);
   const {
     t
   } = useTranslation("register");
@@ -14153,7 +14276,7 @@ function FirstName(_ref) {
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function LastName(_ref) {
@@ -14231,7 +14354,7 @@ function LastName(_ref) {
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$l
+  store: store$m
 }, props));
 
 function Phone(_ref) {
@@ -14512,7 +14635,7 @@ function TextInput(_ref) {
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$l
+    store: store$m
   }));
 };
 
@@ -17254,7 +17377,7 @@ class CybersourceGateway {
  */
 
 /** @type {PaymentStateType} */
-const initialState$k = {
+const initialState$l = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -17277,15 +17400,16 @@ const initialState$k = {
   month: "",
   year: "",
   cyberSourceSessionId: null,
+  isDefault: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$k = /*#__PURE__*/React.createContext(initialState$k);
+const store$l = /*#__PURE__*/React.createContext(initialState$l);
 const {
-  Provider: Provider$k
-} = store$k;
+  Provider: Provider$l
+} = store$l;
 const PaymentMethodContainerWithoutStripe = _ref => {
   var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
   let {
@@ -17309,7 +17433,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     set,
     order,
     selectedPaymentMethodId,
-    couponCode
+    couponCode,
+    paymentMethodToEdit,
+    paymentMethodToDelete
   } = usePelcro();
   const {
     whenUserReady
@@ -17408,7 +17534,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
       createNewCybersourceCard();
     }
     function createNewCybersourceCard() {
@@ -17730,7 +17856,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource" || type === "updatePaymentSource") {
       createNewTapCard();
     }
     function createNewTapCard() {
@@ -17941,14 +18067,133 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
-    } else if (type === "updatePaymentSource") {
+    } else if (type === "createPaymentSource") {
       createNewVantivCard();
+    } else if (type === "updatePaymentSource") {
+      updateVantivCard();
+    } else if (type === "deletePaymentSource") {
+      replaceVantivCard();
     }
     function createNewVantivCard() {
-      window.Pelcro.source.create({
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "vantiv"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceCreated")
+          }
+        });
+        onSuccess(res);
+      });
+    }
+    function replaceVantivCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToDelete;
+      window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: paymentRequest,
         gateway: "vantiv"
+      }, (err, res) => {
+        if (err) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        if (res) {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              auth_token: window.Pelcro.user.read().auth_token,
+              payment_method_id: paymentMethodId
+            }, (err, res) => {
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              if (err) {
+                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+              onSuccess(res);
+            });
+          }, 2000);
+        }
+      });
+    }
+    function updateVantivCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToEdit;
+      const {
+        paypageRegistrationId,
+        bin,
+        type,
+        firstSix,
+        lastFour,
+        expMonth,
+        expYear
+      } = paymentRequest;
+      const {
+        isDefault
+      } = state;
+      const fourDigitExpYear = getFourDigitYear(Number(expYear)).toString();
+      window.Pelcro.paymentMethods.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId,
+        gateway: "vantiv",
+        paypageRegistrationId: paypageRegistrationId,
+        bin: bin,
+        type: type,
+        firstSix: firstSix,
+        lastFour: lastFour,
+        exp_month: expMonth,
+        exp_year: fourDigitExpYear,
+        is_default: isDefault
       }, (err, res) => {
         dispatch({
           type: DISABLE_SUBMIT,
@@ -18755,7 +19000,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       confirmStripeCardPayment(res, err);
     });
   };
-  const updatePaymentSource = (state, dispatch) => {
+  const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
     }).then(_ref8 => {
@@ -18776,7 +19021,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      window.Pelcro.source.create({
+      window.Pelcro.paymentMethods.create({
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
@@ -18802,30 +19047,144 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           type: SHOW_ALERT,
           payload: {
             type: "success",
-            content: t("messages.sourceUpdated")
+            content: t("messages.sourceCreated")
           }
         });
         onSuccess(res);
       });
     });
   };
-  const updatePaymentRequest = state => {
-    var _state$paymentRequest;
-    state === null || state === void 0 ? void 0 : (_state$paymentRequest = state.paymentRequest) === null || _state$paymentRequest === void 0 ? void 0 : _state$paymentRequest.update({
-      total: {
-        label: plan.nickname || plan.description,
-        amount: state.updatedPrice
-      }
-    });
-  };
-  const submitPayment = (state, dispatch) => {
-    if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
-      const isQuickPurchase = !Array.isArray(order);
-      const mappedOrderItems = isQuickPurchase ? [{
-        sku_id: order.id,
-        quantity: order.quantity
-      }] : order.map(item => ({
-        sku_id: item.id,
+  const updatePaymentSource = (state, dispatch) => {
+    const {
+      isDefault,
+      month,
+      year
+    } = state;
+    const {
+      id: paymentMethodId
+    } = paymentMethodToEdit;
+    window.Pelcro.paymentMethods.update({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId,
+      gateway: "stripe",
+      exp_month: month,
+      exp_year: year,
+      is_default: isDefault
+    }, (err, res) => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      if (err) {
+        onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      dispatch({
+        type: SHOW_ALERT,
+        payload: {
+          type: "success",
+          content: t("messages.sourceUpdated")
+        }
+      });
+      onSuccess(res);
+    });
+  };
+  const replacePaymentSource = (state, dispatch) => {
+    const {
+      id: paymentMethodId
+    } = paymentMethodToDelete;
+    return stripe.createSource({
+      type: "card"
+    }).then(_ref9 => {
+      var _source$card3;
+      let {
+        source,
+        error
+      } = _ref9;
+      if (error) {
+        return handlePaymentError(error);
+      }
+
+      // We don't support source creation for 3D secure yet
+      if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required") {
+        return handlePaymentError({
+          error: {
+            message: t("messages.cardAuthNotSupported")
+          }
+        });
+      }
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: source.id
+      }, (err, res) => {
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        if (res) {
+          setTimeout(() => {
+            window.Pelcro.paymentMethods.deletePaymentMethod({
+              auth_token: window.Pelcro.user.read().auth_token,
+              payment_method_id: paymentMethodId
+            }, (err, res) => {
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              if (err) {
+                onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: getErrorMessages(err)
+                  }
+                });
+              }
+              onSuccess(res);
+            });
+          }, 2000);
+        }
+      });
+    });
+  };
+  const updatePaymentRequest = state => {
+    var _state$paymentRequest;
+    state === null || state === void 0 ? void 0 : (_state$paymentRequest = state.paymentRequest) === null || _state$paymentRequest === void 0 ? void 0 : _state$paymentRequest.update({
+      total: {
+        label: plan.nickname || plan.description,
+        amount: state.updatedPrice
+      }
+    });
+  };
+  const submitPayment = (state, dispatch) => {
+    if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
+      const isQuickPurchase = !Array.isArray(order);
+      const mappedOrderItems = isQuickPurchase ? [{
+        sku_id: order.id,
+        quantity: order.quantity
+      }] : order.map(item => ({
+        sku_id: item.id,
         quantity: item.quantity
       }));
       window.Pelcro.ecommerce.order.create({
@@ -18844,12 +19203,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
-      var _ref10, _ref11, _state$updatedPrice2;
+    }).then(_ref10 => {
+      var _ref11, _ref12, _state$updatedPrice2;
       let {
         source,
         error
-      } = _ref9;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -18868,7 +19227,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref10 = (_ref11 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref11 !== void 0 ? _ref11 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref10 !== void 0 ? _ref10 : getOrderItemsTotal();
+      (_ref11 = (_ref12 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref12 !== void 0 ? _ref12 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref11 !== void 0 ? _ref11 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -19094,9 +19453,15 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               isExistingSource: true
             });
           }
+          if (type === "createPaymentSource") {
+            return createPaymentSource(state, dispatch);
+          }
           if (type === "updatePaymentSource") {
             return updatePaymentSource(state, dispatch);
           }
+          if (type === "deletePaymentSource") {
+            return replacePaymentSource(state, dispatch);
+          }
           submitPayment(state);
         });
       case HANDLE_PAYPAL_SUBSCRIPTION:
@@ -19214,16 +19579,26 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           cyberSourceSessionId: action.payload
         });
+      case HANDLE_CHECKBOX_CHANGE:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
+      case SET_IS_DEFAULT_PAYMENT_METHOD:
+        return lib_7({
+          ...state,
+          ...action.payload
+        });
       default:
         return state;
     }
-  }, initialState$k);
+  }, initialState$l);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$k, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$l, {
     value: {
       state,
       dispatch
@@ -19231,12 +19606,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$k,
+        store: store$l,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$k
+    store: store$l
   })));
 };
 const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
@@ -19261,11 +19636,11 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$k
+      store: store$l
     }, props))));
   } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
-      store: store$k
+      store: store$l
     }, props));
   }
   return null;
@@ -19425,7 +19800,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
     paymentRequest === null || paymentRequest === void 0 ? void 0 : paymentRequest.update({
@@ -19450,9 +19825,13 @@ const PelcroPaymentRequestButton = props => {
   }
   return null;
 };
-const CheckoutForm = () => {
+const CheckoutForm = _ref => {
+  let {
+    type
+  } = _ref;
   const {
-    selectedPaymentMethodId
+    selectedPaymentMethodId,
+    paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
   if (selectedPaymentMethodId) {
@@ -19477,16 +19856,38 @@ const CheckoutForm = () => {
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-w-6/12 plc-pr-4"
     }, /*#__PURE__*/React__default['default'].createElement(MonthSelect, {
-      store: store$k,
+      store: store$l,
       placeholder: "Exp Month *"
     })), /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-w-6/12"
     }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
-      store: store$k,
+      store: store$l,
       placeholder: "Exp Year *"
     }))));
   }
   if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      var _paymentMethodToEdit$;
+      return /*#__PURE__*/React__default['default'].createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Input, {
+        className: "plc-tracking-widest plc-flex-grow plc-text-center",
+        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$ = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$ === void 0 ? void 0 : _paymentMethodToEdit$.last4}`,
+        disabled: true
+      })) : /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Input, {
+        className: "plc-bg-gray-300 plc-animate-pulse"
+      })), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-6/12 plc-pr-4"
+      }, /*#__PURE__*/React__default['default'].createElement(MonthSelect, {
+        store: store$l,
+        placeholder: "Exp Month *"
+      })), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-w-6/12"
+      }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
+        store: store$l,
+        placeholder: "Exp Year *"
+      }))));
+    }
     return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
     }), /*#__PURE__*/React__default['default'].createElement("img", {
@@ -19516,7 +19917,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     order,
     plan
@@ -19573,7 +19974,7 @@ const SubmitPaymentMethod = _ref => {
       month,
       year
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   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());
@@ -19607,15 +20008,15 @@ const SubmitPaymentMethod = _ref => {
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$n;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : 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); }
+var _path$o;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : 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 SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -19635,7 +20036,7 @@ const ApplyCouponButton = _ref => {
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -19667,7 +20068,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const onCouponCodeChange = e => {
     dispatch({
       type: UPDATE_COUPON_CODE,
@@ -19693,15 +20094,15 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$m;
-function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : 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); }
+var _path$n;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : 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 SvgTicket(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -19719,7 +20120,7 @@ const CouponCode = _ref => {
     state: {
       enableCouponField
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -19943,7 +20344,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     product,
     plan,
@@ -20059,14 +20460,14 @@ const BankAuthenticationSuccess = () => {
   }));
 };
 
-var _path$l;
-function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : 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); }
+var _path$m;
+function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : 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 SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -20082,7 +20483,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     switchView,
     selectedPaymentMethodId
@@ -20123,7 +20524,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     plan
   } = usePelcro();
@@ -20141,15 +20542,15 @@ const TaxAmount = () => {
 };
 
 const IncludeFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludeLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const IncludePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
-  store: store$k
+  store: store$l
 }, props));
 
 const SubscriptionCreateFreePlanButton = _ref => {
@@ -20163,7 +20564,7 @@ const SubscriptionCreateFreePlanButton = _ref => {
       disableSubmit
     },
     dispatch
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("common");
@@ -20199,7 +20600,7 @@ const OrderCreateFreeButton = _ref => {
       disableSubmit
     },
     dispatch
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -20238,7 +20639,7 @@ const ApplePayButton = _ref => {
   const {
     dispatch,
     state
-  } = React.useContext(store$k);
+  } = React.useContext(store$l);
   const {
     plan,
     invoice,
@@ -20551,6 +20952,43 @@ const ApplePayButton = _ref => {
   });
 };
 
+function PaymentMethodUpdateSetDefault(props) {
+  const {
+    dispatch,
+    state: {
+      isDefault
+    }
+  } = React.useContext(store$l);
+  const {
+    paymentMethodToEdit
+  } = usePelcro();
+  React.useEffect(() => {
+    if (paymentMethodToEdit !== null && paymentMethodToEdit !== void 0 && paymentMethodToEdit.is_default) {
+      dispatch({
+        type: SET_IS_DEFAULT_PAYMENT_METHOD,
+        payload: {
+          isDefault: true
+        }
+      });
+    }
+  }, [paymentMethodToEdit]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleCheckboxChange = e => {
+    dispatch({
+      type: HANDLE_CHECKBOX_CHANGE,
+      payload: {
+        isDefault: e.target.checked
+      }
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Checkbox, {
+    onChange: e => handleCheckboxChange(e),
+    id: props.id,
+    checked: isDefault,
+    disabled: paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : paymentMethodToEdit.is_default
+  }, props.label);
+}
+
 /**
  *
  */
@@ -20628,9 +21066,14 @@ function PaymentMethodView(_ref) {
     errorId: "pelcro-input-phone-error",
     label: t("labels.phone"),
     required: true
-  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, {
+    type: type
+  }), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mb-2"
-  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), type === "updatePaymentSource" && /*#__PURE__*/React__default['default'].createElement(PaymentMethodUpdateSetDefault, {
+    id: "pelcro-input-is-default",
+    label: t("labels.isDefault")
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
 }
@@ -20750,14 +21193,14 @@ function SubscriptionRenewModal(_ref) {
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-const initialState$j = {
+const initialState$k = {
   cancelationReason: "",
   cancelationOption: ""
 };
-const store$j = /*#__PURE__*/React.createContext(initialState$j);
+const store$k = /*#__PURE__*/React.createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 const SubscriptionCancelContainer = _ref => {
   let {
     style,
@@ -20782,35 +21225,35 @@ const SubscriptionCancelContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-subscription-cancel-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$j, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$k, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$j,
+    store: store$k,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$j
+    store: store$k
   })));
 };
 
-var _path$k;
-function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : 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); }
+var _path$l;
+function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : 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 SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     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$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -20879,7 +21322,7 @@ const SubscriptionCancelReason = props => {
   } = useTranslation("subscriptionCancel");
   const {
     dispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const handleOnTextAreaBlur = e => {
     dispatch({
       type: SET_CANCEL_SUBSCRIPTION_REASON,
@@ -20893,9 +21336,9 @@ const SubscriptionCancelReason = props => {
 };
 
 var _switch;
-function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : 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 SvgSubscription(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 125",
     fill: "currentColor"
@@ -20924,7 +21367,7 @@ const SubscriptionCancelButton = _ref => {
       cancelationReason,
       cancelationOption
     }
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -21003,7 +21446,7 @@ const SubscriptionCancelOptions = _ref => {
       cancelationOption
     },
     dispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     t
   } = useTranslation("subscriptionCancel");
@@ -21119,14 +21562,14 @@ const SubscriptionCancelModal = _ref => {
 };
 SubscriptionCancelModal.viewId = "subscription-cancel";
 
-const initialState$i = {
+const initialState$j = {
   suspendDate: null,
   buttonDisabled: false
 };
-const store$i = /*#__PURE__*/React.createContext(initialState$i);
+const store$j = /*#__PURE__*/React.createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 const SubscriptionSuspendContainer = _ref => {
   let {
     style,
@@ -21152,22 +21595,22 @@ const SubscriptionSuspendContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-subscription-suspend-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$j, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$i,
+    store: store$j,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 
@@ -21216,7 +21659,7 @@ const SubscriptionSuspendDate = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
   const handleInputChange = value => {
     if (value) {
       dispatch({
@@ -21258,7 +21701,7 @@ const SubscriptionSuspendButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
   const {
     t
   } = useTranslation("subscriptionSuspend");
@@ -21359,10 +21802,10 @@ function SubscriptionSuspendModal(_ref) {
 }
 SubscriptionSuspendModal.viewId = "subscription-suspend";
 
-var _path$j;
-function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : 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); }
+var _path$k;
+function _extends$l() { _extends$l = Object.assign ? Object.assign.bind() : 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 SvgGift(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -21371,7 +21814,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -21677,7 +22120,7 @@ class DefaultNewsLetter extends React.Component {
 }
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$h = {
+const initialState$i = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -21687,10 +22130,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/React.createContext(initialState$h);
+const store$i = /*#__PURE__*/React.createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 const NewsletterUpdateContainer = _ref => {
   let {
     style,
@@ -21797,7 +22240,7 @@ const NewsletterUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   React.useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -21839,7 +22282,7 @@ const NewsletterUpdateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
     value: {
       state,
       dispatch
@@ -21847,12 +22290,12 @@ const NewsletterUpdateContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$h,
+        store: store$i,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -21868,7 +22311,7 @@ const NewsletterUpdateButton = _ref => {
       isSubmitting,
       isListLoading
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     t
   } = useTranslation("newsletter");
@@ -21897,7 +22340,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   if (isListLoading) {
     return /*#__PURE__*/React__default['default'].createElement(Loader, {
       width: 60,
@@ -22092,7 +22535,7 @@ function SubscriptionCreateModal(_ref) {
 }
 SubscriptionCreateModal.viewId = "subscription-create";
 
-const initialState$g = {
+const initialState$h = {
   emails: "",
   emailsError: null,
   buttonDisabled: false,
@@ -22104,10 +22547,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/React.createContext(initialState$g);
+const store$h = /*#__PURE__*/React.createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 const SubscriptionManageMembersContainer = _ref => {
   let {
     style,
@@ -22271,7 +22714,7 @@ const SubscriptionManageMembersContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   React.useEffect(() => {
     dispatch({
       type: HANDLE_LIST_MEMBERS
@@ -22282,7 +22725,7 @@ const SubscriptionManageMembersContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-manage-members-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -22290,12 +22733,12 @@ const SubscriptionManageMembersContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 
@@ -22312,7 +22755,7 @@ const SubscriptionManageMembersButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     t
   } = useTranslation("subscriptionManageMembers");
@@ -22342,7 +22785,7 @@ function SubscriptionManageMembersEmails(props) {
       emails: stateEmails,
       emailsError
     }
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const [emails, setEmails] = React.useState(stateEmails);
   const [finishedTyping, setFinishedTyping] = React.useState(false);
   const handleInputChange = React.useCallback(value => {
@@ -22372,15 +22815,15 @@ function SubscriptionManageMembersEmails(props) {
   }, props));
 }
 
-var _path$i;
-function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : 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); }
+var _path$j;
+function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : 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 SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     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$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
@@ -22398,7 +22841,7 @@ function SubscriptionManageMembersList(props) {
       removeMemberId,
       loading
     }
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const getMemberStatus = React.useCallback(sub => {
     if (sub.status === "pending") {
       return {
@@ -22561,7 +23004,7 @@ function SubscriptionManageMembersModal(_ref) {
 SubscriptionManageMembersModal.viewId = "manage-members";
 
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5, _window$Pelcro$user$r6, _window$Pelcro$user$r7;
-const initialState$f = {
+const initialState$g = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   emailError: null,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
@@ -22581,10 +23024,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/React.createContext(initialState$f);
+const store$g = /*#__PURE__*/React.createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 const UserUpdateContainer = _ref => {
   let {
     style,
@@ -22780,13 +23223,13 @@ const UserUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
     value: {
       state,
       dispatch
@@ -22794,24 +23237,24 @@ const UserUpdateContainer = _ref => {
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$f,
+        store: store$g,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 
-var _path$h;
-function _extends$i() { _extends$i = Object.assign ? Object.assign.bind() : 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); }
+var _path$i;
+function _extends$j() { _extends$j = Object.assign ? Object.assign.bind() : 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 SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     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__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -22823,7 +23266,7 @@ const UserUpdateEmail = props => {
       email,
       emailError
     }
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const [enableEmailEdit, setEnableEmailEdit] = React.useState(false);
   const {
     t
@@ -22847,7 +23290,7 @@ const UserUpdateEmail = props => {
     className: "plc-flex plc-items-start plc-relative"
   }, /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
     disabled: !enableEmailEdit,
-    store: store$f,
+    store: store$g,
     label: t("labels.email"),
     enableEmailEdit: enableEmailEdit
   }, props)), /*#__PURE__*/React__default['default'].createElement(Button, {
@@ -22881,7 +23324,7 @@ const UserUpdateButton = _ref => {
       phoneError
     },
     dispatch
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   const {
     t
@@ -22977,19 +23420,19 @@ function UpdateUserNameInput(_ref) {
 }
 
 const UserUpdateUsername = props => /*#__PURE__*/React__default['default'].createElement(UpdateUserNameInput, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
-  store: store$f
+  store: store$g
 }, 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";
@@ -23076,7 +23519,7 @@ function Tin(_ref) {
 }
 
 const UserUpdateTin = props => /*#__PURE__*/React__default['default'].createElement(Tin, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 function DisplayName(_ref) {
@@ -23105,7 +23548,7 @@ function DisplayName(_ref) {
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default['default'].createElement(DisplayName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const UserUpdateView = props => {
@@ -23199,11 +23642,11 @@ UserUpdateModal.viewId = "user-edit";
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$f
+    store: store$g
   }));
 };
 
-const initialState$e = {
+const initialState$f = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -23229,10 +23672,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/React.createContext(initialState$e);
+const store$f = /*#__PURE__*/React.createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 const AddressCreateContainer = _ref => {
   var _props$giftCode, _ref2, _props$subscriptionId;
@@ -23466,7 +23909,7 @@ const AddressCreateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -23498,16 +23941,16 @@ const AddressCreateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$e,
+    store: store$f,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -23518,7 +23961,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -23552,7 +23995,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -23584,7 +24027,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -23623,7 +24066,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -23655,7 +24098,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleInputChange = value => {
     dispatch({
       type: SET_TEXT_FIELD,
@@ -23691,7 +24134,7 @@ const AddressCreateSubmit = _ref => {
     state: {
       isSubmitting
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("address");
@@ -23771,7 +24214,7 @@ function CountrySelect(_ref) {
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 function StateSelect(_ref) {
@@ -23853,14 +24296,14 @@ function StateSelect(_ref) {
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$e
+  store: store$f
 }, props));
 
 const AddressCreateSetDefault = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const handleCheckboxChange = e => {
     dispatch({
       type: HANDLE_CHECKBOX_CHANGE,
@@ -23985,18 +24428,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$e
+    store: store$f
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$e
+    store: store$f
   }, props));
 };
 
-const initialState$d = {
+const initialState$e = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -24022,10 +24465,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/React.createContext(initialState$d);
+const store$e = /*#__PURE__*/React.createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 const AddressUpdateContainer = _ref => {
   var _props$addressId, _window, _window$Pelcro, _window$Pelcro$uiSett;
   let {
@@ -24074,7 +24517,7 @@ const AddressUpdateContainer = _ref => {
       const thisAddress = addresses[address];
       if (+thisAddress.id === +addressId) {
         const newState = {
-          ...initialState$d,
+          ...initialState$e,
           firstName: thisAddress.first_name,
           lastName: thisAddress.last_name,
           line1: thisAddress.line1,
@@ -24225,7 +24668,7 @@ const AddressUpdateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -24257,21 +24700,21 @@ const AddressUpdateContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$d,
+    store: store$e,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -24281,7 +24724,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24320,7 +24763,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24359,7 +24802,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24395,7 +24838,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -24406,7 +24849,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24445,7 +24888,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleBlur = () => {
     return dispatch({
       type: VALIDATE_FIELD,
@@ -24488,7 +24931,7 @@ const AddressUpdateSubmit = _ref => {
     state: {
       isSubmitting
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("address");
@@ -24504,7 +24947,7 @@ const AddressUpdateSubmit = _ref => {
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$d
+  store: store$e
 }, props));
 
 function AddressUpdateSetDefault(props) {
@@ -24513,7 +24956,7 @@ function AddressUpdateSetDefault(props) {
     state: {
       isDefault
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const handleCheckboxChange = e => {
     dispatch({
       type: HANDLE_CHECKBOX_CHANGE,
@@ -24615,7 +25058,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$d
+    store: store$e
   }));
 };
 
@@ -24705,7 +25148,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$c = {
+const initialState$d = {
   email: "",
   password: "",
   passwordError: null,
@@ -24718,10 +25161,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const store$d = /*#__PURE__*/React.createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 const PasswordResetContainer = _ref => {
   let {
     style,
@@ -24776,7 +25219,7 @@ const PasswordResetContainer = _ref => {
       type: SET_EMAIL,
       payload: window.Pelcro.helpers.getURLParameter("email")
     });
-    initialState$c.email = window.Pelcro.helpers.getURLParameter("email");
+    initialState$d.email = window.Pelcro.helpers.getURLParameter("email");
     dispatch({
       type: SET_TOKEN,
       payload: window.Pelcro.helpers.getURLParameter("token")
@@ -24836,27 +25279,27 @@ const PasswordResetContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetButton = _ref => {
@@ -24870,7 +25313,7 @@ const PasswordResetButton = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("passwordReset");
@@ -24887,14 +25330,14 @@ const PasswordResetButton = _ref => {
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$c
+  store: store$d
 }, props, {
   value: window.Pelcro.helpers.getURLParameter("email"),
   disabled: true
 }));
 
 const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default['default'].createElement(ConfirmPassword, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const PasswordResetView = props => {
@@ -24947,7 +25390,7 @@ const PasswordResetModal = _ref => {
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$b = {
+const initialState$c = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -24956,10 +25399,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/React.createContext(initialState$b);
+const store$c = /*#__PURE__*/React.createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 const PasswordForgotContainer = _ref => {
   let {
     style,
@@ -25035,22 +25478,22 @@ const PasswordForgotContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
@@ -25067,7 +25510,7 @@ const PasswordForgotButton = _ref => {
       emailError
     },
     dispatch
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -25088,7 +25531,7 @@ const PasswordForgotButton = _ref => {
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const PasswordForgotView = props => {
@@ -25139,7 +25582,7 @@ const PasswordForgotModal = _ref => {
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$a = {
+const initialState$b = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -25148,10 +25591,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/React.createContext(initialState$a);
+const store$b = /*#__PURE__*/React.createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 const PasswordlessRequestContainer = _ref => {
   let {
     style,
@@ -25227,22 +25670,22 @@ const PasswordlessRequestContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
@@ -25259,7 +25702,7 @@ const PasswordlessRequestViewButton = _ref => {
       emailError
     },
     dispatch
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
   const {
     t
   } = useTranslation("passwordlessRequest");
@@ -25280,7 +25723,7 @@ const PasswordlessRequestViewButton = _ref => {
 };
 
 const PasswordlessRequestEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const PasswordlessRequestView = props => {
@@ -25322,7 +25765,7 @@ const PasswordlessRequestModal = _ref => {
 };
 PasswordlessRequestModal.viewId = "passwordless-request";
 
-const initialState$9 = {
+const initialState$a = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -25336,10 +25779,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/React.createContext(initialState$9);
+const store$a = /*#__PURE__*/React.createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 const PasswordChangeContainer = _ref => {
   let {
     style,
@@ -25490,22 +25933,22 @@ const PasswordChangeContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
@@ -25516,7 +25959,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -25550,7 +25993,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -25584,7 +26027,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -25626,7 +26069,7 @@ const PasswordChangeButton = _ref => {
       confirmNewPasswordError
     },
     dispatch
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const {
     t
   } = useTranslation("passwordChange");
@@ -25693,17 +26136,17 @@ const PasswordChangeModal = _ref => {
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$8 = {
+const initialState$9 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/React.createContext(initialState$8);
+const store$9 = /*#__PURE__*/React.createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 const CartContainer = _ref => {
   let {
     style,
@@ -25789,22 +26232,22 @@ const CartContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -25846,7 +26289,7 @@ const CartSubmit = _ref => {
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const {
     t
   } = useTranslation("cart");
@@ -25881,7 +26324,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const {
     cartItems
   } = usePelcro();
@@ -26195,7 +26638,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$7 = {
+const initialState$8 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -26207,10 +26650,10 @@ const initialState$7 = {
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/React.createContext(initialState$7);
+const store$8 = /*#__PURE__*/React.createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 const GiftCreateContainer = _ref => {
   let {
     style,
@@ -26308,22 +26751,22 @@ const GiftCreateContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -26338,7 +26781,7 @@ const GiftCreateSubmitButton = _ref => {
     state: {
       disableSubmit
     }
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const {
     t
   } = useTranslation("register");
@@ -26355,17 +26798,17 @@ const GiftCreateSubmitButton = _ref => {
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
   initWithUserFirstName: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
   initWithUserLastName: false,
-  store: store$7
+  store: store$8
 }, props));
 
 const nowDate = new Date();
@@ -26379,7 +26822,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const handleInputChange = value => {
     dispatch({
       type: SET_START_DATE,
@@ -26409,7 +26852,7 @@ function GiftCreateMessage(props) {
   const {
     dispatch,
     state
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   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;
   const handleInputChange = value => {
@@ -26527,7 +26970,7 @@ const GiftCreateModal = _ref => {
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$6 = {
+const initialState$7 = {
   isSubmitting: false,
   giftCode: "",
   buttonDisabled: true,
@@ -26536,10 +26979,10 @@ const initialState$6 = {
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/React.createContext(initialState$6);
+const store$7 = /*#__PURE__*/React.createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 const GiftRedeemContainer = _ref => {
   var _ref2, _props$subscriptionId;
   let {
@@ -26649,22 +27092,22 @@ const GiftRedeemContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -26698,7 +27141,7 @@ function GiftCode(_ref) {
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default['default'].createElement(GiftCode, Object.assign({
-  store: store$6
+  store: store$7
 }, props));
 
 const GiftRedeemSubmitButton = _ref => {
@@ -26713,7 +27156,7 @@ const GiftRedeemSubmitButton = _ref => {
       disableSubmit,
       isSubmitting
     }
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
   const {
     t
   } = useTranslation("register");
@@ -26798,7 +27241,7 @@ const moveDefaultAddressToStart = addresses => {
   const addressesWithoutDefault = addresses.filter(address => !address.is_default);
   return [defaultAddress, ...addressesWithoutDefault];
 };
-const initialState$5 = {
+const initialState$6 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -26807,10 +27250,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/React.createContext(initialState$5);
+const store$6 = /*#__PURE__*/React.createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 const AddressSelectContainer = _ref => {
   var _props$giftCode, _ref2, _props$subscriptionId;
   let {
@@ -26937,7 +27380,7 @@ const AddressSelectContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   React.useEffect(() => {
     var _window$Pelcro$user$r;
     dispatch({
@@ -26950,16 +27393,16 @@ const AddressSelectContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -26970,7 +27413,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
   const handleAddressSelect = event => {
     dispatch({
       type: SELECT_ADDRESS,
@@ -27013,7 +27456,7 @@ const AddressSelectSubmit = _ref => {
       selectedAddressId,
       isSubmitting
     }
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
   const {
     t
   } = useTranslation("address");
@@ -27109,7 +27552,7 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
-const initialState$4 = {
+const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -27118,10 +27561,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/React.createContext(initialState$4);
+const store$5 = /*#__PURE__*/React.createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 const PaymentMethodSelectContainer = _ref => {
   let {
     style,
@@ -27174,7 +27617,7 @@ const PaymentMethodSelectContainer = _ref => {
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   React.useEffect(() => {
     var _window$Pelcro$user$r3;
     dispatch({
@@ -27187,16 +27630,16 @@ const PaymentMethodSelectContainer = _ref => {
       ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -27210,7 +27653,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
   const handlePaymentMethodSelect = event => {
     dispatch({
       type: SELECT_PAYMENT_METHOD,
@@ -27258,7 +27701,7 @@ const PaymentMethodSelectSubmit = _ref => {
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -27276,70 +27719,490 @@ const PaymentMethodSelectView = props => {
     t
   } = useTranslation("paymentMethod");
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    id: "pelcro-payment-method-select-view"
+    id: "pelcro-payment-method-select-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-space-y-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("select.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("select.subtitle"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectContainer, props, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectList, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement(Link, {
+    id: "pelcro-add-payment-method",
+    onClick: props.onAddNewPaymentMethod
+  }, t("select.buttons.addPaymentMethod"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectSubmit, {
+    role: "submit",
+    className: "plc-w-full plc-mt-4",
+    id: "pelcro-submit"
+  }))));
+};
+
+const PaymentMethodSelectModal = _ref => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
+  let {
+    onDisplay,
+    onClose,
+    ...otherProps
+  } = _ref;
+  const {
+    switchToCheckoutForm,
+    set,
+    plan,
+    order
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  React.useEffect(() => {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
+      switchToCheckoutForm();
+    }
+  }, []);
+  const onSuccess = selectedPaymentMethodId => {
+    var _otherProps$onSuccess;
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, selectedPaymentMethodId);
+    switchToCheckoutForm();
+  };
+  const onAddNewPaymentMethod = () => {
+    set({
+      selectedPaymentMethodId: null
+    });
+    switchToCheckoutForm();
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-payment-method-select-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectView, Object.assign({
+    onAddNewPaymentMethod: onAddNewPaymentMethod
+  }, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+PaymentMethodSelectModal.viewId = "payment-method-select";
+
+const initialState$4 = {
+  paymentMethods: [],
+  selectedPaymentMethodId: null,
+  isSubmitting: false,
+  deleteOption: "",
+  disableSubmit: false,
+  isLoading: false,
+  skeletonLoader: true,
+  alert: {
+    type: "error",
+    content: ""
+  }
+};
+const store$4 = /*#__PURE__*/React.createContext(initialState$4);
+const {
+  Provider: Provider$4
+} = store$4;
+const PaymentMethodDeleteContainer = _ref => {
+  let {
+    style,
+    className = "",
+    onSuccess = () => {},
+    onFailure = () => {},
+    children
+  } = _ref;
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  React.useEffect(() => {
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        return console.error(err);
+      }
+      if (res) {
+        dispatch({
+          type: SET_PAYMENT_METHODS,
+          payload: res.data
+        });
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: false
+        });
+        if (res.data.length !== 1) {
+          dispatch({
+            type: SET_DELETE_PAYMENT_METHOD_OPTION,
+            payload: "select"
+          });
+        } else {
+          dispatch({
+            type: SET_DELETE_PAYMENT_METHOD_OPTION,
+            payload: "add"
+          });
+        }
+      }
+    });
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const setDefaultPaymentMethod = () => {
+    const {
+      selectedPaymentMethodId: paymentMethodId
+    } = state;
+    window.Pelcro.paymentMethods.update({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId,
+      is_default: true
+    }, (err, res) => {
+      if (err) {
+        onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      setTimeout(() => {
+        deletePaymentMethod();
+      }, 2000);
+    });
+  };
+  const deletePaymentMethod = () => {
+    const {
+      id: paymentMethodId
+    } = paymentMethodToDelete;
+    window.Pelcro.paymentMethods.deletePaymentMethod({
+      auth_token: window.Pelcro.user.read().auth_token,
+      payment_method_id: paymentMethodId
+    }, (err, res) => {
+      if (err) {
+        onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      onSuccess(res);
+    });
+  };
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SELECT_PAYMENT_METHOD:
+        return lib_7({
+          ...state,
+          selectedPaymentMethodId: action.payload
+        });
+      case HANDLE_SUBMIT:
+        return lib_5({
+          ...state,
+          disableSubmit: true,
+          isLoading: true
+        }, (state, dispatch) => setDefaultPaymentMethod());
+      case SET_DELETE_PAYMENT_METHOD_OPTION:
+        return lib_7({
+          ...state,
+          deleteOption: action.payload
+        });
+      case SET_PAYMENT_METHODS:
+        return lib_7({
+          ...state,
+          paymentMethods: action.payload
+        });
+      case SHOW_ALERT:
+        return lib_7({
+          ...state,
+          alert: action.payload
+        });
+      case DISABLE_SUBMIT:
+        return lib_7({
+          ...state,
+          disableSubmit: action.payload
+        });
+      case LOADING:
+        return lib_7({
+          ...state,
+          isLoading: action.payload
+        });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          skeletonLoader: action.payload
+        });
+      default:
+        return state;
+    }
+  }, initialState$4);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      ...style
+    },
+    className: `pelcro-container pelcro-payment-method-delete-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
+    store: store$4,
+    key: i
+  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store: store$4
+  })));
+};
+
+const PaymentMethodDeleteSubmit = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      isLoading,
+      isDisabled
+    }
+  } = React.useContext(store$4);
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: isLoading,
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
+};
+
+const PaymentMethodDeleteList = props => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      deleteOption,
+      selectedPaymentMethodId,
+      paymentMethods,
+      skeletonLoader
+    }
+  } = React.useContext(store$4);
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  const handlePaymentMethodSelect = event => {
+    dispatch({
+      type: SELECT_PAYMENT_METHOD,
+      payload: event.target.value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll no-scrollbar plc-max-h-80 pelcro-payment-method-select-wrapper plc-mb-4"
+  }, paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => {
+    var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
+    const isSelected = selectedPaymentMethodId === String(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
+      className: `plc-p-2 plc-pl-4 plc-shadow-md plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
+    }, /*#__PURE__*/React__default['default'].createElement(Radio, {
+      className: "plc-flex plc-items-center pelcro-select-payment-method-radio",
+      labelClassName: "plc-flex plc-items-center plc-space-x-2 plc-cursor-pointer plc-w-full",
+      id: `pelcro-payment-method-select-${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id}`,
+      name: "paymentMethod",
+      checked: isSelected,
+      value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id,
+      onChange: handlePaymentMethodSelect
+    }, getPaymentCardIcon$1((_paymentMethod$proper = paymentMethod.properties) === null || _paymentMethod$proper === void 0 ? void 0 : _paymentMethod$proper.brand), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+    }, /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "plc-font-semibold"
+    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethod$proper2 = paymentMethod.properties) === null || _paymentMethod$proper2 === void 0 ? void 0 : _paymentMethod$proper2.last4), /*#__PURE__*/React__default['default'].createElement("p", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, t("select.expires"), " ", (_paymentMethod$proper3 = paymentMethod.properties) === null || _paymentMethod$proper3 === void 0 ? void 0 : _paymentMethod$proper3.exp_month, "/", (_paymentMethod$proper4 = paymentMethod.properties) === null || _paymentMethod$proper4 === void 0 ? void 0 : _paymentMethod$proper4.exp_year))));
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-px-3"
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
+    type: "deletePaymentSource",
+    showCoupon: false,
+    showExternalPaymentMethods: false,
+    showApplePayButton: false,
+    onDisplay: props.onDisplay,
+    onFailure: props.onFailure,
+    onSuccess: props.onSuccess,
+    setAsDefault: true
+  })));
+};
+
+const PaymentMethodDeleteOptions = _ref => {
+  const {
+    state: {
+      deleteOption,
+      paymentMethods,
+      skeletonLoader
+    },
+    dispatch
+  } = React.useContext(store$4);
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const handleOptionSelect = event => {
+    dispatch({
+      type: SET_DELETE_PAYMENT_METHOD_OPTION,
+      payload: event.target.value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, skeletonLoader ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-flex-col plc-space-y-3"
+  }, /*#__PURE__*/React__default['default'].createElement(Radio, {
+    className: "plc-animate-puls"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
+  })), /*#__PURE__*/React__default['default'].createElement(Radio, {
+    className: "plc-animate-pulse"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
+  }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default['default'].createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: deleteOption === "select",
+    value: "select"
+  }, t("delete.options.select")), /*#__PURE__*/React__default['default'].createElement(Radio, {
+    onChange: handleOptionSelect,
+    checked: deleteOption === "add",
+    value: "add"
+  }, t("delete.options.add"))));
+};
+
+function PaymentMethodDeleteView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-payment-method-delete-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold plc-mb-2"
+  }, t("delete.title")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: ""
+  }, t("delete.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
+    className: "plc-mb-2"
+  }), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteList, {
+    onSuccess: props.onSuccess
+  })));
+}
+
+const PaymentMethodDeleteModal = props => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
+  const {
+    resetView
+  } = usePelcro();
+  const onSuccess = res => {
+    var _props$onSuccess;
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
+    if (enableReactGA4) {
+      ReactGA4.event("Delete payment card", {
+        nonInteraction: true
+      });
+    } else {
+      var _ReactGA$event;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Delete payment card",
+        nonInteraction: true
+      });
+    }
+    notify$1.success(t("delete.paymentMethodReplaced"));
+    resetView();
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-payment-method-delete-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodDeleteView, Object.assign({}, props, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+PaymentMethodDeleteModal.viewId = "payment-method-delete";
+
+const PaymentMethodCreateContainer = props => {
+  return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainer, Object.assign({
+    type: "createPaymentSource",
+    className: "pelcro-payment-create-container"
+  }, props));
+};
+
+/**
+ *
+ */
+function PaymentMethodCreateView(props) {
+  const [t] = useTranslation("paymentMethod");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-payment-method-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-mb-6 plc-space-y-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+    className: "plc-mb-2 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("h4", {
-    className: "plc-text-2xl plc-font-semibold"
-  }, t("select.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("select.subtitle"))), /*#__PURE__*/React__default['default'].createElement("form", {
-    action: "javascript:void(0);",
-    className: "plc-mt-2 pelcro-form"
-  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectContainer, props, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectList, null), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-justify-center plc-mt-4"
-  }, /*#__PURE__*/React__default['default'].createElement(Link, {
-    id: "pelcro-add-payment-method",
-    onClick: props.onAddNewPaymentMethod
-  }, t("select.buttons.addPaymentMethod"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectSubmit, {
-    role: "submit",
-    className: "plc-w-full plc-mt-4",
-    id: "pelcro-submit"
-  }))));
-};
+    className: "plc-text-2xl plc-font-semibold "
+  }, t("create.title")), /*#__PURE__*/React__default['default'].createElement("p", null, t("create.subtitle"))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, {
+    type: "createPaymentSource",
+    showCoupon: false,
+    showExternalPaymentMethods: false,
+    showApplePayButton: false,
+    onDisplay: props.onDisplay,
+    onFailure: props.onFailure,
+    onSuccess: props.onSuccess
+  }));
+}
 
-const PaymentMethodSelectModal = _ref => {
-  var _window$Pelcro, _window$Pelcro$uiSett;
-  let {
-    onDisplay,
-    onClose,
-    ...otherProps
-  } = _ref;
-  const {
-    switchToCheckoutForm,
-    set,
-    plan,
-    order
-  } = usePelcro();
-  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
-  React.useEffect(() => {
-    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
-      switchToCheckoutForm();
+const PaymentMethodCreateModal = props => {
+  var _window, _window$Pelcro, _window$Pelcro$uiSett;
+  const enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
+  const onSuccess = res => {
+    var _props$onSuccess;
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
+    if (enableReactGA4) {
+      ReactGA4.event("Created payment card", {
+        nonInteraction: true
+      });
+    } else {
+      var _ReactGA$event;
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Created payment card",
+        nonInteraction: true
+      });
     }
-  }, []);
-  const onSuccess = selectedPaymentMethodId => {
-    var _otherProps$onSuccess;
-    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps, selectedPaymentMethodId);
-    switchToCheckoutForm();
-  };
-  const onAddNewPaymentMethod = () => {
-    set({
-      selectedPaymentMethodId: null
-    });
-    switchToCheckoutForm();
   };
   return /*#__PURE__*/React__default['default'].createElement(Modal, {
-    onDisplay: onDisplay,
-    onClose: onClose,
-    id: "pelcro-payment-method-select-modal"
-  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodSelectView, Object.assign({
-    onAddNewPaymentMethod: onAddNewPaymentMethod
-  }, otherProps, {
+    id: "pelcro-payment-method-create-modal",
+    onDisplay: props.onDisplay,
+    onClose: props.onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(PaymentMethodCreateView, Object.assign({}, props, {
     onSuccess: onSuccess
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
 };
-PaymentMethodSelectModal.viewId = "payment-method-select";
+PaymentMethodCreateModal.viewId = "payment-method-create";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$i() {
+  _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -27353,7 +28216,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -27537,7 +28400,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$i({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -28065,7 +28928,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['default'].createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$i({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -28109,7 +28972,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$i({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -28236,12 +29099,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -28260,7 +29123,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -28271,19 +29134,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$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -28296,7 +29159,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -28335,19 +29198,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$i({}, 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$i({}, 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$i({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -28368,7 +29231,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -28381,10 +29244,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$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -28392,11 +29255,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$i({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -28409,7 +29272,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -28428,6 +29291,7 @@ var GroupContext = /*#__PURE__*/React.createContext(null);
 GroupContext.displayName = 'GroupContext';
 
 const getPaymentCardIcon = name => {
+  var _icons$name$toLowerCa;
   const icons = {
     visa: /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-12",
@@ -28454,7 +29318,7 @@ const getPaymentCardIcon = name => {
       d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 8.5625 19.90625 L 4.84375 28.40625 L 7.0625 28.40625 L 7.875 26.5 L 12.0625 26.5 L 12.875 28.40625 L 17.09375 28.40625 L 17.09375 22.09375 L 19.90625 28.40625 L 21.8125 28.40625 L 24.65625 22.1875 L 24.65625 28.40625 L 26.75 28.40625 L 26.75 19.90625 L 23.40625 19.90625 L 20.84375 25.625 L 18.28125 19.90625 L 15 19.90625 L 15 28.09375 L 11.34375 19.90625 Z M 29.5 19.90625 L 29.5 28.4375 L 37.5 28.4375 L 40 25.59375 L 42.46875 28.4375 L 45.125 28.4375 L 41.375 24.0625 L 45.125 19.90625 L 42.46875 19.90625 L 40.0625 22.5625 L 37.75 19.90625 Z M 9.90625 21.6875 L 11.21875 24.6875 L 8.65625 24.6875 Z M 31.5625 21.71875 L 36.65625 21.75 L 38.6875 24.0625 L 36.40625 26.625 L 31.5625 26.625 L 31.5625 24.9375 L 36.1875 24.9375 L 36.1875 23.3125 L 31.5625 23.3125 Z"
     }))
   };
-  return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default['default'].createElement("svg", {
+  return (_icons$name$toLowerCa = icons[name === null || name === void 0 ? void 0 : name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-12",
     fill: "none",
@@ -28468,16 +29332,16 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$g;
-function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : 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); }
+var _path$h;
+function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : 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 SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -28706,16 +29570,16 @@ const SavedItems = _ref3 => {
   });
 };
 
-var _path$f;
-function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : 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); }
+var _path$g;
+function _extends$g() { _extends$g = Object.assign ? Object.assign.bind() : 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 SvgRefresh(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     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$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -28723,31 +29587,31 @@ function SvgRefresh(props) {
   })));
 }
 
-var _path$e;
-function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : 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); }
+var _path$f;
+function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : 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 SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     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$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.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$d;
-function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : 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); }
+var _path$e;
+function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : 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 SvgPlus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     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$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29107,16 +29971,16 @@ Accordion.item = function AccordionItem(_ref2) {
   }, content)) : null;
 };
 
-var _path$c;
-function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : 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); }
+var _path$d;
+function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : 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__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.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$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29124,15 +29988,15 @@ function SvgExit(props) {
   })));
 }
 
-var _path$b;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : 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); }
+var _path$c;
+function _extends$c() { _extends$c = Object.assign ? Object.assign.bind() : 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__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29140,16 +30004,16 @@ function SvgUser(props) {
   })));
 }
 
-var _path$a;
-function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : 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); }
+var _path$b;
+function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : 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__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.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$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29157,16 +30021,16 @@ function SvgNewsletter(props) {
   })));
 }
 
-var _path$9;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : 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); }
+var _path$a;
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : 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__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29174,16 +30038,16 @@ function SvgDocument(props) {
   })));
 }
 
-var _path$8;
-function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : 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); }
+var _path$9;
+function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : 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__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29191,16 +30055,16 @@ function SvgPaymentCard(props) {
   })));
 }
 
-var _path$7, _path2;
-function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : 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); }
+var _path$8, _path2;
+function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : 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__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29213,16 +30077,16 @@ function SvgLocationPin(props) {
   })));
 }
 
-var _path$6;
-function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : 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); }
+var _path$7;
+function _extends$7() { _extends$7 = Object.assign ? Object.assign.bind() : 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 SvgShopping(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     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__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29230,16 +30094,16 @@ function SvgShopping(props) {
   })));
 }
 
-var _path$5;
-function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : 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); }
+var _path$6;
+function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : 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 SvgBookmark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
+  return /*#__PURE__*/React__namespace.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__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -29247,63 +30111,76 @@ function SvgBookmark(props) {
   })));
 }
 
-var _path$4;
-function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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); }
+var _path$5;
+function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : 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 SvgKey(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.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$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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); }
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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 SvgDonate(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     width: 24,
     height: 24,
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.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"
   })));
 }
 
-var _path$2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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); }
+var _path$3;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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 SvgMemberships(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     strokeWidth: 1.5,
     stroke: "currentColor",
     width: 24,
     height: 24
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z"
   })));
 }
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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 SvgQrcode(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 682.667,
     height: 682.667,
     viewBox: "0 0 512 512"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M93.5 62.4c-15.7 3.9-28 16.6-31.4 32.4-.7 3.3-1.1 17.2-1.1 36.4 0 29.1.1 31.4 2 35.3 5.3 11 21.2 11.1 26.4.1 1.4-2.9 1.6-7.9 1.6-34.6 0-34.4.1-35.3 6.3-39 3-1.9 5.2-2 34.5-2 26.9 0 31.9-.2 34.8-1.6 11-5.2 10.9-21.1-.1-26.4-3.9-1.9-6.1-2-36.1-1.9-21.8 0-33.5.5-36.9 1.3zM345.4 63c-10.9 5.4-10.9 21.2 0 26.4 2.9 1.4 7.9 1.6 34.8 1.6 29.3 0 31.5.1 34.5 2 6.2 3.7 6.3 4.6 6.3 39 0 26.7.2 31.7 1.6 34.6 5.2 11 21.1 10.9 26.4-.1 1.9-3.9 2-6.2 2-35.3 0-19.2-.4-33.1-1.1-36.4-3.5-16.2-16.5-29.2-32.7-32.7-3.3-.7-17.2-1.1-36.5-1.1-29.3 0-31.5.1-35.3 2zM146 128.9c-6.9 2.1-12.1 6.5-15.6 13.1-1.8 3.2-1.9 6.3-1.9 38.5 0 34.2 0 35.1 2.2 39.1 2.8 5.3 9.1 10.7 14.2 12.2 2.5.8 14.4 1.2 35.8 1.2 36.3 0 38.3-.3 45.2-7.2 6.8-6.9 7.1-8.9 7.1-45.1 0-22.2-.4-33.2-1.2-36.1-1.8-6-10-13.9-16-15.4-5.3-1.3-65.5-1.6-69.8-.3zm57 51.6V203h-45v-45h45v22.5zM297 128.9c-8 2.5-14.9 9.2-16.9 16.4-.9 2.9-1.1 14.3-.9 37.7.3 37.2.2 36.2 7.4 43.3 6.6 6.4 8.8 6.7 45 6.7 35.6 0 38-.3 44.2-6.3 1.9-1.8 4.3-5 5.5-7.2 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-2.5-4.7-6.4-8.5-11.3-11.1-3.2-1.7-6.4-1.9-37-2.1-18.4-.1-34.6.2-36 .6zm57 51.6V203h-45v-45h45v22.5zM144.1 280.3c-4.8 1.8-10.8 7.2-13.4 12-2.2 4.1-2.2 4.9-2.2 39.2 0 34 .1 35.1 2.2 39 2.5 4.7 6.4 8.5 11.3 11.1 3.2 1.7 6.6 1.9 35.5 2.2 38.9.4 40.7.2 48-7.2 3.2-3.2 5.5-6.6 6.3-9.2.8-2.9 1.2-13.9 1.2-36.1 0-35.8-.4-38.3-6.6-44.7-7-7.2-6-7.1-44.4-7.3-25.4-.1-35.4.1-37.9 1zm58.9 51.2V354h-45v-45h45v22.5zM294.8 280.4c-6.8 2.4-12.9 8.9-14.8 15.7-1.5 5-1.3 66.2.2 71 1.5 5.1 6.9 11.4 12.2 14.2 4 2.2 4.9 2.2 39.1 2.2 32.2 0 35.3-.1 38.5-1.9 4.9-2.6 8.8-6.4 11.3-11.1 2.1-3.9 2.2-5 2.2-39s-.1-35.1-2.2-39c-3-5.6-8-10.1-13.2-12-5.9-2-67.5-2.2-73.3-.1zm59.2 51.1V354h-45v-45h45v22.5zM68.7 339.2c-2.2 1.3-4.5 3.8-5.7 6.3-1.9 3.9-2 6.2-2 35.3 0 19.2.4 33.1 1.1 36.4 3.4 16.1 16.6 29.3 32.7 32.7 3.3.7 17.2 1.1 36.4 1.1 29.1 0 31.4-.1 35.3-2 11-5.3 11.1-21.2.1-26.4-2.9-1.4-7.9-1.6-34.6-1.6-34.4 0-35.3-.1-39-6.3-1.9-3-2-5.2-2-34.5 0-26.9-.2-31.9-1.6-34.8-3.6-7.5-13.5-10.5-20.7-6.2zM429.2 338.7c-1.8.9-4.3 3-5.5 4.7-2.1 3-2.2 4-2.7 36.1-.5 35.8-.6 36.1-6.3 39.5-3 1.9-5.3 2-34.5 2-34.5 0-36.1.2-40.2 6-5.4 7.5-2.8 18 5.5 22 3.9 1.9 6.2 2 35.3 2 19.2 0 33.1-.4 36.4-1.1 16.2-3.5 29.2-16.5 32.7-32.7.7-3.3 1.1-17.2 1.1-36.4 0-29.1-.1-31.4-2-35.3-3.6-7.4-12.5-10.4-19.8-6.8z"
   })));
 }
 
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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 SvgTrashCan(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 448 512",
+    fill: "currentColor"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0h120.4c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64s14.3-32 32-32h96l7.2-14.3zM32 128h384v320c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"
+  })));
+}
+
 const DonationsMenu = _ref => {
   let {
     reactivateSubscription,
@@ -29618,7 +30495,9 @@ function DashboardWithHook(props) {
     switchView,
     resetView,
     logout,
-    set
+    set,
+    setPaymentMethodToEdit,
+    setPaymentMethodToDelete
   } = usePelcro();
   return /*#__PURE__*/React__default['default'].createElement(DashboardWithTrans, {
     setAddress: addressIdToEdit => set({
@@ -29641,7 +30520,9 @@ function DashboardWithHook(props) {
       product,
       plan,
       isGift
-    })
+    }),
+    setPaymentMethodToEdit: setPaymentMethodToEdit,
+    setPaymentMethodToDelete: setPaymentMethodToDelete
   });
 }
 DashboardWithHook.viewId = "dashboard";
@@ -29668,6 +30549,18 @@ class Dashboard extends React.Component {
           nonInteraction: true
         });
       }
+      window.Pelcro.paymentMethods.list({
+        auth_token: window.Pelcro.user.read().auth_token
+      }, (err, res) => {
+        if (err) {
+          return console.error(err);
+        }
+        if (res) {
+          this.setState({
+            sources: res.data
+          });
+        }
+      });
       const {
         addresses
       } = window.Pelcro.user.read();
@@ -29737,10 +30630,46 @@ class Dashboard extends React.Component {
         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
       });
     });
+    _defineProperty$3(this, "deletePaymentMethod", (paymentMethodId, onSuccess, onFailure) => {
+      // disable the Login button to prevent repeated clicks
+      window.Pelcro.paymentMethods.deletePaymentMethod({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId
+      }, (err, res) => {
+        if (err) {
+          return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        }
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+      });
+    });
+    _defineProperty$3(this, "onDeletePaymentMethodClick", source => {
+      const isDeletable = source === null || source === void 0 ? void 0 : source.deletable;
+      if (isDeletable) {
+        this.props.onClose();
+        notify$1.confirm((onSuccess, onFailure) => {
+          this.deletePaymentMethod(source.id, onSuccess, onFailure);
+        }, {
+          confirmMessage: this.locale("messages.paymentMethodDeletion.isSureToDelete"),
+          loadingMessage: this.locale("messages.paymentMethodDeletion.loading"),
+          successMessage: this.locale("messages.paymentMethodDeletion.success"),
+          errorMessage: this.locale("messages.paymentMethodDeletion.error")
+        }, {
+          closeButtonLabel: this.locale("labels.subCancellation.goBack")
+        });
+      } else {
+        this.props.setPaymentMethodToDelete(source.id);
+        return this.props.setView("payment-method-delete");
+      }
+    });
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
     });
     _defineProperty$3(this, "displaySourceCreate", () => {
+      return this.props.setView("payment-method-create");
+    });
+    _defineProperty$3(this, "displaySourceEdit", e => {
+      const source = e.currentTarget.dataset.key;
+      this.props.setPaymentMethodToEdit(source);
       return this.props.setView("payment-method-update");
     });
     _defineProperty$3(this, "displayUserEdit", () => {
@@ -29994,6 +30923,52 @@ class Dashboard extends React.Component {
         onClick: this.displayAddressCreate
       }, this.locale("labels.addAddress"))))));
     });
+    _defineProperty$3(this, "renderSources", () => {
+      const sources = this.state.sources && this.state.sources.sort((a, b) => a.is_default === b.is_default ? 0 : a.is_default ? -1 : 1).map((source, index) => {
+        var _source$properties, _source$properties2;
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          key: "dashboard-source-" + source.id,
+          className: "plc-flex plc-flex-row plc-pr-6"
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-flex plc-flex-grow plc-items-center plc-justify-between plc-max-w-xs plc-p-4 plc-mb-2 plc-text-white plc-bg-gray-800 plc-rounded-md plc-h-14"
+        }, /*#__PURE__*/React__default['default'].createElement("span", null, getPaymentCardIcon(source === null || source === void 0 ? void 0 : (_source$properties = source.properties) === null || _source$properties === void 0 ? void 0 : _source$properties.brand)), /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "plc-ml-1 plc-text-lg plc-tracking-widest plc-flex-grow plc-text-center"
+        }, "\u2022\u2022\u2022\u2022 ", source === null || source === void 0 ? void 0 : (_source$properties2 = source.properties) === null || _source$properties2 === void 0 ? void 0 : _source$properties2.last4), /*#__PURE__*/React__default['default'].createElement(Button, {
+          id: "pelcro-button-update-source-" + index,
+          variant: "icon",
+          className: "plc-text-white",
+          icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
+          "data-key": source.id,
+          onClick: this.displaySourceEdit,
+          disabled: this.state.disableSubmit
+        }), /*#__PURE__*/React__default['default'].createElement(Button, {
+          id: "pelcro-button-delete-source-" + index,
+          variant: "icon",
+          className: "plc-text-white",
+          icon: /*#__PURE__*/React__default['default'].createElement(SvgTrashCan, null),
+          onClick: () => {
+            this.onDeletePaymentMethodClick(source);
+          },
+          disabled: this.state.disableSubmit
+        })), /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "plc-flex-grow"
+        }), source.is_default && /*#__PURE__*/React__default['default'].createElement("span", {
+          className: "plc-rounded-full plc-bg-gray-800 plc-text-white plc-inline-flex plc-h-7 plc-my-auto plc-items-start plc-py-1 plc-px-4 plc-text-sm plc-ml-2"
+        }, this.locale("labels.default")));
+      });
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-pr-2"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-overflow-y-scroll plc-max-h-52"
+      }, sources), /*#__PURE__*/React__default['default'].createElement(Button, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
+          className: "plc-w-4 plc-mr-1"
+        }),
+        className: "plc-w-full plc-h-8 plc-font-semibold plc-tracking-wider plc-text-gray-900 plc-uppercase hover:plc-bg-gray-100 plc-my-1 plc-ml-1",
+        onClick: this.displaySourceCreate
+      }, this.locale("labels.addPaymentSource")));
+    });
     _defineProperty$3(this, "closeDashboard", () => {
       this.setState({
         isOpen: false
@@ -30004,7 +30979,8 @@ class Dashboard extends React.Component {
       subscriptions: window.Pelcro.subscription.list(),
       giftRecipients: (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.gift_recipients) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [],
       disableSubmit: false,
-      addresses: []
+      addresses: [],
+      sources: []
     };
     this.site = window.Pelcro.site.read();
     this.locale = this.props.t;
@@ -30013,7 +30989,7 @@ class Dashboard extends React.Component {
     this.enableReactGA4 = (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableReactGA4;
   }
   render() {
-    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet, _this$user$source, _this$user$source$pro, _this$user$source2, _this$user$source2$pr;
+    var _window$Pelcro$user$r3, _window$Pelcro2, _window$Pelcro2$uiSet;
     const {
       isOpen
     } = this.state;
@@ -30116,25 +31092,7 @@ class Dashboard extends React.Component {
       name: SUB_MENUS.PAYMENT_CARDS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgPaymentCard, null),
       title: this.locale("labels.paymentSource"),
-      content: /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "plc-flex plc-items-center plc-justify-between plc-max-w-xs plc-p-4 plc-mb-2 plc-text-white plc-bg-gray-800 plc-rounded-md plc-h-14"
-      }, this.user.source ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, getPaymentCardIcon((_this$user$source = this.user.source) === null || _this$user$source === void 0 ? void 0 : (_this$user$source$pro = _this$user$source.properties) === null || _this$user$source$pro === void 0 ? void 0 : _this$user$source$pro.brand), /*#__PURE__*/React__default['default'].createElement("span", {
-        className: "plc-ml-1 plc-text-lg plc-tracking-widest"
-      }, "\u2022\u2022\u2022\u2022 ", (_this$user$source2 = this.user.source) === null || _this$user$source2 === void 0 ? void 0 : (_this$user$source2$pr = _this$user$source2.properties) === null || _this$user$source2$pr === void 0 ? void 0 : _this$user$source2$pr.last4), /*#__PURE__*/React__default['default'].createElement(Button, {
-        variant: "icon",
-        className: "plc-text-white",
-        icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
-        onClick: this.displaySourceCreate,
-        disabled: this.state.disableSubmit
-      })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", null, this.locale("messages.noCard")), /*#__PURE__*/React__default['default'].createElement(Button, {
-        variant: "icon",
-        className: "plc-text-white",
-        icon: /*#__PURE__*/React__default['default'].createElement(SvgPlus, {
-          className: "plc-w-6 plc-h-6"
-        }),
-        onClick: this.displaySourceCreate,
-        disabled: this.state.disableSubmit
-      })))
+      content: this.renderSources()
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.ADDRESSES,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgLocationPin, null),
@@ -34191,6 +35149,15 @@ exports.PasswordlessRequestViewButton = PasswordlessRequestViewButton;
 exports.PaymentCreateContainer = PaymentCreateContainer;
 exports.PaymentCreateView = PaymentCreateView;
 exports.PaymentMethodContainer = PaymentMethodContainer;
+exports.PaymentMethodCreateContainer = PaymentMethodCreateContainer;
+exports.PaymentMethodCreateModal = PaymentMethodCreateModal;
+exports.PaymentMethodCreateView = PaymentMethodCreateView;
+exports.PaymentMethodDeleteContainer = PaymentMethodDeleteContainer;
+exports.PaymentMethodDeleteList = PaymentMethodDeleteList;
+exports.PaymentMethodDeleteModal = PaymentMethodDeleteModal;
+exports.PaymentMethodDeleteOptions = PaymentMethodDeleteOptions;
+exports.PaymentMethodDeleteSubmit = PaymentMethodDeleteSubmit;
+exports.PaymentMethodDeleteView = PaymentMethodDeleteView;
 exports.PaymentMethodSelectContainer = PaymentMethodSelectContainer;
 exports.PaymentMethodSelectList = PaymentMethodSelectList;
 exports.PaymentMethodSelectModal = PaymentMethodSelectModal;
@@ -34198,6 +35165,7 @@ exports.PaymentMethodSelectSubmit = PaymentMethodSelectSubmit;
 exports.PaymentMethodSelectView = PaymentMethodSelectView;
 exports.PaymentMethodUpdateContainer = PaymentMethodUpdateContainer;
 exports.PaymentMethodUpdateModal = PaymentMethodUpdateModal;
+exports.PaymentMethodUpdateSetDefault = PaymentMethodUpdateSetDefault;
 exports.PaymentMethodUpdateView = PaymentMethodUpdateView;
 exports.PaymentMethodView = PaymentMethodView;
 exports.PaymentSuccessModal = PaymentSuccessModal;