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

package/dist/components/confirmationContainer/index.d.ts

@@ -11,6 +11,7 @@ export interface IShareButton {
     eventActionId?: string;
     oneTimeAction?: boolean;
     alreadyApplied?: boolean;
+    btnClassName?: string;
 }
 export interface IConfirmationLabels {
     confirmationTitle?: string;

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

@@ -35,6 +35,10 @@ var Checkbox$1 = _interopDefault(require('@mui/material/Checkbox'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var styles$1 = require('@mui/styles');
+var Visibility = _interopDefault(require('@mui/icons-material/Visibility'));
+var VisibilityOff = _interopDefault(require('@mui/icons-material/VisibilityOff'));
+var IconButton = _interopDefault(require('@mui/material/IconButton'));
+var InputAdornment = _interopDefault(require('@mui/material/InputAdornment'));
 var TextField = _interopDefault(require('@mui/material/TextField'));
 var _isFunction = _interopDefault(require('lodash/isFunction'));
 var _isObject = _interopDefault(require('lodash/isObject'));
@@ -2785,7 +2789,7 @@ var Checkbox = function Checkbox(_ref) {
 };
 
 var CustomField = function CustomField(_ref2) {
-  var _ref$current;
+  var _ref$current, _customTheme$input;
   var label = _ref2.label,
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'text' : _ref2$type,
@@ -2812,15 +2816,39 @@ var CustomField = function CustomField(_ref2) {
   var _useState = React.useState(Boolean(field.value)),
     isShrinked = _useState[0],
     setIsShrinked = _useState[1];
+  var _useState2 = React.useState(false),
+    showPassword = _useState2[0],
+    setShowPassword = _useState2[1];
   var _ref = React.useRef(null);
   var isAutoFilled = (_ref$current = _ref.current) == null ? void 0 : _ref$current.matches(':-webkit-autofill');
   var isSelectField = type === 'select';
+  var isPasswordField = type === 'password';
   var error = _get(errors, field.name);
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
   var customTheme = styles$1.useTheme();
   var inputProps = {
     sx: customTheme == null ? void 0 : customTheme.input
   };
+  var handleClickShowPassword = function handleClickShowPassword() {
+    setShowPassword(!showPassword);
+  };
+  var handleMouseDownPassword = function handleMouseDownPassword(event) {
+    event.preventDefault();
+  };
+  var finalInputProps = isPasswordField ? _extends({}, InputProps, {
+    endAdornment: React__default.createElement(InputAdornment, {
+      position: "end"
+    }, React__default.createElement(IconButton, {
+      "aria-label": "toggle password visibility",
+      onClick: handleClickShowPassword,
+      onMouseDown: handleMouseDownPassword,
+      edge: "end",
+      size: "small",
+      sx: {
+        color: (customTheme == null ? void 0 : (_customTheme$input = customTheme.input) == null ? void 0 : _customTheme$input.color) || 'inherit'
+      }
+    }, showPassword ? React__default.createElement(VisibilityOff, null) : React__default.createElement(Visibility, null)))
+  }) : InputProps;
   React.useEffect(function () {
     if (_isFunction(inputRef)) {
       inputRef(_ref.current);
@@ -2833,7 +2861,7 @@ var CustomField = function CustomField(_ref2) {
     placeholder: "",
     id: field.name,
     label: label,
-    type: type,
+    type: isPasswordField ? showPassword ? 'text' : 'password' : type,
     select: isSelectField,
     fullWidth: true,
     error: !!error && isTouched,
@@ -2852,7 +2880,7 @@ var CustomField = function CustomField(_ref2) {
       sx: customTheme == null ? void 0 : customTheme.input,
       shrink: isShrinked || Boolean(field.value) || isAutoFilled
     },
-    InputProps: InputProps,
+    InputProps: finalInputProps,
     inputProps: _extends({}, inputProps, pInputProps),
     inputRef: _ref,
     multiline: multiline,
@@ -4873,33 +4901,21 @@ var LoginModal = function LoginModal(_ref) {
     }, React__default.createElement("div", {
       className: "login-modal-body__email"
     }, React__default.createElement(formik.Field, {
-      name: 'email',
+      name: "email",
+      label: "Email",
+      type: "email",
+      component: CustomField,
+      theme: "light",
       validate: requiredValidator
-    }, function (_ref3) {
-      var field = _ref3.field,
-        meta = _ref3.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: 'Email',
-        type: 'email',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
     })), React__default.createElement("div", {
       className: "login-modal-body__password"
     }, React__default.createElement(formik.Field, {
-      name: 'password',
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField,
+      theme: "light",
       validate: requiredValidator
-    }, function (_ref4) {
-      var field = _ref4.field,
-        meta = _ref4.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: "Password",
-        type: "password",
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
     })), React__default.createElement("div", {
       className: "login-action-button"
     }, React__default.createElement("button", {
@@ -5988,18 +6004,18 @@ var SignupSchema = /*#__PURE__*/Yup.object().shape({
   firstName: /*#__PURE__*/Yup.string().required('Required'),
   lastName: /*#__PURE__*/Yup.string().required('Required'),
   email: /*#__PURE__*/Yup.string().email('Invalid email').required('Required'),
-  password: /*#__PURE__*/Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  password: /*#__PURE__*/Yup.string().min(8, 'Password must have 8+ characters').required('Required').matches( /*#__PURE__*/new RegExp('^(?=.*[@$!%*#?&])'), 'Password must contain at least one special character'),
   confirmPassword: /*#__PURE__*/Yup.string().required('Required').oneOf([/*#__PURE__*/Yup.ref('password'), null], 'Passwords must match')
 });
 var SignupModal = function SignupModal(_ref) {
   var _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+    onClose = _ref$onClose === void 0 ? _identity : _ref$onClose,
     _ref$onLogin = _ref.onLogin,
-    onLogin = _ref$onLogin === void 0 ? function () {} : _ref$onLogin,
+    onLogin = _ref$onLogin === void 0 ? _identity : _ref$onLogin,
     _ref$onRegisterSucces = _ref.onRegisterSuccess,
-    onRegisterSuccess = _ref$onRegisterSucces === void 0 ? function () {} : _ref$onRegisterSucces,
+    onRegisterSuccess = _ref$onRegisterSucces === void 0 ? _identity : _ref$onRegisterSucces,
     _ref$onRegisterError = _ref.onRegisterError,
-    onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError,
+    onRegisterError = _ref$onRegisterError === void 0 ? _identity : _ref$onRegisterError,
     _ref$showPoweredByIma = _ref.showPoweredByImage,
     showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
   var _useState = React.useState(false),
@@ -6049,7 +6065,7 @@ var SignupModal = function SignupModal(_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
-  var _onClose = loading ? function () {} : onClose;
+  var _onClose = loading ? _identity : onClose;
   return React__default.createElement(material.Modal, {
     open: true,
     onClose: _onClose,
@@ -6463,6 +6479,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],
@@ -6651,7 +6668,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   React.useEffect(function () {
     var fetchCheckoutUpdate = /*#__PURE__*/function () {
       var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        var checkoutUpdateResponse, checkoutAttributes;
+        var checkoutUpdateResponse, checkoutAttributes, cartPriceBreakdown;
         return _regeneratorRuntime().wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
@@ -6673,7 +6690,15 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
               checkoutUpdateResponse = _context5.sent;
               if (checkoutUpdateResponse.success) {
                 checkoutAttributes = checkoutUpdateResponse.data.attributes;
+                cartPriceBreakdown = _get(checkoutAttributes, 'cart_price_breakdown', {});
+                localStorage.setItem('checkoutData', JSON.stringify({
+                  hash: '',
+                  total: _get(cartPriceBreakdown, 'total', 0)
+                }));
                 setCheckoutUpdateData(checkoutAttributes);
+                onCheckoutUpdateSuccess(_extends({
+                  expires_at: expirationTime
+                }, cartPriceBreakdown));
               }
               _context5.next = 12;
               break;
@@ -6692,7 +6717,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       };
     }();
     fetchCheckoutUpdate();
-  }, [eventId]);
+  }, [eventId, additionalConfigs == null ? void 0 : additionalConfigs.resale]);
   React.useEffect(function () {
     var collectPaymentData = /*#__PURE__*/function () {
       var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
@@ -6806,6 +6831,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 +6877,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;
@@ -6936,7 +6965,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   }), !isCountriesLoading && !isConfigLoading && React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({
       country: initialCountry,
-      state: _get(userData, 'stateId', '') || '1',
+      state: _get(userData, 'stateId', '') || _get(userData, 'state', '') || '1',
       brand_opt_in: Boolean(optedInFieldValue),
       ttf_opt_in: ttfOptIn,
       data_capture: {
@@ -7262,12 +7291,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
@@ -7559,7 +7588,7 @@ var config = {
   },
   twitter: {
     component: reactShare.TwitterShareButton,
-    icon: reactShare.TwitterIcon
+    icon: reactShare.XIcon
   },
   linkedin: {
     component: reactShare.LinkedinShareButton,
@@ -7655,12 +7684,15 @@ var SocialComponent = function SocialComponent(_ref) {
     points = _ref.points,
     onAfterShare = _ref.onAfterShare,
     alreadyApplied = _ref.alreadyApplied,
-    oneTimeAction = _ref.oneTimeAction;
+    oneTimeAction = _ref.oneTimeAction,
+    _ref$btnClassName = _ref.btnClassName,
+    btnClassName = _ref$btnClassName === void 0 ? '' : _ref$btnClassName;
   var Component = (_config = config$1(platform)) == null ? void 0 : _config.component;
   var Icon = (_config2 = config$1(platform)) == null ? void 0 : _config2.icon;
   var isActionDisabled = alreadyApplied && oneTimeAction;
   return React__default.createElement(React__default.Fragment, null, Component && React__default.createElement(Component, Object.assign({}, shareData, {
-    disabled: isActionDisabled
+    disabled: isActionDisabled,
+    className: btnClassName
   }), React__default.createElement("div", {
     onKeyDown: _identity,
     onClick: !isActionDisabled ? onAfterShare : _identity,
@@ -7712,13 +7744,14 @@ var SocialButtons = function SocialButtons(_ref2) {
       url: shareLink
     }
   }), React__default.createElement(SocialComponent, {
-    mainLabel: "Tweet to your",
-    subLabel: "Followers",
+    mainLabel: "Post on",
+    subLabel: "X",
     platform: "twitter",
     shareData: {
       title: name,
       url: shareLink
-    }
+    },
+    btnClassName: "twitter-btn"
   }), React__default.createElement(SocialComponent, {
     mainLabel: "Message friends on",
     subLabel: "Facebook",
@@ -7938,7 +7971,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     "aria-hidden": true,
     className: "share-by-link-copy-icon",
     onClick: function onClick() {
-      navigator.clipboard.writeText(_get(inputRef, 'current.value') || "");
+      navigator.clipboard.writeText(_get(inputRef, 'current.value') || '');
       setShowCopyModal(true);
       onLinkCopied();
     }
@@ -9089,7 +9122,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
       getTicketsApi();
       fetchPreregisteredData();
     }
-  }, [eventId, isTimeSlotEvent]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventId]);
   React.useEffect(function () {
     setIsPreregistered(checkUserPreregistration(preregisteredUsers));
   }, [preregisteredUsers]);
@@ -9642,7 +9676,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     callback: updateTickets,
     disableLeadingZero: disableCountdownLeadingZero,
     isLoggedIn: isLoggedIn
-  }) : null, showWaitingList && event.salesStarted && !hideWaitingList && React__default.createElement(WaitingList, {
+  }) : null, (event == null ? void 0 : event.enableWaitingList) && showWaitingList && event.salesStarted && !hideWaitingList && React__default.createElement(WaitingList, {
     tickets: ordinaryTickets,
     eventId: eventId,
     defaultMaxQuantity: event.waitingListMaxQuantity
@@ -11024,16 +11058,16 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
 };
 
 var Schema$1 = /*#__PURE__*/Yup.object().shape({
-  password: /*#__PURE__*/Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  password: /*#__PURE__*/Yup.string().min(8, 'Password must have 8+ characters').required('Required').matches( /*#__PURE__*/new RegExp('^(?=.*[@$!%*#?&])'), 'Password must contain at least one special character'),
   password_confirmation: /*#__PURE__*/Yup.string().required('Required').oneOf([/*#__PURE__*/Yup.ref('password'), null], 'Passwords must match')
 });
 var ResetPasswordContainer = function ResetPasswordContainer(_ref) {
   var _ref$token = _ref.token,
     tokenProps = _ref$token === void 0 ? '' : _ref$token,
     _ref$onResetPasswordS = _ref.onResetPasswordSuccess,
-    onResetPasswordSuccess = _ref$onResetPasswordS === void 0 ? function () {} : _ref$onResetPasswordS,
+    onResetPasswordSuccess = _ref$onResetPasswordS === void 0 ? _identity : _ref$onResetPasswordS,
     _ref$onResetPasswordE = _ref.onResetPasswordError,
-    onResetPasswordError = _ref$onResetPasswordE === void 0 ? function () {} : _ref$onResetPasswordE;
+    onResetPasswordError = _ref$onResetPasswordE === void 0 ? _identity : _ref$onResetPasswordE;
   var _useState = React.useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -14799,14 +14833,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 +14881,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 +14914,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 +14984,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);
     })));
   })));
 };