tf-checkout-react 1.3.1 → 1.3.3

package/dist/components/billing-info-container/utils.d.ts

@@ -1,5 +1,5 @@
 import { IGroupItem } from '../../types';
-import { FormikValues } from 'formik';
+import { FormikErrors, FormikValues } from 'formik';
 export interface ILoggedInValues {
     emailLogged?: string;
     firstNameLogged?: string;
@@ -50,6 +50,6 @@ export declare const setLoggedUserData: (data: IUserData) => {
 export declare const createCheckoutDataBody: (ticketsQuantity: number, values?: IValues, logedInValues?: ILoggedInValues, includeDob?: boolean) => ICheckoutBody;
 export declare const getValidateFunctions: (element: IGroupItem, states: {
     [key: string]: any;
-}[], values: FormikValues) => (...value: any) => any;
+}[], values: FormikValues, errors: FormikErrors<any>) => (...value: any) => any;
 export declare const assingUniqueIds: (data: any) => any;
 export {};

package/dist/components/common/PhoneNumberField.d.ts

@@ -9,4 +9,4 @@ export interface IPhoneNumberField {
     fill: boolean;
     setPhoneValidationIsLoading: (isLoading: boolean) => void;
 }
-export declare const PhoneNumberField: ({ label, field, form: { errors, touched, setFieldError, values, initialValues, setFieldValue, setFieldTouched, }, disableDropdown, fill, setPhoneValidationIsLoading, }: IPhoneNumberField) => JSX.Element;
+export declare const PhoneNumberField: ({ label, field, form: { errors, touched, setFieldError, values, initialValues, setFieldValue, setFieldTouched, setErrors, }, disableDropdown, fill, setPhoneValidationIsLoading, }: IPhoneNumberField) => JSX.Element;

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

@@ -7,6 +7,11 @@ export interface IShareButton {
     platform: string;
     shareData: any;
 }
+export interface IConfirmationLabels {
+    confirmationTitle?: string;
+    confirmationMain?: string;
+    confirmationHelper?: string;
+}
 export interface IConfirmationPage {
     hasCopyIcon?: boolean;
     isReferralEnabled: boolean;
@@ -17,5 +22,6 @@ export interface IConfirmationPage {
     onGetConfirmationDataError: (e: AxiosError) => void;
     onLinkCopied: () => void;
     orderHash?: string;
+    confirmationLabels: IConfirmationLabels;
 }
-export declare const ConfirmationContainer: ({ hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied }: IConfirmationPage) => JSX.Element;
+export declare const ConfirmationContainer: ({ confirmationLabels, hasCopyIcon, isReferralEnabled, showDefaultShareButtons, messengerAppId, shareButtons, onGetConfirmationDataSuccess, onGetConfirmationDataError, orderHash, onLinkCopied }: IConfirmationPage) => JSX.Element;

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

@@ -1720,7 +1720,13 @@ var DatePickerField = function DatePickerField(_ref) {
           placeholder: 'dd/mm/yyyy'
         }),
         theme: theme,
-        field: field,
+        field: _extends({}, field, {
+          onChange: function onChange(evt) {
+            if (params.inputProps && params.inputProps.onChange) {
+              params.inputProps.onChange(evt);
+            }
+          }
+        }),
         form: form,
         label: label,
         type: "tel"
@@ -1760,6 +1766,7 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       initialValues = _ref$form.initialValues,
       setFieldValue = _ref$form.setFieldValue,
       setFieldTouched = _ref$form.setFieldTouched,
+      setErrors = _ref$form.setErrors,
       _ref$disableDropdown = _ref.disableDropdown,
       disableDropdown = _ref$disableDropdown === void 0 ? true : _ref$disableDropdown,
       _ref$fill = _ref.fill,
@@ -1779,46 +1786,63 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     }
 
     debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var message;
+      var newErrors, _newErrors, message;
+
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
 
+              if (values[field.name]) {
+                _context.next = 6;
+                break;
+              }
+
+              newErrors = _extends({}, errors);
+              delete newErrors[field.name];
+              setErrors(newErrors);
+              return _context.abrupt("return");
+
+            case 6:
               if (!values[field.name]) {
-                _context.next = 4;
+                _context.next = 9;
                 break;
               }
 
-              _context.next = 4;
+              _context.next = 9;
               return validatePhoneNumber(values[field.name]);
 
-            case 4:
-              setFieldError(field.name, '');
-              _context.next = 11;
+            case 9:
+              if (errors[field.name]) {
+                _newErrors = _extends({}, errors);
+                delete _newErrors[field.name];
+                setErrors(_newErrors);
+              }
+
+              _context.next = 16;
               break;
 
-            case 7:
-              _context.prev = 7;
+            case 12:
+              _context.prev = 12;
               _context.t0 = _context["catch"](0);
               message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
 
-              if (values[field.name]) {
+              if (values[field.name] && errors[field.name] !== message) {
                 setFieldError(field.name, message);
               }
 
-            case 11:
-              _context.prev = 11;
+            case 16:
+              _context.prev = 16;
               setPhoneValidationIsLoading(false);
-              return _context.finish(11);
+              return _context.finish(16);
 
-            case 14:
+            case 19:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7, 11, 14]]);
+      }, _callee, null, [[0, 12, 16, 19]]);
     }))); // eslint-disable-next-line
   }, [field.value]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(MuiPhoneNumber, {
@@ -1841,7 +1865,8 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     helperText: (isTouched || fill) && error,
     fullWidth: true,
     autoFormat: false,
-    disableAreaCodes: true
+    disableAreaCodes: true,
+    countryCodeEditable: false
   }));
 };
 
@@ -2688,7 +2713,7 @@ var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, va
 
   return body;
 };
-var getValidateFunctions = function getValidateFunctions(element, states, values) {
+var getValidateFunctions = function getValidateFunctions(element, states, values, errors) {
   var validationFunctions = [];
 
   if (element.required) {
@@ -2701,6 +2726,14 @@ var getValidateFunctions = function getValidateFunctions(element, states, values
     validationFunctions.push(element.onValidate);
   }
 
+  if (element.name === 'phone') {
+    var invalidPhone = function invalidPhone() {
+      return errors.phone === 'Invalid phone number' ? 'Invalid phone number' : null;
+    };
+
+    validationFunctions.push(invalidPhone);
+  }
+
   if (element.name === 'confirmEmail') {
     var isSameEmail = function isSameEmail(confirmEmail) {
       return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
@@ -3222,7 +3255,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
-                if (!(skipPage && !_isEmpty(ticketsQuantity) && !showDOB)) {
+                if (!(skipPage && !_isEmpty(ticketsQuantity) && !showDOB && !loading)) {
                   _context5.next = 18;
                   break;
                 }
@@ -3587,7 +3620,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
             label: element.name === 'phone' ? "" + element.label + (flagRequirePhone ? '' : ' (optional)') + " " : element.label,
             type: element.type,
             fill: element.fill,
-            validate: getValidateFunctions(element, states, props.values),
+            validate: getValidateFunctions(element, states, props.values, props.errors),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
             component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? PhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
@@ -3610,12 +3643,16 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref3) {
         }, React__default.createElement("div", {
           className: groupClassname
         }, _map(groupItems, function (element) {
+          if (_includes(['holderFirstName', 'holderLastName'], element.name)) {
+            element.required = showTicketHolders;
+          }
+
           return React__default.createElement("div", {
             className: element.className,
             key: element.name
           }, React__default.createElement(formik.Field, {
             name: element.name + "-" + index,
-            label: element.label,
+            label: "" + element.label + (element.required ? '' : ' (optional)'),
             type: element.type,
             component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
             validate: combineValidators(element.required ? requiredValidator : function () {
@@ -4571,7 +4608,8 @@ var SocialButtons = function SocialButtons(_ref2) {
 };
 
 var ConfirmationContainer = function ConfirmationContainer(_ref) {
-  var _ref$hasCopyIcon = _ref.hasCopyIcon,
+  var confirmationLabels = _ref.confirmationLabels,
+      _ref$hasCopyIcon = _ref.hasCopyIcon,
       hasCopyIcon = _ref$hasCopyIcon === void 0 ? true : _ref$hasCopyIcon,
       isReferralEnabled = _ref.isReferralEnabled,
       showDefaultShareButtons = _ref.showDefaultShareButtons,
@@ -4670,6 +4708,12 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     setData(newData);
   };
 
+  var _confirmationLabels$c = confirmationLabels.confirmationTitle,
+      confirmationTitle = _confirmationLabels$c === void 0 ? 'Your Tickets are Confirmed!' : _confirmationLabels$c,
+      _confirmationLabels$c2 = confirmationLabels.confirmationMain,
+      confirmationMain = _confirmationLabels$c2 === void 0 ? 'Your tickets are available in My Tickets section' : _confirmationLabels$c2,
+      _confirmationLabels$c3 = confirmationLabels.confirmationHelper,
+      confirmationHelper = _confirmationLabels$c3 === void 0 ? 'Please bring them with you to the event' : _confirmationLabels$c3;
   return React__default.createElement("div", {
     className: "confirmation-page"
   }, data && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
@@ -4683,15 +4727,15 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "header-product-text"
   }, React__default.createElement("p", {
     className: "title"
-  }, "Your Tickets are Confirmed!"), React__default.createElement("div", {
+  }, confirmationTitle), React__default.createElement("div", {
     className: "share-message-section"
   }, data.attach_tickets ? React__default.createElement("span", {
     className: "main"
   }, "Your tickets have been emailed to you") : React__default.createElement("span", {
     className: "main"
-  }, "Your tickets are available in My Tickets section"), React__default.createElement("span", {
+  }, confirmationMain), React__default.createElement("span", {
     className: "helper"
-  }, "Please bring them with you to the event")))), data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper)))), 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"
@@ -5715,15 +5759,11 @@ var TicketsContainer = function TicketsContainer(_ref) {
   var isSalesClosed = event == null ? void 0 : event.salesEnded;
   var themeMui = material.createTheme(themeOptions);
   React.useEffect(function () {
-    isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
+    window.document.addEventListener('custom-login', handleExternalLogin);
+    window.document.addEventListener('custom-logout', handleLogout);
     return function () {
-      isWindowDefined && window.document.removeEventListener('custom-logout', handleLogout);
-    };
-  }, []);
-  React.useEffect(function () {
-    isWindowDefined && window.document.addEventListener('custom-login', handleExternalLogin);
-    return function () {
-      isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
+      window.document.removeEventListener('custom-login', handleExternalLogin);
+      window.document.removeEventListener('custom-logout', handleLogout);
     };
   }, []);
 
@@ -5742,14 +5782,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
   };
 
   var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
+
+  var isTicketAvailable = _some(tickets, function (ticket) {
+    return ticket.displayTicket && !ticket.soldOut && ticket.salesStarted;
+  });
+
   var wrappedActionsSectionComponent = React__default.isValidElement(ActionsSectionComponent) ? React__default.cloneElement(ActionsSectionComponent, {
     handleGetTicketClick: handleGetTicketClick,
-    isTicketOnSale: isTicketOnSale
+    isTicketOnSale: isTicketOnSale,
+    isTicketAvailable: isTicketAvailable
   }) : null;
   var externalUrl = event == null ? void 0 : event.redirectUrl;
-  var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart);
+  var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart) && !isTicketAvailable;
   var influencers = event != null && event.referralsEnabled ? event == null ? void 0 : event.referrals : [];
   var previewKey = getQueryVariable('pk') || undefined;
+
+  var canShowGetTicketBtn = function canShowGetTicketBtn() {
+    if (!wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !(event != null && event.salesEnded) && !externalUrl && !previewKey) {
+      return true;
+    }
+
+    return false;
+  };
+
   return React__default.createElement(privateTheming.ThemeProvider, {
     theme: themeMui
   }, !isLoading && React__default.createElement(ReferralLogic, {
@@ -5799,7 +5854,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setShowPromoInput: setShowPromoInput,
     setCode: setCode,
     updateTickets: updateTickets
-  }) : null, wrappedActionsSectionComponent, !wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !(event != null && event.salesEnded) && !externalUrl && !previewKey && React__default.createElement(Button$1, {
+  }) : null, wrappedActionsSectionComponent, canShowGetTicketBtn() && React__default.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
     onClick: handleGetTicketClick