From 2d9bd638c2956d4ab0e0573445a941c12744b5fc Mon Sep 17 00:00:00 2001 From: GlenAOT <160973940+GlenAOT@users.noreply.github.com> Date: Fri, 22 Nov 2024 13:45:03 -0800 Subject: [PATCH] update validations for all phone and fax numbers --- .../form/subFormComponents/NumberInput.tsx | 3 +- .../subFormComponents/PhoneNumberInput.tsx | 3 +- .../common/helpers/removeNonNumericValues.ts | 2 + .../search/components/PermitResendDialog.tsx | 19 ++++--- .../forms/common/ReusableUserInfoForm.tsx | 49 ++++++++++++------- .../subForms/CompanyContactDetailsForm.tsx | 29 ++++++----- .../subForms/CompanyPrimaryContactForm.tsx | 29 ++++++----- .../components/form/ContactDetails.tsx | 44 +++++++++++++---- .../pages/Void/components/VoidPermitForm.tsx | 20 +++++--- .../UserInformationWizardForm.tsx | 49 ++++++++++++------- 10 files changed, 160 insertions(+), 87 deletions(-) create mode 100644 frontend/src/common/helpers/removeNonNumericValues.ts diff --git a/frontend/src/common/components/form/subFormComponents/NumberInput.tsx b/frontend/src/common/components/form/subFormComponents/NumberInput.tsx index 819f2284d..166303f5b 100644 --- a/frontend/src/common/components/form/subFormComponents/NumberInput.tsx +++ b/frontend/src/common/components/form/subFormComponents/NumberInput.tsx @@ -3,6 +3,7 @@ import { useFormContext } from "react-hook-form"; import { ORBC_FormTypes } from "../../../types/common"; import { CustomOutlinedInputProps } from "./CustomOutlinedInput"; import "./NumberInput.scss"; +import { removeNonNumericValues } from "../../../helpers/removeNonNumericValues"; /** * An onRouteBC customized MUI OutlineInput component @@ -18,7 +19,7 @@ export const NumberInput = ( const filterNonNumericValue = (input?: string) => { if (!input) return ""; // only allows 0-9 inputs - return input.replace(/[^\d]/g, ""); + return removeNonNumericValues(input); }; // Everytime the user types, update the format of the users input diff --git a/frontend/src/common/components/form/subFormComponents/PhoneNumberInput.tsx b/frontend/src/common/components/form/subFormComponents/PhoneNumberInput.tsx index 8a359eac7..e0f6f265a 100644 --- a/frontend/src/common/components/form/subFormComponents/PhoneNumberInput.tsx +++ b/frontend/src/common/components/form/subFormComponents/PhoneNumberInput.tsx @@ -4,6 +4,7 @@ import { useFormContext } from "react-hook-form"; import "./PhoneNumberInput.scss"; import { ORBC_FormTypes } from "../../../types/common"; import { CustomOutlinedInputProps } from "./CustomOutlinedInput"; +import { removeNonNumericValues } from "../../../helpers/removeNonNumericValues"; /** * An onRouteBC customized MUI OutlineInput component @@ -41,7 +42,7 @@ export const PhoneNumberInput = ( export const formatPhoneNumber = (input?: string): string => { if (!input) return ""; // only allows 0-9 inputs - const currentValue = input.replace(/[^\d]/g, ""); + const currentValue = removeNonNumericValues(input); const cvLength = currentValue.length; // Ignore formatting if the value length is greater than a standard Canada/US phone number diff --git a/frontend/src/common/helpers/removeNonNumericValues.ts b/frontend/src/common/helpers/removeNonNumericValues.ts new file mode 100644 index 000000000..7a3bd6029 --- /dev/null +++ b/frontend/src/common/helpers/removeNonNumericValues.ts @@ -0,0 +1,2 @@ +export const removeNonNumericValues = (input: string) => + input.replace(/[^0-9]/g, ""); diff --git a/frontend/src/features/idir/search/components/PermitResendDialog.tsx b/frontend/src/features/idir/search/components/PermitResendDialog.tsx index eec31d89d..0f20f3827 100644 --- a/frontend/src/features/idir/search/components/PermitResendDialog.tsx +++ b/frontend/src/features/idir/search/components/PermitResendDialog.tsx @@ -26,6 +26,7 @@ import { EmailNotificationType, } from "../../../permits/types/EmailNotificationType"; import { Optional } from "../../../../common/types/common"; +import { removeNonNumericValues } from "../../../../common/helpers/removeNonNumericValues"; interface PermitResendFormData { permitId: string; @@ -227,14 +228,16 @@ export default function PermitResendDialog({ rules: { required: false, validate: { - validateFax: (fax?: string) => - fax == null || - fax === "" || - (fax != null && - fax !== "" && - unformatFax(fax).length >= 10 && - unformatFax(fax).length <= 11) || - invalidPhoneLength(10, 11), + validateFax: (fax?: string) => { + if (!fax) return; + + const filteredFax = removeNonNumericValues(fax); + return ( + filteredFax.length === 0 || + (filteredFax.length >= 10 && filteredFax.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, }} diff --git a/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx b/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx index f4a601a58..910a390d1 100644 --- a/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx +++ b/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx @@ -10,6 +10,7 @@ import { requiredMessage, } from "../../../../../common/helpers/validationMessages"; import { CountryAndProvince } from "../../../../../common/components/form/CountryAndProvince"; +import { removeNonNumericValues } from "../../../../../common/helpers/removeNonNumericValues"; /** * Reusable form for editing user information. @@ -84,9 +85,14 @@ export const ReusableUserInfoForm = ({ rules: { required: { value: true, message: requiredMessage() }, validate: { - validatePhone1: (phone: string) => - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone1: (phone: string) => { + const filteredPhone = removeNonNumericValues(phone); + return ( + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Primary Phone", @@ -122,14 +128,17 @@ export const ReusableUserInfoForm = ({ rules: { required: false, validate: { - validatePhone2: (phone2?: string) => - phone2 == null || - phone2 === "" || - (phone2 != null && - phone2 !== "" && - phone2.length >= 10 && - phone2.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone2: (phone?: string) => { + if (!phone) return; + + const filteredPhone = removeNonNumericValues(phone); + return ( + filteredPhone.length === 0 || + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Alternate Phone", @@ -164,14 +173,16 @@ export const ReusableUserInfoForm = ({ rules: { required: false, validate: { - validateFax: (fax?: string) => - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => { + if (!fax) return; + + const filteredFax = removeNonNumericValues(fax); + return ( + filteredFax.length === 0 || + (filteredFax.length >= 10 && filteredFax.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Fax", diff --git a/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyContactDetailsForm.tsx b/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyContactDetailsForm.tsx index b58e42ca7..1e583b6de 100644 --- a/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyContactDetailsForm.tsx +++ b/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyContactDetailsForm.tsx @@ -8,6 +8,7 @@ import { invalidPhoneLength, requiredMessage, } from "../../../../../../common/helpers/validationMessages"; +import { removeNonNumericValues } from "../../../../../../common/helpers/removeNonNumericValues"; export const CompanyContactDetailsForm = ({ feature, @@ -49,9 +50,13 @@ export const CompanyContactDetailsForm = ({ rules: { required: { value: true, message: requiredMessage() }, validate: { - validatePhone: (phone: string) => - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone: (phone: string) => { + const filteredPhone = removeNonNumericValues(phone); + return ( + (filteredPhone.length >= 10 && filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Phone", @@ -87,14 +92,16 @@ export const CompanyContactDetailsForm = ({ rules: { required: false, validate: { - validateFax: (fax?: string) => - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => { + if (!fax) return; + + const filteredFax = removeNonNumericValues(fax); + return ( + filteredFax.length === 0 || + (filteredFax.length >= 10 && filteredFax.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Fax", diff --git a/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyPrimaryContactForm.tsx b/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyPrimaryContactForm.tsx index 2e60e140f..f12f9c97f 100644 --- a/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyPrimaryContactForm.tsx +++ b/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyPrimaryContactForm.tsx @@ -12,6 +12,7 @@ import { invalidPhoneLength, requiredMessage, } from "../../../../../../common/helpers/validationMessages"; +import { removeNonNumericValues } from "../../../../../../common/helpers/removeNonNumericValues"; export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => (
@@ -74,9 +75,13 @@ export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => ( rules: { required: { value: true, message: requiredMessage() }, validate: { - validatePhone1: (phone: string) => - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone1: (phone: string) => { + const filteredPhone = removeNonNumericValues(phone); + return ( + (filteredPhone.length >= 10 && filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Primary Phone", @@ -112,14 +117,16 @@ export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => ( rules: { required: false, validate: { - validatePhone2: (phone2?: string) => - phone2 == null || - phone2 === "" || - (phone2 != null && - phone2 !== "" && - phone2.length >= 10 && - phone2.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone2: (phone?: string) => { + if (!phone) return; + + const filteredPhone = removeNonNumericValues(phone); + return ( + filteredPhone.length === 0 || + (filteredPhone.length >= 10 && filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Alternate Phone", diff --git a/frontend/src/features/permits/components/form/ContactDetails.tsx b/frontend/src/features/permits/components/form/ContactDetails.tsx index f8a3259e2..668363f45 100644 --- a/frontend/src/features/permits/components/form/ContactDetails.tsx +++ b/frontend/src/features/permits/components/form/ContactDetails.tsx @@ -12,6 +12,7 @@ import { import { PHONE_WIDTH, EXT_WIDTH } from "../../../../themes/orbcStyles"; import { BANNER_MESSAGES } from "../../../../common/constants/bannerMessages"; import isEmail from "validator/lib/isEmail"; +import { removeNonNumericValues } from "../../../../common/helpers/removeNonNumericValues"; export const ContactDetails = ({ feature }: { feature: string }) => { return ( @@ -54,9 +55,14 @@ export const ContactDetails = ({ feature }: { feature: string }) => { rules: { required: { value: true, message: requiredMessage() }, validate: { - validatePhone: (phone: string) => - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone1: (phone: string) => { + const filteredPhone = removeNonNumericValues(phone); + return ( + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, @@ -95,11 +101,17 @@ export const ContactDetails = ({ feature }: { feature: string }) => { rules: { required: false, validate: { - validatePhone: (phone?: string) => - !phone || - phone.length === 0 || - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone2: (phone?: string) => { + if (!phone) return; + + const filteredPhone = removeNonNumericValues(phone); + return ( + filteredPhone.length === 0 || + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Alternate Number", @@ -172,7 +184,21 @@ export const ContactDetails = ({ feature }: { feature: string }) => { feature={feature} options={{ name: "permitData.contactDetails.fax", - rules: { required: false }, + rules: { + required: false, + validate: { + validateFax: (fax?: string) => { + if (!fax) return; + + const filteredFax = removeNonNumericValues(fax); + return ( + filteredFax.length === 0 || + (filteredFax.length >= 10 && filteredFax.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, + }, + }, label: "Fax", width: PHONE_WIDTH, }} diff --git a/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx b/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx index b25227d1d..c19741e5d 100644 --- a/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx +++ b/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx @@ -32,6 +32,7 @@ import { requiredMessage, } from "../../../../../common/helpers/validationMessages"; import { isValidTransaction } from "../../../helpers/payment"; +import { removeNonNumericValues } from "../../../../../common/helpers/removeNonNumericValues"; const FEATURE = "void-permit"; @@ -175,14 +176,17 @@ export const VoidPermitForm = ({ rules: { required: false, validate: { - validateFax: (fax?: string) => - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => { + if (!fax) return; + + const filteredFax = removeNonNumericValues(fax); + return ( + filteredFax.length === 0 || + (filteredFax.length >= 10 && + filteredFax.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Fax", diff --git a/frontend/src/features/wizard/subcomponents/UserInformationWizardForm.tsx b/frontend/src/features/wizard/subcomponents/UserInformationWizardForm.tsx index 143cc48bf..a6709a8d3 100644 --- a/frontend/src/features/wizard/subcomponents/UserInformationWizardForm.tsx +++ b/frontend/src/features/wizard/subcomponents/UserInformationWizardForm.tsx @@ -13,6 +13,7 @@ import { invalidPhoneLength, requiredMessage, } from "../../../common/helpers/validationMessages"; +import { removeNonNumericValues } from "../../../common/helpers/removeNonNumericValues"; /** * The User Information Form contains multiple subs forms including @@ -88,9 +89,14 @@ export const UserInformationWizardForm = memo(() => { message: requiredMessage(), }, validate: { - validatePhone1: (phone: string) => - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone1: (phone: string) => { + const filteredPhone = removeNonNumericValues(phone); + return ( + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Primary Phone", @@ -126,14 +132,17 @@ export const UserInformationWizardForm = memo(() => { rules: { required: false, validate: { - validatePhone2: (phone2?: string) => - phone2 == null || - phone2 === "" || - (phone2 != null && - phone2 !== "" && - phone2.length >= 10 && - phone2.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone2: (phone?: string) => { + if (!phone) return; + + const filteredPhone = removeNonNumericValues(phone); + return ( + filteredPhone.length === 0 || + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Alternate Phone", @@ -168,14 +177,16 @@ export const UserInformationWizardForm = memo(() => { rules: { required: false, validate: { - validateFax: (fax?: string) => - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => { + if (!fax) return; + + const filteredFax = removeNonNumericValues(fax); + return ( + filteredFax.length === 0 || + (filteredFax.length >= 10 && filteredFax.length <= 20) || + invalidPhoneLength(10, 20) + ); + }, }, }, label: "Fax",