tf-checkout-react 1.2.1 → 1.2.2

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

@@ -7,5 +7,5 @@ export interface ICheckboxField {
 interface IOtherProps {
     [key: string]: any;
 }
-export declare const CheckboxField: ({ label, field, selectOptions, theme, setFieldValue, ...rest }: ICheckboxField & IOtherProps) => JSX.Element;
+export declare const CheckboxField: ({ label, field, selectOptions, theme, setFieldValue, disableDropdown, ...rest }: ICheckboxField & IOtherProps) => JSX.Element;
 export {};

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

@@ -5,5 +5,6 @@ export interface IPhoneNumberField {
     field: FieldInputProps<any>;
     form: FormikProps<any>;
     type: string;
+    disableDropdown: boolean;
 }
-export declare const PhoneNumberField: ({ label, type, field, form: { errors, setFieldError, setStatus }, }: IPhoneNumberField) => JSX.Element;
+export declare const PhoneNumberField: ({ label, field, form: { errors, touched, setFieldError, setStatus, initialValues, setFieldValue }, disableDropdown }: IPhoneNumberField) => JSX.Element;

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

@@ -7,5 +7,5 @@ export interface IRadioField {
 interface IOtherProps {
     [key: string]: any;
 }
-export declare const RadioField: ({ label, field, theme, ...rest }: IRadioField & IOtherProps) => JSX.Element;
+export declare const RadioField: ({ label, field, theme, disableDropdown, ...rest }: IRadioField & IOtherProps) => JSX.Element;
 export {};

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

@@ -28,7 +28,7 @@ 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'));
-require('material-ui-phone-number');
+var MuiPhoneNumber = _interopDefault(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'));
@@ -1653,7 +1653,7 @@ var DatePickerField = function DatePickerField(_ref) {
   })));
 };
 
-var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue"];
+var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue", "disableDropdown"];
 var CheckboxField = function CheckboxField(_ref) {
   var _rest$form, _field$name, _rest$form2, _field$name2;
 
@@ -1739,19 +1739,30 @@ var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency)
       return 'US$';
   }
 };
+var removePlusSign = function removePlusSign(string) {
+  if (string === void 0) {
+    string = '';
+  }
+
+  return string.replace('+', '');
+};
 
 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,
+      touched = _ref$form.touched,
       setFieldError = _ref$form.setFieldError,
-      setStatus = _ref$form.setStatus;
+      setStatus = _ref$form.setStatus,
+      initialValues = _ref$form.initialValues,
+      setFieldValue = _ref$form.setFieldValue,
+      _ref$disableDropdown = _ref.disableDropdown,
+      disableDropdown = _ref$disableDropdown === void 0 ? true : _ref$disableDropdown;
 
-  var error = _get(errors, field.name); // eslint-disable-next-line react-hooks/exhaustive-deps
+  var error = _get(errors, field.name);
 
+  var isTouched = Boolean(_get(touched, field.name)); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var debounceCb = React.useCallback(_debounce(function (cb) {
     return void cb();
@@ -1804,15 +1815,21 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
       }, _callee, null, [[0, 7, 11, 14]]);
     }))); // eslint-disable-next-line
   }, [field.value]);
-  return React__default.createElement(TextField, Object.assign({}, field, {
-    id: field.name,
+  return React__default.createElement(MuiPhoneNumber, {
+    name: field.name,
+    value: initialValues.phone,
+    onChange: function onChange(e) {
+      return setFieldValue(field.name, removePlusSign(e));
+    },
+    variant: "outlined",
+    defaultCountry: 'us',
+    disableDropdown: disableDropdown,
     label: label,
-    type: type,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
     fullWidth: true,
-    error: !!error,
-    helperText: error,
-    value: field.value || ''
-  }));
+    autoFormat: false
+  });
 };
 
 function Loader() {
@@ -3525,7 +3542,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             onBlur: props.handleBlur,
             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
+            theme: theme,
+            disableDropdown: element.disableDropdown
           })));
         })));
       }));
@@ -3551,7 +3569,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             type: element.type,
             required: true,
             component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
-            validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {})
+            validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {}),
+            disableDropdown: element.disableDropdown
           }));
         })));
       }));
@@ -6020,7 +6039,7 @@ var TicketsTable = function TicketsTable(_ref) {
   })))));
 };
 
-var _excluded$2 = ["label", "field", "theme"];
+var _excluded$2 = ["label", "field", "theme", "disableDropdown"];
 var RadioField = function RadioField(_ref) {
   var label = _ref.label,
       field = _ref.field,