@pelcro/react-pelcro-js 3.21.6 → 3.21.8

package/dist/index.esm.js

@@ -3427,7 +3427,8 @@ var labels$10 = {
 	removeCoupon: "REMOVE",
 	firstName: "First name",
 	lastName: "Last name",
-	phone: "Phone"
+	phone: "Phone",
+	freeItems: "Free Items"
 };
 var checkoutForm_en = {
 	messages: messages$14,
@@ -4368,7 +4369,8 @@ var labels$H = {
 	removeCoupon: "RETIRER",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
-	phone: "Téléphoner"
+	phone: "Téléphoner",
+	freeItems: "Articles gratuits"
 };
 var checkoutForm_fr = {
 	messages: messages$M,
@@ -5195,7 +5197,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -6126,7 +6129,8 @@ var labels$d = {
 	removeCoupon: "ELIMINAR",
 	firstName: "Nombre",
 	lastName: "Apellido",
-	phone: "Teléfono"
+	phone: "Teléfono",
+	freeItems: "Artículos gratis"
 };
 var checkoutForm_es = {
 	messages: messages$e,
@@ -8677,7 +8681,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
   if (!Array.isArray(items)) return;
   let totalWithoutDividingBy100 = 0;
   for (const item of items) {
-    totalWithoutDividingBy100 += parseFloat(item.price ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
+    totalWithoutDividingBy100 += parseFloat(item !== null && item !== void 0 && item.price || (item === null || item === void 0 ? void 0 : item.price) === 0 ? isCurrencyZeroDecimal(currency) ? item.price * item.quantity : (item.price * item.quantity).toFixed(2) : isCurrencyZeroDecimal(currency) ? item.amount : item.amount.toFixed(2));
   }
   return getFormattedPriceByLocal(totalWithoutDividingBy100, currency, getPageOrDefaultLanguage());
 };
@@ -10843,13 +10847,16 @@ const debounce = (func, waitTime) => {
   };
 };
 function getSiteCardProcessor() {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3;
   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";
   }
+  if ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r3 !== void 0 && _window$Pelcro$site$r3.cybersource_gateway_settings) {
+    return "cybersource";
+  }
   return "stripe";
 }
 
@@ -11710,6 +11717,8 @@ const SET_FIRST_NAME_ERROR = "SET_FIRST_NAME_ERROR";
 const SET_LAST_NAME_ERROR = "SET_LAST_NAME_ERROR";
 const SET_PHONE_ERROR = "SET_PHONE_ERROR";
 const SET_TEXT_FIELD = "SET_TEXT_FIELD";
+const SET_MONTH = "SET_MONTH";
+const SET_YEAR = "SET_YEAR";
 const SET_TOKEN = "SET_TOKEN";
 const SET_GIFT_CODE = "SET_GIFT_CODE";
 const RESET_LOGIN_FORM = "RESET_LOGIN_FORM";
@@ -15469,7 +15478,7 @@ var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
 var _generateUserError = /*#__PURE__*/new WeakMap();
 class Payment {
   /**
-   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway|TapGateway|CybersourceGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -15488,7 +15497,7 @@ class Payment {
     _classPrivateFieldInitSpec$1(this, _isPaymentGatewayInvalid, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway || gateway instanceof TapGateway || gateway instanceof CybersourceGateway);
       }
     });
     _classPrivateFieldInitSpec$1(this, _generateUserError, {
@@ -15542,7 +15551,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
   paypal: "braintree",
   vantiv: "vantiv",
-  tap: "tap"
+  tap: "tap",
+  cybersource: "cybersource"
 };
 
 /**
@@ -16264,6 +16274,222 @@ class TapGateway {
   }
 }
 
+/**
+ * Cybersource gateway strategy
+ */
+var _paymentGateway5 = /*#__PURE__*/new WeakMap();
+var _createSubscription5 = /*#__PURE__*/new WeakMap();
+var _renewSubscription4 = /*#__PURE__*/new WeakMap();
+var _createGiftedSubscription5 = /*#__PURE__*/new WeakMap();
+var _renewGiftedSubscription4 = /*#__PURE__*/new WeakMap();
+var _purchaseEcommerceOrder4 = /*#__PURE__*/new WeakMap();
+var _payInvoice5 = /*#__PURE__*/new WeakMap();
+class CybersourceGateway {
+  constructor() {
+    _classPrivateFieldInitSpec$1(this, _paymentGateway5, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["cybersource"]
+    });
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = PAYMENT_TYPES;
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription5).call(this, options, callback);
+        case types.RENEW_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewSubscription4).call(this, options, callback);
+        case types.CREATE_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createGiftedSubscription5).call(this, options, callback);
+        case types.RENEW_GIFTED_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _renewGiftedSubscription4).call(this, options, callback);
+        case types.PURCHASE_ECOMMERCE_ORDER:
+          return _classPrivateFieldGet(this, _purchaseEcommerceOrder4).call(this, options, callback);
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice5).call(this, options, callback);
+        default:
+          console.error("Unsupported payment method: cybersource Gateway");
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createSubscription5, {
+      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, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewSubscription4, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          plan,
+          couponCode,
+          product,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renew({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _createGiftedSubscription5, {
+      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, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.create({
+          quantity,
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          gift_recipient_email: giftRecipient.email,
+          gift_recipient_first_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.firstName,
+          gift_recipient_last_name: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.lastName,
+          gift_start_date: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.startDate,
+          gift_message: giftRecipient === null || giftRecipient === void 0 ? void 0 : giftRecipient.giftMessage,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _renewGiftedSubscription4, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          subscriptionIdToRenew,
+          token,
+          product,
+          plan,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.subscription.renewGift({
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          subscription_id: subscriptionIdToRenew,
+          address_id: product.address_required ? addressId : null,
+          ...params
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _purchaseEcommerceOrder4, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          items,
+          couponCode,
+          addressId,
+          isExistingSource
+        } = options;
+        const params = isExistingSource ? {
+          source_id: token
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token
+        };
+        window.Pelcro.ecommerce.order.create({
+          items,
+          coupon_code: couponCode,
+          campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+          ...params,
+          ...(addressId && {
+            address_id: addressId
+          })
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+    _classPrivateFieldInitSpec$1(this, _payInvoice5, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway5),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+}
+
 /**
  * @typedef {Object} PaymentStateType
  * @property {boolean} disableSubmit
@@ -16303,6 +16529,8 @@ const initialState$k = {
   firstNameError: null,
   lastNameError: null,
   phoneError: null,
+  month: "",
+  year: "",
   alert: {
     type: "error",
     content: ""
@@ -16368,37 +16596,38 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     updateTotalAmountWithTax();
   }, []);
 
-  /*====== Start Tap integration ========*/
-  const submitUsingTap = state => {
-    var _ref2, _ref3, _ref4, _state$updatedPrice;
+  /*====== Start Cybersource integration ========*/
+  const cybersourceErrorHandle = err => {
+    var _err$details, _err$details$response;
+    const errorMessages = [];
+
+    // enumerable error (ex: validation errors)
+    Object.values(err === null || err === void 0 ? void 0 : (_err$details = err.details) === null || _err$details === void 0 ? void 0 : (_err$details$response = _err$details.responseStatus) === null || _err$details$response === void 0 ? void 0 : _err$details$response.details).forEach(_ref2 => {
+      let {
+        message
+      } = _ref2;
+      errorMessages.push(message);
+    });
+
+    // convert to multiline string
+    return errorMessages.join("\n");
+  };
+  const submitUsingCybersource = (state, dispatch) => {
+    var _cybersourceInstanceR;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
-      // no need to create a new source using tap
-      return handleTapPayment(null, state);
+      // no need to create a new source using cybersrce
+      return handleCybersourcePayment(null, state);
     }
-    if (!tapInstanceRef.current) {
-      return console.error("Tap sdk script wasn't loaded, you need to load tap sdk before rendering the tap payment flow");
+    if (!cybersourceInstanceRef.current) {
+      return console.error("Cybersource sdk script wasn't loaded, you need to load Cybersource sdk before rendering the Cybersource 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);
+    let options = {
+      cardExpirationMonth: state.month,
+      cardExpirationYear: state.year
     };
-    const totalAmount = (_ref2 = (_ref3 = (_ref4 = (_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 && _ref4 !== void 0 ? _ref4 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref3 !== void 0 ? _ref3 : getOrderItemsTotal()) !== null && _ref2 !== void 0 ? _ref2 : 10;
-    tapInstanceRef.current.createToken(tapInstanceCard.current).then(function (result) {
-      if (result.error) {
-        // Inform the user if there was an error
-        onFailure(result.error);
+    (_cybersourceInstanceR = cybersourceInstanceRef.current) === null || _cybersourceInstanceR === void 0 ? void 0 : _cybersourceInstanceR.createToken(options, function (err, response) {
+      if (err) {
         dispatch({
           type: DISABLE_SUBMIT,
           payload: false
@@ -16411,36 +16640,276 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           type: SHOW_ALERT,
           payload: {
             type: "error",
-            content: getErrorMessages(result.error)
+            content: cybersourceErrorHandle(err)
           }
         });
-      } else {
-        window.Pelcro.payment.verify({
-          auth_token: window.Pelcro.user.read().auth_token,
-          first_name: window.Pelcro.user.read().first_name || state.firstName,
-          last_name: window.Pelcro.user.read().last_name || state.lastName,
-          phone: window.Pelcro.user.read().phone || state.phone,
-          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,
-          funding: result.card.funding,
-          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}&type=verify_card&site_id=${window.Pelcro.siteid}`
-        }, (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: {
+      }
+      handleCybersourcePayment(response.token, state);
+    });
+  };
+  function handleCybersourcePayment(paymentRequest, state) {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (type === "createPayment") {
+      handleCybersourceSubscription();
+    } else if (type === "orderCreate") {
+      purchase(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
+    } else if (type === "invoicePayment") {
+      payInvoice(new CybersourceGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest);
+    } else if (type === "updatePaymentSource") {
+      createNewCybersourceCard();
+    }
+    function createNewCybersourceCard() {
+      window.Pelcro.source.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "cybersource"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        toggleAuthenticationSuccessPendingView(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 handleCybersourceSubscription() {
+      const payment = new Payment(new CybersourceGateway());
+      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);
+          }
+          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);
+        });
+      }
+    }
+  }
+  const tokenizeCard = (error, microformInstance) => {
+    if (error) {
+      return;
+    }
+    cybersourceInstanceRef.current = microformInstance;
+  };
+  const initCybersourceScript = () => {
+    // jwk api call
+    window.Pelcro.payment.getJWK({
+      auth_token: window.Pelcro.user.read().auth_token,
+      site_id: window.Pelcro.siteid
+    }, (err, res) => {
+      if (err) {
+        onFailure(err);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+      const {
+        key: jwk
+      } = res;
+      // SETUP MICROFORM
+      FLEX.microform({
+        keyId: jwk.kid,
+        keystore: jwk,
+        container: "#cybersourceCardNumber",
+        placeholder: "Card Number",
+        styles: {
+          input: {
+            "font-size": "14px",
+            "font-family": "helvetica, tahoma, calibri, sans-serif",
+            color: "#555"
+          },
+          ":focus": {
+            color: "blue"
+          },
+          ":disabled": {
+            cursor: "not-allowed"
+          },
+          valid: {
+            color: "#3c763d"
+          },
+          invalid: {
+            color: "#a94442"
+          }
+        }
+      }, tokenizeCard);
+    });
+  };
+
+  /*====== End Cybersource integration ========*/
+
+  /*====== Start Tap integration ========*/
+  const submitUsingTap = state => {
+    var _ref3, _ref4, _ref5, _state$updatedPrice;
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using tap
+      return handleTapPayment(null, state);
+    }
+    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 = (_ref3 = (_ref4 = (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref4 !== void 0 ? _ref4 : getOrderItemsTotal()) !== null && _ref3 !== void 0 ? _ref3 : 10;
+    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 {
+        window.Pelcro.payment.verify({
+          auth_token: window.Pelcro.user.read().auth_token,
+          first_name: window.Pelcro.user.read().first_name || state.firstName,
+          last_name: window.Pelcro.user.read().last_name || state.lastName,
+          phone: window.Pelcro.user.read().phone || state.phone,
+          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,
+          funding: result.card.funding,
+          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}&type=verify_card&site_id=${window.Pelcro.siteid}`
+        }, (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)
               }
@@ -16811,8 +17280,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const vantivInstanceRef = React__default.useRef(null);
   const tapInstanceRef = React__default.useRef(null);
   const tapInstanceCard = React__default.useRef(null);
+  const cybersourceInstanceRef = React__default.useRef(null);
   useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
       var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
       const payPageId = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.pay_page_id;
@@ -16848,7 +17318,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, [vantivPaymentRequest]);
   useEffect(() => {
     whenUserReady(() => {
-      if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+      if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
       if (cardProcessor === "tap" && !window.Tapjsli) {
         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");
@@ -16859,10 +17329,19 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
         initTapScript();
       }
+      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && !window.FLEX) {
+        window.Pelcro.helpers.loadSDK("https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js", "cybersource-cdn");
+        document.querySelector('script[src="https://flex.cybersource.com/cybersource/assets/microform/0.4/flex-microform.min.js"]').addEventListener("load", () => {
+          initCybersourceScript();
+        });
+      }
+      if (cardProcessor === "cybersource" && !selectedPaymentMethodId && window.FLEX) {
+        initCybersourceScript();
+      }
     });
   }, [selectedPaymentMethodId]);
   const initPaymentRequest = (state, dispatch) => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     try {
       const paymentRequest = stripe.paymentRequest({
         country: window.Pelcro.user.location.countryCode || "US",
@@ -16874,13 +17353,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
 
       // When Google pay / Apple pay source created
-      paymentRequest.on("source", _ref5 => {
+      paymentRequest.on("source", _ref6 => {
         var _source$card;
         let {
           complete,
           source,
           ...data
-        } = _ref5;
+        } = _ref6;
         dispatch({
           type: DISABLE_COUPON_BUTTON,
           payload: true
@@ -16895,11 +17374,11 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         });
         complete("success");
         if ((source === null || source === void 0 ? void 0 : (_source$card = source.card) === null || _source$card === void 0 ? void 0 : _source$card.three_d_secure) === "required") {
-          return generate3DSecureSource(source).then(_ref6 => {
+          return generate3DSecureSource(source).then(_ref7 => {
             let {
               source,
               error
-            } = _ref6;
+            } = _ref7;
             if (error) {
               return handlePaymentError(error);
             }
@@ -16931,7 +17410,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
    */
   const updateTotalAmountWithTax = () => {
     var _window$Pelcro$site$r4;
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || props !== null && props !== void 0 && props.freeOrders)) return;
     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({
@@ -17428,16 +17907,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       items: mappedOrderItems,
       addressId: selectedAddressId,
       couponCode
-    }, (err, res) => {
-      dispatch({
-        type: DISABLE_SUBMIT,
-        payload: false
-      });
-      dispatch({
-        type: LOADING,
-        payload: false
-      });
+    }, (err, orderResponse) => {
+      var _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$;
       if (err) {
+        toggleAuthenticationSuccessPendingView(false);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
         onFailure(err);
         return dispatch({
           type: SHOW_ALERT,
@@ -17457,7 +17938,30 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           cartItems: []
         });
       }
-      onSuccess(res);
+      window.Pelcro.user.refresh({
+        auth_token: (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.auth_token
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        toggleAuthenticationSuccessPendingView(false);
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        onSuccess(orderResponse);
+      });
     });
   };
   const payInvoice = (gatewayService, gatewayToken, dispatch) => {
@@ -17474,12 +17978,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const updatePaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
-    }).then(_ref7 => {
+    }).then(_ref8 => {
       var _source$card2;
       let {
         source,
         error
-      } = _ref7;
+      } = _ref8;
       if (error) {
         return handlePaymentError(error);
       }
@@ -17535,14 +18039,37 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
   const submitPayment = (state, dispatch) => {
+    if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
+      const isQuickPurchase = !Array.isArray(order);
+      const mappedOrderItems = isQuickPurchase ? [{
+        sku_id: order.id,
+        quantity: order.quantity
+      }] : order.map(item => ({
+        sku_id: item.id,
+        quantity: item.quantity
+      }));
+      window.Pelcro.ecommerce.order.create({
+        items: mappedOrderItems,
+        campaign_key: window.Pelcro.helpers.getURLParameter("campaign_key"),
+        ...(selectedAddressId && {
+          address_id: selectedAddressId
+        })
+      }, (err, res) => {
+        if (err) {
+          return handlePaymentError(err);
+        }
+        return onSuccess(res);
+      });
+      return;
+    }
     stripe.createSource({
       type: "card"
-    }).then(_ref8 => {
-      var _ref9, _ref10, _state$updatedPrice2;
+    }).then(_ref9 => {
+      var _ref10, _ref11, _state$updatedPrice2;
       let {
         source,
         error
-      } = _ref8;
+      } = _ref9;
       if (error) {
         return handlePaymentError(error);
       }
@@ -17561,7 +18088,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           return total + item.price * item.quantity;
         }, 0);
       };
-      (_ref9 = (_ref10 = (_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 && _ref10 !== void 0 ? _ref10 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref9 !== void 0 ? _ref9 : getOrderItemsTotal();
+      (_ref10 = (_ref11 = (_state$updatedPrice2 = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice2 !== void 0 ? _state$updatedPrice2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref11 !== void 0 ? _ref11 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref10 !== void 0 ? _ref10 : getOrderItemsTotal();
       return handlePayment(source);
     }).catch(error => {
       return handlePaymentError(error);
@@ -17768,12 +18295,18 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
+            return submitPayment(state);
+          }
           if (getSiteCardProcessor() === "vantiv") {
             return submitUsingVantiv(state);
           }
           if (getSiteCardProcessor() === "tap") {
             return submitUsingTap(state);
           }
+          if (getSiteCardProcessor() === "cybersource") {
+            return submitUsingCybersource(state, dispatch);
+          }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already
             return handlePayment({
@@ -17841,6 +18374,16 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           ...state,
           percentOff: action.payload
         });
+      case SET_MONTH:
+        return lib_7({
+          ...state,
+          month: action.payload
+        });
+      case SET_YEAR:
+        return lib_7({
+          ...state,
+          year: action.payload
+        });
       case SET_FIRST_NAME:
         return lib_7({
           ...state,
@@ -17896,10 +18439,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$k,
-    key: i
-  })) : /*#__PURE__*/React__default.cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        store: store$k,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default.cloneElement(children, {
     store: store$k
   })));
 };
@@ -17935,6 +18482,114 @@ const PaymentMethodContainer = props => {
   return null;
 };
 
+function Select(_ref) {
+  let {
+    label = "",
+    required,
+    id,
+    errorId,
+    error = "",
+    className = "",
+    labelClassName = "",
+    errorClassName = "",
+    wrapperClassName = "",
+    children,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `pelcro-input-wrapper ${wrapperClassName}`
+  }, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`), /*#__PURE__*/React__default.createElement("select", Object.assign({
+    id: id,
+    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    "aria-describedby": errorId,
+    "aria-invalid": Boolean(error)
+  }, otherProps), children), error && /*#__PURE__*/React__default.createElement("p", {
+    id: errorId,
+    "aria-live": "assertive",
+    className: `pelcro-input-error ${errorClassName}`
+  }, error));
+}
+
+function MonthSelect(_ref) {
+  let {
+    placeholder,
+    store,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      month
+    }
+  } = useContext(store);
+  const get2digits = num => num < 10 ? "0" + num.toString() : num.toString();
+  const createMonthsItems = useMemo(() => {
+    return [...Array.from({
+      length: 12
+    }, (_, i) => i + 1)].map(i => {
+      return /*#__PURE__*/React__default.createElement("option", {
+        key: i,
+        value: get2digits(i)
+      }, get2digits(i));
+    });
+  }, []);
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_MONTH,
+      payload: value
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Select, Object.assign({
+    value: month,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps), /*#__PURE__*/React__default.createElement("option", {
+    value: "",
+    disabled: true,
+    selected: true
+  }, placeholder), createMonthsItems);
+}
+
+function YearSelect(_ref) {
+  let {
+    placeholder,
+    store,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      year
+    }
+  } = useContext(store);
+  const createYearsItems = useMemo(() => {
+    return Array.from({
+      length: 10
+    }, (_, i) => i + new Date().getFullYear()).map(i => {
+      return /*#__PURE__*/React__default.createElement("option", {
+        key: i,
+        value: i
+      }, i);
+    });
+  }, []);
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_YEAR,
+      payload: value
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Select, Object.assign({
+    value: year,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps), /*#__PURE__*/React__default.createElement("option", {
+    value: "",
+    disabled: true,
+    selected: true
+  }, placeholder), createYearsItems);
+}
+
 const StripeInputStyle = {
   base: "plc-w-full plc-p-3 plc-border plc-border-gray-300 plc-appearance-none plc-outline-none plc-rounded-sm plc-bg-gray-50 pelcro-input-input",
   focus: "plc-ring-2 plc-ring-primary-400",
@@ -18024,6 +18679,24 @@ const CheckoutForm = () => {
       id: "tapPaymentIframe"
     });
   }
+  if (cardProcessor === "cybersource") {
+    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+      id: "cybersourceCardNumber",
+      className: "pelcro-input-field plc-h-12"
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-6/12 plc-pr-4"
+    }, /*#__PURE__*/React__default.createElement(MonthSelect, {
+      store: store$k,
+      placeholder: "Exp Month"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "plc-w-6/12"
+    }, /*#__PURE__*/React__default.createElement(YearSelect, {
+      store: store$k,
+      placeholder: "Exp Year"
+    }))));
+  }
   if (cardProcessor === "stripe") {
     return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(PelcroCardNumber, {
       autoFocus: true
@@ -18722,11 +19395,47 @@ const SubscriptionCreateFreePlanButton = _ref => {
   }, otherProps), t("buttons.subscribe"));
 };
 
+const OrderCreateFreeButton = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$k);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = useState(true);
+  useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    className: "plc-w-full",
+    onClick: () => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      dispatch({
+        type: SUBMIT_PAYMENT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: disableSubmit
+  }, otherProps), t("labels.submit"));
+};
+
 /**
  *
  */
 function PaymentMethodView(_ref) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _calcAndFormatItemsTo, _order$;
   let {
     onSuccess,
     onGiftRenewalSuccess,
@@ -18734,7 +19443,9 @@ function PaymentMethodView(_ref) {
     type,
     showCoupon,
     showExternalPaymentMethods,
-    showSubscriptionButton
+    showSubscriptionButton,
+    showOrderButton,
+    order
   } = _ref;
   const {
     t
@@ -18742,12 +19453,23 @@ function PaymentMethodView(_ref) {
   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);
   const supportsTap = 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);
+  const supportsCybersource = Boolean((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.cybersource_gateway_settings);
   const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
   const isUserLastName = Boolean(window.Pelcro.user.read().last_name);
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   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" && !showSubscriptionButton && /*#__PURE__*/React__default.createElement("div", {
+  }, order && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-gray-600"
+  }, !Array.isArray(order) ? /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, t("labels.freeItems")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-xl plc-font-semibold plc-text-primary-600"
+  }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -18763,10 +19485,11 @@ function PaymentMethodView(_ref) {
     type: type,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
-    onFailure: onFailure
+    onFailure: onFailure,
+    freeOrders: showOrderButton
   }, /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default.createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -18788,7 +19511,7 @@ function PaymentMethodView(_ref) {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
-  }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null)))));
+  }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {
@@ -20521,6 +21244,16 @@ function SubscriptionManageMembersList(props) {
       icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
     };
   }, []);
+  const showMemberData = useCallback(member => {
+    var _member$customer, _member$customer2, _member$customer3, _member$customer4;
+    let data;
+    if ((member === null || member === void 0 ? void 0 : member.status) !== "active") {
+      data = member === null || member === void 0 ? void 0 : member.invitation_email;
+      return data;
+    }
+    data = (member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) || (member === null || member === void 0 ? void 0 : (_member$customer2 = member.customer) === null || _member$customer2 === void 0 ? void 0 : _member$customer2.first_name) + " " + (member === null || member === void 0 ? void 0 : (_member$customer3 = member.customer) === null || _member$customer3 === void 0 ? void 0 : _member$customer3.last_name) || (member === null || member === void 0 ? void 0 : (_member$customer4 = member.customer) === null || _member$customer4 === void 0 ? void 0 : _member$customer4.username) || "-----";
+    return data;
+  }, []);
   if (loading) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-animate-pulse"
@@ -20562,10 +21295,10 @@ function SubscriptionManageMembersList(props) {
     className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50 plc-text-center`
   }, /*#__PURE__*/React__default.createElement("td", {
     className: "plc-truncate plc-text-left",
-    title: member === null || member === void 0 ? void 0 : member.invitation_email
+    title: showMemberData(member)
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
-  }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default.createElement("td", {
+  }, showMemberData(member))), /*#__PURE__*/React__default.createElement("td", {
     className: "plc-py-2"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
@@ -21800,37 +22533,6 @@ const AddressCreateSubmit = _ref => {
   }, otherProps), name !== null && name !== void 0 ? name : t("buttons.submit"));
 };
 
-function Select(_ref) {
-  let {
-    label = "",
-    required,
-    id,
-    errorId,
-    error = "",
-    className = "",
-    labelClassName = "",
-    errorClassName = "",
-    wrapperClassName = "",
-    children,
-    ...otherProps
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`), /*#__PURE__*/React__default.createElement("select", Object.assign({
-    id: id,
-    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
-    "aria-describedby": errorId,
-    "aria-invalid": Boolean(error)
-  }, otherProps), children), error && /*#__PURE__*/React__default.createElement("p", {
-    id: errorId,
-    "aria-live": "assertive",
-    className: `pelcro-input-error ${errorClassName}`
-  }, error));
-}
-
 function CountrySelect(_ref) {
   let {
     placeholder,
@@ -24173,9 +24875,15 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
 }, props));
 
 const OrderCreateView = props => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
   const {
     t
   } = useTranslation("payment");
+  const {
+    order
+  } = usePelcro();
+  const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
+  const showOrderButton = skipPayment && ((order === null || order === void 0 ? void 0 : order.price) === 0 || (order === null || order === void 0 ? void 0 : order.length) > 0 && order.every(item => (item === null || item === void 0 ? void 0 : item.price) === 0));
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -24186,7 +24894,9 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton,
+    order: order
   }, props))));
 };
 
@@ -25394,11 +26104,12 @@ const PaymentMethodSelectModal = _ref => {
   const {
     switchToCheckoutForm,
     set,
-    plan
+    plan,
+    order
   } = usePelcro();
   const skipPayment = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.skipPaymentForFreePlans;
   useEffect(() => {
-    if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) {
+    if (skipPayment && ((plan === null || plan === void 0 ? void 0 : plan.amount) === 0 || (order === null || order === void 0 ? void 0 : order.price) === 0)) {
       switchToCheckoutForm();
     }
   }, []);
@@ -27506,7 +28217,7 @@ const InvoicesItems = () => {
     setInvoice,
     switchView
   } = usePelcro();
-  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.order_id || invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
   const showInvoiceDetails = event => {
     if (setInvoice(event.target.dataset.id)) {
       switchView("invoice-details");
@@ -28274,7 +28985,7 @@ class Dashboard extends Component {
 }
 function hasInvoices() {
   var _window$Pelcro$invoic, _window$Pelcro$invoic2;
-  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.order_id || invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
   return invoices.length > 0;
 }
 function hasDonationSubs() {
@@ -32103,4 +32814,4 @@ const QrCodeModal = _ref => {
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, 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, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, 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, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };