tf-checkout-react 1.2.11 → 1.2.12

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

@@ -8,4 +8,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

@@ -1686,6 +1686,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 +1700,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;
 
@@ -1724,33 +1731,35 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
 
             case 4:
               setFieldError(field.name, '');
-              _context.next = 11;
+              setFieldTouched(field.name, false);
+              _context.next = 12;
               break;
 
-            case 7:
-              _context.prev = 7;
+            case 8:
+              _context.prev = 8;
               _context.t0 = _context["catch"](0);
               message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
               setFieldError(field.name, message);
 
-            case 11:
-              _context.prev = 11;
+            case 12:
+              _context.prev = 12;
               setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
-              return _context.finish(11);
+              return _context.finish(12);
 
-            case 14:
+            case 15:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7, 11, 14]]);
+      }, _callee, null, [[0, 8, 12, 15]]);
     }))); // eslint-disable-next-line
   }, [field.value]);
   return React__default.createElement(MuiPhoneNumber, {
     name: field.name,
     value: fill ? values.phone : initialValues.phone,
     onChange: function onChange(e) {
-      return setFieldValue(field.name, e);
+      setFieldTouched(field.name, true);
+      setFieldValue(field.name, e);
     },
     variant: "outlined",
     defaultCountry: "us",
@@ -3500,7 +3509,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];