WIP Phone Field Changes for IO-414

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

@@ -1,7 +1,44 @@
+import i18n from "i18next";
 import React, { forwardRef } from "react";
 import NumberFormat from "react-number-format";
+import phone from "phone";
+import PhoneInput from "react-phone-input-2";
+//import "react-phone-input-2/lib/style.css";
+
+import "react-phone-input-2/lib/plain.css";
+
 function FormItemPhone(props, ref) {
-  return <NumberFormat {...props} className='ant-input' ref={ref} type="tel" format="###-###-####" />;
+  return (
+    <PhoneInput country={"ca"} {...props} ref={ref} className="ant-input" />
+  );
+
+  // return (
+  //   <NumberFormat
+  //     {...props}
+  //     className="ant-input"
+  //     ref={ref}
+  //     type="tel"
+  //     format="###-###-####"
+  //   />
+  // );
 }
 
 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();
+        }
+      },
+    });
+  },
+});

client/src/components/vendors-form/vendors-form.component.jsx

@@ -12,7 +12,9 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
+import PhoneFormItem, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function VendorsFormComponent({
@@ -53,7 +55,14 @@ export default function VendorsFormComponent({
         >
           <FormItemEmail email={getFieldValue("email")} />
         </Form.Item>
-        <Form.Item label={t("vendors.fields.phone")} name="phone">
+        <Form.Item
+          label={t("vendors.fields.phone")}
+          name="phone"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "phone"),
+          ]}
+        >
           <PhoneFormItem />
         </Form.Item>
       </LayoutFormRow>