@pelcro/react-pelcro-js 3.7.0 → 3.8.0

package/dist/index.esm.js

@@ -4905,7 +4905,8 @@ var messages$h = {
 	successfully: "avec succès.",
 	sourceUpdated: "Vos informations de paiement ont été mises à jour",
 	cardAuthFailed: "Nous ne parvenons pas à authentifier votre mode de paiement. Veuillez choisir un autre mode de paiement et essayer à nouveau.",
-	cardAuthNotSupported: "Votre carte ne peut être mise à jour puisqu'elle nécessite une authentification. Veuillez utiliser un autre mode de paiement ou contacter le service client."
+	cardAuthNotSupported: "Votre carte ne peut être mise à jour puisqu'elle nécessite une authentification. Veuillez utiliser un autre mode de paiement ou contacter le service client.",
+	tryAgainFromInvoice: "Nous n'avons pas pu authentifier votre paiement, mais votre abonnement a été créé. Veuillez essayer de payer la facture en utilisant un autre mode de paiement depuis le tableau de bord."
 };
 var errors$2 = {
 	"": ""
@@ -4945,7 +4946,8 @@ var messages$g = {
 	successfully: "successfully",
 	sourceUpdated: "Your payment information has been updated",
 	cardAuthFailed: "We are unable to authenticate your payment method. Please choose a different payment method and try again.",
-	cardAuthNotSupported: "Updating your payment method to one that requires authentication is currently not possible. Please use a different payment method or contact customer service."
+	cardAuthNotSupported: "Updating your payment method to one that requires authentication is currently not possible. Please use a different payment method or contact customer service.",
+	tryAgainFromInvoice: "We were unable to authenticate your payment, however your subscription was created. Please attempt to pay for the invoice using another payment method from the dashboard."
 };
 var errors$1 = {
 	"": ""
@@ -4985,7 +4987,8 @@ var messages$f = {
 	successfully: "님께 성공적으로 전송되었습니다.",
 	sourceUpdated: "귀하의 결제 정보가 업데이트되었습니다.",
 	cardAuthFailed: "해당 결제 수단은 인증할 수 없습니다. 다른 결제 수단을 선택하여 다시 시도해보시기 바랍니다.",
-	cardAuthNotSupported: "인증이 요구되는 결제 수단으로의 업데이트는 현재 지원되지 않습니다. 다른 결제 수단을 이용하거나 고객센터로 문의하시기 바랍니다."
+	cardAuthNotSupported: "인증이 요구되는 결제 수단으로의 업데이트는 현재 지원되지 않습니다. 다른 결제 수단을 이용하거나 고객센터로 문의하시기 바랍니다.",
+	tryAgainFromInvoice: "결제를 인증할 수 없지만 구독이 생성되었습니다. 대시보드에서 다른 결제 수단을 사용하여 인보이스 결제를 시도하세요."
 };
 var errors = {
 	"": ""
@@ -5008,7 +5011,8 @@ var labels$h = {
 		active: "Active",
 		inTrial: "In trial",
 		endingSoon: "Ending soon",
-		scheduled: "Scheduled"
+		scheduled: "Scheduled",
+		incomplete: "Incomplete"
 	},
 	shipments: "Shipments remaining",
 	logout: "Logout",
@@ -5108,9 +5112,10 @@ var labels$g = {
 	status: {
 		title: "Statut",
 		active: "Active",
-		inTrial: "Dans l'essai",
-		endingSoon: "Fin bientôt",
-		scheduled: "Programmé"
+		inTrial: "En essai",
+		endingSoon: "Expire bientôt",
+		scheduled: "Programmé",
+		incomplete: "Incomplet"
 	},
 	shipments: "Expéditions restantes",
 	logout: "Déconnexion",
@@ -5212,7 +5217,8 @@ var labels$f = {
 		active: "활성화",
 		inTrial: "체험판 사용",
 		endingSoon: "만료 예정",
-		scheduled: "예약"
+		scheduled: "예약",
+		incomplete: "불완전한"
 	},
 	shipments: "남은 배송 일정",
 	logout: "로그아웃",
@@ -7369,7 +7375,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "logout", () => {
+    _defineProperty$3(this, "logout", (displayLogin = true) => {
       var _ReactGA$event;
 
       const {
@@ -7389,7 +7395,10 @@ class PelcroActions {
         nonInteraction: true
       });
       resetView();
-      switchView("login");
+
+      if (displayLogin) {
+        switchView("login");
+      }
     });
 
     _defineProperty$3(this, "addToCart", itemSkuId => {
@@ -7891,10 +7900,10 @@ const getEntitlementsFromElem = elem => {
   return elem.dataset.pelcroEntitlements.split(",").map(entitlement => entitlement.trim()).filter(entitlement => entitlement);
 };
 const getPaymentCardIcon$1 = name => {
-  var _icons$name;
+  var _icons$name$toLowerCa;
 
   const icons = {
-    Visa: /*#__PURE__*/React__default.createElement("svg", {
+    visa: /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 48 48"
@@ -7905,7 +7914,7 @@ const getPaymentCardIcon$1 = name => {
       fill: "#FFC107",
       d: "M12.212,24.945l-0.966-4.748c0,0-0.437-1.029-1.573-1.029c-1.136,0-4.44,0-4.44,0S10.894,20.84,12.212,24.945z"
     })),
-    MasterCard: /*#__PURE__*/React__default.createElement("svg", {
+    mastercard: /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 48 48"
@@ -7919,7 +7928,7 @@ const getPaymentCardIcon$1 = name => {
       fill: "#ff3d00",
       d: "M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z"
     })),
-    "American Express": /*#__PURE__*/React__default.createElement("svg", {
+    "american express": /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 48 48"
@@ -7931,7 +7940,7 @@ const getPaymentCardIcon$1 = name => {
       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 (_icons$name = icons[name]) !== null && _icons$name !== void 0 ? _icons$name : /*#__PURE__*/React__default.createElement("svg", {
+  return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-16",
     fill: "none",
@@ -9942,12 +9951,16 @@ const debounce = (func, waitTime) => {
   };
 };
 function getSiteCardProcessor() {
-  var _window$Pelcro$site$r;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
 
   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";
   }
 
+  if ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r2 !== void 0 && _window$Pelcro$site$r2.tap_gateway_settings) {
+    return "tap";
+  }
+
   return "stripe";
 }
 
@@ -10053,6 +10066,14 @@ const loadPaymentSDKs = () => {
       const scriptUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? PRODUCTION_URL : PRELIVE_URL;
       window.Pelcro.helpers.loadSDK(scriptUrlToUse, "vantiv-eprotect-sdk");
     }
+  } // Load Tap SDKs
+
+
+  const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+
+  if (supportsTap) {
+    window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
+    window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
   }
 };
 const loadAuth0SDK = () => {
@@ -14165,7 +14186,7 @@ var _generateUserError = /*#__PURE__*/new WeakMap();
 
 class Payment {
   /**
-   * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -14186,7 +14207,7 @@ class Payment {
     _isPaymentGatewayInvalid.set(this, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway);
       }
     });
 
@@ -14241,7 +14262,8 @@ class Payment {
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
   paypal: "braintree",
-  vantiv: "vantiv"
+  vantiv: "vantiv",
+  tap: "tap"
 };
 /**
  * Payment Strategies
@@ -14809,6 +14831,241 @@ class VantivGateway {
 
 }
 
+var _paymentGateway4 = /*#__PURE__*/new WeakMap();
+
+var _createSubscription4 = /*#__PURE__*/new WeakMap();
+
+var _renewSubscription3 = /*#__PURE__*/new WeakMap();
+
+var _createGiftedSubscription4 = /*#__PURE__*/new WeakMap();
+
+var _renewGiftedSubscription3 = /*#__PURE__*/new WeakMap();
+
+var _purchaseEcommerceOrder3 = /*#__PURE__*/new WeakMap();
+
+var _payInvoice4 = /*#__PURE__*/new WeakMap();
+
+class TapGateway {
+  constructor() {
+    _paymentGateway4.set(this, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["tap"]
+    });
+
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = PAYMENT_TYPES;
+
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription4).call(this, options, callback);
+
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription3).call(this, options, callback);
+
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription4).call(this, options, callback);
+
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription3).call(this, options, callback);
+
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder3).call(this, options, callback);
+
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice4).call(this, options, callback);
+
+        default:
+          console.error("Unsupported payment method: tap Gateway");
+      }
+    });
+
+    _createSubscription4.set(this, {
+      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, _paymentGateway4),
+          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);
+        });
+      }
+    });
+
+    _renewSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway4),
+          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);
+        });
+      }
+    });
+
+    _createGiftedSubscription4.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          giftRecipient,
+          quantity = 1,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway4),
+          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);
+        });
+      }
+    });
+
+    _renewGiftedSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway4),
+          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);
+        });
+      }
+    });
+
+    _purchaseEcommerceOrder3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway4),
+          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);
+        });
+      }
+    });
+
+    _payInvoice4.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway4),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+
+}
+
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -14853,55 +15110,324 @@ const {
   Provider: Provider$j
 } = store$j;
 
-const PaymentMethodContainerWithoutStripe = ({
-  style,
-  className = "",
-  children,
-  stripe,
-  type,
-  onSuccess = () => {},
-  onGiftRenewalSuccess = () => {},
-  onFailure = () => {},
-  ...props
-}) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice;
+const PaymentMethodContainerWithoutStripe = ({
+  style,
+  className = "",
+  children,
+  stripe,
+  type,
+  onSuccess = () => {},
+  onGiftRenewalSuccess = () => {},
+  onFailure = () => {},
+  ...props
+}) => {
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice;
+
+  const {
+    t
+  } = useTranslation("payment");
+  const pelcroStore = usePelcro();
+  const {
+    set,
+    order,
+    selectedPaymentMethodId,
+    couponCode
+  } = usePelcro();
+  const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
+  const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
+  const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
+  const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
+  const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
+  const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
+  const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
+  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
+  useEffect(() => {
+    if (window.Pelcro.coupon.getFromUrl()) {
+      dispatch({
+        type: UPDATE_COUPON_CODE,
+        payload: window.Pelcro.coupon.getFromUrl()
+      });
+    } else if (couponCode) {
+      dispatch({
+        type: UPDATE_COUPON_CODE,
+        payload: couponCode
+      });
+    }
+
+    dispatch({
+      type: INIT_CONTAINER
+    });
+    updateTotalAmountWithTax();
+  }, []);
+  /*====== Start Tap integration ========*/
+
+  const submitUsingTap = () => {
+    var _ref, _ref2, _state$updatedPrice;
+
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using tap
+      return handleTapPayment(null);
+    }
+
+    if (!tapInstanceRef.current) {
+      return console.error("Tap sdk script wasn't loaded, you need to load tap sdk before rendering the tap 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 = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
+    tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
+      if (result.error) {
+        // Inform the user if there was an error
+        onFailure(result.error);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(result.error)
+          }
+        });
+      } else {
+        console.log("Tap API Call result", result);
+        window.Pelcro.payment.authorize({
+          auth_token: window.Pelcro.user.read().auth_token,
+          site_id: window.Pelcro.siteid,
+          amount: totalAmount,
+          currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
+          tap_token: result.id,
+          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}`
+        }, (err, res) => {
+          if (err) {
+            // Inform the user if there was an error
+            onFailure(err);
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: false
+            });
+            dispatch({
+              type: LOADING,
+              payload: false
+            });
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
+              }
+            });
+          } else {
+            toggleAuthenticationPendingView(true, res);
+
+            const listenFor3DSecureCompletionMessage = () => {
+              const retrieveSourceInfoFromIframe = event => {
+                const {
+                  data
+                } = event;
+
+                if (data.message === "3DS-authentication-complete") {
+                  const tapID = data.tapID;
+                  toggleAuthenticationPendingView(false);
+                  window.removeEventListener("message", retrieveSourceInfoFromIframe);
+                  dispatch({
+                    type: SHOW_ALERT,
+                    payload: {
+                      type: "error",
+                      content: null
+                    }
+                  });
+                  handleTapPayment(tapID);
+                }
+              }; // listen to injected iframe for authentication complete message
+
+
+              window.addEventListener("message", retrieveSourceInfoFromIframe);
+            };
+
+            listenFor3DSecureCompletionMessage();
+          }
+        });
+      }
+    });
+  };
+
+  function handleTapPayment(paymentRequest) {
+    // 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") {
+      handleTapSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new TapGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
+    } else if (type === "updatePaymentSource") {
+      createNewTapCard();
+    }
+
+    function createNewTapCard() {
+      window.Pelcro.source.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "tap"
+      }, (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 handleTapSubscription() {
+      const payment = new Payment(new TapGateway());
+      const createSubscription = !isGift && !subscriptionIdToRenew;
+      const renewSubscription = !isGift && subscriptionIdToRenew;
+      const giftSubscriprition = isGift && !subscriptionIdToRenew;
+      const renewGift = isRenewingGift;
+      const {
+        couponCode
+      } = state;
+
+      if (renewGift) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (giftSubscriprition) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_GIFTED_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          giftRecipient,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      } else if (renewSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.RENEW_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          subscriptionIdToRenew,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
 
-  const {
-    t
-  } = useTranslation("payment");
-  const pelcroStore = usePelcro();
-  const {
-    set,
-    order,
-    selectedPaymentMethodId,
-    couponCode
-  } = usePelcro();
-  const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
-  const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
-  const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
-  const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
-  const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
-  const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
-  const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
-  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
-  useEffect(() => {
-    if (window.Pelcro.coupon.getFromUrl()) {
-      dispatch({
-        type: UPDATE_COUPON_CODE,
-        payload: window.Pelcro.coupon.getFromUrl()
-      });
-    } else if (couponCode) {
-      dispatch({
-        type: UPDATE_COUPON_CODE,
-        payload: couponCode
-      });
+          onSuccess(res);
+        });
+      } else if (createSubscription) {
+        return payment.execute({
+          type: PAYMENT_TYPES.CREATE_SUBSCRIPTION,
+          token: isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest,
+          quantity: plan.quantity,
+          plan,
+          couponCode,
+          product,
+          isExistingSource: isUsingExistingPaymentMethod,
+          addressId: selectedAddressId
+        }, (err, res) => {
+          if (err) {
+            return handlePaymentError(err);
+          }
+
+          onSuccess(res);
+        });
+      }
     }
+  }
+  /*====== End Tap integration ========*/
 
-    dispatch({
-      type: INIT_CONTAINER
-    });
-    updateTotalAmountWithTax();
-  }, []);
 
   const submitUsingVantiv = () => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -14952,7 +15478,7 @@ const PaymentMethodContainerWithoutStripe = ({
     } else if (type === "orderCreate") {
       purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
-      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
+      payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
     } else if (type === "updatePaymentSource") {
       createNewVantivCard();
     }
@@ -15079,6 +15605,8 @@ const PaymentMethodContainerWithoutStripe = ({
   }
 
   const vantivInstanceRef = React__default.useRef(null);
+  const tapInstanceRef = React__default.useRef(null);
+  const tapInstanceCard = React__default.useRef(null);
   useEffect(() => {
     const cardProcessor = getSiteCardProcessor();
 
@@ -15102,9 +15630,77 @@ const PaymentMethodContainerWithoutStripe = ({
           accountNumber: "1234 1234 1234 1234"
         },
         enhancedUxFeatures: {
-          inlineFieldValidations: true
+          inlineFieldValidations: true,
+          expDateValidation: true,
+          numericInputsOnly: true
+        }
+      });
+    }
+
+    if (cardProcessor === "tap" && !selectedPaymentMethodId) {
+      var _window$Pelcro$site$r3;
+
+      const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
+      let elements = tapKey.elements({});
+      let style = {
+        base: {
+          color: "#535353",
+          lineHeight: "18px",
+          fontFamily: "sans-serif",
+          fontSmoothing: "antialiased",
+          fontSize: "16px",
+          "::placeholder": {
+            color: "rgba(0, 0, 0, 0.26)",
+            fontSize: "15px"
+          }
+        },
+        invalid: {
+          color: "red"
         }
+      }; // input labels/placeholders
+
+      let labels = {
+        cardNumber: "Card Number",
+        expirationDate: "MM/YY",
+        cvv: "CVV",
+        cardHolder: "Card Holder Name"
+      }; //payment options
+
+      let paymentOptions = {
+        labels: labels,
+        TextDirection: "ltr"
+      }; //create element, pass style and payment options
+
+      let card = elements.create("card", {
+        style: style
+      }, paymentOptions); //mount element
+
+      card.mount("#tapPaymentIframe"); //card change event listener
+
+      card.addEventListener("change", function (event) {// if (event.error_interactive) {
+        //   onFailure(event.error_interactive);
+        //   return dispatch({
+        //     type: SHOW_ALERT,
+        //     payload: {
+        //       type: "error",
+        //       content: getErrorMessages(event.error_interactive)
+        //     }
+        //   });
+        // } else {
+        //   dispatch({
+        //     type: SHOW_ALERT,
+        //     payload: { type: "error", content: "" }
+        //   });
+        // }
+        // let displayError = document.getElementById("error-handler");
+        // if (event.error) {
+        //   displayError.textContent = event.error.message;
+        // } else {
+        //   displayError.textContent = "";
+        // }
       });
+      tapInstanceRef.current = tapKey;
+      tapInstanceCard.current = card;
     }
   }, [selectedPaymentMethodId]);
 
@@ -15178,9 +15774,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r3;
+    var _window$Pelcro$site$r4;
 
-    const taxesEnabled = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -15407,6 +16003,97 @@ const PaymentMethodContainerWithoutStripe = ({
       updateTotalAmountWithTax();
     }
   };
+  /**
+   * Attempt to confirm a Stripe card payment via it's PaymentIntent.
+   * Only trigger method if PaymentIntent status is `requires_action`.
+   *
+   * @see https://stripe.com/docs/payments/intents#intent-statuses
+   *
+   * @param response
+   * @param error
+   * @returns {*}
+   */
+
+
+  const confirmStripeCardPayment = (response, error, isSubCreate = false) => {
+    if (response) {
+      var _response$data;
+
+      const paymentIntent = (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.payment_intent;
+
+      if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "requires_action" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
+        stripe.confirmCardPayment(paymentIntent.client_secret).then(res => {
+          if (!isSubCreate) {
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: false
+            });
+          }
+
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+
+          if (res.error) {
+            onFailure(res.error);
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: isSubCreate ? t("messages.tryAgainFromInvoice") : getErrorMessages(res.error)
+              }
+            });
+          }
+
+          onSuccess(res);
+        });
+      } else if ((paymentIntent === null || paymentIntent === void 0 ? void 0 : paymentIntent.status) === "requires_payment_method" && paymentIntent !== null && paymentIntent !== void 0 && paymentIntent.client_secret) {
+        if (!isSubCreate) {
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+        }
+
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: isSubCreate ? t("messages.tryAgainFromInvoice") : t("messages.cardAuthFailed")
+          }
+        });
+      } else {
+        onSuccess(response);
+      }
+    } else {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+
+      if (error) {
+        onFailure(error);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(error)
+          }
+        });
+      }
+
+      onSuccess(response);
+    }
+  };
 
   const subscribe = (stripeSource, state, dispatch) => {
     const {
@@ -15429,27 +16116,7 @@ const PaymentMethodContainerWithoutStripe = ({
         gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
         address_id: product.address_required ? selectedAddressId : null
       }, (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)
-            }
-          });
-        }
-
-        onSuccess(res);
+        confirmStripeCardPayment(res, err, true);
       });
     } else {
       if (isRenewingGift) {
@@ -15673,27 +16340,7 @@ const PaymentMethodContainerWithoutStripe = ({
       isExistingSource: Boolean(selectedPaymentMethodId),
       invoiceId: invoice.id
     }, (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)
-          }
-        });
-      }
-
-      onSuccess(res);
+      confirmStripeCardPayment(res, err);
     });
   };
 
@@ -15773,7 +16420,7 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _ref, _ref2, _state$updatedPrice, _source$card3;
+      var _ref3, _ref4, _state$updatedPrice2;
 
       if (error) {
         return handlePaymentError(error);
@@ -15799,25 +16446,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }, 0);
       };
 
-      const totalAmount = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
-
-      if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required" && totalAmount > 0) {
-        return resolveTaxCalculation().then(res => {
-          var _res$totalAmountWithT;
-
-          return generate3DSecureSource(source, (_res$totalAmountWithT = res === null || res === void 0 ? void 0 : res.totalAmountWithTax) !== null && _res$totalAmountWithT !== void 0 ? _res$totalAmountWithT : totalAmount).then(({
-            source,
-            error
-          }) => {
-            if (error) {
-              return handlePaymentError(error);
-            }
-
-            toggleAuthenticationPendingView(true, source);
-          });
-        });
-      }
-
+      (_ref3 = (_ref4 = (_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 && _ref4 !== void 0 ? _ref4 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref3 !== void 0 ? _ref3 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -15830,13 +16459,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r4;
+    var _window$Pelcro$site$r5;
 
     if (type === "invoicePayment") {
       return new Promise(resolve => resolve());
     }
 
-    const taxesEnabled = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r5 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r5 === void 0 ? void 0 : _window$Pelcro$site$r5.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -15911,7 +16540,7 @@ const PaymentMethodContainerWithoutStripe = ({
     } else if (stripeSource && type === "orderCreate") {
       purchase(new StripeGateway(), stripeSource.id, state, dispatch);
     } else if (stripeSource && type === "invoicePayment") {
-      payInvoice(new StripeGateway(), stripeSource.id, dispatch);
+      payInvoice(new StripeGateway(), stripeSource.id);
     }
   };
 
@@ -15988,10 +16617,12 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   const injectCardAuthenticationIframe = source => {
+    var _source$redirect;
+
     const cardAuthContainer = document.querySelector(".card-authentication-container");
     const iframe = document.createElement("iframe");
-    iframe.src = source.redirect.url;
-    iframe.style = "position: absolute; width: 100%; height: 100%; left: 0; top: 40px; bottom: 0; z-index: 10;";
+    iframe.src = source !== null && source !== void 0 && (_source$redirect = source.redirect) !== null && _source$redirect !== void 0 && _source$redirect.url ? source.redirect.url : source.threeDSecure_url;
+    iframe.style = "position: absolute; width: 100%; height: 100%; left: 0; top: 0; bottom: 0; z-index: 10;";
     cardAuthContainer.appendChild(iframe);
   };
 
@@ -16037,6 +16668,10 @@ const PaymentMethodContainerWithoutStripe = ({
             return submitUsingVantiv();
           }
 
+          if (getSiteCardProcessor() === "tap") {
+            return submitUsingTap();
+          }
+
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -16055,7 +16690,7 @@ const PaymentMethodContainerWithoutStripe = ({
       case HANDLE_PAYPAL_SUBSCRIPTION:
         return lib_5(state, (state, dispatch) => {
           if (type === "invoicePayment") {
-            payInvoice(new PaypalGateway(), action.payload, dispatch);
+            payInvoice(new PaypalGateway(), action.payload);
           } else {
             handlePaypalSubscription(state, action.payload);
           }
@@ -16250,6 +16885,12 @@ const CheckoutForm = () => {
     });
   }
 
+  if (cardProcessor === "tap") {
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: "tapPaymentIframe"
+    });
+  }
+
   if (cardProcessor === "stripe") {
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
       autoFocus: true
@@ -16934,13 +17575,14 @@ function PaymentMethodView({
   showCoupon,
   showExternalPaymentMethods
 }) {
-  var _window$Pelcro$site$r;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
 
   const {
     t
   } = useTranslation("checkoutForm");
   const cardProcessor = getSiteCardProcessor();
   const supportsVantiv = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings);
+  Boolean((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.tap_gateway_settings);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
   }, cardProcessor === "stripe" && /*#__PURE__*/React__default.createElement("div", {
@@ -17643,17 +18285,17 @@ const SubscriptionSuspendView = props => {
   }))));
 };
 
-const SubscriptionSuspendModal = ({
+function SubscriptionSuspendModal({
   onDisplay,
   onClose,
   ...otherProps
-}) => {
+}) {
   return /*#__PURE__*/React__default.createElement(Modal, {
     onDisplay: onDisplay,
     onClose: onClose,
     id: "pelcro-subscription-suspend-modal"
   }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionSuspendView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
-};
+}
 SubscriptionSuspendModal.viewId = "subscription-suspend";
 
 var _path$j;
@@ -17892,9 +18534,7 @@ class DefaultNewsLetter extends Component {
     });
 
     _defineProperty$3(this, "postSubmit", () => {
-      var _this$product, _this$product$paywall, _this$product2, _this$product2$paywal;
-
-      window.Pelcro.paywall.decrementPageViewFrequency((_this$product = this.product) === null || _this$product === void 0 ? void 0 : (_this$product$paywall = _this$product.paywall) === null || _this$product$paywall === void 0 ? void 0 : _this$product$paywall.newsletter_extra_visits, (_this$product2 = this.product) === null || _this$product2 === void 0 ? void 0 : (_this$product2$paywal = _this$product2.paywall) === null || _this$product2$paywal === void 0 ? void 0 : _this$product2$paywal.frequency_limit);
+      window.Pelcro.paywall.setNewsletterExtraVisits(true);
       this.props.setView("meter");
     });
 
@@ -24184,10 +24824,10 @@ var GroupContext = /*#__PURE__*/createContext(null);
 GroupContext.displayName = 'GroupContext';
 
 const getPaymentCardIcon = name => {
-  var _icons$name;
+  var _icons$name$toLowerCa;
 
   const icons = {
-    Visa: /*#__PURE__*/React__default.createElement("svg", {
+    visa: /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-12",
       fill: "#ffffff",
       xmlns: "http://www.w3.org/2000/svg",
@@ -24195,7 +24835,7 @@ const getPaymentCardIcon = name => {
     }, /*#__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 29.6875 19.40625 C 26.585938 19.40625 25 20.933594 25 22.875 C 25 26.386719 29.0625 25.914063 29.0625 27.71875 C 29.0625 28.023438 28.828125 28.75 27.125 28.75 C 25.417969 28.75 24.3125 28.09375 24.3125 28.09375 L 23.78125 30.46875 C 23.78125 30.46875 24.886719 31.09375 27 31.09375 C 29.113281 31.09375 32.03125 29.476563 32.03125 27.125 C 32.03125 24.296875 27.96875 24.074219 27.96875 22.8125 C 27.96875 22.167969 28.46875 21.6875 29.9375 21.6875 C 30.890625 21.6875 31.96875 22.40625 31.96875 22.40625 L 32.46875 19.96875 C 32.46875 19.96875 31.050781 19.40625 29.6875 19.40625 Z M 16.46875 19.625 L 13.78125 27.5625 C 13.78125 27.5625 13.597656 26.886719 13.53125 26.46875 C 11.996094 23.023438 9.5 21.75 9.5 21.75 L 11.875 30.75 L 15.125 30.75 L 19.625 19.625 Z M 20.78125 19.625 L 19.03125 30.75 L 22 30.75 L 23.78125 19.625 Z M 36.8125 19.625 L 31.96875 30.75 L 34.90625 30.75 L 35.5 29.15625 L 39.1875 29.15625 L 39.5 30.75 L 42.1875 30.75 L 39.90625 19.625 Z M 6.25 19.65625 C 6.25 19.65625 12.054688 21.453125 13.40625 25.8125 L 12.40625 20.75 C 12.40625 20.75 11.976563 19.65625 10.8125 19.65625 Z M 37.9375 22.84375 L 38.75 27.03125 L 36.3125 27.03125 Z"
     })),
-    MasterCard: /*#__PURE__*/React__default.createElement("svg", {
+    mastercard: /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-12",
       fill: "#ffffff",
       xmlns: "http://www.w3.org/2000/svg",
@@ -24203,7 +24843,7 @@ const getPaymentCardIcon = name => {
     }, /*#__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 17 13 C 10.382812 13 5 18.382812 5 25 C 5 31.617188 10.382812 37 17 37 C 20.078125 37 22.875 35.816406 25 33.90625 C 27.125 35.816406 29.925781 37 33 37 C 39.617188 37 45 31.617188 45 25 C 45 18.382812 39.617188 13 33 13 C 29.925781 13 27.125 14.183594 25 16.09375 C 22.875 14.183594 20.078125 13 17 13 Z M 33 15 C 38.535156 15 43 19.464844 43 25 C 43 30.535156 38.535156 35 33 35 C 30.449219 35 28.109375 34.066406 26.34375 32.5 C 27.996094 30.441406 29 27.839844 29 25 C 29 22.160156 27.996094 19.558594 26.34375 17.5 C 28.109375 15.933594 30.449219 15 33 15 Z M 33 15 "
     })),
-    "American Express": /*#__PURE__*/React__default.createElement("svg", {
+    "american express": /*#__PURE__*/React__default.createElement("svg", {
       className: "plc-w-12",
       fill: "#ffffff",
       xmlns: "http://www.w3.org/2000/svg",
@@ -24212,7 +24852,7 @@ const getPaymentCardIcon = name => {
       d: "M 5 7 C 2.25 7 0 9.25 0 12 L 0 38 C 0 40.75 2.25 43 5 43 L 45 43 C 47.75 43 50 40.75 50 38 L 50 12 C 50 9.25 47.75 7 45 7 Z M 5 9 L 45 9 C 46.667969 9 48 10.332031 48 12 L 48 38 C 48 39.667969 46.667969 41 45 41 L 5 41 C 3.332031 41 2 39.667969 2 38 L 2 12 C 2 10.332031 3.332031 9 5 9 Z M 8.5625 19.90625 L 4.84375 28.40625 L 7.0625 28.40625 L 7.875 26.5 L 12.0625 26.5 L 12.875 28.40625 L 17.09375 28.40625 L 17.09375 22.09375 L 19.90625 28.40625 L 21.8125 28.40625 L 24.65625 22.1875 L 24.65625 28.40625 L 26.75 28.40625 L 26.75 19.90625 L 23.40625 19.90625 L 20.84375 25.625 L 18.28125 19.90625 L 15 19.90625 L 15 28.09375 L 11.34375 19.90625 Z M 29.5 19.90625 L 29.5 28.4375 L 37.5 28.4375 L 40 25.59375 L 42.46875 28.4375 L 45.125 28.4375 L 41.375 24.0625 L 45.125 19.90625 L 42.46875 19.90625 L 40.0625 22.5625 L 37.75 19.90625 Z M 9.90625 21.6875 L 11.21875 24.6875 L 8.65625 24.6875 Z M 31.5625 21.71875 L 36.65625 21.75 L 38.6875 24.0625 L 36.40625 26.625 L 31.5625 26.625 L 31.5625 24.9375 L 36.1875 24.9375 L 36.1875 23.3125 L 31.5625 23.3125 Z"
     }))
   };
-  return (_icons$name = icons[name]) !== null && _icons$name !== void 0 ? _icons$name : /*#__PURE__*/React__default.createElement("svg", {
+  return (_icons$name$toLowerCa = icons[name.toLowerCase()]) !== null && _icons$name$toLowerCa !== void 0 ? _icons$name$toLowerCa : /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-12",
     fill: "none",
@@ -24710,7 +25350,7 @@ const SubscriptionsItems = ({
       onClick: onReactivateClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && /*#__PURE__*/React__default.createElement(Button, {
+    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && sub.status !== "incomplete" && /*#__PURE__*/React__default.createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
       icon: /*#__PURE__*/React__default.createElement(SvgRefresh, null),
@@ -25541,6 +26181,10 @@ class Dashboard extends Component {
         return `${this.locale("labels.canceledOn")} ${formattedCancelDate}`;
       }
 
+      if (subscription.status === "incomplete") {
+        return `${this.locale("labels.status.incomplete")}`;
+      }
+
       if (subscription.cancel_at_period_end) {
         // DateTime from BE is missing 3 zeros so we add them before instancing a date
         const expiryDate = new Date(Number(`${subscription.expires_at}000`));
@@ -25606,6 +26250,16 @@ class Dashboard extends Component {
         };
       }
 
+      if (sub.status === "incomplete") {
+        return {
+          title: this.locale("labels.status.incomplete"),
+          content: this.getSubscriptionStatusText(sub),
+          textColor: "plc-text-orange-700",
+          bgColor: "plc-bg-orange-100",
+          icon: /*#__PURE__*/React__default.createElement(SvgExclamation, null)
+        };
+      }
+
       return {
         title: this.locale("labels.status.active"),
         content: this.getSubscriptionStatusText(sub),
@@ -28340,9 +28994,9 @@ const InvoiceDetailsView = props => {
     className: "pelcro-invoice-total"
   }, getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("p", {
     className: "pelcro-invoice-total"
-  }, getFormattedPriceByLocal(invoice.amount_paid, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("p", {
+  }, invoice.paid && invoice.amount_paid === 0 ? getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage()) : getFormattedPriceByLocal(invoice.amount_paid, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default.createElement("p", {
     className: "plc-font-semibold pelcro-invoice-total"
-  }, getFormattedPriceByLocal(invoice.amount_remaining, invoice.currency, getPageOrDefaultLanguage())))))), /*#__PURE__*/React__default.createElement("div", {
+  }, invoice.paid ? getFormattedPriceByLocal(0, invoice.currency, getPageOrDefaultLanguage()) : getFormattedPriceByLocal(invoice.amount_remaining, invoice.currency, getPageOrDefaultLanguage())))))), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-justify-center plc-mt-4"
   }, showDownloadButton && /*#__PURE__*/React__default.createElement(InvoiceDetailsDownloadButton, {
     url: invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
@@ -29802,4 +30456,4 @@ const QrCodeModal = ({
 };
 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, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, 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, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };