tf-checkout-react 1.2.10 → 1.2.13

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

@@ -21,8 +21,10 @@ import { useTheme } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import 'material-ui-phone-number';
+import 'react-phone-input-2/lib/material.css';
 import _debounce from 'lodash-es/debounce';
+import PhoneInput from 'react-phone-input-2';
 import CircularProgress from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
 import { object, string, ref, boolean } from 'yup';
@@ -1679,6 +1681,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,
@@ -1692,6 +1695,12 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     return void cb();
   }, 1000), []);
   useEffect(function () {
+    if (field.value === '+') {
+      setFieldError(field.name, '');
+      setFieldTouched(field.name, false);
+      return;
+    }
+
     if (field.value) {
       var _setStatus;
 
@@ -1739,22 +1748,40 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       }, _callee, null, [[0, 7, 11, 14]]);
     }))); // eslint-disable-next-line
   }, [field.value]);
-  return React.createElement(MuiPhoneNumber, {
-    name: field.name,
+  return React.createElement(React.Fragment, null, React.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.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() {
@@ -2653,7 +2680,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 = useRef(values.country);
   useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
@@ -2728,7 +2756,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: '',
@@ -2823,7 +2851,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 = createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2911,9 +2941,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);
@@ -3389,6 +3417,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     return React.createElement(Form, {
       onSubmit: props.handleSubmit
     }, React.createElement(ErrorFocus, null), React.createElement(LogicRunner, {
+      brandOptIn: brandOptIn,
       values: props.values,
       setStates: setStates,
       setFieldValue: props.setFieldValue,
@@ -3498,7 +3527,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];
@@ -4128,7 +4156,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
             case 3:
               order_hash = reviewData.order_details.order_hash;
 
-              if (!(total === '0.00')) {
+              if (!isFreeTickets) {
                 _context3.next = 10;
                 break;
               }
@@ -6469,8 +6497,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.createElement("div", {