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

package/dist/components/paymentContainer/OrderDetails.d.ts

@@ -3,6 +3,7 @@ interface OrderDetailsProps {
     orderData: any;
     paymentFieldsData: any[];
     customMobileText?: string;
+    handleCountdownFinish?: () => void;
 }
-export declare const OrderDetails: ({ orderData, paymentFieldsData, customMobileText, }: OrderDetailsProps) => JSX.Element;
+export declare const OrderDetails: ({ orderData, paymentFieldsData, customMobileText, handleCountdownFinish }: OrderDetailsProps) => JSX.Element;
 export {};

package/dist/tf-checkout-react.cjs.development.js

@@ -6463,6 +6463,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.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 = React.useState(),
     pendingVerificationMessage = _useState22[0],
@@ -6806,6 +6807,11 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   var removeAdditionalConfigs = React.useCallback(function () {
     localStorage.removeItem('checkoutAdditionalConfigs');
   }, []);
+  React.useEffect(function () {
+    onCheckoutUpdateSuccess(_extends({
+      expires_at: expirationTime
+    }, checkoutData));
+  }, [checkoutData, cartInfoData]);
   var updateCheckoutWithAddOns = React.useCallback( /*#__PURE__*/function () {
     var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(addOns) {
       var mergedAddOns, _checkoutUpdateData, checkoutResponse, checkoutDataObj, errorMessage;
@@ -6847,7 +6853,6 @@ var BillingInfoContainer = /*#__PURE__*/React__default.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;
@@ -7262,12 +7267,12 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     }, React__default.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__default.createElement(SimpleAddonsContainer, Object.assign({}, addonsProps != null ? addonsProps : {}, {
+    })))), isSinglePageCheckout && !addOnsIncludedOnInvitation && eventHasAddons && eventId ? React__default.createElement(SimpleAddonsContainer, Object.assign({}, addonsProps != null ? addonsProps : {}, {
       eventId: eventId,
       addOnDataWithCustomFields: addOnDataWithCustomFields,
       configs: configs,
       onAddOnSelect: onAddOnSelect
-    })) : !addOnsIncludedOnInvitation && includeAddons ? React__default.createElement(AddonsContainter, Object.assign({}, addonsProps != null ? addonsProps : {}, {
+    })) : !addOnsIncludedOnInvitation && includeAddons && !isSinglePageCheckout ? React__default.createElement(AddonsContainter, Object.assign({}, addonsProps != null ? addonsProps : {}, {
       addOnDataWithCustomFields: addOnDataWithCustomFields,
       configs: configs,
       onAddOnSelect: onAddOnSelect
@@ -14799,14 +14804,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__*/React.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__default.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
+  return React__default.createElement("div", {
+    className: "mobile-order-timer"
+  }, expiresAt && React__default.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));
@@ -14821,6 +14852,26 @@ var OrderDetails = function OrderDetails(_ref) {
   var toggleExpand = function toggleExpand() {
     setIsExpanded(!isExpanded);
   };
+  var defaultItemRenderer = function defaultItemRenderer(item) {
+    return React__default.createElement("div", null, React__default.createElement("div", {
+      key: item.id,
+      className: "add-on-container"
+    }, React__default.createElement("span", null, item.quantity), React__default.createElement("span", {
+      className: "add-on-x"
+    }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.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__default.createElement("span", {
+      className: "add-on-each"
+    }, ' each')), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
+      className: "fees"
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"));
+  };
+  var defaultTableRenderer = function defaultTableRenderer(item) {
+    return React__default.createElement("div", null, React__default.createElement("div", {
+      key: item.id,
+      className: "table-type-container"
+    }, React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.createElement("span", null, "Guest Count", ': '), React__default.createElement("span", null, item.guestCount)), React__default.createElement("div", null, React__default.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__default.createElement("br", null), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
+      className: "fees"
+    }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)")));
+  };
   return React__default.createElement("div", {
     className: "payment_page payment_page_single"
   }, React__default.createElement("div", {
@@ -14834,11 +14885,14 @@ var OrderDetails = function OrderDetails(_ref) {
     className: "mobile-order-info-container order-info-container-left " + (isExpanded ? 'open' : '')
   }, React__default.createElement("div", {
     className: "mobile-order-text"
-  }, customMobileText)), !isExpanded && React__default.createElement("div", {
+  }, customMobileText)), React__default.createElement("div", {
     className: "mobile-order-info-container order-info-container-right"
-  }, React__default.createElement("div", {
+  }, !isExpanded && React__default.createElement("div", {
     className: "mobile-order-total"
-  }, totalValue))))), React__default.createElement("div", {
+  }, totalValue), (orderData == null ? void 0 : orderData.expires_at) && React__default.createElement(SimpleCountdown, {
+    expiresAt: orderData == null ? void 0 : orderData.expires_at,
+    handleCountdownFinish: handleCountdownFinish
+  }))))), React__default.createElement("div", {
     className: "order_info_section " + (isExpanded ? 'expanded' : 'collapsed'),
     style: {
       display: hasTableTypes ? 'block' : 'grid'
@@ -14901,16 +14955,7 @@ var OrderDetails = function OrderDetails(_ref) {
     }, label), React__default.createElement("div", {
       className: className + " order_info_text"
     }, typeof value === 'string' || typeof value === 'number' ? normalizer(value, currency, orderData) : _map(value, function (item) {
-      return React__default.createElement("div", null, React__default.createElement("div", {
-        key: item.id,
-        className: "add-on-container"
-      }, React__default.createElement("span", null, item.quantity), React__default.createElement("span", {
-        className: "add-on-x"
-      }, ' x '), React__default.createElement("span", null, item.groupName ? item.groupName + ' - ' : ''), React__default.createElement("span", null, item.name), React__default.createElement("span", null, ' - '), React__default.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__default.createElement("span", {
-        className: "add-on-each"
-      }, ' each')), CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && React__default.createElement("p", {
-        className: "fees"
-      }, "(" + currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(String(item.price))), currency) + " with fees)"));
+      return item.isTable ? defaultTableRenderer(item) : defaultItemRenderer(item);
     })));
   })));
 };