@pelcro/react-pelcro-js 3.36.0 → 3.38.0

package/dist/index.esm.js

@@ -3333,12 +3333,19 @@ var paymentMethod_en = {
 	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.",
+	subtitle: "Are you sure you want to delete the selected payment method?",
+	details: "Payment method details",
+	message: "This action is irreversible and will permanently remove the payment method from the system. Please ensure that there are no pending transactions or subscriptions associated with this payment method.",
+	buttons: {
+		"delete": "Delete payment method",
+		back: "Go back"
+	},
 	options: {
-		select: "Select an existing payment method",
+		select: "Select a payment method to be the default",
 		add: "Add a new payment method"
 	},
-	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced"
+	paymentMethodReplaced: "Payment Method Successfully Deleted and Replaced",
+	deletedSuccessfully: "Payment Method Successfully Deleted"
 },
 	create: create$5
 };
@@ -9559,6 +9566,17 @@ const getPaymentCardIcon$1 = name => {
     }), /*#__PURE__*/React__default.createElement("path", {
       fill: "#FFF",
       d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
+    })),
+    amex: /*#__PURE__*/React__default.createElement("svg", {
+      className: "plc-w-16",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 48 48"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      fill: "#1976D2",
+      d: "M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      fill: "#FFF",
+      d: "M22.255 20l-2.113 4.683L18.039 20h-2.695v6.726L12.341 20h-2.274L7 26.981h1.815l.671-1.558h3.432l.682 1.558h3.465v-5.185l2.299 5.185h1.563l2.351-5.095v5.095H25V20H22.255zM10.135 23.915l1.026-2.44 1.066 2.44H10.135zM37.883 23.413L41 20.018h-2.217l-1.994 2.164L34.86 20H28v6.982h6.635l2.092-2.311L38.767 27h2.21L37.883 23.413zM33.728 25.516h-4.011v-1.381h3.838v-1.323h-3.838v-1.308l4.234.012 1.693 1.897L33.728 25.516z"
     }))
   };
   return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default.createElement("svg", {
@@ -9610,6 +9628,19 @@ function notifyBugsnag(callback, startOptions) {
   }
   callback();
 }
+const refreshUser = () => {
+  var _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro6$user$;
+  window.Pelcro.user.refresh({
+    auth_token: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : (_window$Pelcro6$user$ = _window$Pelcro6$user.read()) === null || _window$Pelcro6$user$ === void 0 ? void 0 : _window$Pelcro6$user$.auth_token
+  }, (err, res) => {
+    if (err) {
+      console.error(err);
+    }
+    if (res) {
+      return res.data;
+    }
+  });
+};
 
 const resources = {
   en: {
@@ -11575,7 +11606,7 @@ const debounce = (func, waitTime) => {
   };
 };
 function getSiteCardProcessor() {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro$site$r4;
   if ((_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_gateway_settings) {
     return "vantiv";
   }
@@ -11585,6 +11616,9 @@ function getSiteCardProcessor() {
   if ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r3 !== void 0 && _window$Pelcro$site$r3.cybersource_gateway_settings) {
     return "cybersource";
   }
+  if ((_window$Pelcro$site$r4 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r4 !== void 0 && _window$Pelcro$site$r4.braintree_gateway_settings) {
+    return "braintree";
+  }
   return "stripe";
 }
 function getFourDigitYear(lastTwoDigits) {
@@ -11687,6 +11721,7 @@ const loadPaymentSDKs = () => {
   } = usePelcro.getStore();
   const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
   const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+  const supportsBraintree = Boolean(window.Pelcro.site.read().braintree_gateway_settings);
   whenUserReady(() => {
     if (!window.Stripe && !supportsVantiv && !supportsTap) {
       pure_1(window.Pelcro.environment.stripe);
@@ -11696,9 +11731,15 @@ const loadPaymentSDKs = () => {
 
   // Load PayPal SDKs
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
+  if (supportsPaypal || supportsBraintree) {
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/client.min.js", "braintree-sdk");
+  }
   if (supportsPaypal) {
-    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
-    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+  }
+  if (supportsBraintree) {
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/three-d-secure.min.js", "braintree-3D-secure-sdk");
+    window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.99.0/js/hosted-fields.min.js", "braintree-hosted-fields-sdk");
   }
 
   // Load Vantiv SDKs
@@ -12580,8 +12621,8 @@ 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 SHOW_PAYMENT_METHOD_SELECT = "SHOW_PAYMENT_METHOD_SELECT";
 const SET_SUBSCRIPTION_SUSPEND_DATE = "SET_SUBSCRIPTION_SUSPEND_DATE";
 const SET_EMAILS = "SET_EMAILS";
 const SET_EMAILS_ERROR = "SET_EMAILS_ERROR";
@@ -16334,7 +16375,7 @@ var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
 var _generateUserError = /*#__PURE__*/new WeakMap();
 class Payment {
   /**
-   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway|BraintreeGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -16353,7 +16394,7 @@ class Payment {
     _classPrivateFieldInitSpec$1(this, _isPaymentGatewayInvalid, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway || gateway instanceof BraintreeGateway);
       }
     });
     _classPrivateFieldInitSpec$1(this, _generateUserError, {
@@ -16408,7 +16449,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   paypal: "braintree",
   vantiv: "vantiv",
   tap: "tap",
-  cybersource: "cybersource"
+  cybersource: "cybersource",
+  braintree: "braintree"
 };
 
 /**
@@ -17347,6 +17389,218 @@ class CybersourceGateway {
     });
   }
 }
+var _paymentGateway6 = /*#__PURE__*/new WeakMap();
+var _createSubscription6 = /*#__PURE__*/new WeakMap();
+var _renewSubscription5 = /*#__PURE__*/new WeakMap();
+var _createGiftedSubscription6 = /*#__PURE__*/new WeakMap();
+var _renewGiftedSubscription5 = /*#__PURE__*/new WeakMap();
+var _purchaseEcommerceOrder5 = /*#__PURE__*/new WeakMap();
+var _payInvoice6 = /*#__PURE__*/new WeakMap();
+class BraintreeGateway {
+  constructor() {
+    _classPrivateFieldInitSpec$1(this, _paymentGateway6, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["braintree"]
+    });
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = PAYMENT_TYPES;
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription6).call(this, options, callback);
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription5).call(this, options, callback);
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription6).call(this, options, callback);
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription5).call(this, options, callback);
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder5).call(this, options, callback);
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice6).call(this, options, callback);
+        default:
+          console.error("Unsupported payment method: braintree Gateway");
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createSubscription6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createGiftedSubscription6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewGiftedSubscription5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _purchaseEcommerceOrder5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _payInvoice6, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway6),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+}
 
 /**
  * @typedef {Object} PaymentStateType
@@ -17370,6 +17624,7 @@ class CybersourceGateway {
 const initialState$l = {
   disableSubmit: false,
   isLoading: false,
+  isSkeletonLoaded: false,
   disableCouponButton: false,
   couponObject: null,
   couponCode: "",
@@ -18016,52 +18271,620 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /* ====== End Tap integration ======== */
 
-  const submitUsingVantiv = state => {
-    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
-    if (isUsingExistingPaymentMethod) {
-      // no need to create a new source using vantiv
-      return handleVantivPayment(null, state.couponCode);
-    }
-    if (!vantivInstanceRef.current) {
-      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
-    }
-    const orderId = `pelcro-${new Date().getTime()}`;
-    /*     
-    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
-    */
-    vantivInstanceRef.current.getPaypageRegistrationId({
-      id: orderId,
-      orderId: orderId
-    });
-  };
-  function handleVantivPayment(paymentRequest, couponCode) {
-    if (paymentRequest) {
-      const SUCCESS_STATUS = "870";
-      if (paymentRequest.response !== SUCCESS_STATUS) {
-        switch (paymentRequest.response) {
-          case "871":
-            return handlePaymentError({
-              error: new Error("Invalid account number")
-            });
-          default:
-            return handlePaymentError({
-              error: new Error(paymentRequest.message)
-            });
+  /* ====== Start Braintree integration  ======== */
+  const braintreeInstanceRef = React__default.useRef(null);
+  const braintree3DSecureInstanceRef = React__default.useRef(null);
+  function getClientToken() {
+    return new Promise((resolve, reject) => {
+      window.Pelcro.payment.generateClientToken({
+        auth_token: window.Pelcro.user.read().auth_token,
+        site_id: window.Pelcro.siteid
+      }, (error, response) => {
+        if (error) {
+          reject(error);
+        }
+        if (response) {
+          resolve(response.client_token);
         }
+      });
+    });
+  }
+  async function initializeBraintree() {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
+    if (cardProcessor === "braintree" && !selectedPaymentMethodId) {
+      const braintreeToken = await getClientToken();
+      const isBraintreeEnabled = Boolean(braintreeToken);
+      if (!isBraintreeEnabled) {
+        console.error("Braintree integration is currently not enabled on this site's config");
+        return;
       }
-    }
-    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
-    if (type === "createPayment") {
-      handleVantivSubscription();
-    } else if (type === "orderCreate") {
-      purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
-    } else if (type === "invoicePayment") {
-      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
-    } else if (type === "createPaymentSource") {
-      createNewVantivCard();
-    } else if (type === "updatePaymentSource") {
-      updateVantivCard();
-    } else if (type === "deletePaymentSource") {
+      if (type !== "updatePaymentSource") {
+        braintreeInstanceRef.current = new window.braintree.client.create({
+          authorization: braintreeToken
+        }).then(clientInstance => {
+          const options = {
+            authorization: braintreeToken,
+            styles: {
+              input: {
+                "font-size": "14px"
+              },
+              "input.invalid": {
+                color: "red"
+              },
+              "input.valid": {
+                color: "green"
+              }
+            },
+            fields: {
+              number: {
+                container: "#card-number",
+                placeholder: "4111 1111 1111 1111"
+              },
+              cvv: {
+                container: "#cvv",
+                placeholder: "123"
+              },
+              expirationDate: {
+                container: "#expiration-date",
+                placeholder: "10/2022"
+              }
+            }
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          braintree3DSecureInstanceRef.current = new window.braintree.threeDSecure.create({
+            version: 2,
+            authorization: braintreeToken
+          }).then(threeDSecureInstance => {
+            return threeDSecureInstance;
+          });
+          return window.braintree.hostedFields.create(options);
+        });
+        braintreeInstanceRef.current.then(hostedFieldInstance => {
+          hostedFieldInstance.on("notEmpty", function (event) {
+            const field = event.fields[event.emittedBy];
+            if (field.isPotentiallyValid) {
+              field.container.classList.remove("pelcro-input-invalid");
+            }
+          });
+          hostedFieldInstance.on("validityChange", function (event) {
+            const field = event.fields[event.emittedBy];
+
+            // Remove any previously applied error or warning classes
+            field.container.classList.remove("is-valid");
+            field.container.classList.remove("pelcro-input-invalid");
+            if (field.isValid) {
+              field.container.classList.add("is-valid");
+            } else if (field.isPotentiallyValid) ; else {
+              field.container.classList.add("pelcro-input-invalid");
+            }
+          });
+        });
+      } else if (type == "updatePaymentSource" && paymentMethodToEdit) {
+        const {
+          properties
+        } = paymentMethodToEdit !== null && paymentMethodToEdit !== void 0 ? paymentMethodToEdit : {};
+        const {
+          exp_month: expMonth,
+          exp_year: expYear
+        } = properties !== null && properties !== void 0 ? properties : {};
+        braintreeInstanceRef.current = new window.braintree.client.create({
+          authorization: braintreeToken
+        }).then(clientInstance => {
+          const options = {
+            client: clientInstance,
+            styles: {
+              input: {
+                "font-size": "14px"
+              },
+              "input.invalid": {
+                color: "red"
+              },
+              "input.valid": {
+                color: "green"
+              }
+            },
+            fields: {
+              expirationMonth: {
+                container: "#expiration-month",
+                prefill: expMonth
+              },
+              expirationYear: {
+                container: "#expiration-year",
+                prefill: expYear
+              }
+            }
+          };
+          dispatch({
+            type: SKELETON_LOADER,
+            payload: true
+          });
+          return window.braintree.hostedFields.create(options);
+        });
+        braintreeInstanceRef.current.then(hostedFieldInstance => {
+          hostedFieldInstance.on("notEmpty", function (event) {
+            const field = event.fields[event.emittedBy];
+            if (field.isPotentiallyValid) {
+              field.container.classList.remove("pelcro-input-invalid");
+            }
+          });
+          hostedFieldInstance.on("validityChange", function (event) {
+            const field = event.fields[event.emittedBy];
+
+            // Remove any previously applied error or warning classes
+            field.container.classList.remove("is-valid");
+            field.container.classList.remove("pelcro-input-invalid");
+            if (field.isValid) {
+              field.container.classList.add("is-valid");
+            } else if (field.isPotentiallyValid) ; else {
+              field.container.classList.add("pelcro-input-invalid");
+            }
+          });
+        });
+      }
+    }
+  }
+  useEffect(() => {
+    initializeBraintree();
+  }, [selectedPaymentMethodId, paymentMethodToEdit]);
+  const braintreeErrorHandler = tokenizeErr => {
+    var _tokenizeErr$details, _tokenizeErr$details2;
+    const cardNumber = document.querySelector("#card-number");
+    const expirationDate = document.querySelector("#expiration-date");
+    const cvv = document.querySelector("#cvv");
+    const fields = tokenizeErr !== null && tokenizeErr !== void 0 && (_tokenizeErr$details = tokenizeErr.details) !== null && _tokenizeErr$details !== void 0 && _tokenizeErr$details.invalidFields ? Object.values(tokenizeErr === null || tokenizeErr === void 0 ? void 0 : (_tokenizeErr$details2 = tokenizeErr.details) === null || _tokenizeErr$details2 === void 0 ? void 0 : _tokenizeErr$details2.invalidFields) : null;
+    switch (tokenizeErr.code) {
+      case "HOSTED_FIELDS_FIELDS_EMPTY":
+        // occurs when none of the fields are filled in
+        cardNumber.classList.add("pelcro-input-invalid");
+        expirationDate.classList.add("pelcro-input-invalid");
+        cvv.classList.add("pelcro-input-invalid");
+        return "All fields are empty! Please fill out the form.";
+      // break;
+      case "HOSTED_FIELDS_FIELDS_INVALID":
+        // occurs when certain fields do not pass client side validation
+        console.error("Some fields are invalid:", tokenizeErr.details.invalidFieldKeys.toString());
+
+        // you can also programmatically access the field containers for the invalid fields
+        // tokenizeErr.details.invalidFields.forEach(function (
+        //   fieldContainer
+        // ) {
+        //   fieldContainer.className = "invalid";
+        // });
+        fields.forEach(field => {
+          field.classList.add("pelcro-input-invalid");
+        });
+        return `Some fields are invalid: ${tokenizeErr.details.invalidFieldKeys.toString()}`;
+      case "HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE":
+        // occurs when:
+        //   * the client token used for client authorization was generated
+        //     with a customer ID and the fail on duplicate payment method
+        //     option is set to true
+        //   * the card being tokenized has previously been vaulted (with any customer)
+        // See: https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#options.fail_on_duplicate_payment_method
+        return "This payment method already exists in your vault.";
+      case "HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED":
+        // occurs when:
+        //   * the client token used for client authorization was generated
+        //     with a customer ID and the verify card option is set to true
+        //     and you have credit card verification turned on in the Braintree
+        //     control panel
+        //   * the cvv does not pass verification (https://developer.paypal.com/braintree/docs/reference/general/testing#avs-and-cvv/cid-responses)
+        // See: https://developer.paypal.com/braintree/docs/reference/request/client-token/generate#options.verify_card
+        return "CVV did not pass verification";
+      case "HOSTED_FIELDS_FAILED_TOKENIZATION":
+        // occurs for any other tokenization error on the server
+        return "Tokenization failed server side. Is the card valid?";
+      case "HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR":
+        // occurs when the Braintree gateway cannot be contacted
+        return "Network error occurred when tokenizing.";
+      default:
+        console.error("Something bad happened!", tokenizeErr);
+        return "Something bad happened!";
+    }
+  };
+  const submitUsingBraintree = (state, dispatch) => {
+    var _ref6, _ref7, _state$updatedPrice2;
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using braintree
+      return handleBraintreePayment(null, state.couponCode);
+    }
+    if (!braintreeInstanceRef.current) {
+      return console.error("Braintree sdk script wasn't loaded, you need to load braintree sdk before rendering the braintree payment flow");
+    }
+    const getOrderItemsTotal = () => {
+      if (!order) {
+        return null;
+      }
+      const isQuickPurchase = !Array.isArray(order);
+      if (isQuickPurchase) {
+        return order.price * order.quantity;
+      }
+      if (order.length === 0) {
+        return null;
+      }
+      return order.reduce((total, item) => {
+        return total + item.price * item.quantity;
+      }, 0);
+    };
+    const totalAmount = (_ref6 = (_ref7 = (_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 && _ref7 !== void 0 ? _ref7 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref6 !== void 0 ? _ref6 : getOrderItemsTotal();
+    braintreeInstanceRef.current.then(hostedFieldInstance => {
+      hostedFieldInstance.tokenize((tokenizeErr, payload) => {
+        if (tokenizeErr) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: braintreeErrorHandler(tokenizeErr)
+            }
+          });
+        }
+        if (type == "updatePaymentSource" || type == "deletePaymentSource") {
+          handleBraintreePayment(payload, state.couponCode);
+        } else {
+          braintree3DSecureInstanceRef.current.then(threeDSecureInstance => {
+            threeDSecureInstance.verifyCard({
+              onLookupComplete: function (data, next) {
+                next();
+              },
+              amount: totalAmount !== null && totalAmount !== void 0 ? totalAmount : "0.00",
+              nonce: payload.nonce,
+              bin: payload.details.bin
+            }).then(payload => {
+              if (payload.liabilityShifted) {
+                handleBraintreePayment(payload, state.couponCode);
+              } else if (payload.liabilityShiftPossible) {
+                dispatch({
+                  type: DISABLE_SUBMIT,
+                  payload: false
+                });
+                dispatch({
+                  type: LOADING,
+                  payload: false
+                });
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: "We encountered an issue verifying your transaction with 3D Secure, please try again."
+                  }
+                });
+              } else {
+                // Liability has not shifted and will not shift
+                dispatch({
+                  type: DISABLE_SUBMIT,
+                  payload: false
+                });
+                dispatch({
+                  type: LOADING,
+                  payload: false
+                });
+                return dispatch({
+                  type: SHOW_ALERT,
+                  payload: {
+                    type: "error",
+                    content: "We encountered an issue verifying your transaction with 3D Secure, please try another payment method."
+                  }
+                });
+              }
+            }).catch(error => {
+              console.error(error);
+              dispatch({
+                type: DISABLE_SUBMIT,
+                payload: false
+              });
+              dispatch({
+                type: LOADING,
+                payload: false
+              });
+              return dispatch({
+                type: SHOW_ALERT,
+                payload: {
+                  type: "error",
+                  content: "There was a problem with your request."
+                }
+              });
+            });
+          });
+        }
+      });
+    }).catch(error => {
+      if (error) {
+        console.error(error);
+        return;
+      }
+    });
+  };
+  const handleBraintreePayment = (braintreePaymentRequest, couponCode) => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    const braintreeNonce = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.nonce;
+    if (type === "createPayment") {
+      handleBraintreeSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new BraintreeGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce);
+    } else if (type === "createPaymentSource") {
+      createNewBraintreeCard();
+    } else if (type === "updatePaymentSource") {
+      updateBraintreeCard();
+    } else if (type === "deletePaymentSource") {
+      replaceBraintreeCard();
+    }
+    function createNewBraintreeCard() {
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: braintreeNonce,
+        gateway: "braintree"
+      }, (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 replaceBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToDelete;
+      window.Pelcro.paymentMethods.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: braintreeNonce,
+        gateway: "braintree"
+      }, (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 updateBraintreeCard() {
+      const {
+        id: paymentMethodId
+      } = paymentMethodToEdit;
+      const {
+        expirationMonth,
+        expirationYear
+      } = braintreePaymentRequest === null || braintreePaymentRequest === void 0 ? void 0 : braintreePaymentRequest.details;
+      const {
+        isDefault
+      } = state;
+      window.Pelcro.paymentMethods.update({
+        auth_token: window.Pelcro.user.read().auth_token,
+        payment_method_id: paymentMethodId,
+        token: braintreeNonce,
+        gateway: "braintree",
+        exp_month: expirationMonth,
+        exp_year: expirationYear,
+        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);
+      });
+    }
+    function handleBraintreeSubscription() {
+      const payment = new Payment(new BraintreeGateway());
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      if (renewGift) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : braintreeNonce,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+          onSuccess(res);
+        });
+      }
+    }
+  };
+
+  /* ====== End Braintree integration ======== */
+
+  const submitUsingVantiv = state => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using vantiv
+      return handleVantivPayment(null, state.couponCode);
+    }
+    if (!vantivInstanceRef.current) {
+      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    }
+    const orderId = `pelcro-${new Date().getTime()}`;
+    /*     
+    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
+    */
+    vantivInstanceRef.current.getPaypageRegistrationId({
+      id: orderId,
+      orderId: orderId
+    });
+  };
+  function handleVantivPayment(paymentRequest, couponCode) {
+    if (paymentRequest) {
+      const SUCCESS_STATUS = "870";
+      if (paymentRequest.response !== SUCCESS_STATUS) {
+        switch (paymentRequest.response) {
+          case "871":
+            return handlePaymentError({
+              error: new Error("Invalid account number")
+            });
+          default:
+            return handlePaymentError({
+              error: new Error(paymentRequest.message)
+            });
+        }
+      }
+    }
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (type === "createPayment") {
+      handleVantivSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
+    } else if (type === "createPaymentSource") {
+      createNewVantivCard();
+    } else if (type === "updatePaymentSource") {
+      updateVantivCard();
+    } else if (type === "deletePaymentSource") {
       replaceVantivCard();
     }
     function createNewVantivCard() {
@@ -18095,6 +18918,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceCreated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -18149,6 +18973,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -18210,6 +19035,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       });
     }
@@ -18367,13 +19193,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref6 => {
+      paymentRequest.on("source", _ref8 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref6;
+        } = _ref8;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -18388,11 +19214,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
         complete("success");
         if ((source === null || source === void 0 ? void 0 : (_source$card = source.card) === null || _source$card === void 0 ? void 0 : _source$card.three_d_secure) === "required") {
-          return generate3DSecureSource(source).then(_ref7 => {
+          return generate3DSecureSource(source).then(_ref9 => {
             let {
               source,
               error
-            } = _ref7;
+            } = _ref9;
             if (error) {
               return handlePaymentError(error);
             }
@@ -18768,6 +19594,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             type: LOADING,
             payload: false
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18783,6 +19610,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18802,6 +19630,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceUpdated")
             }
           });
+          refreshUser();
           onSuccess(res);
           return;
         }
@@ -18829,6 +19658,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -18860,7 +19690,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
         address_id: product.address_required ? selectedAddressId : null
       }, (err, res) => {
-        if (res.data.setup_intent) {
+        var _res$data;
+        if (res !== null && res !== void 0 && (_res$data = res.data) !== null && _res$data !== void 0 && _res$data.setup_intent) {
           return confirmStripeIntentSetup(res, "subCreate");
         }
         confirmStripeCardPayment(res, err, true);
@@ -19104,11 +19935,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const createPaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref8 => {
+    }).then(_ref10 => {
       let {
         source,
         error
-      } = _ref8;
+      } = _ref10;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19126,7 +19957,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
-        var _res$data, _res$data$setup_inten, _res$data2, _res$data2$setup_inte;
+        var _res$data2, _res$data2$setup_inte, _res$data3, _res$data3$setup_inte;
         if (err) {
           dispatch({
             type: DISABLE_SUBMIT,
@@ -19145,7 +19976,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        if (((_res$data = res.data) === null || _res$data === void 0 ? void 0 : (_res$data$setup_inten = _res$data.setup_intent) === null || _res$data$setup_inten === void 0 ? void 0 : _res$data$setup_inten.status) === "requires_action" || ((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_confirmation") {
+        if (((_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : (_res$data2$setup_inte = _res$data2.setup_intent) === null || _res$data2$setup_inte === void 0 ? void 0 : _res$data2$setup_inte.status) === "requires_action" || ((_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : (_res$data3$setup_inte = _res$data3.setup_intent) === null || _res$data3$setup_inte === void 0 ? void 0 : _res$data3$setup_inte.status) === "requires_confirmation") {
           confirmStripeIntentSetup(res, "create");
         } else {
           dispatch({
@@ -19159,6 +19990,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
               content: t("messages.sourceCreated")
             }
           });
+          refreshUser();
           onSuccess(res);
         }
       });
@@ -19181,7 +20013,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       exp_year: year,
       is_default: isDefault
     }, (err, res) => {
-      var _res$data3, _res$data3$setup_inte, _res$data4, _res$data4$setup_inte;
+      var _res$data4, _res$data4$setup_inte, _res$data5, _res$data5$setup_inte;
       dispatch({
         type: DISABLE_SUBMIT,
         payload: false
@@ -19200,7 +20032,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           }
         });
       }
-      if (((_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : (_res$data3$setup_inte = _res$data3.setup_intent) === null || _res$data3$setup_inte === void 0 ? void 0 : _res$data3$setup_inte.status) === "requires_action" || ((_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$setup_inte = _res$data4.setup_intent) === null || _res$data4$setup_inte === void 0 ? void 0 : _res$data4$setup_inte.status) === "requires_confirmation") {
+      if (((_res$data4 = res.data) === null || _res$data4 === void 0 ? void 0 : (_res$data4$setup_inte = _res$data4.setup_intent) === null || _res$data4$setup_inte === void 0 ? void 0 : _res$data4$setup_inte.status) === "requires_action" || ((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_confirmation") {
         confirmStripeIntentSetup(res, "update");
       } else {
         dispatch({
@@ -19210,6 +20042,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             content: t("messages.sourceUpdated")
           }
         });
+        refreshUser();
         onSuccess(res);
       }
     });
@@ -19220,11 +20053,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     } = paymentMethodToDelete;
     return stripe.createSource({
       type: "card"
-    }).then(_ref9 => {
+    }).then(_ref11 => {
       let {
         source,
         error
-      } = _ref9;
+      } = _ref11;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19242,7 +20075,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         auth_token: window.Pelcro.user.read().auth_token,
         token: source.id
       }, (err, res) => {
-        var _res$data5, _res$data5$setup_inte, _res$data6, _res$data6$setup_inte;
+        var _res$data6, _res$data6$setup_inte, _res$data7, _res$data7$setup_inte;
         if (err) {
           onFailure(err);
           return dispatch({
@@ -19253,7 +20086,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             }
           });
         }
-        if (((_res$data5 = res.data) === null || _res$data5 === void 0 ? void 0 : (_res$data5$setup_inte = _res$data5.setup_intent) === null || _res$data5$setup_inte === void 0 ? void 0 : _res$data5$setup_inte.status) === "requires_action" || ((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_confirmation") {
+        if (((_res$data6 = res.data) === null || _res$data6 === void 0 ? void 0 : (_res$data6$setup_inte = _res$data6.setup_intent) === null || _res$data6$setup_inte === void 0 ? void 0 : _res$data6$setup_inte.status) === "requires_action" || ((_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : (_res$data7$setup_inte = _res$data7.setup_intent) === null || _res$data7$setup_inte === void 0 ? void 0 : _res$data7$setup_inte.status) === "requires_confirmation") {
           confirmStripeIntentSetup(res, "replace", paymentMethodId);
         } else {
           setTimeout(() => {
@@ -19279,6 +20112,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                   }
                 });
               }
+              refreshUser();
               onSuccess(res);
             });
           }, 2000);
@@ -19321,12 +20155,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
     stripe.createSource({
       type: "card"
-    }).then(_ref10 => {
-      var _ref11, _ref12, _state$updatedPrice2;
+    }).then(_ref12 => {
+      var _ref13, _ref14, _state$updatedPrice3;
       let {
         source,
         error
-      } = _ref10;
+      } = _ref12;
       if (error) {
         return handlePaymentError(error);
       }
@@ -19345,7 +20179,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_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();
+      (_ref13 = (_ref14 = (_state$updatedPrice3 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice3 !== void 0 ? _state$updatedPrice3 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref14 !== void 0 ? _ref14 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref13 !== void 0 ? _ref13 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -19374,12 +20208,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         coupon_code: state === null || state === void 0 ? void 0 : state.couponCode,
         address_id: selectedAddressId
       }, (error, res) => {
-        var _res$data7, _res$data8;
+        var _res$data8, _res$data9;
         if (error) {
           return reject(error);
         }
-        const taxAmount = (_res$data7 = res.data) === null || _res$data7 === void 0 ? void 0 : _res$data7.taxes;
-        const totalAmountWithTax = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.total;
+        const taxAmount = (_res$data8 = res.data) === null || _res$data8 === void 0 ? void 0 : _res$data8.taxes;
+        const totalAmountWithTax = (_res$data9 = res.data) === null || _res$data9 === void 0 ? void 0 : _res$data9.total;
         resolve({
           totalAmountWithTax,
           taxAmount
@@ -19527,6 +20361,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           isLoading: action.payload
         });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          isSkeletonLoaded: action.payload
+        });
       case SHOW_COUPON_FIELD:
         return lib_7({
           ...state,
@@ -19564,6 +20403,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           if (getSiteCardProcessor() === "cybersource") {
             return submitUsingCybersource(state, dispatch);
           }
+          if (getSiteCardProcessor() === "braintree") {
+            return submitUsingBraintree(state, dispatch);
+          }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -19952,6 +20794,11 @@ const CheckoutForm = _ref => {
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
+  const {
+    state: {
+      isSkeletonLoaded
+    }
+  } = useContext(store$l);
   if (selectedPaymentMethodId) {
     return null;
   }
@@ -19983,12 +20830,61 @@ const CheckoutForm = _ref => {
       placeholder: "Exp Year *"
     }))));
   }
-  if (cardProcessor === "stripe") {
+  if (cardProcessor === "braintree") {
     if (type === "updatePaymentSource") {
       var _paymentMethodToEdit$;
+      return /*#__PURE__*/React__default.createElement("div", null, isSkeletonLoaded && paymentMethodToEdit ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: "card-number"
+      }, "Card Number *"), /*#__PURE__*/React__default.createElement(Input, {
+        id: "card-number",
+        className: "plc-tracking-widest plc-flex-grow plc-h-12 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.createElement("div", {
+        className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
+      }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: "expiration-month"
+      }, "Expiration Month *"), /*#__PURE__*/React__default.createElement("div", {
+        id: "expiration-month",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: "expiration-year"
+      }, "Expiration Year *"), /*#__PURE__*/React__default.createElement("div", {
+        id: "expiration-year",
+        className: "pelcro-input-field plc-h-12 plc-bg-white"
+      })))) : /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+      }));
+    }
+    return /*#__PURE__*/React__default.createElement("div", null, isSkeletonLoaded ? /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-max-w-[50em]"
+    }, /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: "card-number"
+    }, "Card Number *"), /*#__PURE__*/React__default.createElement("div", {
+      id: "card-number",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-items-start plc-space-x-8 plc-my-6"
+    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: "expiration-date"
+    }, "Expiration Date *"), /*#__PURE__*/React__default.createElement("div", {
+      id: "expiration-date",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("label", {
+      htmlFor: "cvv"
+    }, "CVC *"), /*#__PURE__*/React__default.createElement("div", {
+      id: "cvv",
+      className: "pelcro-input-field plc-h-12 plc-bg-white"
+    })))) : /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded plc-animate-pulse"
+    }));
+  }
+  if (cardProcessor === "stripe") {
+    if (type === "updatePaymentSource") {
+      var _paymentMethodToEdit$2;
       return /*#__PURE__*/React__default.createElement("div", null, paymentMethodToEdit ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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}`,
+        value: `•••• •••• •••• ${paymentMethodToEdit === null || paymentMethodToEdit === void 0 ? void 0 : (_paymentMethodToEdit$2 = paymentMethodToEdit.properties) === null || _paymentMethodToEdit$2 === void 0 ? void 0 : _paymentMethodToEdit$2.last4}`,
         disabled: true
       })) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Input, {
         className: "plc-bg-gray-300 plc-animate-pulse"
@@ -25305,7 +26201,8 @@ const PasswordResetContainer = _ref => {
       email,
       password,
       password_confirmation: confirmPassword,
-      token
+      token,
+      referer: window.location.origin
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -25537,7 +26434,8 @@ const PasswordForgotContainer = _ref => {
       email
     } = _ref2;
     window.Pelcro.password.forgot({
-      email
+      email,
+      referer: window.location.origin
     }, (err, res) => {
       dispatch({
         type: DISABLE_SUBMIT,
@@ -27662,17 +28560,21 @@ const AddressSelectModal = _ref => {
 AddressSelectModal.viewId = "address-select";
 
 const moveDefaultPaymentMethodToStart = paymentMethods => {
-  var _window$Pelcro$user$r;
-  const defaultPaymentMethod = (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.source;
+  const defaultPaymentMethod = getDefaultPaymentMethod(paymentMethods);
   const paymentMethodsWithoutDefault = paymentMethods.filter(paymentMethod => paymentMethod.id !== defaultPaymentMethod.id);
   if (defaultPaymentMethod.status !== "chargeable") {
     return paymentMethodsWithoutDefault;
   }
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
+const getDefaultPaymentMethod = paymentMethods => {
+  const defaultPaymentMethod = paymentMethods.find(paymentMethod => paymentMethod.is_default);
+  return defaultPaymentMethod;
+};
 const initialState$5 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
+  skeletonLoader: true,
   isSubmitting: false,
   alert: {
     type: "error",
@@ -27703,12 +28605,11 @@ const PaymentMethodSelectContainer = _ref => {
     });
     return onSuccess(selectedPaymentMethodId);
   };
-  const getInitialSelectedMethodId = () => {
-    var _window$Pelcro$user$r2;
+  const getInitialSelectedMethodId = paymentMethods => {
     if (selectedPaymentMethodIdFromStore) {
       return selectedPaymentMethodIdFromStore;
     }
-    const defaultMethod = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.source;
+    const defaultMethod = getDefaultPaymentMethod(paymentMethods);
     if (defaultMethod && defaultMethod.status === "chargeable") {
       return String(defaultMethod.id);
     }
@@ -27725,7 +28626,12 @@ const PaymentMethodSelectContainer = _ref => {
         return lib_7({
           ...state,
           paymentMethods: moveDefaultPaymentMethodToStart(action.payload),
-          selectedPaymentMethodId: getInitialSelectedMethodId()
+          selectedPaymentMethodId: getInitialSelectedMethodId(action.payload)
+        });
+      case SKELETON_LOADER:
+        return lib_7({
+          ...state,
+          skeletonLoader: action.payload
         });
       case HANDLE_SUBMIT:
         return lib_5({
@@ -27737,10 +28643,23 @@ const PaymentMethodSelectContainer = _ref => {
     }
   }, initialState$5);
   useEffect(() => {
-    var _window$Pelcro$user$r3;
-    dispatch({
-      type: LOAD_PAYMENT_METHODS,
-      payload: (_window$Pelcro$user$r3 = window.Pelcro.user.read().sources) !== null && _window$Pelcro$user$r3 !== void 0 ? _window$Pelcro$user$r3 : []
+    window.Pelcro.paymentMethods.list({
+      auth_token: window.Pelcro.user.read().auth_token
+    }, (err, res) => {
+      if (err) {
+        return console.error(err);
+      }
+      if (res) {
+        var _res$data;
+        dispatch({
+          type: LOAD_PAYMENT_METHODS,
+          payload: (_res$data = res.data) !== null && _res$data !== void 0 ? _res$data : []
+        });
+        dispatch({
+          type: SKELETON_LOADER,
+          payload: false
+        });
+      }
     });
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -27769,7 +28688,8 @@ const PaymentMethodSelectList = () => {
     dispatch,
     state: {
       paymentMethods,
-      selectedPaymentMethodId
+      selectedPaymentMethodId,
+      skeletonLoader
     }
   } = useContext(store$5);
   const handlePaymentMethodSelect = event => {
@@ -27778,7 +28698,9 @@ const PaymentMethodSelectList = () => {
       payload: event.target.value
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-h-20 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default.createElement("div", {
     className: "plc-px-3 plc-py-2 plc-space-y-4 plc-overflow-y-scroll plc-max-h-80 pelcro-payment-method-select-wrapper"
   }, paymentMethods.map(paymentMethod => {
     var _paymentMethod$proper, _paymentMethod$proper2, _paymentMethod$proper3, _paymentMethod$proper4;
@@ -27801,7 +28723,7 @@ const PaymentMethodSelectList = () => {
     }, "\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.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))));
-  }));
+  })));
 };
 
 const PaymentMethodSelectSubmit = _ref => {
@@ -27903,10 +28825,10 @@ const initialState$4 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
-  deleteOption: "",
-  disableSubmit: false,
+  disableSubmit: true,
   isLoading: false,
   skeletonLoader: true,
+  showPaymentMethodSelect: false,
   alert: {
     type: "error",
     content: ""
@@ -27943,20 +28865,19 @@ const PaymentMethodDeleteContainer = _ref => {
           type: SKELETON_LOADER,
           payload: false
         });
-        if (res.data.length !== 1) {
-          dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "select"
-          });
-        } else {
+        if (res.data.length !== 1 && paymentMethodToDelete.is_default && paymentMethodToDelete.deletable) {
           dispatch({
-            type: SET_DELETE_PAYMENT_METHOD_OPTION,
-            payload: "add"
+            type: SHOW_PAYMENT_METHOD_SELECT,
+            payload: true
           });
         }
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
       }
     });
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [paymentMethodToDelete]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const setDefaultPaymentMethod = () => {
     const {
@@ -27968,6 +28889,15 @@ const PaymentMethodDeleteContainer = _ref => {
       is_default: true
     }, (err, res) => {
       if (err) {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        console.log(err);
         onFailure(err);
         return dispatch({
           type: SHOW_ALERT,
@@ -27990,6 +28920,14 @@ const PaymentMethodDeleteContainer = _ref => {
       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({
@@ -28000,14 +28938,6 @@ const PaymentMethodDeleteContainer = _ref => {
           }
         });
       }
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
       onSuccess(res);
     });
   };
@@ -28023,11 +28953,12 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           disableSubmit: true,
           isLoading: true
-        }, (state, dispatch) => setDefaultPaymentMethod());
-      case SET_DELETE_PAYMENT_METHOD_OPTION:
-        return lib_7({
-          ...state,
-          deleteOption: action.payload
+        }, (state, dispatch) => {
+          if (state.showPaymentMethodSelect) {
+            setDefaultPaymentMethod();
+          } else {
+            deletePaymentMethod();
+          }
         });
       case SET_PAYMENT_METHODS:
         return lib_7({
@@ -28054,6 +28985,11 @@ const PaymentMethodDeleteContainer = _ref => {
           ...state,
           skeletonLoader: action.payload
         });
+      case SHOW_PAYMENT_METHOD_SELECT:
+        return lib_7({
+          ...state,
+          showPaymentMethodSelect: action.payload
+        });
       default:
         return state;
     }
@@ -28076,6 +29012,91 @@ const PaymentMethodDeleteContainer = _ref => {
   })));
 };
 
+const PaymentMethodDeleteList = props => {
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    dispatch,
+    state: {
+      selectedPaymentMethodId,
+      paymentMethods,
+      skeletonLoader,
+      showPaymentMethodSelect
+    }
+  } = useContext(store$4);
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  const createPaymentMethodItems = () => {
+    if (paymentMethods.length) {
+      return paymentMethods.filter(paymentMethod => (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) !== (paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id)).map(paymentMethod => /*#__PURE__*/React__default.createElement("option", {
+        key: paymentMethod.id,
+        value: paymentMethod.id
+      }, paymentMethod.properties.brand, " -", " ", paymentMethod.properties.last4, " -", " ", paymentMethod.properties.exp_month, " /", paymentMethod.properties.exp_year));
+    }
+  };
+  const handlePaymentMethodSelect = event => {
+    dispatch({
+      type: SELECT_PAYMENT_METHOD,
+      payload: event.target.value
+    });
+  };
+  if (showPaymentMethodSelect) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-full plc-h-8 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-mt-4"
+    }, /*#__PURE__*/React__default.createElement(Select, {
+      label: t("delete.options.select"),
+      name: "default-payment-method",
+      onChange: handlePaymentMethodSelect,
+      value: selectedPaymentMethodId
+    }, /*#__PURE__*/React__default.createElement("option", {
+      value: "",
+      disabled: true,
+      selected: true
+    }), createPaymentMethodItems()))));
+  } else {
+    return null;
+  }
+};
+
+const PaymentMethodDetails = () => {
+  var _paymentMethodToDelet, _paymentMethodToDelet2, _paymentMethodToDelet3, _paymentMethodToDelet4;
+  const {
+    state: {
+      skeletonLoader
+    }
+  } = useContext(store$4);
+  const {
+    t
+  } = useTranslation("paymentMethod");
+  const {
+    paymentMethodToDelete
+  } = usePelcro();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-text-left plc-mr-auto plc-mb-6"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-mb-2"
+  }, t("delete.details")), skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-h-16 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethodToDelete && /*#__PURE__*/React__default.createElement("div", {
+    key: paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id,
+    className: `plc-p-2 plc-pl-4 plc-shadow-md_dark plc-text-gray-900 plc-rounded pelcro-payment-method-wrapper`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-items-center plc-space-x-2 plc-w-full pelcro-select-payment-method-radio",
+    id: `pelcro-payment-method-select-${paymentMethodToDelete === null || paymentMethodToDelete === void 0 ? void 0 : paymentMethodToDelete.id}`,
+    name: "paymentMethod"
+  }, getPaymentCardIcon$1((_paymentMethodToDelet = paymentMethodToDelete.properties) === null || _paymentMethodToDelet === void 0 ? void 0 : _paymentMethodToDelet.brand), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-font-semibold"
+  }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022", " ", (_paymentMethodToDelet2 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet2 === void 0 ? void 0 : _paymentMethodToDelet2.last4), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm plc-text-gray-500"
+  }, t("select.expires"), " ", (_paymentMethodToDelet3 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet3 === void 0 ? void 0 : _paymentMethodToDelet3.exp_month, "/", (_paymentMethodToDelet4 = paymentMethodToDelete.properties) === null || _paymentMethodToDelet4 === void 0 ? void 0 : _paymentMethodToDelet4.exp_year))))));
+};
+
 const PaymentMethodDeleteSubmit = _ref => {
   let {
     name,
@@ -28089,7 +29110,9 @@ const PaymentMethodDeleteSubmit = _ref => {
     dispatch,
     state: {
       isLoading,
-      isDisabled
+      disableSubmit,
+      showPaymentMethodSelect,
+      selectedPaymentMethodId
     }
   } = useContext(store$4);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
@@ -28099,116 +29122,38 @@ const PaymentMethodDeleteSubmit = _ref => {
       });
       onClick === null || onClick === void 0 ? void 0 : onClick();
     },
-    disabled: isDisabled,
+    disabled: showPaymentMethodSelect ? !selectedPaymentMethodId : disableSubmit,
     isLoading: isLoading,
     className: "plc-w-full"
-  }, otherProps), name !== null && name !== void 0 ? name : t("select.buttons.selectPaymentMethod"));
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.delete"));
 };
 
-const PaymentMethodDeleteList = props => {
+const PaymentMethodDeleteBack = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
   const {
     t
   } = useTranslation("paymentMethod");
   const {
-    dispatch,
-    state: {
-      deleteOption,
-      selectedPaymentMethodId,
-      paymentMethods,
-      skeletonLoader
-    }
-  } = useContext(store$4);
-  const {
-    paymentMethodToDelete
+    switchView
   } = usePelcro();
-  const handlePaymentMethodSelect = event => {
-    dispatch({
-      type: SELECT_PAYMENT_METHOD,
-      payload: event.target.value
-    });
-  };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-full plc-h-40 plc-bg-gray-300 plc-rounded-md plc-animate-pulse"
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && deleteOption === "select" && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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.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.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.createElement("div", {
-      className: "plc-flex plc-flex-col plc-text-lg pelcro-payment-method-details"
-    }, /*#__PURE__*/React__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.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.createElement("div", {
-    className: "plc-px-3"
-  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null))), deleteOption === "add" && /*#__PURE__*/React__default.createElement(PaymentMethodView, {
-    type: "deletePaymentSource",
-    showCoupon: false,
-    showExternalPaymentMethods: false,
-    showApplePayButton: false,
-    onDisplay: props.onDisplay,
-    onFailure: props.onFailure,
-    onSuccess: props.onSuccess,
-    setAsDefault: true
-  })));
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    variant: "outline",
+    onClick: () => {
+      switchView("dashboard");
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    className: "plc-w-full"
+  }, otherProps), name !== null && name !== void 0 ? name : t("delete.buttons.back"));
 };
 
-const PaymentMethodDeleteOptions = _ref => {
-  const {
-    state: {
-      deleteOption,
-      paymentMethods,
-      skeletonLoader
-    },
-    dispatch
-  } = useContext(store$4);
+function PaymentMethodDeleteView(props) {
   const {
     t
   } = useTranslation("paymentMethod");
-  const handleOptionSelect = event => {
-    dispatch({
-      type: SET_DELETE_PAYMENT_METHOD_OPTION,
-      payload: event.target.value
-    });
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-text-left plc-mr-auto plc-mb-6"
-  }, skeletonLoader ? /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-flex plc-flex-col plc-space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Radio, {
-    className: "plc-animate-puls"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  })), /*#__PURE__*/React__default.createElement(Radio, {
-    className: "plc-animate-pulse"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "plc-w-36 plc-bg-gray-300 plc-h-4 plc-rounded-md plc-animate-pulse"
-  }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentMethods && paymentMethods.length !== 1 && /*#__PURE__*/React__default.createElement(Radio, {
-    onChange: handleOptionSelect,
-    checked: deleteOption === "select",
-    value: "select"
-  }, t("delete.options.select")), /*#__PURE__*/React__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.createElement("div", {
     id: "pelcro-payment-method-delete-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -28216,12 +29161,12 @@ function PaymentMethodDeleteView(props) {
   }, /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-2xl plc-font-semibold plc-mb-2"
   }, t("delete.title")), /*#__PURE__*/React__default.createElement("p", {
-    className: ""
-  }, t("delete.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, {
-    className: "plc-mb-2"
-  }), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteOptions, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, {
-    onSuccess: props.onSuccess
-  })));
+    className: "plc-text-sm"
+  }, t("delete.subtitle"))), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteContainer, props, /*#__PURE__*/React__default.createElement(AlertWithContext, null), /*#__PURE__*/React__default.createElement(PaymentMethodDetails, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteList, null), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-sm plc-text-justify"
+  }, t("delete.message")), /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-space-x-0 plc-space-y-3 plc-w-full plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default.createElement(PaymentMethodDeleteSubmit, null), /*#__PURE__*/React__default.createElement(PaymentMethodDeleteBack, null))));
 }
 
 const PaymentMethodDeleteModal = props => {
@@ -28248,7 +29193,7 @@ const PaymentMethodDeleteModal = props => {
         nonInteraction: true
       });
     }
-    notify$1.success(t("delete.paymentMethodReplaced"));
+    notify$1.success(t("delete.deletedSuccessfully"));
     resetView();
   };
   return /*#__PURE__*/React__default.createElement(Modal, {
@@ -29434,6 +30379,14 @@ const getPaymentCardIcon = name => {
       viewBox: "0 0 50 50"
     }, /*#__PURE__*/React__default.createElement("path", {
       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"
+    })),
+    amex: /*#__PURE__*/React__default.createElement("svg", {
+      className: "plc-w-12",
+      fill: "#ffffff",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 50 50"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      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 (_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.createElement("svg", {
@@ -30760,23 +31713,8 @@ class Dashboard extends Component {
       });
     });
     _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");
-      }
+      this.props.setPaymentMethodToDelete(source.id);
+      return this.props.setView("payment-method-delete");
     });
     _defineProperty$3(this, "displayRedeem", () => {
       return this.props.setView("gift-redeem");
@@ -35121,4 +36059,4 @@ const QrCodeModal = _ref => {
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteOptions, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodCreateContainer, PaymentMethodCreateModal, PaymentMethodCreateView, PaymentMethodDeleteContainer, PaymentMethodDeleteList, PaymentMethodDeleteModal, PaymentMethodDeleteSubmit, PaymentMethodDeleteView, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateSetDefault, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };