Resolved phone inputs IO-722

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -22505,6 +22505,32 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <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>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>labels</name>
                                 <children>

client/package-lock.json

@@ -45,7 +45,6 @@
         "react-i18next": "^11.8.7",
         "react-icons": "^4.2.0",
         "react-number-format": "^4.4.4",
-        "react-phone-input-2": "^2.13.9",
         "react-redux": "^7.2.2",
         "react-resizable": "^1.11.0",
         "react-router-dom": "^5.2.0",
@@ -14484,21 +14483,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
-    "node_modules/lodash.reduce": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
-      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
-    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg="
     },
-    "node_modules/lodash.startswith": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
-      "integrity": "sha1-xZjErc4YiiflMUVzHNxsDnF3YAw="
-    },
     "node_modules/lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -19037,23 +19026,6 @@
         "react-dom": ">=16.3.0"
       }
     },
-    "node_modules/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==",
-      "dependencies": {
-        "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"
-      },
-      "peerDependencies": {
-        "react": "^16.12.0",
-        "react-dom": "^16.12.0"
-      }
-    },
     "node_modules/react-prop-toggle": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz",
@@ -36891,21 +36863,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
-    "lodash.reduce": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
-      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
-    },
     "lodash.sortby": {
       "version": "4.7.0",
       "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",
@@ -40467,19 +40429,6 @@
         "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-prop-toggle": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz",

client/package.json

@@ -41,7 +41,6 @@
     "react-i18next": "^11.8.7",
     "react-icons": "^4.2.0",
     "react-number-format": "^4.4.4",
-    "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/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
+    <Input
-      country="ca"
+      // country="ca" ref={ref} className="ant-input"
-      onlyCountries={["ca", "us"]}
-      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");
+      const p = parsePhoneNumber(value, "CA");
-
+      if (p.isValid()) {
-      if (p) {
         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")}

client/src/translations/en_us/common.json

@@ -1343,6 +1343,9 @@
 				"link": "Link to Job",
 				"new": "New Conversation"
 			},
+			"errors": {
+				"invalidphone": "The phone number is invalid.  Unable to open conversation. "
+			},
 			"labels": {
 				"maxtenimages": "You can only select up to a maximum of 10 images at a time.",
 				"messaging": "Messaging",

client/src/translations/es/common.json

@@ -1343,6 +1343,9 @@
 				"link": "",
 				"new": ""
 			},
+			"errors": {
+				"invalidphone": ""
+			},
 			"labels": {
 				"maxtenimages": "",
 				"messaging": "Mensajería",

client/src/translations/fr/common.json

@@ -1343,6 +1343,9 @@
 				"link": "",
 				"new": ""
 			},
+			"errors": {
+				"invalidphone": ""
+			},
 			"labels": {
 				"maxtenimages": "",
 				"messaging": "Messagerie",

client/src/utils/PhoneFormatter.jsx

@@ -4,5 +4,5 @@ import React from "react";
 
 export default function PhoneNumberFormatter(props) {
   const p = parsePhoneNumber(props.children || "", "CA");
-  return p ? <span>{p.formatInternational()}</span> : null;
+  return p ? <span>{p.formatNational()}</span> : null;
 }