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

package/dist/components/addonsContainer/SimpleAddonsContainer.d.ts

@@ -13,5 +13,5 @@ export interface ISimpleAddonContainerProps {
 export interface ObjectLiteral {
     [key: string]: any;
 }
-export declare const SimpleAddonsContainer: ({ classNamePrefix, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, descriptionTrigger, addOnDataWithCustomFields, configs, eventId, onAddOnSelect, handleConfirm, }: ISimpleAddonContainerProps) => JSX.Element | null;
+export declare const SimpleAddonsContainer: ({ classNamePrefix, onGetAddonsPageInfoSuccess, onGetAddonsPageInfoError, descriptionTrigger, addOnDataWithCustomFields, configs, eventId, onAddOnSelect, handleConfirm, }: ISimpleAddonContainerProps) => JSX.Element;
 export default SimpleAddonsContainer;

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

@@ -4282,7 +4282,7 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
     onAddOnSelect = _ref$onAddOnSelect === void 0 ? _identity : _ref$onAddOnSelect,
     _ref$handleConfirm = _ref.handleConfirm,
     handleConfirm = _ref$handleConfirm === void 0 ? _identity : _ref$handleConfirm;
-  var _useState = React.useState([]),
+  var _useState = React.useState(null),
     addons = _useState[0],
     setAddons = _useState[1];
   var _useState2 = React.useState({}),
@@ -4423,16 +4423,13 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
     }
     return addOnsData;
   }, [addons, addOnDataWithCustomFields]);
-  if (loading) {
+  if (loading || !addons) {
     return React__default.createElement("div", {
       className: classNamePrefix + "_loader"
     }, React__default.createElement(material.CircularProgress, {
       size: 50
     }));
   }
-  if ((addons == null ? void 0 : addons.length) === 0) {
-    return null;
-  }
   return React__default.createElement("div", {
     className: classNamePrefix + "_container"
   }, React__default.createElement("div", {
@@ -6466,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],
@@ -6809,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;
@@ -6850,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;
@@ -6918,18 +6920,21 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   var stripePublishableKey = (reviewData == null ? void 0 : (_reviewData$payment_m = reviewData.payment_method) == null ? void 0 : _reviewData$payment_m.stripe_publishable_key) || (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a2 = _checkoutUpdateData$a.basic_config) == null ? void 0 : _checkoutUpdateData$a2.apiKey);
   var stripeAccountId = (reviewData == null ? void 0 : (_reviewData$payment_m2 = reviewData.payment_method) == null ? void 0 : _reviewData$payment_m2.stripe_connected_account) || (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a3 = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a4 = _checkoutUpdateData$a3.basic_config) == null ? void 0 : _checkoutUpdateData$a4.accountId);
   var addOnsIncludedOnInvitation = additionalConfigs.resale && additionalConfigs.resaleWithAddons;
+  if (loading || cardLoading || isCountriesLoading || isConfigLoading || !eventId) {
+    return React__default.createElement(Backdrop, {
+      sx: {
+        color: '#fff',
+        backgroundColor: '#000000bd',
+        zIndex: 1205
+      },
+      open: true
+    }, React__default.createElement(material.CircularProgress, {
+      color: "inherit"
+    }));
+  }
   return React__default.createElement(styles.ThemeProvider, {
     theme: themeMui
-  }, (loading || cardLoading || isCountriesLoading || isConfigLoading) && React__default.createElement(Backdrop, {
-    sx: {
-      color: '#fff',
-      backgroundColor: '#000000bd',
-      zIndex: 1205
-    },
-    open: true
-  }, React__default.createElement(material.CircularProgress, {
-    color: "inherit"
-  })), !!expirationTime && enableTimer && React__default.createElement(TimerWidget$1, {
+  }, !!expirationTime && enableTimer && React__default.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish,
     container: isSinglePageCheckout ? 'body' : ''
@@ -7232,7 +7237,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       shouldFetchCountries: shouldFetchCountries
     }), React__default.createElement("div", {
       className: "billing-info-container " + theme
-    }, React__default.createElement(SnackbarAlert, {
+    }, !!error && React__default.createElement(SnackbarAlert, {
       type: "error",
       isOpen: !!error,
       message: error || '',
@@ -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);
     })));
   })));
 };