@pelcro/react-pelcro-js 4.0.0-alpha.35 → 4.0.0-alpha.36

package/dist/index.cjs.js

@@ -3453,7 +3453,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,
@@ -4397,7 +4398,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,
@@ -5288,7 +5290,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -6228,7 +6231,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,
@@ -8865,7 +8869,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
   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());
@@ -11478,6 +11482,10 @@ const initViewFromURL = () => {
         return showSubscriptionManageMembersFromUrl();
       }
 
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -11713,6 +11721,47 @@ const showPasswordlessRequestFromUrl = () => {
   return switchView("passwordless-request");
 };
 
+const showPaymentMethodUpdateFromUrl = () => {
+  const {
+    isAuthenticated,
+    whenSiteReady,
+    whenUserReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+
+    whenUserReady(() => {
+      const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_gateway_settings);
+      const supportsTap = Boolean(window.Pelcro.site.read().tap_gateway_settings);
+
+      if (!window.Stripe && !supportsVantiv && !supportsTap) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      } //vantiv
+
+
+      if (supportsVantiv) {
+        document.querySelector("#vantiv-eprotect-sdk").addEventListener("load", () => {
+          return switchView("payment-method-update");
+        });
+        return;
+      } //Tap
+
+
+      if (supportsTap && document.querySelector("#tap-sdk")) {
+        return switchView("payment-method-update");
+      }
+
+      return switchView("payment-method-update");
+    });
+  });
+};
+
 const showInvoiceDetailsFromUrl = () => {
   const {
     isAuthenticated,
@@ -13670,7 +13719,7 @@ function LoginModal({
 
     resetView();
     const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
-    const viewsURLs = ["invoice-details", "gift-redeem", "plan-select"];
+    const viewsURLs = ["invoice-details", "gift-redeem", "plan-select", "payment-method-update"];
 
     if (viewsURLs.includes(viewFromURL)) {
       initViewFromURL();
@@ -18985,6 +19034,29 @@ function SelectModalWithHook(props) {
     matchingEntitlements: view === "_plan-select-entitlements" ? entitlements : null
   });
 }
+
+function productsWithMatchedTaggedFirst() {
+  var _window$Pelcro$produc;
+
+  const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
+  const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
+  const allProductsMinusMatched = allProducts.filter(product => !productsThatMatchArticleTag.some(matchedProduct => matchedProduct.id === product.id));
+  return [productsThatMatchArticleTag, allProductsMinusMatched];
+}
+
+function productMatchPageLanguage(product) {
+  if (!product) {
+    return false;
+  }
+
+  if (product.language === null) {
+    return true;
+  }
+
+  const siteLanguage = window.Pelcro.helpers.getHtmlLanguageAttribute();
+  return product.language === siteLanguage;
+}
+
 SelectModalWithHook.viewId = "plan-select";
 
 class SelectModal extends React.Component {
@@ -19029,19 +19101,50 @@ class SelectModal extends React.Component {
       document.addEventListener("keydown", this.handleSubmit);
 
       if (!document.querySelector("#pelcro-selection-view") || !document.querySelector(".pelcro-select-product-wrapper")) {
+        var _window$Pelcro, _window$Pelcro$user, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro3, _window$Pelcro3$user, _window$Pelcro4, _window$Pelcro4$site;
+
+        const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
+        const userCountry = (_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.location.countryCode;
+        const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
+        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
+          const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
+          if (filteredPlans.length) return filteredPlans;
+        });
+        const productsMatchingUserCountry = productsMatchingUserCurrency.filter(product => {
+          const filteredPlans = product.plans.filter(plan => {
+            var _plan$countries;
+
+            return plan.countries && ((_plan$countries = plan.countries) === null || _plan$countries === void 0 ? void 0 : _plan$countries.includes(userCountry)) || !plan.countries || !plan.countries.length;
+          });
+          if (filteredPlans.length) return filteredPlans;
+        });
         notifyBugsnag(() => {
           Bugsnag.notify("SelectModal - No data viewed", event => {
-            var _window$Pelcro, _window$Pelcro$site, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro3, _window$Pelcro3$uiSet, _window$Pelcro4;
+            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
 
             event.addMetadata("MetaData", {
-              site: (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$site = _window$Pelcro.site) === null || _window$Pelcro$site === void 0 ? void 0 : _window$Pelcro$site.read(),
-              user: (_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.read(),
-              uiVersion: (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$uiSet = _window$Pelcro3.uiSettings) === null || _window$Pelcro3$uiSet === void 0 ? void 0 : _window$Pelcro3$uiSet.uiVersion,
-              environment: (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : _window$Pelcro4.environment
+              site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
+              user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
+              uiVersion: (_window$Pelcro7 = window.Pelcro) === null || _window$Pelcro7 === void 0 ? void 0 : (_window$Pelcro7$uiSet = _window$Pelcro7.uiSettings) === null || _window$Pelcro7$uiSet === void 0 ? void 0 : _window$Pelcro7$uiSet.uiVersion,
+              environment: (_window$Pelcro8 = window.Pelcro) === null || _window$Pelcro8 === void 0 ? void 0 : _window$Pelcro8.environment,
+              matchingEntitlementsProps: (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.matchingEntitlements,
+              productListState: this.state.productList,
+              methods: {
+                productsWithMatchedTaggedFirst: productsWithMatchedTaggedFirst(),
+                pelcroSDKProductsListMethod: window.Pelcro.product.list(),
+                pelcroSDKGetByEntitlements: this.props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(this.props.matchingEntitlements) : null
+              },
+              userCurrency: userCurrency,
+              userCountry: userCountry,
+              userLanguage: userLanguage,
+              siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
+              products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
+              currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
+              country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
+              language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
             });
           });
         });
-        console.log("bugsnag Triggered");
       }
     });
 
@@ -19199,15 +19302,6 @@ class SelectModal extends React.Component {
       }), /*#__PURE__*/React__default['default'].createElement("h3", {
         className: "plc-text-sm plc-font-semibold"
       }, this.locale("labels.restrictiveArticles.or")), allProductsMinusMatched.map((product, index) => this.renderOneProduct(product, index))));
-
-      function productsWithMatchedTaggedFirst() {
-        var _window$Pelcro$produc;
-
-        const allProducts = (_window$Pelcro$produc = window.Pelcro.product.list()) !== null && _window$Pelcro$produc !== void 0 ? _window$Pelcro$produc : [];
-        const productsThatMatchArticleTag = window.Pelcro.product.getByMatchingPageTags();
-        const allProductsMinusMatched = allProducts.filter(product => !productsThatMatchArticleTag.some(matchedProduct => matchedProduct.id === product.id));
-        return [productsThatMatchArticleTag, allProductsMinusMatched];
-      }
     });
 
     _defineProperty$3(this, "renderPlans", () => {
@@ -21541,6 +21635,8 @@ const PaymentMethodContainerWithoutStripe = ({
 }) => {
   var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isGift, _props$isRenewingGift, _props$invoice, _window$Pelcro, _window$Pelcro$uiSett;
 
+  const [vantivPaymentRequest, setVantivPaymentRequest] = React.useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = React.useState("");
   const {
     t
   } = useTranslation("payment");
@@ -21584,7 +21680,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
   /*====== Start Tap integration ========*/
 
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref, _ref2, _ref3, _state$updatedPrice;
 
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -21639,7 +21735,7 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
       } else {
-        window.Pelcro.payment.authorize({
+        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,
@@ -21648,7 +21744,8 @@ const PaymentMethodContainerWithoutStripe = ({
           amount: totalAmount,
           currency: (plan === null || plan === void 0 ? void 0 : plan.currency) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency) || window.Pelcro.site.read().default_currency,
           tap_token: result.id,
-          redirect_url: `${window.Pelcro.environment.domain}/webhook/tap/callback/3dsecure?auth_token=${window.Pelcro.user.read().auth_token}`
+          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
@@ -21689,7 +21786,7 @@ const PaymentMethodContainerWithoutStripe = ({
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               }; // listen to injected iframe for authentication complete message
 
@@ -21704,7 +21801,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (type === "createPayment") {
@@ -21731,6 +21828,7 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
 
         if (err) {
           onFailure(err);
@@ -21751,7 +21849,8 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
 
     function handleTapSubscription() {
@@ -21886,7 +21985,7 @@ const PaymentMethodContainerWithoutStripe = ({
   /*====== End Tap integration ========*/
 
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (isUsingExistingPaymentMethod) {
@@ -21909,7 +22008,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
 
@@ -21983,9 +22082,6 @@ const PaymentMethodContainerWithoutStripe = ({
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
 
       if (renewGift) {
         return payment.execute({
@@ -22065,6 +22161,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
   React.useEffect(() => {
+    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;
 
@@ -22077,7 +22175,7 @@ const PaymentMethodContainerWithoutStripe = ({
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -22091,9 +22189,17 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, [selectedPaymentMethodId]);
+  }, [selectedPaymentMethodId]); //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+
+  React.useEffect(() => {
+    if (vantivPaymentRequest) {
+      handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
+    }
+  }, [vantivPaymentRequest]);
   React.useEffect(() => {
     whenUserReady(() => {
+      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");
@@ -22109,7 +22215,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, [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({
@@ -22182,7 +22288,7 @@ const PaymentMethodContainerWithoutStripe = ({
   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") {
@@ -22229,7 +22335,9 @@ const PaymentMethodContainerWithoutStripe = ({
       });
 
       if (err) {
-        onFailure(err);
+        onFailure(err); //reset the coupon code in local state
+
+        setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -22289,7 +22397,9 @@ const PaymentMethodContainerWithoutStripe = ({
       dispatch({
         type: SET_COUPON,
         payload: res.data.coupon
-      });
+      }); //set the coupon code in local state to be able to use with Vantiv
+
+      setUpdatedCouponCode(res.data.coupon.code);
       dispatch({
         type: SET_PERCENT_OFF,
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
@@ -22364,7 +22474,9 @@ const PaymentMethodContainerWithoutStripe = ({
   const debouncedApplyCouponCode = React.useRef(debounce$1(onApplyCouponCode, 1000)).current;
 
   const removeAppliedCoupon = state => {
-    state.couponCode = "";
+    state.couponCode = ""; //reset the coupon code in local state
+
+    setUpdatedCouponCode("");
     dispatch({
       type: SET_COUPON_ERROR,
       payload: ""
@@ -22821,6 +22933,31 @@ const PaymentMethodContainerWithoutStripe = ({
   };
 
   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(({
@@ -23085,12 +23222,16 @@ const PaymentMethodContainerWithoutStripe = ({
           disableSubmit: true,
           isLoading: true
         }, (state, dispatch) => {
+          if (skipPayment && props !== null && props !== void 0 && props.freeOrders) {
+            return submitPayment(state);
+          }
+
           if (getSiteCardProcessor() === "vantiv") {
             return submitUsingVantiv();
           }
 
           if (getSiteCardProcessor() === "tap") {
-            return submitUsingTap();
+            return submitUsingTap(state);
           }
 
           if (selectedPaymentMethodId) {
@@ -23219,10 +23360,14 @@ const PaymentMethodContainerWithoutStripe = ({
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$l,
-    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$l,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
     store: store$l
   })));
 };
@@ -23253,11 +23398,13 @@ const PaymentMethodContainer = props => {
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
       store: store$l
     }, props))));
-  } else {
+  } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$l
     }, props));
   }
+
+  return null;
 };
 
 const StripeInputStyle = {
@@ -24093,6 +24240,41 @@ const BankAuthenticationSuccess = () => {
   }));
 };
 
+const OrderCreateFreeButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = React.useContext(store$l);
+  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"));
+};
+
 /**
  *
  */
@@ -24104,9 +24286,11 @@ function PaymentMethodView({
   type,
   showCoupon,
   showExternalPaymentMethods,
-  showSubscriptionButton
+  showSubscriptionButton,
+  showOrderButton,
+  order
 }) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _calcAndFormatItemsTo, _order$;
 
   const {
     t
@@ -24119,7 +24303,17 @@ function PaymentMethodView({
   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"
@@ -24135,10 +24329,11 @@ function PaymentMethodView({
     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",
@@ -26014,6 +26209,19 @@ 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", {
@@ -26058,10 +26266,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`
@@ -29738,6 +29946,14 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
 }, props));
 
 const OrderCreateView = props => {
+  var _window$Pelcro, _window$Pelcro$uiSett;
+
+  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("form", {
@@ -29746,7 +29962,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))));
 };
 
@@ -31029,17 +31247,18 @@ const PaymentMethodSelectModal = ({
 }) => {
   var _window$Pelcro, _window$Pelcro$uiSett;
 
+  const {
+    t
+  } = useTranslation("paymentMethod");
   const {
     switchToCheckoutForm,
     set,
-    plan
+    plan,
+    order
   } = usePelcro();
-  const {
-    t
-  } = useTranslation("paymentMethod");
   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();
     }
   }, []);
@@ -38964,6 +39183,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;