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

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,
@@ -3997,7 +3998,8 @@ var labels$T = {
 var buttons$g = {
 	next: "Next",
 	select: "Select",
-	back: "Back"
+	back: "Back",
+	gift: "Gift"
 };
 var select_en = {
 	messages: messages$V,
@@ -4397,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,
@@ -4942,7 +4945,8 @@ var labels$y = {
 var buttons$b = {
 	next: "Prochain",
 	select: "Choisir",
-	back: "Retour"
+	back: "Retour",
+	gift: "cadeau"
 };
 var select_fr = {
 	messages: messages$B,
@@ -5288,7 +5292,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -5942,7 +5947,8 @@ var labels$j = {
 var buttons$6 = {
 	next: "다음",
 	select: "선택",
-	back: "뒤로"
+	back: "뒤로",
+	gift: "선물"
 };
 var select_ko = {
 	messages: messages$k,
@@ -6228,7 +6234,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,
@@ -6763,7 +6770,8 @@ var labels$4 = {
 var buttons$1 = {
 	next: "Siguiente",
 	select: "Seleccionar",
-	back: "Volver"
+	back: "Volver",
+	gift: "regalo"
 };
 var select_es = {
 	messages: messages$3,
@@ -8865,7 +8873,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 +11486,10 @@ const initViewFromURL = () => {
         return showSubscriptionManageMembersFromUrl();
       }
 
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -11713,6 +11725,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 +13723,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();
@@ -18862,7 +18915,8 @@ function SvgArrowThinLeft(props) {
 
 const NextArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__PURE__*/React__default['default'].createElement("button", {
   className: `sm:plc-flex plc-hidden plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--right-12 plc-transform plc--translate-y-1/2 hover:plc-text-gray-900 ${className}`,
   onClick: onClick
@@ -18870,12 +18924,13 @@ const NextArrow = ({
   stroke: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
-  className: "plc-h-7 plc-w-7"
+  className: `${size === "normal" ? "plc-w-7 plc-h-7" : size === "small" ? "plc-w-4 plc-h-4" : "plc-w-9 plc-h-9"}`
 }));
 
 const PrevArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__PURE__*/React__default['default'].createElement("button", {
   className: `sm:plc-flex plc-hidden plc-text-gray-500 plc-w-11 plc-h-11 plc-items-center plc-justify-center plc-rounded-full plc-text-sm plc-absolute plc-top-1/2 plc--left-12 plc-transform plc--translate-y-1/2 hover:plc-text-gray-900 ${className}`,
   onClick: onClick
@@ -18883,28 +18938,40 @@ const PrevArrow = ({
   stroke: "currentColor",
   "aria-hidden": "true",
   focusable: "false",
-  className: "plc-h-7 plc-w-7"
+  className: `${size === "normal" ? "plc-w-7 plc-h-7" : size === "small" ? "plc-w-4 plc-h-4" : "plc-w-9 plc-h-9"}`
 }));
 
 function Carousel({
   slidesToShow = 3,
   slidesToScroll = 1,
+  initialSlide = 0,
+  dots = true,
   slidesCount,
+  arrowsSize = "normal",
+  paddingSize = "small",
   children,
   ...otherProps
 }) {
   const ref = React.useRef(null);
+  React.useEffect(() => {
+    ref.current.slickGoTo(initialSlide, true);
+  }, [initialSlide]);
   const settings = {
     dots: true,
     infinite: false,
     speed: 200,
     slidesToShow: slidesToShow,
     slidesToScroll: slidesToScroll,
-    nextArrow: /*#__PURE__*/React__default['default'].createElement(NextArrow, null),
-    prevArrow: /*#__PURE__*/React__default['default'].createElement(PrevArrow, null),
-    initialSlide: 0,
+    nextArrow: /*#__PURE__*/React__default['default'].createElement(NextArrow, {
+      size: arrowsSize
+    }),
+    prevArrow: /*#__PURE__*/React__default['default'].createElement(PrevArrow, {
+      size: arrowsSize
+    }),
+    initialSlide: initialSlide,
+    dots: dots,
     customPaging: i => /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-w-3 plc-h-3 plc-rounded-full plc-transition-all plc-bg-gray-400 plc-inline-flex plc-cursor-pointer hover:plc-opacity-30"
+      className: "plc-w-3 plc-h-3 plc-rounded-full plc-transition-all plc-bg-gray-400 plc-inline-flex plc-cursor-pointer hover:plc-bg-primary"
     }),
     responsive: [{
       breakpoint: 1280,
@@ -18919,7 +18986,7 @@ function Carousel({
     }]
   };
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "carousel-wrapper plc-relative sm:plc-px-8 plc-px-0"
+    className: `carousel-wrapper plc-relative  ${paddingSize === "small" ? "sm:plc-px-8 plc-px-0" : paddingSize === "medium" ? "sm:plc-px-10 plc-px-0" : "sm:plc-px-14 plc-px-0"}`
   }, /*#__PURE__*/React__default['default'].createElement(Slider, Object.assign({
     ref: ref
   }, settings), children));
@@ -18985,6 +19052,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 +19119,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");
       }
     });
 
@@ -19122,7 +19243,7 @@ class SelectModal extends React.Component {
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
-        className: `plc-w-full ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
+        className: `plc-w-full plc-capitalize plc-border-2 plc-border-primary hover:plc-bg-white hover:plc-text-primary plc-transition-all focus:plc-outline-none ${options !== null && options !== void 0 && options.emphasize ? "plc-bg-primary-700" : ""}`
       }, index === 0 && {
         autoFocus: true
       }), productButtonLabel)));
@@ -19143,38 +19264,83 @@ class SelectModal extends React.Component {
       }, items);
     });
 
+    _defineProperty$3(this, "handleScrollLeft", () => {
+      this.productsTabRef.current.scrollLeft -= 100; // Adjust the scroll value as needed
+    });
+
+    _defineProperty$3(this, "handleScrollRight", () => {
+      this.productsTabRef.current.scrollLeft += 100; // Adjust the scroll value as needed
+    });
+
+    _defineProperty$3(this, "toggleProdDescExpanded", () => {
+      this.setState({
+        prodDescExpanded: !this.state.prodDescExpanded
+      });
+    });
+
     _defineProperty$3(this, "renderProductTabs", () => {
-      const productButtonCallback = this.selectProduct;
+      const {
+        prodDescExpanded
+      } = this.state;
+
+      const productButtonCallback = e => {
+        this.setState({
+          scrollToTab: false
+        });
+        this.selectProduct(e);
+      };
+
       const {
         image,
         description
       } = this.state.product;
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "productTabs plc-flex plc-flex-col plc-items-center"
-      }, /*#__PURE__*/React__default['default'].createElement("ul", {
-        className: "tabs plc-w-full plc-flex plc-items-center plc-text-center plc-border-b plc-border-gray-300 plc-mb-4 plc-overflow-x-auto"
-      }, this.state.productList.map((product, index) => {
-        var _this$state$product;
-
-        return /*#__PURE__*/React__default['default'].createElement("li", {
-          key: product.id,
-          id: `${product.id === ((_this$state$product = this.state.product) === null || _this$state$product === void 0 ? void 0 : _this$state$product.id) ? "activeTab" : ""}`,
-          className: "plc-relative plc-mx-1"
+      const tabs = this.state.productList.map((product, index) => {
+        if (product.id === this.state.product.id && this.state.scrollToTab) {
+          this.setState(oldState => {
+            if (+oldState.initialTabSlide !== +index) {
+              return {
+                initialTabSlide: index
+              };
+            }
+          });
+        }
+
+        return /*#__PURE__*/React__default['default'].createElement("div", {
+          key: product.id
         }, /*#__PURE__*/React__default['default'].createElement("button", {
-          onClick: productButtonCallback,
+          onClick: e => productButtonCallback(e),
           "data-key": product.id,
-          className: "plc-px-4 plc-py-2 plc-rounded plc-text-gray-600 focus:plc-outline-none plc-whitespace-nowrap"
+          "data-index": index,
+          className: `plc-px-4 plc-py-2 focus:plc-outline-none plc-border-b-4 hover:plc-text-primary hover:plc-border-primary plc-transition-all plc-h-full plc-flex ${product.id === this.state.product.id ? "plc-border-primary plc-text-primary" : "plc-border-transparent plc-font-normal plc-text-gray-500"}`
         }, product.name));
-      })), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl"
+      });
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-flex plc-flex-col"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "productTabs plc-relative plc-max-w-xl plc-mx-auto"
+      }, /*#__PURE__*/React__default['default'].createElement(Carousel, {
+        slidesCount: tabs.length,
+        initialSlide: this.state.initialTabSlide,
+        dots: false,
+        arrowsSize: "small"
+      }, tabs)), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl plc-mx-auto plc-mt-6"
       }, image && /*#__PURE__*/React__default['default'].createElement("figure", {
         className: "plc-mb-2"
       }, /*#__PURE__*/React__default['default'].createElement("img", {
         src: image,
         alt: "Product Image"
-      })), description && /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "plc-text-center"
-      }, description)));
+      })), description && /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "plc-max-w-xl plc-text-center"
+      }, /*#__PURE__*/React__default['default'].createElement("div", {
+        className: `plc-overflow-x-hidden ${prodDescExpanded ? "plc-whitespace-normal" : "plc-whitespace-nowrap"}`
+      }, prodDescExpanded ? /*#__PURE__*/React__default['default'].createElement("span", null, description, " ", /*#__PURE__*/React__default['default'].createElement("button", {
+        onClick: this.toggleProdDescExpanded,
+        className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
+      }, "Read less")) : /*#__PURE__*/React__default['default'].createElement("span", null, description.slice(0, 50), " ", /*#__PURE__*/React__default['default'].createElement("button", {
+        onClick: this.toggleProdDescExpanded,
+        className: "plc-text-primary plc-underline plc-cursor-pointer plc-outline-none focus:plc-outline-none hover:plc-no-underline"
+      }, "Read more"))))));
     });
 
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -19199,34 +19365,22 @@ 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", () => {
+      const {
+        disableGifting
+      } = this.props;
       const items = this.state.planList.map(plan => {
-        var _this$state, _this$state2;
+        var _this$state;
 
-        const isChecked = this.state.plan.id === plan.id ? true : false;
+        this.state.plan.id === plan.id ? true : false;
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: plan.id,
           className: `${((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.plan.id) === plan.id ? "plc-border-2 plc-border-primary" : "plc-border plc-border-gray-300"} plc-h-full plc-flex plc-flex-col plc-items-start plc-text-gray-900 plc-border-solid plc-rounded-md plc-bg-white pelcro-select-plan-wrapper`
-        }, /*#__PURE__*/React__default['default'].createElement(Radio, {
-          wrapperClassName: "plc-w-full plc-flex plc-h-full",
-          className: "plc-hidden pelcro-select-plan-radio",
-          labelClassName: "plc-cursor-pointer plc-w-full plc-h-full plc-m-0 plc-flex-1 plc-flex plc-flex-col",
-          id: `pelcro-select-plan-${plan.id}`,
-          name: "plan",
-          checked: isChecked,
-          "data-key": plan.id,
-          onChange: this.selectPlan
+        }, /*#__PURE__*/React__default['default'].createElement("div", {
+          className: "plc-w-full plc-flex plc-flex-col plc-h-full",
+          id: `pelcro-select-plan-${plan.id}`
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "plc-p-4 plc-text-center plc-flex plc-flex-col plc-justify-center plc-items-center plc-w-full"
         }, /*#__PURE__*/React__default['default'].createElement("h4", {
@@ -19246,8 +19400,16 @@ class SelectModal extends React.Component {
         }, plan.currency), /*#__PURE__*/React__default['default'].createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__default['default'].createElement("div", {
-          className: `${((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.plan.id) === plan.id ? "plc-bg-primary plc-text-white" : "plc-text-primary-800"} plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary`
-        }, this.locale("buttons.select")))));
+          className: `plc-grid ${disableGifting ? "plc-grid-cols-1" : "plc-grid-cols-2 plc-gap-2"}`
+        }, /*#__PURE__*/React__default['default'].createElement("button", {
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-white plc-bg-primary hover:plc-bg-white hover:plc-text-primary plc-transition-all`,
+          "data-key": plan.id,
+          onClick: e => this.selectPlan(e, false)
+        }, this.locale("buttons.select")), !disableGifting && /*#__PURE__*/React__default['default'].createElement("button", {
+          className: `plc-flex plc-items-center plc-justify-center plc-text-center plc-py-2 plc-px-4 plc-w-full plc-border-2 plc-rounded-md plc-border-primary focus:plc-outline-none plc-text-primary plc-bg-white hover:plc-bg-primary hover:plc-text-white plc-transition-all`,
+          "data-key": plan.id,
+          onClick: e => this.selectPlan(e, true)
+        }, this.locale("buttons.gift"))))));
       });
       return /*#__PURE__*/React__default['default'].createElement(Carousel, {
         slidesCount: items.length
@@ -19281,39 +19443,30 @@ class SelectModal extends React.Component {
       }
     });
 
-    _defineProperty$3(this, "selectPlan", e => {
+    _defineProperty$3(this, "selectPlan", (e, isGift) => {
       const id = e.target.dataset.key;
 
       for (const plan of this.state.planList) {
         if (+plan.id === +id) {
-          plan.isCheked = true;
           this.setState({
-            plan: plan
+            plan: plan,
+            isGift: isGift
           });
-          this.setState({
-            disabled: false
-          });
-        } else {
-          plan.isCheked = false;
+          this.props.setProductAndPlan(this.state.product, plan, isGift);
+          this.submitOption(this.state.product, isGift);
         }
       }
     });
 
     _defineProperty$3(this, "goBack", () => {
       this.setState({
-        disabled: true
-      });
-      this.setState({
-        mode: "product"
+        disabled: true,
+        mode: "product",
+        scrollToTab: true
       });
     });
 
-    _defineProperty$3(this, "submitOption", () => {
-      this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift);
-      const {
-        product,
-        isGift
-      } = this.state;
+    _defineProperty$3(this, "submitOption", (product, isGift) => {
       const {
         setView
       } = this.props;
@@ -19348,31 +19501,20 @@ class SelectModal extends React.Component {
       isGift: props.isGift,
       disabled: true,
       mode: "product",
+      initialTabSlide: 0,
+      scrollToTab: true,
+      prodDescExpanded: false,
       productList: props.matchingEntitlements ? window.Pelcro.product.getByEntitlements(props.matchingEntitlements) : window.Pelcro.product.list()
     };
     this.product = this.props.product || window.Pelcro.paywall.getProduct();
     this.locale = this.props.t;
     this.closeButton = window.Pelcro.paywall.displayCloseButton();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    //Scroll to active tab
-    const activeElement = document.getElementById("activeTab");
-
-    if (activeElement) {
-      activeElement.parentNode.scrollLeft = activeElement.offsetLeft - 80;
-    } else {
-      console.log(document.getElementById("activeTab"));
-    }
+    this.productsTabRef = /*#__PURE__*/React__default['default'].createRef();
   }
 
   render() {
     var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
 
-    const {
-      disableGifting
-    } = this.props;
-
     if (this.state.mode === "product") {
       var _ReactGA$event;
 
@@ -19408,27 +19550,9 @@ class SelectModal extends React.Component {
       id: "pelcro-selection-view"
     }, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-products-wrapper"
-    }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement("div", {
       className: "pelcro-select-plans-wrapper plc-mt-4"
-    }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-justify-center plc-mt-4"
-    }, /*#__PURE__*/React__default['default'].createElement(Checkbox, {
-      onChange: this.onIsGiftChange,
-      checked: this.state.isGift,
-      id: "pelcro-input-is-gift"
-    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__default['default'].createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: this.submitOption,
-      id: "pelcro-submit",
-      className: "plc-mt-2 plc-w-full plc-max-w-sm plc-ml-auto plc-mr-auto plc-block"
-    }, this.locale("buttons.next"))))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, !window.Pelcro.user.isAuthenticated() && /*#__PURE__*/React__default['default'].createElement("p", {
-      className: "plc-mb-9"
-    }, /*#__PURE__*/React__default['default'].createElement("span", {
-      className: "plc-font-medium"
-    }, this.locale("messages.alreadyHaveAccount") + " "), /*#__PURE__*/React__default['default'].createElement(Link, {
-      id: "pelcro-link-login",
-      onClick: this.displayLoginView
-    }, this.locale("messages.loginHere")))));
+    }, this.renderPlans()))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
   }
 
 }
@@ -21541,6 +21665,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 +21710,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
   /*====== Start Tap integration ========*/
 
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref, _ref2, _ref3, _state$updatedPrice;
 
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -21639,7 +21765,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 +21774,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 +21816,7 @@ const PaymentMethodContainerWithoutStripe = ({
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               }; // listen to injected iframe for authentication complete message
 
@@ -21704,7 +21831,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (type === "createPayment") {
@@ -21731,6 +21858,7 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
 
         if (err) {
           onFailure(err);
@@ -21751,7 +21879,8 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
 
     function handleTapSubscription() {
@@ -21886,7 +22015,7 @@ const PaymentMethodContainerWithoutStripe = ({
   /*====== End Tap integration ========*/
 
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (isUsingExistingPaymentMethod) {
@@ -21909,7 +22038,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
 
@@ -21983,9 +22112,6 @@ const PaymentMethodContainerWithoutStripe = ({
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
 
       if (renewGift) {
         return payment.execute({
@@ -22065,6 +22191,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 +22205,7 @@ const PaymentMethodContainerWithoutStripe = ({
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -22091,9 +22219,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 +22245,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 +22318,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 +22365,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 +22427,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 +22504,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 +22963,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 +23252,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 +23390,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 +23428,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 = {
@@ -23828,7 +24005,7 @@ const PaypalSubscribeButton = props => {
     var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
     // sometimes, price is updated. eg. Coupon codes.
-    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice.amount_remaining;
+    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining;
     const selectedAddress = getAddressById((_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : selectedAddressId); // initialize paypal client, then render paypal button.
 
     const initializePaypal = async () => {
@@ -24093,6 +24270,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 +24316,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 +24333,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 +24359,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 +26239,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 +26296,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 +29976,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 +29992,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 +31277,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 +39213,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;