tf-checkout-react 1.0.106-beta.3 → 1.0.106-beta.7

package/dist/api/index.d.ts

@@ -1,4 +1,4 @@
-import { AxiosInstance } from 'axios';
+import { AxiosResponse, AxiosInstance } from 'axios';
 interface IPublicRequest extends AxiosInstance {
     setGuestToken: (token: string) => void;
     setAccessToken: (token: string) => void;
@@ -8,30 +8,31 @@ export declare const publicRequest: IPublicRequest;
 export declare const setXSourceOrigin: (sourceOrigin: string) => void;
 export declare const setCustomHeader: (response: any) => void;
 export declare const handleSetAccessToken: (token: any) => void;
-export declare function getEvent(id: string | number): Promise<import("axios").AxiosResponse<any, any>>;
-export declare function getTickets(id: string | number, promoCode: string): Promise<import("axios").AxiosResponse<any, any>>;
-export declare const addToCart: (id: string | number, data: any) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getCart: () => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const postOnCheckout: (data: any, accessToken: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const authorize: (data: FormData) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const register: (data: FormData) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getAccessToken: (data: FormData) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getPaymentData: (hash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const handlePaymentData: (orderHash: string, data: any) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const handlePaymentSuccess: (orderHash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const handleFreeSuccess: (orderHash: string) => Promise<import("axios").AxiosResponse<any, any>>;
+export declare function getEvent(id: string | number): Promise<AxiosResponse<any, any>>;
+export declare function getTickets(id: string | number, promoCode: string): Promise<AxiosResponse<any, any>>;
+export declare const addToCart: (id: string | number, data: any) => Promise<AxiosResponse<any, any>>;
+export declare const getCart: () => Promise<AxiosResponse<any, any>>;
+export declare const postOnCheckout: (data: any, accessToken: string) => Promise<AxiosResponse<any, any>>;
+export declare const authorize: (data: FormData) => Promise<AxiosResponse<any, any>>;
+export declare const register: (data: FormData) => Promise<AxiosResponse<any, any>>;
+export declare const getAccessToken: (data: FormData) => Promise<AxiosResponse<any, any>>;
+export declare const getPaymentData: (hash: string) => Promise<AxiosResponse<any, any>>;
+export declare const handlePaymentData: (orderHash: string, data: any) => Promise<AxiosResponse<any, any>>;
+export declare const handlePaymentSuccess: (orderHash: string) => Promise<AxiosResponse<any, any>>;
+export declare const handleFreeSuccess: (orderHash: string) => Promise<AxiosResponse<any, any>>;
 export declare const getProfileData: (accessToken: any) => Promise<any>;
-export declare const getCountries: () => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getConfirmationData: (orderHash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getStates: (countryId: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getOrders: (page: number, limit: number, eventSlug: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getOrderDetails: (orderId: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const addToWaitingList: (id: number, data: any) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const getConditions: (eventId: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const resaleTicket: (data: any, hash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const removeFromResale: (hash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const postReferralVisits: (eventId: string, referralId: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const processTicket: (hash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const declineInvitation: (hash: string) => Promise<import("axios").AxiosResponse<any, any>>;
-export declare const sendRSVPInfo: (eventId: number, data: any) => Promise<import("axios").AxiosResponse<any, any>>;
+export declare const getCountries: () => Promise<AxiosResponse<any, any>>;
+export declare const getConfirmationData: (orderHash: string) => Promise<AxiosResponse<any, any>>;
+export declare const getStates: (countryId: string) => Promise<AxiosResponse<any, any>>;
+export declare const getOrders: (page: number, limit: number, eventSlug: string) => Promise<AxiosResponse<any, any>>;
+export declare const getOrderDetails: (orderId: string) => Promise<AxiosResponse<any, any>>;
+export declare const addToWaitingList: (id: number, data: any) => Promise<AxiosResponse<any, any>>;
+export declare const getConditions: (eventId: string) => Promise<AxiosResponse<any, any>>;
+export declare const resaleTicket: (data: any, hash: string) => Promise<AxiosResponse<any, any>>;
+export declare const removeFromResale: (hash: string) => Promise<AxiosResponse<any, any>>;
+export declare const postReferralVisits: (eventId: string, referralId: string) => Promise<AxiosResponse<any, any>>;
+export declare const processTicket: (hash: string) => Promise<AxiosResponse<any, any>>;
+export declare const declineInvitation: (hash: string) => Promise<AxiosResponse<any, any>>;
+export declare const sendRSVPInfo: (eventId: number, data: any) => Promise<AxiosResponse<any, any>>;
+export declare const validatePhoneNumber: (phone: string) => Promise<any>;
 export {};

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

@@ -1,5 +1,6 @@
 export { CheckboxField } from './CheckboxField';
 export { CustomField } from './CustomField';
 export { FormikPhoneNumberField } from './FormikPhoneNumberField';
+export { PhoneNumberField } from './PhoneNumberField';
 export { Loader } from './Loader';
 export { SelectField } from './SelectField';

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

@@ -7,5 +7,5 @@ interface MyTicketsTypes {
     logo?: string;
     theme?: 'light' | 'dark';
 }
-export declare const MyTicketsContainer: ({ handleDetailsInfo, onGetOrdersSuccess, onGetOrdersError, theme, logo }: MyTicketsTypes) => JSX.Element;
+export declare const MyTicketsContainer: ({ handleDetailsInfo, onGetOrdersSuccess, onGetOrdersError, theme, logo, }: MyTicketsTypes) => JSX.Element;
 export {};

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

@@ -27,7 +27,8 @@ var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel')
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var styles = require('@mui/styles');
 var TextField = _interopDefault(require('@mui/material/TextField'));
-var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
+require('material-ui-phone-number');
+var _debounce = _interopDefault(require('lodash/debounce'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Select = _interopDefault(require('@mui/material/Select'));
 var styles$1 = require('@mui/material/styles');
@@ -1349,6 +1350,32 @@ var declineInvitation = function declineInvitation(hash) {
 var sendRSVPInfo = function sendRSVPInfo(eventId, data) {
   return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
 };
+var validatePhoneNumber = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(phone) {
+    var response;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return publicRequest.get("/v1/account/validate_phone?phone=" + phone);
+
+          case 2:
+            response = _context.sent;
+            return _context.abrupt("return", response.data);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function validatePhoneNumber(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
 var style = {
   position: 'absolute',
@@ -2097,50 +2124,80 @@ var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency)
       return 'US$';
   }
 };
-var removePlusSign = function removePlusSign(string) {
-  if (string === void 0) {
-    string = '';
-  }
 
-  return string.replace('+', '');
-};
-
-var _excluded$2 = ["label", "field", "form", "setFieldValue", "selectOptions"];
-var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
+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,
-      touched = _ref$form.touched,
       errors = _ref$form.errors,
-      initialValues = _ref$form.initialValues,
-      setFieldValue = _ref.setFieldValue,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      setFieldError = _ref$form.setFieldError,
+      setStatus = _ref$form.setStatus;
 
-  var error = _get(errors, field.name);
+  var error = _get(errors, field.name); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  var isTouched = Boolean(_get(touched, field.name));
-  var customTheme = styles.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,
+
+  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,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
+    type: type,
     fullWidth: true,
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    autoFormat: false
-  }, rest));
+    error: !!error,
+    helperText: error,
+    value: field.value || ''
+  }));
 };
 
 function Loader() {
@@ -3190,7 +3247,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             validate: getValidateFunctions(element, states, props.values),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? PhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
             theme: theme
           })));
@@ -4290,17 +4347,17 @@ var TicketRow = function TicketRow(_ref) {
       value: option.value
     }, option.value);
   })))));
-  var returnValue = '';
+  var returnValue = ''; // ticketTier.soldOut === false --> means that ticket is in the stock
 
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
-    returnValue = soldOutMessage;
-  }
+  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
 
-  if (ticketTier.displayTicket) {
+  if (isSoldOut) {
+    returnValue = soldOutMessage;
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage;
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
     returnValue = onSaleContent;
-  }
-
-  if (_get(prevTicketTier, 'in_stock')) {
+  } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON';
   }
 
@@ -4330,8 +4387,8 @@ var TicketsSection = function TicketsSection(_ref) {
       ticketIsDiscounted = true;
     }
 
-    var ticketIsFree = (+ticket.cost || +ticket.price) === 0;
-    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.cost || +ticket.price).toFixed(2);
+    var ticketIsFree = +ticket.price === 0;
+    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
     return React__default.createElement("div", {
       key: ticket.id || ticket.name,
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
@@ -5381,26 +5438,26 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     setFilter((eventFilter == null ? void 0 : eventFilter.url_name) || '');
   };
 
+  if (loading) {
+    return React__default.createElement("div", {
+      className: "loading"
+    }, React__default.createElement(CircularProgress, null));
+  }
+
   return React__default.createElement("div", {
     className: "my-ticket " + theme
-  }, loading && React__default.createElement("div", {
-    className: "loading"
-  }, React__default.createElement(CircularProgress, null)), !isLogged ? React__default.createElement("div", {
-    className: "account-actions-block"
-  }, React__default.createElement("div", {
-    className: "login-block"
-  }, React__default.createElement("button", {
-    className: "login-register-button",
-    type: "button",
-    onClick: function onClick() {
-      setShowModalLogin(true);
-    }
-  }, "Login"), React__default.createElement("div", {
-    className: "logo-image-container"
-  }, 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"
-  })))) : null, data && React__default.createElement(React__default.Fragment, null, React__default.createElement(Autocomplete, {
+  }, React__default.createElement(React__default.Fragment, null, showModalLogin || !isLogged && React__default.createElement(LoginModal, {
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalLogin(false);
+      setUserExpired(false);
+      setIsLogged(true);
+    },
+    userExpired: userExpired,
+    logo: logo
+  })), data && React__default.createElement(React__default.Fragment, null, React__default.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5439,17 +5496,6 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
-  })), React__default.createElement(React__default.Fragment, null, showModalLogin && React__default.createElement(LoginModal, {
-    onClose: function onClose() {
-      setShowModalLogin(false);
-    },
-    onLogin: function onLogin() {
-      setShowModalLogin(false);
-      setUserExpired(false);
-      setIsLogged(true);
-    },
-    userExpired: userExpired,
-    logo: logo
   })));
 };
 
@@ -5503,11 +5549,11 @@ var TicketsTable = function TicketsTable(_ref) {
   })))));
 };
 
-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.useTheme();
   return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {