tf-checkout-react 1.3.1 → 1.3.3

package/dist/tf-checkout-react.esm.js

@@ -1713,7 +1713,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"
@@ -1753,6 +1759,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,
@@ -1772,46 +1779,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.createElement(React.Fragment, null, React.createElement(MuiPhoneNumber, {
@@ -1834,7 +1858,8 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     helperText: (isTouched || fill) && error,
     fullWidth: true,
     autoFormat: false,
-    disableAreaCodes: true
+    disableAreaCodes: true,
+    countryCodeEditable: false
   }));
 };
 
@@ -2686,7 +2711,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) {
@@ -2699,6 +2724,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;
@@ -3220,7 +3253,7 @@ var BillingInfoContainer = /*#__PURE__*/React.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;
                 }
@@ -3585,7 +3618,7 @@ var BillingInfoContainer = /*#__PURE__*/React.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,
@@ -3608,12 +3641,16 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref3) {
         }, React.createElement("div", {
           className: groupClassname
         }, _map(groupItems, function (element) {
+          if (_includes(['holderFirstName', 'holderLastName'], element.name)) {
+            element.required = showTicketHolders;
+          }
+
           return React.createElement("div", {
             className: element.className,
             key: element.name
           }, React.createElement(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 () {
@@ -4569,7 +4606,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,
@@ -4668,6 +4706,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.createElement("div", {
     className: "confirmation-page"
   }, data && React.createElement(React.Fragment, null, React.createElement("div", {
@@ -4681,15 +4725,15 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "header-product-text"
   }, React.createElement("p", {
     className: "title"
-  }, "Your Tickets are Confirmed!"), React.createElement("div", {
+  }, confirmationTitle), React.createElement("div", {
     className: "share-message-section"
   }, data.attach_tickets ? React.createElement("span", {
     className: "main"
   }, "Your tickets have been emailed to you") : React.createElement("span", {
     className: "main"
-  }, "Your tickets are available in My Tickets section"), React.createElement("span", {
+  }, confirmationMain), React.createElement("span", {
     className: "helper"
-  }, "Please bring them with you to the event")))), data.disable_referral === false && isReferralEnabled && React.createElement(React.Fragment, null, React.createElement("div", {
+  }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper)))), data.disable_referral === false && isReferralEnabled && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "referral_text_image_section"
   }, React.createElement("div", {
     className: "referral_text_section"
@@ -5713,15 +5757,11 @@ var TicketsContainer = function TicketsContainer(_ref) {
   var isSalesClosed = event == null ? void 0 : event.salesEnded;
   var themeMui = createTheme$1(themeOptions);
   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);
-    };
-  }, []);
-  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);
     };
   }, []);
 
@@ -5740,14 +5780,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.isValidElement(ActionsSectionComponent) ? React.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.createElement(ThemeProvider$1, {
     theme: themeMui
   }, !isLoading && React.createElement(ReferralLogic, {
@@ -5797,7 +5852,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setShowPromoInput: setShowPromoInput,
     setCode: setCode,
     updateTickets: updateTickets
-  }) : null, wrappedActionsSectionComponent, !wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !(event != null && event.salesEnded) && !externalUrl && !previewKey && React.createElement(Button$1, {
+  }) : null, wrappedActionsSectionComponent, canShowGetTicketBtn() && React.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
     onClick: handleGetTicketClick