tf-checkout-react 1.6.6-beta.33 → 1.6.6-beta.34

package/dist/tf-checkout-react.esm.js

@@ -6456,6 +6456,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var hideInstagramField = !collectMandatoryInstagram && !collectOptionalInstagram;
   var collectMandatoryBusinessCategory = configs == null ? void 0 : configs.collect_mandatory_business_category;
   var collectOptionalBusinessCategory = configs == null ? void 0 : configs.collect_optional_business_category;
+  var eventHasAddons = configs == null ? void 0 : configs.has_add_on;
   var hideBusinessCategoryField = !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory;
   var _useState22 = useState(),
     pendingVerificationMessage = _useState22[0],
@@ -6799,6 +6800,11 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var removeAdditionalConfigs = useCallback(function () {
     localStorage.removeItem('checkoutAdditionalConfigs');
   }, []);
+  useEffect(function () {
+    onCheckoutUpdateSuccess(_extends({
+      expires_at: expirationTime
+    }, checkoutData));
+  }, [checkoutData, cartInfoData]);
   var updateCheckoutWithAddOns = useCallback( /*#__PURE__*/function () {
     var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(addOns) {
       var mergedAddOns, _checkoutUpdateData, checkoutResponse, checkoutDataObj, errorMessage;
@@ -6840,7 +6846,6 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
             if (checkoutResponse.success) {
               checkoutDataObj = _get(checkoutResponse, 'data.attributes.cart_price_breakdown', {});
               setCheckoutData(checkoutDataObj);
-              onCheckoutUpdateSuccess(checkoutResponse.data.attributes);
               setSingleCheckoutAddOns(mergedAddOns);
             }
             _context7.next = 18;
@@ -7255,12 +7260,12 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
     }, React.createElement("img", {
       src: theme === 'dark' ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg' : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
       alt: "nodata"
-    })))), isSinglePageCheckout && !addOnsIncludedOnInvitation && eventId ? React.createElement(SimpleAddonsContainer, Object.assign({}, addonsProps != null ? addonsProps : {}, {
+    })))), isSinglePageCheckout && !addOnsIncludedOnInvitation && eventHasAddons && eventId ? React.createElement(SimpleAddonsContainer, Object.assign({}, addonsProps != null ? addonsProps : {}, {
       eventId: eventId,
       addOnDataWithCustomFields: addOnDataWithCustomFields,
       configs: configs,
       onAddOnSelect: onAddOnSelect
-    })) : !addOnsIncludedOnInvitation && includeAddons ? React.createElement(AddonsContainter, Object.assign({}, addonsProps != null ? addonsProps : {}, {
+    })) : !addOnsIncludedOnInvitation && includeAddons && !isSinglePageCheckout ? React.createElement(AddonsContainter, Object.assign({}, addonsProps != null ? addonsProps : {}, {
       addOnDataWithCustomFields: addOnDataWithCustomFields,
       configs: configs,
       onAddOnSelect: onAddOnSelect
@@ -14796,14 +14801,40 @@ var PreRegistrationInformations = function PreRegistrationInformations(props) {
   })));
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-var OrderDetails = function OrderDetails(_ref) {
-  var _ref$orderData = _ref.orderData,
-    orderData = _ref$orderData === void 0 ? {} : _ref$orderData,
-    _ref$paymentFieldsDat = _ref.paymentFieldsData,
-    paymentFieldsData = _ref$paymentFieldsDat === void 0 ? [] : _ref$paymentFieldsDat,
-    _ref$customMobileText = _ref.customMobileText,
-    customMobileText = _ref$customMobileText === void 0 ? 'Your order total' : _ref$customMobileText;
+var SimpleCountdown = /*#__PURE__*/memo(function (_ref) {
+  var expiresAt = _ref.expiresAt,
+    handleCountdownFinish = _ref.handleCountdownFinish;
+  var _renderer = function renderer(_ref2) {
+    var minutes = _ref2.minutes,
+      seconds = _ref2.seconds,
+      completed = _ref2.completed,
+      handleCountdownFinish = _ref2.handleCountdownFinish;
+    if (completed) {
+      handleCountdownFinish();
+      return null;
+    }
+    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
+  return React.createElement("div", {
+    className: "mobile-order-timer"
+  }, expiresAt && React.createElement(Countdown$1, {
+    date: Date.now() + expiresAt * 1000,
+    renderer: function renderer(props) {
+      return _renderer(_extends({}, props, {
+        handleCountdownFinish: handleCountdownFinish
+      }));
+    }
+  }));
+});
+var OrderDetails = function OrderDetails(_ref3) {
+  var _ref3$orderData = _ref3.orderData,
+    orderData = _ref3$orderData === void 0 ? {} : _ref3$orderData,
+    _ref3$paymentFieldsDa = _ref3.paymentFieldsData,
+    paymentFieldsData = _ref3$paymentFieldsDa === void 0 ? [] : _ref3$paymentFieldsDa,
+    _ref3$customMobileTex = _ref3.customMobileText,
+    customMobileText = _ref3$customMobileTex === void 0 ? 'Your order total' : _ref3$customMobileTex,
+    _ref3$handleCountdown = _ref3.handleCountdownFinish,
+    handleCountdownFinish = _ref3$handleCountdown === void 0 ? _identity : _ref3$handleCountdown;
   var currency = orderData.currency,
     guest_count = orderData.guest_count;
   var hasTableTypes = Boolean(Number(guest_count));
@@ -14818,6 +14849,26 @@ var OrderDetails = function OrderDetails(_ref) {
   var toggleExpand = function toggleExpand() {
     setIsExpanded(!isExpanded);
   };
+  var defaultItemRenderer = function defaultItemRenderer(item) {
+    return React.createElement("div", null, React.createElement("div", {
+      key: item.id,
+      className: "add-on-container"
+    }, React.createElement("span", null, item.quantity), React.createElement("span", {
+      className: "add-on-x"
+    }, ' x '), React.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React.createElement("span", null, item.name), React.createElement("span", null, ' - '), React.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)), React.createElement("span", {
+      className: "add-on-each"
+    }, ' each')), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React.createElement("p", {
+      className: "fees"
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"));
+  };
+  var defaultTableRenderer = function defaultTableRenderer(item) {
+    return React.createElement("div", null, React.createElement("div", {
+      key: item.id,
+      className: "table-type-container"
+    }, React.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React.createElement("span", null, item.name), React.createElement("span", null, ' - '), React.createElement("span", null, "Guest Count", ': '), React.createElement("span", null, item.guestCount)), React.createElement("div", null, React.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)), React.createElement("br", null), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React.createElement("p", {
+      className: "fees"
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)")));
+  };
   return React.createElement("div", {
     className: "payment_page payment_page_single"
   }, React.createElement("div", {
@@ -14831,11 +14882,14 @@ var OrderDetails = function OrderDetails(_ref) {
     className: "mobile-order-info-container order-info-container-left " + (isExpanded ? 'open' : '')
   }, React.createElement("div", {
     className: "mobile-order-text"
-  }, customMobileText)), !isExpanded && React.createElement("div", {
+  }, customMobileText)), React.createElement("div", {
     className: "mobile-order-info-container order-info-container-right"
-  }, React.createElement("div", {
+  }, !isExpanded && React.createElement("div", {
     className: "mobile-order-total"
-  }, totalValue))))), React.createElement("div", {
+  }, totalValue), (orderData == null ? void 0 : orderData.expires_at) && React.createElement(SimpleCountdown, {
+    expiresAt: orderData == null ? void 0 : orderData.expires_at,
+    handleCountdownFinish: handleCountdownFinish
+  }))))), React.createElement("div", {
     className: "order_info_section " + (isExpanded ? 'expanded' : 'collapsed'),
     style: {
       display: hasTableTypes ? 'block' : 'grid'
@@ -14898,16 +14952,7 @@ var OrderDetails = function OrderDetails(_ref) {
     }, label), React.createElement("div", {
       className: className + " order_info_text"
     }, typeof value === 'string' || typeof value === 'number' ? normalizer(value, currency, orderData) : _map(value, function (item) {
-      return React.createElement("div", null, React.createElement("div", {
-        key: item.id,
-        className: "add-on-container"
-      }, React.createElement("span", null, item.quantity), React.createElement("span", {
-        className: "add-on-x"
-      }, ' x '), React.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React.createElement("span", null, item.name), React.createElement("span", null, ' - '), React.createElement("span", null, CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price)), currency) + ' (incl. fees)', CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)), React.createElement("span", {
-        className: "add-on-each"
-      }, ' each')), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React.createElement("p", {
-        className: "fees"
-      }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"));
+      return item.isTable ? defaultTableRenderer(item) : defaultItemRenderer(item);
     })));
   })));
 };