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

package/dist/index.esm.js

@@ -3423,7 +3423,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,
@@ -3967,7 +3968,8 @@ var labels$T = {
 var buttons$g = {
 	next: "Next",
 	select: "Select",
-	back: "Back"
+	back: "Back",
+	gift: "Gift"
 };
 var select_en = {
 	messages: messages$V,
@@ -4367,7 +4369,8 @@ var labels$H = {
 	removeCoupon: "RETIRER",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
-	phone: "Téléphoner"
+	phone: "Téléphoner",
+	freeItems: "Articles gratuits"
 };
 var checkoutForm_fr = {
 	messages: messages$M,
@@ -4912,7 +4915,8 @@ var labels$y = {
 var buttons$b = {
 	next: "Prochain",
 	select: "Choisir",
-	back: "Retour"
+	back: "Retour",
+	gift: "cadeau"
 };
 var select_fr = {
 	messages: messages$B,
@@ -5258,7 +5262,8 @@ var labels$s = {
 	removeCoupon: "제거",
 	firstName: "이름",
 	lastName: "성",
-	phone: "핸드폰"
+	phone: "핸드폰",
+	freeItems: "무료 아이템"
 };
 var checkoutForm_ko = {
 	messages: messages$v,
@@ -5912,7 +5917,8 @@ var labels$j = {
 var buttons$6 = {
 	next: "다음",
 	select: "선택",
-	back: "뒤로"
+	back: "뒤로",
+	gift: "선물"
 };
 var select_ko = {
 	messages: messages$k,
@@ -6198,7 +6204,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,
@@ -6733,7 +6740,8 @@ var labels$4 = {
 var buttons$1 = {
 	next: "Siguiente",
 	select: "Seleccionar",
-	back: "Volver"
+	back: "Volver",
+	gift: "regalo"
 };
 var select_es = {
 	messages: messages$3,
@@ -8835,7 +8843,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());
@@ -11448,6 +11456,10 @@ const initViewFromURL = () => {
         return showSubscriptionManageMembersFromUrl();
       }
 
+      if (view === "payment-method-update") {
+        return showPaymentMethodUpdateFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -11683,6 +11695,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,
@@ -13640,7 +13693,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();
@@ -18832,7 +18885,8 @@ function SvgArrowThinLeft(props) {
 
 const NextArrow = ({
   onClick,
-  className
+  className,
+  size = "normal"
 }) => /*#__PURE__*/React__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
@@ -18840,12 +18894,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.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
@@ -18853,28 +18908,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 = useRef(null);
+  useEffect(() => {
+    ref.current.slickGoTo(initialSlide, true);
+  }, [initialSlide]);
   const settings = {
     dots: true,
     infinite: false,
     speed: 200,
     slidesToShow: slidesToShow,
     slidesToScroll: slidesToScroll,
-    nextArrow: /*#__PURE__*/React__default.createElement(NextArrow, null),
-    prevArrow: /*#__PURE__*/React__default.createElement(PrevArrow, null),
-    initialSlide: 0,
+    nextArrow: /*#__PURE__*/React__default.createElement(NextArrow, {
+      size: arrowsSize
+    }),
+    prevArrow: /*#__PURE__*/React__default.createElement(PrevArrow, {
+      size: arrowsSize
+    }),
+    initialSlide: initialSlide,
+    dots: dots,
     customPaging: i => /*#__PURE__*/React__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,
@@ -18889,7 +18956,7 @@ function Carousel({
     }]
   };
   return /*#__PURE__*/React__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.createElement(Slider, Object.assign({
     ref: ref
   }, settings), children));
@@ -18955,6 +19022,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 Component {
@@ -18999,19 +19089,50 @@ class SelectModal extends 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");
       }
     });
 
@@ -19092,7 +19213,7 @@ class SelectModal extends 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)));
@@ -19113,38 +19234,83 @@ class SelectModal extends 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.createElement("div", {
-        className: "productTabs plc-flex plc-flex-col plc-items-center"
-      }, /*#__PURE__*/React__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.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.createElement("div", {
+          key: product.id
         }, /*#__PURE__*/React__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.createElement("div", {
-        className: "selectedProduct plc-flex plc-flex-col plc-items-center plc-justify-center plc-max-w-3xl"
+      });
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-flex plc-flex-col"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "productTabs plc-relative plc-max-w-xl plc-mx-auto"
+      }, /*#__PURE__*/React__default.createElement(Carousel, {
+        slidesCount: tabs.length,
+        initialSlide: this.state.initialTabSlide,
+        dots: false,
+        arrowsSize: "small"
+      }, tabs)), /*#__PURE__*/React__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.createElement("figure", {
         className: "plc-mb-2"
       }, /*#__PURE__*/React__default.createElement("img", {
         src: image,
         alt: "Product Image"
-      })), description && /*#__PURE__*/React__default.createElement("p", {
-        className: "plc-text-center"
-      }, description)));
+      })), description && /*#__PURE__*/React__default.createElement("div", {
+        className: "plc-max-w-xl plc-text-center"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: `plc-overflow-x-hidden ${prodDescExpanded ? "plc-whitespace-normal" : "plc-whitespace-nowrap"}`
+      }, prodDescExpanded ? /*#__PURE__*/React__default.createElement("span", null, description, " ", /*#__PURE__*/React__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.createElement("span", null, description.slice(0, 50), " ", /*#__PURE__*/React__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", () => {
@@ -19169,34 +19335,22 @@ class SelectModal extends Component {
       }), /*#__PURE__*/React__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.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.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.createElement("div", {
+          className: "plc-w-full plc-flex plc-flex-col plc-h-full",
+          id: `pelcro-select-plan-${plan.id}`
         }, /*#__PURE__*/React__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.createElement("h4", {
@@ -19216,8 +19370,16 @@ class SelectModal extends Component {
         }, plan.currency), /*#__PURE__*/React__default.createElement("span", {
           className: "plc-capitalize"
         }, "/ ", plan.interval))), /*#__PURE__*/React__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.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.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.createElement(Carousel, {
         slidesCount: items.length
@@ -19251,39 +19413,30 @@ class SelectModal extends 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;
@@ -19318,31 +19471,20 @@ class SelectModal extends 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.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;
 
@@ -19378,27 +19520,9 @@ class SelectModal extends Component {
       id: "pelcro-selection-view"
     }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__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.createElement("div", {
       className: "pelcro-select-plans-wrapper plc-mt-4"
-    }, this.renderPlans()), !disableGifting && /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-justify-center plc-mt-4"
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
-      onChange: this.onIsGiftChange,
-      checked: this.state.isGift,
-      id: "pelcro-input-is-gift"
-    }, this.locale("messages.checkbox"))), /*#__PURE__*/React__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.createElement(ModalFooter, null, !window.Pelcro.user.isAuthenticated() && /*#__PURE__*/React__default.createElement("p", {
-      className: "plc-mb-9"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "plc-font-medium"
-    }, this.locale("messages.alreadyHaveAccount") + " "), /*#__PURE__*/React__default.createElement(Link, {
-      id: "pelcro-link-login",
-      onClick: this.displayLoginView
-    }, this.locale("messages.loginHere")))));
+    }, this.renderPlans()))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
   }
 
 }
@@ -21511,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] = useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = useState("");
   const {
     t
   } = useTranslation("payment");
@@ -21554,7 +21680,7 @@ const PaymentMethodContainerWithoutStripe = ({
   }, []);
   /*====== Start Tap integration ========*/
 
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref, _ref2, _ref3, _state$updatedPrice;
 
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -21609,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,
@@ -21618,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
@@ -21659,7 +21786,7 @@ const PaymentMethodContainerWithoutStripe = ({
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               }; // listen to injected iframe for authentication complete message
 
@@ -21674,7 +21801,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (type === "createPayment") {
@@ -21701,6 +21828,7 @@ const PaymentMethodContainerWithoutStripe = ({
           type: LOADING,
           payload: false
         });
+        toggleAuthenticationSuccessPendingView(false);
 
         if (err) {
           onFailure(err);
@@ -21721,7 +21849,8 @@ const PaymentMethodContainerWithoutStripe = ({
           }
         });
         onSuccess(res);
-      });
+      } //
+      );
     }
 
     function handleTapSubscription() {
@@ -21856,7 +21985,7 @@ const PaymentMethodContainerWithoutStripe = ({
   /*====== End Tap integration ========*/
 
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
 
     if (isUsingExistingPaymentMethod) {
@@ -21879,7 +22008,7 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
 
@@ -21953,9 +22082,6 @@ const PaymentMethodContainerWithoutStripe = ({
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
 
       if (renewGift) {
         return payment.execute({
@@ -22035,6 +22161,8 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default.useRef(null);
   const tapInstanceCard = React__default.useRef(null);
   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;
 
@@ -22047,7 +22175,7 @@ const PaymentMethodContainerWithoutStripe = ({
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -22061,9 +22189,17 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
-  }, [selectedPaymentMethodId]);
+  }, [selectedPaymentMethodId]); //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+
+  useEffect(() => {
+    if (vantivPaymentRequest) {
+      handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
+    }
+  }, [vantivPaymentRequest]);
   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");
@@ -22079,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({
@@ -22152,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") {
@@ -22199,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)
@@ -22259,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}%`
@@ -22334,7 +22474,9 @@ const PaymentMethodContainerWithoutStripe = ({
   const debouncedApplyCouponCode = 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: ""
@@ -22791,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(({
@@ -23055,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) {
@@ -23189,10 +23360,14 @@ const PaymentMethodContainerWithoutStripe = ({
       state,
       dispatch
     }
-  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$l,
-    key: i
-  })) : /*#__PURE__*/React__default.cloneElement(children, {
+  }, children.length ? children.map((child, i) => {
+    if (child) {
+      return /*#__PURE__*/React__default.cloneElement(child, {
+        store: store$l,
+        key: i
+      });
+    }
+  }) : /*#__PURE__*/React__default.cloneElement(children, {
     store: store$l
   })));
 };
@@ -23223,11 +23398,13 @@ const PaymentMethodContainer = props => {
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
       store: store$l
     }, props))));
-  } else {
+  } else if (cardProcessor !== "stripe") {
     return /*#__PURE__*/React__default.createElement(PaymentMethodContainerWithoutStripe, Object.assign({
       store: store$l
     }, props));
   }
+
+  return null;
 };
 
 const StripeInputStyle = {
@@ -23798,7 +23975,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 () => {
@@ -24063,6 +24240,41 @@ const BankAuthenticationSuccess = () => {
   }));
 };
 
+const OrderCreateFreeButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    state: {
+      disableSubmit
+    },
+    dispatch
+  } = useContext(store$l);
+  const {
+    t
+  } = useTranslation("checkoutForm");
+  const [isDisabled, setDisabled] = useState(true);
+  useEffect(() => {
+    setDisabled(disableSubmit);
+  }, [disableSubmit]);
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({
+    className: "plc-w-full",
+    onClick: () => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+      dispatch({
+        type: SUBMIT_PAYMENT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    },
+    disabled: isDisabled,
+    isLoading: disableSubmit
+  }, otherProps), t("labels.submit"));
+};
+
 /**
  *
  */
@@ -24074,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
@@ -24089,7 +24303,17 @@ function PaymentMethodView({
   const isUserPhone = Boolean(window.Pelcro.user.read().phone);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, cardProcessor === "stripe" && !showSubscriptionButton && /*#__PURE__*/React__default.createElement("div", {
+  }, order && /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-w-full plc-p-2 plc-mb-4 plc-font-semibold plc-text-center plc-text-gray-900 plc-bg-gray-100 plc-border plc-border-gray-200"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-text-gray-600"
+  }, !Array.isArray(order) ? /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, order === null || order === void 0 ? void 0 : order.name) : /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-tracking-wider plc-uppercase"
+  }, t("labels.freeItems")), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-xl plc-font-semibold plc-text-primary-600"
+  }, (_calcAndFormatItemsTo = calcAndFormatItemsTotal(order, (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency)) !== null && _calcAndFormatItemsTo !== void 0 ? _calcAndFormatItemsTo : getFormattedPriceByLocal(order === null || order === void 0 ? void 0 : order.price, order === null || order === void 0 ? void 0 : order.currency, getPageOrDefaultLanguage())))), cardProcessor === "stripe" && !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default.createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -24105,10 +24329,11 @@ function PaymentMethodView({
     type: type,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
-    onFailure: onFailure
+    onFailure: onFailure,
+    freeOrders: showOrderButton
   }, /*#__PURE__*/React__default.createElement(AlertWithContext, {
     className: "plc-mb-2"
-  }), showSubscriptionButton ? /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }), showSubscriptionButton && /*#__PURE__*/React__default.createElement(SubscriptionCreateFreePlanButton, null), showOrderButton && /*#__PURE__*/React__default.createElement(OrderCreateFreeButton, null), !showSubscriptionButton && !showOrderButton && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(BankRedirection, null), /*#__PURE__*/React__default.createElement(BankAuthenticationSuccess, null), /*#__PURE__*/React__default.createElement(SelectedPaymentMethod, null), supportsTap && (!isUserFirstName || !isUserLastName || !isUserPhone) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(IncludeFirstName, {
     id: "pelcro-input-first-name",
@@ -25984,6 +26209,19 @@ function SubscriptionManageMembersList(props) {
       icon: /*#__PURE__*/React__default.createElement(SvgCheckMark, null)
     };
   }, []);
+  const showMemberData = useCallback(member => {
+    var _member$customer, _member$customer2, _member$customer3, _member$customer4;
+
+    let data;
+
+    if ((member === null || member === void 0 ? void 0 : member.status) !== "active") {
+      data = member === null || member === void 0 ? void 0 : member.invitation_email;
+      return data;
+    }
+
+    data = (member === null || member === void 0 ? void 0 : (_member$customer = member.customer) === null || _member$customer === void 0 ? void 0 : _member$customer.email) || (member === null || member === void 0 ? void 0 : (_member$customer2 = member.customer) === null || _member$customer2 === void 0 ? void 0 : _member$customer2.first_name) + " " + (member === null || member === void 0 ? void 0 : (_member$customer3 = member.customer) === null || _member$customer3 === void 0 ? void 0 : _member$customer3.last_name) || (member === null || member === void 0 ? void 0 : (_member$customer4 = member.customer) === null || _member$customer4 === void 0 ? void 0 : _member$customer4.username) || "-----";
+    return data;
+  }, []);
 
   if (loading) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement("div", {
@@ -26028,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.createElement("td", {
     className: "plc-truncate plc-text-left",
-    title: member === null || member === void 0 ? void 0 : member.invitation_email
+    title: showMemberData(member)
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "plc-font-semibold plc-text-gray-500"
-  }, member === null || member === void 0 ? void 0 : member.invitation_email)), /*#__PURE__*/React__default.createElement("td", {
+  }, showMemberData(member))), /*#__PURE__*/React__default.createElement("td", {
     className: "plc-py-2"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${getMemberStatus(member).bgColor} plc-uppercase ${getMemberStatus(member).textColor} plc-rounded-lg`
@@ -29708,6 +29946,14 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
 }, 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.createElement("div", {
     id: "pelcro-order-create-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -29716,7 +29962,9 @@ const OrderCreateView = props => {
   }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false
+    showExternalPaymentMethods: false,
+    showOrderButton: showOrderButton,
+    order: order
   }, props))));
 };
 
@@ -30999,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;
   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();
     }
   }, []);
@@ -38805,4 +39054,4 @@ const QrCodeModal = ({
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddNew, AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, Card, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, Dashboard, DashboardAddresses, DashboardContainer, DashboardContent, DashboardDonations, DashboardGifts, DashboardHeading, DashboardInvoices, DashboardLink, DashboardMemberships, DashboardNewsletters, DashboardOpenButton, DashboardOrders, DashboardPasswordChange, DashboardPaymentCards, DashboardProfile, DashboardQRCode, DashboardSavedItems, DashboardSubscriptions, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, ModalHeader, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };