From 4ae344f33ebc1a919c779a5200bf9bd4c9d1a5bc Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Tue, 8 Dec 2020 10:11:41 -0800
Subject: [PATCH] Added phone validation + new phone input box IO-414

---
 .../chat-new-conversation.component.jsx       | 13 ++++-
 .../contract-form/contract-form.component.jsx |  6 ++-
 .../phone-form-item.component.jsx             | 52 ++++++++++++-------
 .../phone-form-item.styles.scss               |  6 +++
 .../jobs-create-jobs-info.component.jsx       |  8 ++-
 .../jobs-create-owner-info.new.component.jsx  | 11 +++-
 .../jobs-detail-general.component.jsx         | 14 +++--
 .../owner-detail-form.component.jsx           | 13 ++++-
 .../shop-info/shop-info.component.jsx         | 13 ++++-
 .../vendors-form/vendors-form.component.jsx   |  4 +-
 10 files changed, 105 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/form-items-formatted/phone-form-item.styles.scss

diff --git a/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx b/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
index 1fd219662..907c5149c 100644
--- a/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
+++ b/client/src/components/chat-new-conversation/chat-new-conversation.component.jsx
@@ -5,7 +5,9 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
-import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
+import PhoneFormItem, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -26,7 +28,14 @@ export function ChatNewConversation({ openChatByPhone }) {
   const popContent = (
     <div>
       <Form form={form} onFinish={handleFinish}>
-        <Form.Item label={t("messaging.labels.phonenumber")} name="phoneNumber">
+        <Form.Item
+          label={t("messaging.labels.phonenumber")}
+          name="phoneNumber"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "phoneNumber"),
+          ]}
+        >
           <PhoneFormItem />
         </Form.Item>
         <Button type="primary" htmlType="submit">
diff --git a/client/src/components/contract-form/contract-form.component.jsx b/client/src/components/contract-form/contract-form.component.jsx
index bfc4c55b5..a7eba372f 100644
--- a/client/src/components/contract-form/contract-form.component.jsx
+++ b/client/src/components/contract-form/contract-form.component.jsx
@@ -4,7 +4,9 @@ import { useTranslation } from "react-i18next";
 import ContractStatusSelector from "../contract-status-select/contract-status-select.component";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
-import InputPhone from "../form-items-formatted/phone-form-item.component";
+import InputPhone, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 
@@ -207,6 +209,8 @@ export default function ContractFormComponent({ form, create = false }) {
               required: true,
               message: t("general.validation.required"),
             },
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "driver_ph1"),
           ]}
         >
           <InputPhone />
diff --git a/client/src/components/form-items-formatted/phone-form-item.component.jsx b/client/src/components/form-items-formatted/phone-form-item.component.jsx
index 166574d63..4dd2add47 100644
--- a/client/src/components/form-items-formatted/phone-form-item.component.jsx
+++ b/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();
+    //     }
+    //   },
+    // });
   },
 });
diff --git a/client/src/components/form-items-formatted/phone-form-item.styles.scss b/client/src/components/form-items-formatted/phone-form-item.styles.scss
new file mode 100644
index 000000000..6cde0215f
--- /dev/null
+++ b/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;
+}
diff --git a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
index 6fdadb950..1345dbd24 100644
--- a/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
+++ b/client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx
@@ -7,7 +7,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import FormItemPhone, {PhoneItemFormatterValidation} from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -62,7 +62,11 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
             <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
               <Input />
             </Form.Item>
-            <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
+            <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1"
+            rules={[
+              ({ getFieldValue }) =>
+                PhoneItemFormatterValidation(getFieldValue, "ins_ph1"),
+            ]}>
               <FormItemPhone customInput={Input} />
             </Form.Item>
             <Form.Item
diff --git a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
index ad8efd6a7..1233efa44 100644
--- a/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
+++ b/client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx
@@ -3,7 +3,9 @@ import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import FormItemPhone, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function JobsCreateOwnerInfoNewComponent() {
@@ -134,6 +136,13 @@ export default function JobsCreateOwnerInfoNewComponent() {
         <Form.Item
           label={t("owners.fields.ownr_ph1")}
           name={["owner", "data", "ownr_ph1"]}
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(
+                getFieldValue,
+                "owner.data.ownr_ph1"
+              ),
+          ]}
         >
           <FormItemPhone customInput={Input} disabled={!state.owner.new} />
         </Form.Item>
diff --git a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
index 4b898939f..f5105c370 100644
--- a/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
+++ b/client/src/components/jobs-detail-general/jobs-detail-general.component.jsx
@@ -6,10 +6,11 @@ import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
-import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import FormItemPhone, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 import Car from "../job-damage-visual/job-damage-visual.component";
 import FormRow from "../layout-form-row/layout-form-row.component";
 
@@ -73,7 +74,14 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
         <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
           <Input disabled={jobRO} />
         </Form.Item>
-        <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
+        <Form.Item
+          label={t("jobs.fields.ins_ph1")}
+          name="ins_ph1"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "ins_ph1"),
+          ]}
+        >
           <FormItemPhone customInput={Input} disabled={jobRO} />
         </Form.Item>
         <Form.Item
diff --git a/client/src/components/owner-detail-form/owner-detail-form.component.jsx b/client/src/components/owner-detail-form/owner-detail-form.component.jsx
index ed260d1cc..9cfceb8da 100644
--- a/client/src/components/owner-detail-form/owner-detail-form.component.jsx
+++ b/client/src/components/owner-detail-form/owner-detail-form.component.jsx
@@ -3,7 +3,9 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
-import FormItemPhone from "../form-items-formatted/phone-form-item.component";
+import FormItemPhone, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function OwnerDetailFormComponent({ form, loading }) {
@@ -118,7 +120,14 @@ export default function OwnerDetailFormComponent({ form, loading }) {
         >
           <FormItemEmail email={getFieldValue("ownr_ea")} />
         </Form.Item>
-        <Form.Item label={t("owners.fields.ownr_ph1")} name="ownr_ph1">
+        <Form.Item
+          label={t("owners.fields.ownr_ph1")}
+          name="ownr_ph1"
+          rules={[
+            ({ getFieldValue }) =>
+              PhoneItemFormatterValidation(getFieldValue, "ownr_ph1"),
+          ]}
+        >
           <FormItemPhone customInput={Input} />
         </Form.Item>
         <Form.Item
diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index f03d90150..d6ab9ae70 100644
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -12,7 +12,9 @@ import {
 import React from "react";
 import { useTranslation } from "react-i18next";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
-import PhoneFormItem from "../form-items-formatted/phone-form-item.component";
+import PhoneFormItem, {
+  PhoneItemFormatterValidation,
+} from "../form-items-formatted/phone-form-item.component";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
@@ -100,7 +102,14 @@ export default function ShopInfoComponent({ form, saveLoading }) {
             <Form.Item label={t("bodyshop.fields.email")} name="email">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.phone")} name="phone">
+            <Form.Item
+              label={t("bodyshop.fields.phone")}
+              name="phone"
+              rules={[
+                ({ getFieldValue }) =>
+                  PhoneItemFormatterValidation(getFieldValue, "phone"),
+              ]}
+            >
               <PhoneFormItem />
             </Form.Item>
             <Form.Item
diff --git a/client/src/components/vendors-form/vendors-form.component.jsx b/client/src/components/vendors-form/vendors-form.component.jsx
index 32a9109fb..0e5c83001 100644
--- a/client/src/components/vendors-form/vendors-form.component.jsx
+++ b/client/src/components/vendors-form/vendors-form.component.jsx
@@ -6,14 +6,14 @@ import {
   InputNumber,
   Select,
   Space,
-  Typography,
+  Typography
 } from "antd";
 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, {
-  PhoneItemFormatterValidation,
+  PhoneItemFormatterValidation
 } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";