fix: fix phone number validation

frontend/package.json

@@ -12,13 +12,15 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@vitejs/plugin-react": "^4.3.1",
     "antd": "^5.14.1",
+    "antd-phone-input": "^0.3.10",
     "axios": "^1.6.2",
     "cross-env": "7.0.3",
     "currency.js": "2.0.4",
     "dayjs": "^1.11.10",
     "just-compare": "^2.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
+    "react-phone-hooks": "^0.1.11",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",

frontend/src/forms/CustomerForm.jsx

@@ -1,7 +1,9 @@
 import { Form, Input } from 'antd';
+import { getRawValue } from 'react-phone-hooks';
 import { validatePhoneNumber } from '@/utils/helpers';
 
 import useLanguage from '@/locale/useLanguage';
+import PhoneInput from 'antd-phone-input';
 
 export default function CustomerForm({ isUpdateForm = false }) {
   const translate = useLanguage();
@@ -70,21 +72,18 @@ export default function CustomerForm({ isUpdateForm = false }) {
 
       <Form.Item
         name="phone"
+        normalize={getRawValue}
         label={translate('Phone')}
         rules={[
           {
             required: true,
           },
           {
-            validator: validateEmptyString,
-          },
-          {
-            pattern: validatePhoneNumber,
-            message: 'Please enter a valid phone number',
+            validator: validatePhoneNumber,
           },
         ]}
       >
-        <Input />
+        <PhoneInput />
       </Form.Item>
       <Form.Item
         name="email"

frontend/src/forms/DynamicForm/index.jsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
+import { getRawValue } from 'react-phone-hooks';
 import { DatePicker, Input, Form, Select, InputNumber, Switch, Tag } from 'antd';
 
 import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
 import useLanguage from '@/locale/useLanguage';
 import { useMoney, useDate } from '@/settings';
 import AutoCompleteAsync from '@/components/AutoCompleteAsync';
 import SelectAsync from '@/components/SelectAsync';
+import PhoneInput from 'antd-phone-input';
 import { generate as uniqueId } from 'shortid';
 
 import { countryList } from '@/utils/countryList';
@@ -302,7 +304,7 @@ function FormElement({ field, feedback, setFeedback }) {
     textarea: <TextArea rows={4} />,
     email: <Input autoComplete="off" placeholder="[email protected]" />,
     number: <InputNumber style={{ width: '100%' }} />,
-    phone: <Input style={{ width: '100%' }} placeholder="+1 123 456 789" />,
+    phone: <PhoneInput />,
     boolean: (
       <Switch
         checkedChildren={<CheckOutlined />}
@@ -370,6 +372,7 @@ function FormElement({ field, feedback, setFeedback }) {
   else {
     return (
       <Form.Item
+        normalize={field.type === 'phone' ? getRawValue : undefined}
         label={translate(field.label)}
         name={field.name}
         rules={[

frontend/src/forms/EmployeeForm.jsx

@@ -1,9 +1,10 @@
-import { Form, Input, Select } from 'antd';
-import { DatePicker } from 'antd';
+import { Form, Input, DatePicker, Select } from 'antd';
 import { validatePhoneNumber } from '@/utils/helpers';
+import { getRawValue } from 'react-phone-hooks';
 import { useDate } from '@/settings';
 
 import useLanguage from '@/locale/useLanguage';
+import PhoneInput from 'antd-phone-input';
 
 export default function EmployeeForm() {
   const translate = useLanguage();
@@ -85,17 +86,18 @@ export default function EmployeeForm() {
       </Form.Item>
       <Form.Item
         name="phone"
+        normalize={getRawValue}
         label={translate('phone')}
         rules={[
           {
             required: true,
           },
           {
-            pattern: validatePhoneNumber, // importing regex from helper.js utility file to validate
+            validator: validatePhoneNumber,
           },
         ]}
       >
-        <Input />
+        <PhoneInput />
       </Form.Item>
       <Form.Item
         name="department"

frontend/src/forms/LeadForm.jsx

@@ -1,6 +1,9 @@
 import { Form, Input, Select } from 'antd';
+import { getRawValue } from 'react-phone-hooks';
+import { validatePhoneNumber } from '@/utils/helpers';
 
 import useLanguage from '@/locale/useLanguage';
+import PhoneInput from 'antd-phone-input';
 
 export default function LeadForm() {
   const translate = useLanguage();
@@ -44,14 +47,18 @@ export default function LeadForm() {
 
       <Form.Item
         label={translate('phone')}
+        normalize={getRawValue}
         name="phone"
         rules={[
           {
             required: true,
           },
+          {
+            validator: validatePhoneNumber,
+          },
         ]}
       >
-        <Input type="tel" />
+        <PhoneInput />
       </Form.Item>
 
       <Form.Item

frontend/src/utils/helpers.js

@@ -1,3 +1,5 @@
+import { getFormattedNumber, parsePhoneNumber, checkValidity } from 'react-phone-hooks';
+
 export function get(obj, key) {
   return key.split('.').reduce(function (o, x) {
     return o === undefined || o === null ? o : o[x];
@@ -108,8 +110,13 @@ export function formatDatetime(param) {
 /*
   Regex to validate phone number format
 */
-export const validatePhoneNumber = /^(?:[+\d()\-\s]+)$/;
-
-/*
- Set object value in html
-*/
+export const validatePhoneNumber = (_, rawValue) => {
+  let isValid;
+  if (rawValue?.valid) {
+    isValid = rawValue.valid();
+  } else {
+    isValid = checkValidity(parsePhoneNumber(getFormattedNumber(rawValue)));
+  }
+  if (isValid) return Promise.resolve();
+  return Promise.reject('Please enter a valid phone number');
+};