@pelcro/react-pelcro-js 3.21.6 → 3.21.8

package/dist/index.cjs.js

@@ -3457,7 +3457,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,
@@ -4398,7 +4399,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,
@@ -5225,7 +5227,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -6156,7 +6159,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,
@@ -8707,7 +8711,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());
 };
@@ -10873,13 +10877,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";
 }
 
@@ -11740,6 +11747,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";
@@ -15499,7 +15508,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) => {
@@ -15518,7 +15527,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, {
@@ -15572,7 +15581,8 @@ const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
   paypal: "braintree",
   vantiv: "vantiv",
-  tap: "tap"
+  tap: "tap",
+  cybersource: "cybersource"
 };
 
 /**
@@ -16294,6 +16304,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
@@ -16333,6 +16559,8 @@ const initialState$k = {
   firstNameError: null,
   lastNameError: null,
   phoneError: null,
+  month: "",
+  year: "",
   alert: {
     type: "error",
     content: ""
@@ -16398,37 +16626,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
@@ -16441,36 +16670,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)
               }
@@ -16841,8 +17310,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const vantivInstanceRef = React__default['default'].useRef(null);
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
+  const cybersourceInstanceRef = React__default['default'].useRef(null);
   React.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;
@@ -16878,7 +17348,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, [vantivPaymentRequest]);
   React.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");
@@ -16889,10 +17359,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",
@@ -16904,13 +17383,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
@@ -16925,11 +17404,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);
             }
@@ -16961,7 +17440,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({
@@ -17458,16 +17937,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,
@@ -17487,7 +17968,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) => {
@@ -17504,12 +18008,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);
       }
@@ -17565,14 +18069,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);
       }
@@ -17591,7 +18118,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);
@@ -17798,12 +18325,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({
@@ -17871,6 +18404,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,
@@ -17926,10 +18469,14 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$k,
-    key: i
-  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default['default'].cloneElement(child, {
+        store: store$k,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
     store: store$k
   })));
 };
@@ -17965,6 +18512,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['default'].createElement("div", {
+    className: `pelcro-input-wrapper ${wrapperClassName}`
+  }, /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`), /*#__PURE__*/React__default['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['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
+    }
+  } = React.useContext(store);
+  const get2digits = num => num < 10 ? "0" + num.toString() : num.toString();
+  const createMonthsItems = React.useMemo(() => {
+    return [...Array.from({
+      length: 12
+    }, (_, i) => i + 1)].map(i => {
+      return /*#__PURE__*/React__default['default'].createElement("option", {
+        key: i,
+        value: get2digits(i)
+      }, get2digits(i));
+    });
+  }, []);
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_MONTH,
+      payload: value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Select, Object.assign({
+    value: month,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps), /*#__PURE__*/React__default['default'].createElement("option", {
+    value: "",
+    disabled: true,
+    selected: true
+  }, placeholder), createMonthsItems);
+}
+
+function YearSelect(_ref) {
+  let {
+    placeholder,
+    store,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state: {
+      year
+    }
+  } = React.useContext(store);
+  const createYearsItems = React.useMemo(() => {
+    return Array.from({
+      length: 10
+    }, (_, i) => i + new Date().getFullYear()).map(i => {
+      return /*#__PURE__*/React__default['default'].createElement("option", {
+        key: i,
+        value: i
+      }, i);
+    });
+  }, []);
+  const handleInputChange = value => {
+    dispatch({
+      type: SET_YEAR,
+      payload: value
+    });
+  };
+  return /*#__PURE__*/React__default['default'].createElement(Select, Object.assign({
+    value: year,
+    onChange: e => handleInputChange(e.target.value)
+  }, otherProps), /*#__PURE__*/React__default['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",
@@ -18054,6 +18709,24 @@ const CheckoutForm = () => {
       id: "tapPaymentIframe"
     });
   }
+  if (cardProcessor === "cybersource") {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "cybersourceCardNumber",
+      className: "pelcro-input-field plc-h-12"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12 plc-pr-4"
+    }, /*#__PURE__*/React__default['default'].createElement(MonthSelect, {
+      store: store$k,
+      placeholder: "Exp Month"
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12"
+    }, /*#__PURE__*/React__default['default'].createElement(YearSelect, {
+      store: store$k,
+      placeholder: "Exp Year"
+    }))));
+  }
   if (cardProcessor === "stripe") {
     return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
       autoFocus: true
@@ -18752,11 +19425,47 @@ const SubscriptionCreateFreePlanButton = _ref => {
   }, otherProps), t("buttons.subscribe"));
 };
 
+const OrderCreateFreeButton = _ref => {
+  let {
+    name,
+    onClick,
+    ...otherProps
+  } = _ref;
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = React.useContext(store$k);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = React.useState(true);
+  React.useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default['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,
@@ -18764,7 +19473,9 @@ function PaymentMethodView(_ref) {
     type,
     showCoupon,
     showExternalPaymentMethods,
-    showSubscriptionButton
+    showSubscriptionButton,
+    showOrderButton,
+    order
   } = _ref;
   const {
     t
@@ -18772,12 +19483,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['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['default'].createElement("div", {
+  }, order && /*#__PURE__*/React__default['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['default'].createElement("p", {
+    className: "plc-text-gray-600"
+  }, !Array.isArray(order) ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, t("labels.freeItems")), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['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['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['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -18793,10 +19515,11 @@ function PaymentMethodView(_ref) {
     type: type,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
-    onFailure: onFailure
+    onFailure: onFailure,
+    freeOrders: showOrderButton
   }, /*#__PURE__*/React__default['default'].createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default['default'].createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default['default'].createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(BankRedirection, null), /*#__PURE__*/React__default['default'].createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default['default'].createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -18818,7 +19541,7 @@ function PaymentMethodView(_ref) {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
-  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
+  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {
@@ -20551,6 +21274,16 @@ function SubscriptionManageMembersList(props) {
       icon: /*#__PURE__*/React__default['default'].createElement(SvgCheckMark, null)
     };
   }, []);
+  const showMemberData = React.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['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-animate-pulse"
@@ -20592,10 +21325,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['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['default'].createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
-  }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default['default'].createElement("td", {
+  }, showMemberData(member))), /*#__PURE__*/React__default['default'].createElement("td", {
     className: "plc-py-2"
   }, /*#__PURE__*/React__default['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`
@@ -21830,37 +22563,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['default'].createElement("div", {
-    className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`), /*#__PURE__*/React__default['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['default'].createElement("p", {
-    id: errorId,
-    "aria-live": "assertive",
-    className: `pelcro-input-error ${errorClassName}`
-  }, error));
-}
-
 function CountrySelect(_ref) {
   let {
     placeholder,
@@ -24203,9 +24905,15 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
 }, 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['default'].createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -24216,7 +24924,9 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton,
+    order: order
   }, props))));
 };
 
@@ -25424,11 +26134,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;
   React.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();
     }
   }, []);
@@ -27536,7 +28247,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");
@@ -28304,7 +29015,7 @@ class Dashboard extends React.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() {
@@ -32246,6 +32957,7 @@ exports.NewsletterUpdateView = NewsletterUpdateView;
 exports.Notification = Notification;
 exports.OrderConfirmModal = OrderConfirmModal;
 exports.OrderCreateContainer = OrderCreateContainer;
+exports.OrderCreateFreeButton = OrderCreateFreeButton;
 exports.OrderCreateModal = OrderCreateModal;
 exports.OrderCreateSubmitButton = OrderCreateSubmitButton;
 exports.OrderCreateView = OrderCreateView;