Resolved phone inputs IO-722

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,17 +1,33 @@
 import { MessageFilled } from "@ant-design/icons";
+import { notification } from "antd";
+import parsePhoneNumber from "libphonenumber-js";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { openChatByPhone } from "../../redux/messaging/messaging.actions";
+
 const mapDispatchToProps = (dispatch) => ({
   openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
 });
+
 export function ChatOpenButton({ phone, jobid, openChatByPhone }) {
+  const { t } = useTranslation();
   return (
     <MessageFilled
       style={{ margin: 4 }}
       onClick={(e) => {
         e.stopPropagation();
-        openChatByPhone({ phone_num: phone, jobid: jobid });
+        const p = parsePhoneNumber(phone, "CA");
+        console.log(
+          "🚀  ~ file: chat-open-button.component.jsx  ~ line 21  ~ p",
+          p
+        );
+
+        if (p && p.isValid()) {
+          openChatByPhone({ phone_num: p.formatInternational(), jobid: jobid });
+        } else {
+          notification["error"]({ message: t("messaging.error.invalidphone") });
+        }
       }}
     />
   );

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

@@ -6,6 +6,8 @@ function FormItemCurrency(props, ref) {
       {...props}
       ref={ref}
       style={{ width: "initial" }}
+      formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+      parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
       // formatter={(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
       // parser={(value) => value.replace(/\$\s?|(,*)/g, "")}
       precision={2}

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

@@ -1,17 +1,13 @@
+import { Input } from "antd";
 import i18n from "i18next";
 import parsePhoneNumber from "libphonenumber-js";
 import React, { forwardRef } from "react";
-import PhoneInput from "react-phone-input-2";
-import "react-phone-input-2/lib/high-res.css";
 import "./phone-form-item.styles.scss";
 
 function FormItemPhone(props, ref) {
   return (
-    <PhoneInput
-      country="ca"
-      onlyCountries={["ca", "us"]}
-      ref={ref}
-      className="ant-input"
+    <Input
+      // country="ca" ref={ref} className="ant-input"
       {...props}
     />
   );
@@ -21,30 +17,15 @@ export default forwardRef(FormItemPhone);
 
 export const PhoneItemFormatterValidation = (getFieldValue, name) => ({
   async validator(rule, value) {
-    if (!getFieldValue(name)) {
+    if (!value) {
       return Promise.resolve();
     } else {
-      const p = parsePhoneNumber(getFieldValue(name), "CA");
-
-      if (p) {
+      const p = parsePhoneNumber(value, "CA");
+      if (p.isValid()) {
         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/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -78,7 +78,7 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
                   PhoneItemFormatterValidation(getFieldValue, "ins_ph1"),
               ]}
             >
-              <FormItemPhone customInput={Input} />
+              <FormItemPhone />
             </Form.Item>
             <Form.Item
               label={t("jobs.fields.ins_ea")}

client/src/components/jobs-create-owner-info/jobs-create-owner-info.new.component.jsx

@@ -144,7 +144,7 @@ export default function JobsCreateOwnerInfoNewComponent() {
               ),
           ]}
         >
-          <FormItemPhone customInput={Input} disabled={!state.owner.new} />
+          <FormItemPhone disabled={!state.owner.new} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>

client/src/components/jobs-detail-general/jobs-detail-general.component.jsx

@@ -79,7 +79,7 @@ export function JobsDetailGeneral({ bodyshop, jobRO, job, form }) {
               PhoneItemFormatterValidation(getFieldValue, "ins_ph1"),
           ]}
         >
-          <FormItemPhone customInput={Input} disabled={jobRO} />
+          <FormItemPhone disabled={jobRO} />
         </Form.Item>
         <Form.Item
           label={t("jobs.fields.ins_ea")}

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -128,7 +128,7 @@ export default function OwnerDetailFormComponent({ form, loading }) {
               PhoneItemFormatterValidation(getFieldValue, "ownr_ph1"),
           ]}
         >
-          <FormItemPhone customInput={Input} />
+          <FormItemPhone />
         </Form.Item>
         <Form.Item
           label={t("owners.fields.preferred_contact")}