WIP Phone Field Changes for IO-414

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -10529,6 +10529,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>invalidphone</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>required</name>
                                         <definition_loaded>false</definition_loaded>

client/package-lock.json

@@ -12829,6 +12829,11 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
+    "lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw="
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -16535,6 +16540,19 @@
         "warning": "^4.0.3"
       }
     },
+    "react-phone-input-2": {
+      "version": "2.13.9",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.13.9.tgz",
+      "integrity": "sha512-2sP7fAYBEw30S0FaI5VbuhjLQEdfJ4voq7C3iqWW8RiXxxWBtIQ+0SiQxDjvadbSS3C8P0KHIUIAnrgVOzOz1g==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-popopo": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/react-popopo/-/react-popopo-2.1.9.tgz",

client/package.json

@@ -46,6 +46,7 @@
     "react-icons": "^3.11.0",
     "react-moment": "^1.0.0",
     "react-number-format": "^4.4.1",
+    "react-phone-input-2": "^2.13.9",
     "react-redux": "^7.2.2",
     "react-resizable": "^1.11.0",
     "react-router-dom": "^5.2.0",

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>

client/src/translations/en_us/common.json

@@ -689,6 +689,7 @@
 			},
 			"validation": {
 				"invalidemail": "Please enter a valid email.",
+				"invalidphone": "Please enter a valid phone number.",
 				"required": "This field is required. "
 			}
 		},

client/src/translations/es/common.json

@@ -689,6 +689,7 @@
 			},
 			"validation": {
 				"invalidemail": "Por favor introduzca una dirección de correo electrónico válida.",
+				"invalidphone": "",
 				"required": "Este campo es requerido."
 			}
 		},

client/src/translations/fr/common.json

@@ -689,6 +689,7 @@
 			},
 			"validation": {
 				"invalidemail": "S'il vous plaît entrer un email valide.",
+				"invalidphone": "",
 				"required": "Ce champ est requis."
 			}
 		},