tf-checkout-react 1.0.99-beta.33 → 1.0.99-beta.34

package/dist/api/common.d.ts

@@ -5,3 +5,4 @@ export declare const getStates: (countryId: string | number) => Promise<IStatesR
 export declare const sendRSVPInfo: (eventId: number, data: IRSVPRequestData) => Promise<IRSVPResponse>;
 export declare const addToWaitingList: (id: number, data: IWaitingListRequestData) => Promise<IWaitingListResponse>;
 export declare const postReferralVisits: (eventId: string, referralId: string) => Promise<IAxiosResponseData>;
+export declare const validatePhoneNumber: (phone: string) => Promise<IAxiosResponseData>;

package/dist/api/index.d.ts

@@ -4,6 +4,6 @@ export { setAxiosHeader, setBaseUrl } from './publicRequest';
 export { getOrders, getOrderDetails } from './orders';
 export { addToCart, getCart } from './cart';
 export { postOnCheckout } from './checkout';
-export { getEvent, getTickets, getCountries, getStates, addToWaitingList, sendRSVPInfo, postReferralVisits, } from './common';
+export { getEvent, getTickets, getCountries, getStates, addToWaitingList, sendRSVPInfo, postReferralVisits, validatePhoneNumber, } from './common';
 export { getPaymentData, getConditions, handlePaymentSuccess, handleFreeSuccess, getConfirmationData, } from './payment';
 export { resaleTicket, removeFromResale, processTicket, declineInvitation, } from './resale';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FieldInputProps, FormikProps } from 'formik';
+export interface IPhoneNumberField {
+    label: string;
+    field: FieldInputProps<any>;
+    form: FormikProps<any>;
+    type: string;
+}
+export declare const PhoneNumberField: ({ label, type, field, form: { errors, setFieldError, setStatus }, }: IPhoneNumberField) => JSX.Element;

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

@@ -3,3 +3,4 @@ export { CustomField } from './CustomField';
 export { FormikPhoneNumberField } from './FormikPhoneNumberField';
 export { Loader } from './Loader';
 export { SelectField } from './SelectField';
+export { PhoneNumberField } from './PhoneNumberField';

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

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { AxiosError } from 'axios';
 import './style.css';
+import { AxiosError } from 'axios';
+import { FC } from 'react';
 interface Props {
     onClose: () => void;
     onRegister: () => void;

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

@@ -16,6 +16,7 @@ var _includes = _interopDefault(require('lodash/includes'));
 var _isEmpty = _interopDefault(require('lodash/isEmpty'));
 var _isEqual = _interopDefault(require('lodash/isEqual'));
 var _map = _interopDefault(require('lodash/map'));
+var _some = _interopDefault(require('lodash/some'));
 var nanoid = require('nanoid');
 var React = require('react');
 var React__default = _interopDefault(React);
@@ -25,9 +26,10 @@ var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel')
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var styles$1 = require('@mui/styles');
 var TextField = _interopDefault(require('@mui/material/TextField'));
-var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
+require('material-ui-phone-number');
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Select = _interopDefault(require('@mui/material/Select'));
+var _debounce = _interopDefault(require('lodash/debounce'));
 var Modal = _interopDefault(require('@mui/material/Modal'));
 var Box = _interopDefault(require('@mui/material/Box'));
 var Countdown$1 = _interopDefault(require('react-countdown'));
@@ -45,7 +47,6 @@ var stripeJs = require('@stripe/stripe-js');
 var reactShare = require('react-share');
 var privateTheming = require('@mui/private-theming');
 var _find = _interopDefault(require('lodash/find'));
-var _some = _interopDefault(require('lodash/some'));
 var Button$1 = _interopDefault(require('react-bootstrap/Button'));
 var moment = _interopDefault(require('moment-timezone'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
@@ -938,7 +939,8 @@ var setBaseUrl = function setBaseUrl(baseUrl) {
 };
 
 var CONFIGS = {
-  BASE_URL: 'https://www.ticketfairy.com/api'
+  BASE_URL: 'https://www.ticketfairy.com/api',
+  X_SOURCE_ORIGIN: 'preview2.restlessnit.es'
 };
 var setConfigs = function setConfigs(configs) {
   _forEach(configs, function (value, key) {
@@ -1713,6 +1715,32 @@ var postReferralVisits = /*#__PURE__*/function () {
     return _ref7.apply(this, arguments);
   };
 }();
+var validatePhoneNumber = /*#__PURE__*/function () {
+  var _ref8 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8(phone) {
+    var response;
+    return runtime_1.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            _context8.next = 2;
+            return publicRequest.get("/v1/account/validate_phone?phone=" + phone);
+
+          case 2:
+            response = _context8.sent;
+            return _context8.abrupt("return", response.data);
+
+          case 4:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  }));
+
+  return function validatePhoneNumber(_x11) {
+    return _ref8.apply(this, arguments);
+  };
+}();
 
 var getPaymentData = /*#__PURE__*/function () {
   var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(hash) {
@@ -2090,51 +2118,6 @@ var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency)
       return 'US$';
   }
 };
-var removePlusSign = function removePlusSign(string) {
-  if (string === void 0) {
-    string = '';
-  }
-
-  return string.replace('+', '');
-};
-
-var _excluded$1 = ["label", "field", "form", "setFieldValue", "selectOptions"];
-var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
-  var label = _ref.label,
-      field = _ref.field,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      initialValues = _ref$form.initialValues,
-      setFieldValue = _ref.setFieldValue,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
-  var error = _get(errors, field.name);
-
-  var isTouched = Boolean(_get(touched, field.name));
-  var customTheme = styles$1.useTheme();
-  return React__default.createElement(MuiPhoneNumber, Object.assign({
-    name: 'phone',
-    value: initialValues.phone,
-    onChange: function onChange(e) {
-      return setFieldValue("phone", removePlusSign(e));
-    },
-    variant: "outlined",
-    defaultCountry: 'us',
-    disableDropdown: true,
-    label: label,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
-    fullWidth: true,
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    autoFormat: false
-  }, rest));
-};
 
 function Loader() {
   return React__default.createElement("div", {
@@ -2192,6 +2175,81 @@ var SelectField = function SelectField(_ref) {
   }, error) : null);
 };
 
+var PhoneNumberField = function PhoneNumberField(_ref) {
+  var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      errors = _ref$form.errors,
+      setFieldError = _ref$form.setFieldError,
+      setStatus = _ref$form.setStatus;
+
+  var error = _get(errors, field.name); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  var debounceCb = React.useCallback(_debounce(function (cb) {
+    return void cb();
+  }, 1000), []);
+  React.useEffect(function () {
+    if (field.value) {
+      var _setStatus;
+
+      setStatus((_setStatus = {}, _setStatus[field.name] = true, _setStatus));
+    }
+
+    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var message, _setStatus2;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!field.value) {
+                _context.next = 4;
+                break;
+              }
+
+              _context.next = 4;
+              return validatePhoneNumber(field.value);
+
+            case 4:
+              setFieldError(field.name, '');
+              _context.next = 11;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
+              setFieldError(field.name, message);
+
+            case 11:
+              _context.prev = 11;
+              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
+              return _context.finish(11);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7, 11, 14]]);
+    }))); // eslint-disable-next-line
+  }, [field.value]);
+  return React__default.createElement(TextField, Object.assign({}, field, {
+    id: field.name,
+    label: label,
+    type: type,
+    fullWidth: true,
+    error: !!error,
+    helperText: error,
+    value: field.value || ''
+  }));
+};
+
 var SnackbarAlert = function SnackbarAlert(_ref) {
   var isOpen = _ref.isOpen,
       message = _ref.message,
@@ -2420,9 +2478,9 @@ var LoginModal = function LoginModal(_ref) {
 var RegisterModal = function RegisterModal(_ref) {
   var onClose = _ref.onClose,
       _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
+      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? _identity : _ref$onGetProfileData,
       _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2;
+      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? _identity : _ref$onGetProfileData2;
   return React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -2767,7 +2825,7 @@ var DatePickerField = function DatePickerField(_ref) {
   })));
 };
 
-var _excluded$2 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
+var _excluded$1 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
 var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
   if (data === void 0) {
     data = [];
@@ -2850,7 +2908,7 @@ var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, va
 
   var _values = values,
       holderAge = _values.holderAge,
-      restValues = _objectWithoutPropertiesLoose(_values, _excluded$2);
+      restValues = _objectWithoutPropertiesLoose(_values, _excluded$1);
 
   var holders = [];
   var ticketHolders = [];
@@ -3054,7 +3112,7 @@ var FieldsSection = function FieldsSection(_ref2) {
         }),
         setFieldValue: setFieldValue,
         onBlur: handleBlur,
-        component: type === 'checkbox' ? CheckboxField : type === 'select' ? SelectField : type === 'phone' ? FormikPhoneNumberField : type === 'date' ? DatePickerField : CustomField,
+        component: type === 'checkbox' ? CheckboxField : type === 'select' ? SelectField : type === 'phone' ? PhoneNumberField : type === 'date' ? DatePickerField : CustomField,
         selectOptions: name === 'country' ? countries : name === 'state' ? states : [],
         theme: theme
       }));
@@ -3085,7 +3143,7 @@ var LogicRunner = function LogicRunner(_ref) {
               case 0:
                 _context.prev = 0;
                 _context.next = 3;
-                return getStates(values.country);
+                return getStates(values.country || 1);
 
               case 3:
                 res = _context.sent;
@@ -3827,13 +3885,17 @@ var BillingInfoContainer = function BillingInfoContainer(_ref) {
           return React__default.createElement("div", {
             className: element.className,
             key: element.name
-          }, React__default.createElement(formik.Field, {
+          }, React__default.createElement(formik.FastField, {
             name: element.name + "-" + index,
             label: element.label,
             type: element.type,
             required: true,
-            component: element.type === 'checkbox' ? CheckboxField : CustomField,
-            validate: combineValidators(element.required ? requiredValidator : null, element.onValidate ? element.onValidate : null)
+            component: element.type === 'phone' ? PhoneNumberField : element.type === 'checkbox' ? CheckboxField : CustomField,
+            validate: combineValidators(element.required ? requiredValidator : function () {
+              return props.errors[element.name + "-" + index];
+            }, element.onValidate ? element.onValidate : function () {
+              return props.errors[element.name + "-" + index];
+            })
           }));
         })));
       }));
@@ -3843,7 +3905,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref) {
       type: "submit",
       variant: "contained",
       className: "login-register-button",
-      disabled: props.isSubmitting
+      disabled: props.isSubmitting || _some(props.status, Boolean)
     }, props.isSubmitting ? React__default.createElement(material.CircularProgress, {
       size: 26
     }) : buttonName))));
@@ -6155,11 +6217,11 @@ var ConfirmModal = function ConfirmModal(_ref) {
   }, "OK"))));
 };
 
-var _excluded$3 = ["label", "field", "theme"];
+var _excluded$2 = ["label", "field", "theme"];
 var RadioField = function RadioField(_ref) {
   var label = _ref.label,
       field = _ref.field,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var customTheme = styles$1.useTheme();
   return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {