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

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;
@@ -35,5 +36,7 @@ export interface IConfirmationPage {
     showReferralsInfoText?: boolean;
     showCopyInfoModal?: boolean;
     showPricingNoteSection?: boolean;
+    showOrderDetailsBtn?: boolean;
+    onOrderDetailsClick?: (data: ICheckoutCompleteData) => void;
 }
-export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied, clientLabel, showReferralsInfoText, showCopyInfoModal, showPricingNoteSection, }: IConfirmationPage) => JSX.Element;
+export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied, clientLabel, showReferralsInfoText, showCopyInfoModal, showPricingNoteSection, showOrderDetailsBtn, onOrderDetailsClick, }: IConfirmationPage) => JSX.Element;

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

@@ -35,6 +35,7 @@ interface OrderDetailsTypes {
     referralTitle?: string;
     itemsTitle?: string;
     ticketsTitle?: string;
+    displayLoading?: boolean;
 }
 export interface CustomFieldOption {
     id: string;
@@ -60,5 +61,5 @@ export interface CustomFieldTypes {
     ticketHash?: string;
     options?: CustomFieldOption[];
 }
-export declare const OrderDetailsContainer: ({ columns, onGetOrdersSuccess, onGetOrdersError, onRemoveFromResaleSuccess, onRemoveFromResaleError, onResaleTicketSuccess, onResaleTicketError, onUpdateOrderCustomFieldsSuccess, onUpdateOrderCustomFieldsError, onUpdateTicketHolderCustomFieldsSuccess, onUpdateTicketHolderCustomFieldsError, onReturnButtonClick, personalLinkIcon, displayColumnNameInRow, canSellTicket, ticketsTableColumns, ordersPath, orderId: pOrderId, referralTitle, itemsTitle, ticketsTitle, themeOptions, }: OrderDetailsTypes) => JSX.Element;
+export declare const OrderDetailsContainer: ({ columns, onGetOrdersSuccess, onGetOrdersError, onRemoveFromResaleSuccess, onRemoveFromResaleError, onResaleTicketSuccess, onResaleTicketError, onUpdateOrderCustomFieldsSuccess, onUpdateOrderCustomFieldsError, onUpdateTicketHolderCustomFieldsSuccess, onUpdateTicketHolderCustomFieldsError, onReturnButtonClick, personalLinkIcon, displayColumnNameInRow, canSellTicket, ticketsTableColumns, ordersPath, orderId: pOrderId, referralTitle, itemsTitle, ticketsTitle, themeOptions, displayLoading, }: OrderDetailsTypes) => 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,
@@ -6652,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:
@@ -6674,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;
@@ -6693,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() {
@@ -6941,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: {
@@ -7564,7 +7588,7 @@ var config = {
   },
   twitter: {
     component: reactShare.TwitterShareButton,
-    icon: reactShare.TwitterIcon
+    icon: reactShare.XIcon
   },
   linkedin: {
     component: reactShare.LinkedinShareButton,
@@ -7660,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,
@@ -7717,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",
@@ -7775,7 +7803,11 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     _ref$showCopyInfoModa = _ref.showCopyInfoModal,
     showCopyInfoModal = _ref$showCopyInfoModa === void 0 ? false : _ref$showCopyInfoModa,
     _ref$showPricingNoteS = _ref.showPricingNoteSection,
-    showPricingNoteSection = _ref$showPricingNoteS === void 0 ? false : _ref$showPricingNoteS;
+    showPricingNoteSection = _ref$showPricingNoteS === void 0 ? false : _ref$showPricingNoteS,
+    _ref$showOrderDetails = _ref.showOrderDetailsBtn,
+    showOrderDetailsBtn = _ref$showOrderDetails === void 0 ? false : _ref$showOrderDetails,
+    _ref$onOrderDetailsCl = _ref.onOrderDetailsClick,
+    onOrderDetailsClick = _ref$onOrderDetailsCl === void 0 ? _identity : _ref$onOrderDetailsCl;
   var inputRef = React.useRef(null);
   var _useState = React.useState(null),
     data = _useState[0],
@@ -7898,7 +7930,15 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper)))))), data.custom_confirmation_page_text && !data.custom_confirmation_page_text_full_replacement ? React__default.createElement("div", {
     className: "custom-confirmation-page-text",
     dangerouslySetInnerHTML: createMarkup(data.custom_confirmation_page_text)
-  }) : null, data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }) : null, showOrderDetailsBtn && React__default.createElement("div", {
+    className: "order-details-button-container"
+  }, React__default.createElement(material.Button, {
+    className: "view-order-button",
+    variant: "contained",
+    onClick: function onClick() {
+      onOrderDetailsClick(data);
+    }
+  }, "View Order")), data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "referral_text_image_section"
   }, React__default.createElement("div", {
     className: "referral_text_section"
@@ -7943,7 +7983,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();
     }
@@ -9094,7 +9134,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]);
@@ -9647,7 +9688,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
@@ -10570,7 +10611,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     itemsTitle = _ref$itemsTitle === void 0 ? '' : _ref$itemsTitle,
     _ref$ticketsTitle = _ref.ticketsTitle,
     ticketsTitle = _ref$ticketsTitle === void 0 ? 'Your Tickets' : _ref$ticketsTitle,
-    themeOptions = _ref.themeOptions;
+    themeOptions = _ref.themeOptions,
+    _ref$displayLoading = _ref.displayLoading,
+    displayLoading = _ref$displayLoading === void 0 ? false : _ref$displayLoading;
   var _useState = React.useState({}),
     data = _useState[0],
     setData = _useState[1];
@@ -10592,6 +10635,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   var _useState7 = React.useState(false),
     showOrderCustomFieldsSection = _useState7[0],
     setShowOrderCustomFieldsSection = _useState7[1];
+  var _useState8 = React.useState(false),
+    isLoading = _useState8[0],
+    setIsLoading = _useState8[1];
   var isTable = _get(data, 'tickets[0].is_table', false);
   var columnsProps = isTable ? [{
     label: 'Items'
@@ -10648,26 +10694,29 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
               _params = new URL("" + window.location).searchParams;
               _orderId = _params.get('o') || '';
             }
-            _context.next = 5;
+            setIsLoading(true);
+            _context.next = 6;
             return getOrderDetails(String(_orderId));
-          case 5:
+          case 6:
             response = _context.sent;
             onGetOrdersSuccess(response);
             _data = _get(response, 'data.attributes');
             setData(_data);
-            _context.next = 14;
+            setIsLoading(false);
+            _context.next = 17;
             break;
-          case 11:
-            _context.prev = 11;
+          case 13:
+            _context.prev = 13;
             _context.t0 = _context["catch"](0);
             onGetOrdersError(_context.t0);
-          case 14:
+            setIsLoading(false);
+          case 17:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 11]]);
+      }, _callee, null, [[0, 13]]);
     }))();
-  }, []);
+  }, [onGetOrdersError, onGetOrdersSuccess, pOrderId]);
   var handleSellTicket = function handleSellTicket(ticket) {
     var ticketTypesArr = data.items.ticket_types;
     var sellTicketType = _find(ticketTypesArr, function (ticketType) {
@@ -10884,6 +10933,18 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     };
   }();
   var theme = styles.createTheme(themeOptions != null ? themeOptions : {});
+  if (isLoading && displayLoading) {
+    return React__default.createElement(material.Backdrop, {
+      sx: {
+        color: '#fff',
+        backgroundColor: '#000000bd',
+        zIndex: 1205
+      },
+      open: true
+    }, React__default.createElement(material.CircularProgress, {
+      color: "inherit"
+    }));
+  }
   return React__default.createElement(styles.ThemeProvider, {
     theme: theme
   }, React__default.createElement("div", {
@@ -11029,16 +11090,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];