tf-checkout-react 1.2.11 → 1.2.14

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

@@ -47,5 +47,6 @@ export interface IBillingInfoPage {
     logo?: string;
     showForgotPasswordButton?: boolean;
     showSignUpButton?: boolean;
+    brandOptIn?: boolean;
 }
-export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions, onErrorClose, hideErrorsAlertSection, onSkipBillingPage, skipPage, canSkipHolderNames, onForgotPasswordSuccess, onForgotPasswordError, shouldFetchCountries, onCountdownFinish, enableTimer, logo, showForgotPasswordButton, showSignUpButton, }: IBillingInfoPage) => JSX.Element;
+export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions, onErrorClose, hideErrorsAlertSection, onSkipBillingPage, skipPage, canSkipHolderNames, onForgotPasswordSuccess, onForgotPasswordError, shouldFetchCountries, onCountdownFinish, enableTimer, logo, showForgotPasswordButton, showSignUpButton, brandOptIn, }: IBillingInfoPage) => JSX.Element;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import 'react-phone-input-2/lib/material.css';
 import { FieldInputProps, FormikProps } from 'formik';
 export interface IPhoneNumberField {
     label: string;
@@ -8,4 +9,4 @@ export interface IPhoneNumberField {
     disableDropdown: boolean;
     fill: boolean;
 }
-export declare const PhoneNumberField: ({ label, field, form: { errors, touched, setFieldError, setStatus, values, initialValues, setFieldValue, }, disableDropdown, fill }: IPhoneNumberField) => JSX.Element;
+export declare const PhoneNumberField: ({ label, field, form: { errors, touched, setFieldError, setStatus, values, initialValues, setFieldValue, setFieldTouched, }, disableDropdown, fill, }: IPhoneNumberField) => JSX.Element;

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

@@ -28,8 +28,10 @@ var styles$1 = require('@mui/styles');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
-var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
+require('material-ui-phone-number');
+require('react-phone-input-2/lib/material.css');
 var _debounce = _interopDefault(require('lodash/debounce'));
+var PhoneInput = _interopDefault(require('react-phone-input-2'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Select = _interopDefault(require('@mui/material/Select'));
 var Yup = require('yup');
@@ -1686,6 +1688,7 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       values = _ref$form.values,
       initialValues = _ref$form.initialValues,
       setFieldValue = _ref$form.setFieldValue,
+      setFieldTouched = _ref$form.setFieldTouched,
       _ref$disableDropdown = _ref.disableDropdown,
       disableDropdown = _ref$disableDropdown === void 0 ? true : _ref$disableDropdown,
       _ref$fill = _ref.fill,
@@ -1699,6 +1702,12 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     return void cb();
   }, 1000), []);
   React.useEffect(function () {
+    if (field.value === '+') {
+      setFieldError(field.name, '');
+      setFieldTouched(field.name, false);
+      return;
+    }
+
     if (field.value) {
       var _setStatus;
 
@@ -1746,22 +1755,40 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       }, _callee, null, [[0, 7, 11, 14]]);
     }))); // eslint-disable-next-line
   }, [field.value]);
-  return React__default.createElement(MuiPhoneNumber, {
-    name: field.name,
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(PhoneInput, {
+    key: field.name,
     value: fill ? values.phone : initialValues.phone,
-    onChange: function onChange(e) {
-      return setFieldValue(field.name, e);
+    onChange: function onChange(value, data) {
+      if (data.dialCode !== value) {
+        setFieldTouched(field.name, true);
+        setFieldValue(field.name, value);
+      } else {
+        setFieldValue(field.name, '');
+        setFieldError(field.name, '');
+      }
     },
-    variant: "outlined",
-    defaultCountry: "us",
+    country: "us",
     disableDropdown: disableDropdown,
-    label: label,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
-    fullWidth: true,
+    specialLabel: label,
     autoFormat: false,
-    disableAreaCodes: true
-  });
+    inputStyle: {
+      width: '100%'
+    }
+  }), !!error && isTouched && React__default.createElement("p", {
+    style: {
+      fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+      fontWeight: '400',
+      fontSize: '0.75rem',
+      lineHeight: '1.66',
+      letterSpacing: '0.03333em',
+      textAlign: 'left',
+      marginTop: '3px',
+      marginRight: '14px',
+      marginBottom: '0',
+      marginLeft: '14px',
+      color: '#d32f2f'
+    }
+  }, error));
 };
 
 function Loader() {
@@ -2655,7 +2682,8 @@ var LogicRunner = function LogicRunner(_ref) {
       setUserValues = _ref.setUserValues,
       onGetStatesSuccess = _ref.onGetStatesSuccess,
       onGetStatesError = _ref.onGetStatesError,
-      shouldFetchCountries = _ref.shouldFetchCountries;
+      shouldFetchCountries = _ref.shouldFetchCountries,
+      brandOptIn = _ref.brandOptIn;
   var prevCountry = React.useRef(values.country);
   React.useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
@@ -2730,7 +2758,7 @@ var LogicRunner = function LogicRunner(_ref) {
               street_address: (parsedData == null ? void 0 : parsedData.street_address) || '',
               country: (parsedData == null ? void 0 : parsedData.country) || '1',
               zip: (parsedData == null ? void 0 : parsedData.zip) || '',
-              brand_opt_in: (parsedData == null ? void 0 : parsedData.brand_opt_in) || false,
+              brand_opt_in: brandOptIn ? brandOptIn : (parsedData == null ? void 0 : parsedData.brand_opt_in) || false,
               city: (parsedData == null ? void 0 : parsedData.city) || '',
               confirmPassword: '',
               password: '',
@@ -2825,7 +2853,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$showForgotPassw = _ref3.showForgotPasswordButton,
       showForgotPasswordButton = _ref3$showForgotPassw === void 0 ? false : _ref3$showForgotPassw,
       _ref3$showSignUpButto = _ref3.showSignUpButton,
-      showSignUpButton = _ref3$showSignUpButto === void 0 ? false : _ref3$showSignUpButto;
+      showSignUpButton = _ref3$showSignUpButto === void 0 ? false : _ref3$showSignUpButto,
+      _ref3$brandOptIn = _ref3.brandOptIn,
+      brandOptIn = _ref3$brandOptIn === void 0 ? false : _ref3$brandOptIn;
 
   var themeMui = styles.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2913,9 +2943,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   var showDOB = getQueryVariable('age_required') === 'true';
   var showTicketHolders = getQueryVariable('names_required') === 'true';
   var eventId = getQueryVariable('event_id');
-
-  var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
-
+  var optedInFieldValue = brandOptIn ? brandOptIn : _get(cartInfoData, 'optedIn', false);
   var ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false));
 
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
@@ -3391,6 +3419,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     return React__default.createElement(formik.Form, {
       onSubmit: props.handleSubmit
     }, React__default.createElement(ErrorFocus, null), React__default.createElement(LogicRunner, {
+      brandOptIn: brandOptIn,
       values: props.values,
       setStates: setStates,
       setFieldValue: props.setFieldValue,
@@ -3500,7 +3529,6 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             name: element.name + "-" + index,
             label: element.label,
             type: element.type,
-            required: true,
             component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
             validate: combineValidators(element.required ? requiredValidator : function () {
               return props.errors[element.name + "-" + index];
@@ -6471,8 +6499,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
 
   var orderSummery = "ID " + data.id + ", placed";
 
-  if (data.date) {
-    orderSummery += " " + data.date;
+  if (data.date && data.timezone) {
+    var date = moment.tz(data.date, data.timezone).format("dddd, DD MMMM YYYY");
+    orderSummery += " " + date;
   }
 
   return React__default.createElement("div", {