Added phone validation + new phone input box IO-414

client/src/components/form-items-formatted/phone-form-item.component.jsx

@@ -1,15 +1,18 @@
 import i18n from "i18next";
-import React, { forwardRef } from "react";
-import NumberFormat from "react-number-format";
 import phone from "phone";
+import React, { forwardRef } from "react";
 import PhoneInput from "react-phone-input-2";
-//import "react-phone-input-2/lib/style.css";
-
-import "react-phone-input-2/lib/plain.css";
-
+import "./phone-form-item.styles.scss";
+import "react-phone-input-2/lib/high-res.css";
 function FormItemPhone(props, ref) {
   return (
-    <PhoneInput country={"ca"} {...props} ref={ref} className="ant-input" />
+    <PhoneInput
+      country={"ca"}
+      onlyCountries={["ca", "us"]}
+      ref={ref}
+      className="ant-input"
+      {...props}
+    />
   );
 
   // return (
@@ -27,18 +30,27 @@ export default forwardRef(FormItemPhone);
 
 export const PhoneItemFormatterValidation = (getFieldValue, name) => ({
   async validator(rule, value) {
-    PhoneInput({
-      value: getFieldValue(name),
-      isValid: async (value, country) => {
-        console.log("value", value);
-        if (value.match(/12345/)) {
-          return Promise.reject(i18n.t("general.validation.invalidphone"));
-        } else if (value.match(/1234/)) {
-          return false;
-        } else {
-          return Promise.resolve();
-        }
-      },
-    });
+    console.log("getFieldValue(name)", getFieldValue(name));
+
+    const p = phone(getFieldValue(name), "ca");
+    if (p.length > 0) {
+      return Promise.resolve();
+    } else {
+      return Promise.reject(i18n.t("general.validation.invalidphone"));
+    }
+
+    // PhoneInput({
+    //   value: getFieldValue(name),
+    //   isValid: async (value, country) => {
+    //     console.log("value", value);
+    //     if (value.match(/12345/)) {
+
+    //     } else if (value.match(/1234/)) {
+    //       return false;
+    //     } else {
+    //       return Promise.resolve();
+    //     }
+    //   },
+    // });
   },
 });

client/src/components/form-items-formatted/phone-form-item.styles.scss

@@ -0,0 +1,6 @@
+.react-tel-input .form-control {
+  width: 100% !important;
+  height: unset !important;
+  border-radius: unset !important;
+  line-height: unset !important;
+}