@pelcro/react-pelcro-js 3.7.1 → 3.8.1-beta.1

package/dist/index.cjs.js

@@ -4935,7 +4935,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 = {
 	"": ""
@@ -4975,7 +4976,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 = {
 	"": ""
@@ -5015,7 +5017,8 @@ var messages$f = {
 	successfully: "님께 성공적으로 전송되었습니다.",
 	sourceUpdated: "귀하의 결제 정보가 업데이트되었습니다.",
 	cardAuthFailed: "해당 결제 수단은 인증할 수 없습니다. 다른 결제 수단을 선택하여 다시 시도해보시기 바랍니다.",
-	cardAuthNotSupported: "인증이 요구되는 결제 수단으로의 업데이트는 현재 지원되지 않습니다. 다른 결제 수단을 이용하거나 고객센터로 문의하시기 바랍니다."
+	cardAuthNotSupported: "인증이 요구되는 결제 수단으로의 업데이트는 현재 지원되지 않습니다. 다른 결제 수단을 이용하거나 고객센터로 문의하시기 바랍니다.",
+	tryAgainFromInvoice: "결제를 인증할 수 없지만 구독이 생성되었습니다. 대시보드에서 다른 결제 수단을 사용하여 인보이스 결제를 시도하세요."
 };
 var errors = {
 	"": ""
@@ -5038,7 +5041,8 @@ var labels$h = {
 		active: "Active",
 		inTrial: "In trial",
 		endingSoon: "Ending soon",
-		scheduled: "Scheduled"
+		scheduled: "Scheduled",
+		incomplete: "Incomplete"
 	},
 	shipments: "Shipments remaining",
 	logout: "Logout",
@@ -5138,9 +5142,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",
@@ -5242,7 +5247,8 @@ var labels$f = {
 		active: "활성화",
 		inTrial: "체험판 사용",
 		endingSoon: "만료 예정",
-		scheduled: "예약"
+		scheduled: "예약",
+		incomplete: "불완전한"
 	},
 	shipments: "남은 배송 일정",
 	logout: "로그아웃",
@@ -7399,7 +7405,7 @@ class PelcroActions {
       });
     });
 
-    _defineProperty$3(this, "logout", () => {
+    _defineProperty$3(this, "logout", (displayLogin = true) => {
       var _ReactGA$event;
 
       const {
@@ -7419,7 +7425,10 @@ class PelcroActions {
         nonInteraction: true
       });
       resetView();
-      switchView("login");
+
+      if (displayLogin) {
+        switchView("login");
+      }
     });
 
     _defineProperty$3(this, "addToCart", itemSkuId => {
@@ -7921,10 +7930,8 @@ const getEntitlementsFromElem = elem => {
   return elem.dataset.pelcroEntitlements.split(",").map(entitlement => entitlement.trim()).filter(entitlement => entitlement);
 };
 const getPaymentCardIcon$1 = name => {
-  var _icons$name;
-
   const icons = {
-    Visa: /*#__PURE__*/React__default['default'].createElement("svg", {
+    visa: /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 48 48"
@@ -7935,7 +7942,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['default'].createElement("svg", {
+    mastercard: /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 48 48"
@@ -7949,7 +7956,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['default'].createElement("svg", {
+    "american express": /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-16",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 48 48"
@@ -7961,7 +7968,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['default'].createElement("svg", {
+  return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-16",
     fill: "none",
@@ -9972,12 +9979,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";
 }
 
@@ -10083,6 +10094,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 = () => {
@@ -14195,7 +14214,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) => {
@@ -14216,7 +14235,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);
       }
     });
 
@@ -14271,7 +14290,8 @@ class Payment {
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
   paypal: "braintree",
-  vantiv: "vantiv"
+  vantiv: "vantiv",
+  tap: "tap"
 };
 /**
  * Payment Strategies
@@ -14839,6 +14859,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
@@ -14883,55 +15138,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;
+  React.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);
+          }
 
-  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;
-  React.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 (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);
+          }
+
+          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);
@@ -14982,7 +15506,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();
     }
@@ -15109,6 +15633,8 @@ const PaymentMethodContainerWithoutStripe = ({
   }
 
   const vantivInstanceRef = React__default['default'].useRef(null);
+  const tapInstanceRef = React__default['default'].useRef(null);
+  const tapInstanceCard = React__default['default'].useRef(null);
   React.useEffect(() => {
     const cardProcessor = getSiteCardProcessor();
 
@@ -15132,10 +15658,78 @@ 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]);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -15208,9 +15802,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({
@@ -15437,6 +16031,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 {
@@ -15459,27 +16144,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) {
@@ -15703,27 +16368,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);
     });
   };
 
@@ -15803,7 +16448,7 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _ref, _ref2, _state$updatedPrice, _source$card3;
+      var _ref3, _ref4, _state$updatedPrice2;
 
       if (error) {
         return handlePaymentError(error);
@@ -15829,25 +16474,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);
@@ -15860,13 +16487,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) {
@@ -15941,7 +16568,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);
     }
   };
 
@@ -16018,10 +16645,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);
   };
 
@@ -16067,6 +16696,10 @@ const PaymentMethodContainerWithoutStripe = ({
             return submitUsingVantiv();
           }
 
+          if (getSiteCardProcessor() === "tap") {
+            return submitUsingTap();
+          }
+
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -16085,7 +16718,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);
           }
@@ -16280,6 +16913,12 @@ const CheckoutForm = () => {
     });
   }
 
+  if (cardProcessor === "tap") {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "tapPaymentIframe"
+    });
+  }
+
   if (cardProcessor === "stripe") {
     return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
@@ -16964,13 +17603,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['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['default'].createElement("div", {
@@ -17922,9 +18562,7 @@ class DefaultNewsLetter extends React.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");
     });
 
@@ -24214,10 +24852,8 @@ var GroupContext = /*#__PURE__*/React.createContext(null);
 GroupContext.displayName = 'GroupContext';
 
 const getPaymentCardIcon = name => {
-  var _icons$name;
-
   const icons = {
-    Visa: /*#__PURE__*/React__default['default'].createElement("svg", {
+    visa: /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-12",
       fill: "#ffffff",
       xmlns: "http://www.w3.org/2000/svg",
@@ -24225,7 +24861,7 @@ const getPaymentCardIcon = name => {
     }, /*#__PURE__*/React__default['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['default'].createElement("svg", {
+    mastercard: /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-12",
       fill: "#ffffff",
       xmlns: "http://www.w3.org/2000/svg",
@@ -24233,7 +24869,7 @@ const getPaymentCardIcon = name => {
     }, /*#__PURE__*/React__default['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['default'].createElement("svg", {
+    "american express": /*#__PURE__*/React__default['default'].createElement("svg", {
       className: "plc-w-12",
       fill: "#ffffff",
       xmlns: "http://www.w3.org/2000/svg",
@@ -24242,7 +24878,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['default'].createElement("svg", {
+  return name ? icons[name.toLowerCase()] : /*#__PURE__*/React__default['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-12",
     fill: "none",
@@ -24740,7 +25376,7 @@ const SubscriptionsItems = ({
       onClick: onReactivateClick,
       disabled: disableSubmit,
       "data-key": sub.id
-    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && /*#__PURE__*/React__default['default'].createElement(Button, {
+    }, t("labels.reactivate")), sub.cancel_at_period_end === 1 && sub.status !== "incomplete" && /*#__PURE__*/React__default['default'].createElement(Button, {
       variant: "ghost",
       className: "plc-text-blue-400 pelcro-dashboard-sub-renew-button",
       icon: /*#__PURE__*/React__default['default'].createElement(SvgRefresh, null),
@@ -25571,6 +26207,10 @@ class Dashboard extends React.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`));
@@ -25636,6 +26276,16 @@ class Dashboard extends React.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['default'].createElement(SvgExclamation, null)
+        };
+      }
+
       return {
         title: this.locale("labels.status.active"),
         content: this.getSubscriptionStatusText(sub),