From 816053d3eb23bb55f2a86673f4da2666ec3aa774 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Mon, 21 Oct 2024 22:20:57 +0400 Subject: [PATCH 1/3] add packages --- frontend/package-lock.json | 22 ++++++++++++++++++++++ frontend/package.json | 2 ++ 2 files changed, 24 insertions(+) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cbb786e61..4ece7e84a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "@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", @@ -20,6 +21,7 @@ "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", @@ -1588,6 +1590,18 @@ "react-dom": ">=16.9.0" } }, + "node_modules/antd-phone-input": { + "version": "0.3.10", + "resolved": "https://registry.npmjs.org/antd-phone-input/-/antd-phone-input-0.3.10.tgz", + "integrity": "sha512-oa0TXMYAdg+vy1aW0tKUcp0cwDQGt7rjqLrhk3gfqZY6i1K44SuYuusieCREvRXoPk7TLlnDXM6KF/jj/6Dnig==", + "dependencies": { + "react-phone-hooks": "^0.1.11" + }, + "peerDependencies": { + "antd": ">=4", + "react": ">=16" + } + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -4502,6 +4516,14 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-phone-hooks": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/react-phone-hooks/-/react-phone-hooks-0.1.11.tgz", + "integrity": "sha512-UOsHmuYKYI/T4STLUN2PPaSmvPTBBI6I0j8LpuyHJgBKB5m5XE3iAwmajYKMH+FCxOt0S5I+3uYORgs/jxZoew==", + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/react-quill": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 23e979115..136bf78b2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "@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", @@ -19,6 +20,7 @@ "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", From fb80ee1ef4bb64c39f1e181ed67960eaf382c48d Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Mon, 21 Oct 2024 22:21:28 +0400 Subject: [PATCH 2/3] fix phone validator --- frontend/src/utils/helpers.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/src/utils/helpers.js b/frontend/src/utils/helpers.js index ee56e5731..932092735 100644 --- a/frontend/src/utils/helpers.js +++ b/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'); +}; From ee47ecbda1e4c412bc964eb8cb3a074f331a6b30 Mon Sep 17 00:00:00 2001 From: Artyom Vancyan Date: Mon, 21 Oct 2024 22:22:47 +0400 Subject: [PATCH 3/3] integrate phone input into forms --- frontend/src/forms/CustomerForm.jsx | 11 +++++------ frontend/src/forms/DynamicForm/index.jsx | 5 ++++- frontend/src/forms/EmployeeForm.jsx | 10 ++++++---- frontend/src/forms/LeadForm.jsx | 9 ++++++++- 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/frontend/src/forms/CustomerForm.jsx b/frontend/src/forms/CustomerForm.jsx index b6217c8d2..8dbd5d784 100644 --- a/frontend/src/forms/CustomerForm.jsx +++ b/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 }) { - + , email: , number: , - phone: , + phone: , boolean: ( } @@ -370,6 +372,7 @@ function FormElement({ field, feedback, setFeedback }) { else { return ( - + - +