tf-checkout-react 1.2.12 → 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';
@@ -1724,46 +1726,62 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
 
             case 4:
               setFieldError(field.name, '');
-              setFieldTouched(field.name, false);
-              _context.next = 12;
+              _context.next = 11;
               break;
 
-            case 8:
-              _context.prev = 8;
+            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 12:
-              _context.prev = 12;
+            case 11:
+              _context.prev = 11;
               setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
-              return _context.finish(12);
+              return _context.finish(11);
 
-            case 15:
+            case 14:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 8, 12, 15]]);
+      }, _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) {
-      setFieldTouched(field.name, true);
-      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() {
@@ -2662,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 () {
@@ -2737,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: '',
@@ -2832,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';
@@ -2920,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);
@@ -3398,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,
@@ -6477,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", {