diff --git a/frontend/src/common/components/form/subFormComponents/PhoneNumberInput.tsx b/frontend/src/common/components/form/subFormComponents/PhoneNumberInput.tsx index 8a359eac7..3f3ace587 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 { getFormattedPhoneNumber } from "../../../helpers/phone/getFormattedPhoneNumber"; /** * An onRouteBC customized MUI OutlineInput component @@ -16,7 +17,7 @@ export const PhoneNumberInput = ( // Everytime the user types, update the format of the users input const handleChange = (e: React.ChangeEvent) => { - const formattedValue = formatPhoneNumber(e.target.value); + const formattedValue = getFormattedPhoneNumber(e.target.value); setValue(props.name, formattedValue, { shouldValidate: true }); }; @@ -33,42 +34,3 @@ export const PhoneNumberInput = ( /> ); }; - -/** - * Function to format the users input to be in te correct phone number format - * as the user types - */ -export const formatPhoneNumber = (input?: string): string => { - if (!input) return ""; - // only allows 0-9 inputs - const currentValue = input.replace(/[^\d]/g, ""); - const cvLength = currentValue.length; - - // Ignore formatting if the value length is greater than a standard Canada/US phone number - // (11 digits incl. country code) - if (cvLength > 11) { - return currentValue; - } - // returns: "x ", - if (cvLength < 1) return currentValue; - - // returns: "x", "xx", "xxx" - if (cvLength < 4) return `${currentValue.slice(0, 3)}`; - - // returns: "(xxx)", "(xxx) x", "(xxx) xx", "(xxx) xxx", - if (cvLength < 7) - return `(${currentValue.slice(0, 3)}) ${currentValue.slice(3)}`; - - // returns: "(xxx) xxx-", "(xxx) xxx-x", "(xxx) xxx-xx", "(xxx) xxx-xxx", "(xxx) xxx-xxxx" - if (cvLength < 11) - return `(${currentValue.slice(0, 3)}) ${currentValue.slice( - 3, - 6, - )}-${currentValue.slice(6, 10)}`; - - // returns: "+x (xxx) xxx-xxxx" - return `+${currentValue.slice(0, 1)} (${currentValue.slice( - 1, - 4, - )}) ${currentValue.slice(4, 7)}-${currentValue.slice(7, 11)}`; -}; diff --git a/frontend/src/common/helpers/numeric/filterNonDigits.ts b/frontend/src/common/helpers/numeric/filterNonDigits.ts new file mode 100644 index 000000000..e6387fb7c --- /dev/null +++ b/frontend/src/common/helpers/numeric/filterNonDigits.ts @@ -0,0 +1,7 @@ +/** + * Filter out any non-digit characters from a string. + * @param input Any string input + * @returns String containing only digits + */ +export const filterNonDigits = (input: string) => + input.replace(/[^0-9]/g, ""); diff --git a/frontend/src/common/helpers/phone/getFormattedPhoneNumber.ts b/frontend/src/common/helpers/phone/getFormattedPhoneNumber.ts new file mode 100644 index 000000000..c482179fc --- /dev/null +++ b/frontend/src/common/helpers/phone/getFormattedPhoneNumber.ts @@ -0,0 +1,49 @@ +import { Nullable } from "../../types/common"; +import { filterNonDigits } from "../numeric/filterNonDigits"; + +/** + * Get the formatted phone number from a provided phone number string. + * @param input Inputted string that could contain phone number + * @returns Formatted phone number + */ +export const getFormattedPhoneNumber = (input?: Nullable): string => { + if (!input) return ""; + + // Only accept digits as part of phone numbers + const parsedPhoneDigits: string = filterNonDigits(input); + const phoneDigitsLength = parsedPhoneDigits.length; + + // Ignore formatting if the value length is greater than a standard Canada/US phone number + // (11 digits including country code) + if (phoneDigitsLength > 11) { + return parsedPhoneDigits; + } + + // If there are no digits in the resulting parsed phone number, return "" + if (phoneDigitsLength < 1) return parsedPhoneDigits; + + // If there are 1-3 digits in the parsed phone number, return them as is + // ie. "x", "xx", or "xxx" + if (phoneDigitsLength < 4) return `${parsedPhoneDigits.slice(0, 3)}`; + + // If there are 4-6 digits in the parsed phone number, return the first 3 digits as area code (in brackets followed by space) + // followed by the rest of the digits as just digits with no formatting + // ie. "(xxx) x", "(xxx) xx", "(xxx) xxx", + if (phoneDigitsLength < 7) + return `(${parsedPhoneDigits.slice(0, 3)}) ${parsedPhoneDigits.slice(3)}`; + + // If there are 7-10 digits, return the first 6 digits based on the above formatting rules, + // followed by a dash and the remaining digits will be unformatted + // ie. "(xxx) xxx-x", "(xxx) xxx-xx", "(xxx) xxx-xxx", "(xxx) xxx-xxxx" + if (phoneDigitsLength < 11) + return `(${parsedPhoneDigits.slice(0, 3)}) ${parsedPhoneDigits.slice( + 3, + 6, + )}-${parsedPhoneDigits.slice(6, 10)}`; + + // With exactly 11 digits, format the phone number like this: "+x (xxx) xxx-xxxx" + return `+${parsedPhoneDigits.slice(0, 1)} (${parsedPhoneDigits.slice( + 1, + 4, + )}) ${parsedPhoneDigits.slice(4, 7)}-${parsedPhoneDigits.slice(7, 11)}`; +}; diff --git a/frontend/src/common/helpers/phone/validateOptionalPhoneNumber.ts b/frontend/src/common/helpers/phone/validateOptionalPhoneNumber.ts new file mode 100644 index 000000000..b80fea4fe --- /dev/null +++ b/frontend/src/common/helpers/phone/validateOptionalPhoneNumber.ts @@ -0,0 +1,13 @@ +import { Nullable } from "../../types/common"; +import { validatePhoneNumber } from "./validatePhoneNumber"; + +/** + * Validate an optional phone number. + * @param phone Provided phone number, if any + * @returns true if phone number is valid or empty, error message otherwise + */ +export const validateOptionalPhoneNumber = (phone?: Nullable) => { + if (!phone) return true; // phone number is optional, so empty is accepted + + return validatePhoneNumber(phone); +}; \ No newline at end of file diff --git a/frontend/src/common/helpers/phone/validatePhoneExtension.ts b/frontend/src/common/helpers/phone/validatePhoneExtension.ts new file mode 100644 index 000000000..2a70ebfd1 --- /dev/null +++ b/frontend/src/common/helpers/phone/validatePhoneExtension.ts @@ -0,0 +1,16 @@ +import { Nullable } from "../../types/common"; +import { invalidExtension, invalidExtensionLength } from "../validationMessages"; + +/** + * Validate optional phone extension. + * @param ext Provided phone extension, if any + * @returns true if phone extension is valid, error message otherwise + */ +export const validatePhoneExtension = (ext?: Nullable) => { + if (!ext) return true; // empty or not-provided phone extension is acceptable + + if (ext.length > 5) return invalidExtensionLength(5); + + // Must have exactly 1-5 digits + return /^[0-9]{1,5}$/.test(ext) || invalidExtension(); +}; diff --git a/frontend/src/common/helpers/phone/validatePhoneNumber.ts b/frontend/src/common/helpers/phone/validatePhoneNumber.ts new file mode 100644 index 000000000..bf26c52f0 --- /dev/null +++ b/frontend/src/common/helpers/phone/validatePhoneNumber.ts @@ -0,0 +1,16 @@ +import { filterNonDigits } from "../numeric/filterNonDigits"; +import { invalidPhoneLength } from "../validationMessages"; + +/** + * Validate phone number. + * @param phone Provided phone number to validate + * @returns true if phone number is valid, otherwise returns error message + */ +export const validatePhoneNumber = (phone: string) => { + const filteredPhone = filterNonDigits(phone); + return ( + (filteredPhone.length >= 10 && + filteredPhone.length <= 20) || + invalidPhoneLength(10, 20) + ); +}; diff --git a/frontend/src/common/helpers/validationMessages.ts b/frontend/src/common/helpers/validationMessages.ts index c0b5e4426..df3333da2 100644 --- a/frontend/src/common/helpers/validationMessages.ts +++ b/frontend/src/common/helpers/validationMessages.ts @@ -66,6 +66,8 @@ export const invalidPhoneLength = (min: number, max: number) => { return replacePlaceholders(messageTemplate, placeholders, min, max); }; +export const invalidExtension = () => validationMessages.extension.defaultMessage; + export const invalidExtensionLength = (max: number) => { const { messageTemplate, placeholders } = validationMessages.extension.length; return replacePlaceholders(messageTemplate, placeholders, max); diff --git a/frontend/src/features/idir/search/components/PermitResendDialog.tsx b/frontend/src/features/idir/search/components/PermitResendDialog.tsx index eec31d89d..5ff1bb6ae 100644 --- a/frontend/src/features/idir/search/components/PermitResendDialog.tsx +++ b/frontend/src/features/idir/search/components/PermitResendDialog.tsx @@ -12,20 +12,22 @@ import { import "./PermitResendDialog.scss"; import { getDefaultRequiredVal } from "../../../../common/helpers/util"; +import { Optional } from "../../../../common/types/common"; +import { validateOptionalPhoneNumber } from "../../../../common/helpers/phone/validateOptionalPhoneNumber"; import { - invalidPhoneLength, requiredMessage, selectionRequired, } from "../../../../common/helpers/validationMessages"; + import { CustomFormComponent, getErrorMessage, } from "../../../../common/components/form/CustomFormComponents"; + import { EMAIL_NOTIFICATION_TYPES, EmailNotificationType, } from "../../../permits/types/EmailNotificationType"; -import { Optional } from "../../../../common/types/common"; interface PermitResendFormData { permitId: string; @@ -227,14 +229,9 @@ 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) => { + return validateOptionalPhoneNumber(fax); + }, }, }, }} diff --git a/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx b/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx index 498a6f7be..6665f784e 100644 --- a/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx +++ b/frontend/src/features/manageProfile/components/forms/common/ReusableUserInfoForm.tsx @@ -1,15 +1,17 @@ import isEmail from "validator/lib/isEmail"; + import { CustomFormComponent } from "../../../../../common/components/form/CustomFormComponents"; +import { CountryAndProvince } from "../../../../../common/components/form/CountryAndProvince"; +import { validatePhoneNumber } from "../../../../../common/helpers/phone/validatePhoneNumber"; +import { validateOptionalPhoneNumber } from "../../../../../common/helpers/phone/validateOptionalPhoneNumber"; +import { validatePhoneExtension } from "../../../../../common/helpers/phone/validatePhoneExtension"; import { invalidCityLength, invalidEmail, - invalidExtensionLength, invalidFirstNameLength, invalidLastNameLength, - invalidPhoneLength, requiredMessage, } from "../../../../../common/helpers/validationMessages"; -import { CountryAndProvince } from "../../../../../common/components/form/CountryAndProvince"; /** * Reusable form for editing user information. @@ -42,6 +44,7 @@ export const ReusableUserInfoForm = ({ }} className="my-info-form__input" /> + + +
- (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone1: validatePhoneNumber, }, }, label: "Primary Phone", }} className="my-info-form__input my-info-form__input--left" /> + - ext == null || - ext === "" || - (ext != null && ext !== "" && ext.length <= 5) || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -113,6 +114,7 @@ export const ReusableUserInfoForm = ({ className="my-info-form__input my-info-form__input--right" />
+
- phone2 == null || - phone2 === "" || - (phone2 != null && - phone2 !== "" && - phone2.length >= 10 && - phone2.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone2: (phone?: string) => { + return validateOptionalPhoneNumber(phone); + }, }, }, label: "Alternate Phone", }} className="my-info-form__input my-info-form__input--left" /> + - ext == null || - ext === "" || - (ext != null && ext !== "" && ext.length <= 5) || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -156,6 +151,7 @@ export const ReusableUserInfoForm = ({ className="my-info-form__input my-info-form__input--right" />
+ - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => { + return validateOptionalPhoneNumber(fax); + }, }, }, label: "Fax", }} className="my-info-form__input my-info-form__input--left" /> + + +
- (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone: (phone: string) => validatePhoneNumber(phone), }, }, label: "Phone", @@ -59,6 +56,7 @@ export const CompanyContactDetailsForm = ({ }} className="company-contact-details-form__input company-contact-details-form__input--left" /> + - ext == null || - ext === "" || - (ext != null && ext !== "" && ext.length <= 5) || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -79,6 +74,7 @@ export const CompanyContactDetailsForm = ({ className="company-contact-details-form__input company-contact-details-form__input--right" />
+ - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => validateOptionalPhoneNumber(fax), }, }, 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 e2b671658..d04994012 100644 --- a/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyPrimaryContactForm.tsx +++ b/frontend/src/features/manageProfile/components/forms/companyInfo/subForms/CompanyPrimaryContactForm.tsx @@ -3,13 +3,14 @@ import isEmail from "validator/lib/isEmail"; import "./CompanyPrimaryContactForm.scss"; import { CountryAndProvince } from "../../../../../../common/components/form/CountryAndProvince"; import { CustomFormComponent } from "../../../../../../common/components/form/CustomFormComponents"; +import { validatePhoneNumber } from "../../../../../../common/helpers/phone/validatePhoneNumber"; +import { validatePhoneExtension } from "../../../../../../common/helpers/phone/validatePhoneExtension"; +import { validateOptionalPhoneNumber } from "../../../../../../common/helpers/phone/validateOptionalPhoneNumber"; import { invalidCityLength, invalidEmail, - invalidExtensionLength, invalidFirstNameLength, invalidLastNameLength, - invalidPhoneLength, requiredMessage, } from "../../../../../../common/helpers/validationMessages"; @@ -32,6 +33,7 @@ export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => ( }} className="company-primary-contact-form__input" /> + ( }} className="company-primary-contact-form__input" /> + ( rules: { required: { value: true, message: requiredMessage() }, validate: { - validatePhone1: (phone: string) => - (phone.length >= 10 && phone.length <= 20) || - invalidPhoneLength(10, 20), + validatePhone1: (phone: string) => validatePhoneNumber(phone), }, }, label: "Primary Phone", @@ -93,10 +94,7 @@ export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => ( required: false, validate: { validateExt1: (ext?: string) => - ext == null || - ext === "" || - (ext != null && ext !== "" && ext.length <= 5) || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -114,14 +112,7 @@ 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) => validateOptionalPhoneNumber(phone), }, }, label: "Alternate Phone", @@ -138,10 +129,7 @@ export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => ( required: false, validate: { validateExt2: (ext?: string) => - ext == null || - ext === "" || - (ext != null && ext !== "" && ext.length <= 5) || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -159,6 +147,7 @@ export const CompanyPrimaryContactForm = ({ feature }: { feature: string }) => ( isProvinceRequired={true} provinceClassName="company-primary-contact-form__input" /> + ) => { const extDisplay = ext ? `Ext: ${ext}` : ""; - return `${formatPhoneNumber( + return `${getFormattedPhoneNumber( phone, )} ${extDisplay}`; }; @@ -82,7 +82,7 @@ export const DisplayInfo = memo( {companyInfo?.fax ? ( - Fax: {formatPhoneNumber(companyInfo.fax)} + Fax: {getFormattedPhoneNumber(companyInfo.fax)} ) : null} diff --git a/frontend/src/features/manageProfile/pages/DisplayMyInfo.tsx b/frontend/src/features/manageProfile/pages/DisplayMyInfo.tsx index 2fc19e223..9f7c117fe 100644 --- a/frontend/src/features/manageProfile/pages/DisplayMyInfo.tsx +++ b/frontend/src/features/manageProfile/pages/DisplayMyInfo.tsx @@ -5,9 +5,9 @@ import { faPencil } from "@fortawesome/free-solid-svg-icons"; import "./DisplayMyInfo.scss"; import { ReadUserInformationResponse } from "../types/manageProfile"; -import { formatPhoneNumber } from "../../../common/components/form/subFormComponents/PhoneNumberInput"; import { getProvinceFullName } from "../../../common/helpers/countries/getProvinceFullName"; import { getCountryFullName } from "../../../common/helpers/countries/getCountryFullName"; +import { getFormattedPhoneNumber } from "../../../common/helpers/phone/getFormattedPhoneNumber"; export const DisplayMyInfo = memo( ({ @@ -30,19 +30,19 @@ export const DisplayMyInfo = memo( Email: {myInfo.email} - Primary Phone: {formatPhoneNumber(myInfo.phone1)}{" "} + Primary Phone: {getFormattedPhoneNumber(myInfo.phone1)}{" "} {myInfo.phone1Extension ? `Ext: ${myInfo.phone1Extension}` : ""} {myInfo.phone2 ? ( - Alternate Phone: {formatPhoneNumber(myInfo.phone2)}{" "} + Alternate Phone: {getFormattedPhoneNumber(myInfo.phone2)}{" "} {myInfo.phone2Extension ? `Ext: ${myInfo.phone2Extension}` : ""} ) : null} {myInfo.fax ? ( - Fax: {formatPhoneNumber(myInfo.fax)} + Fax: {getFormattedPhoneNumber(myInfo.fax)} ) : null} {countryFullName ? ( diff --git a/frontend/src/features/permits/components/form/ContactDetails.tsx b/frontend/src/features/permits/components/form/ContactDetails.tsx index fb9fdf611..63d6e88c8 100644 --- a/frontend/src/features/permits/components/form/ContactDetails.tsx +++ b/frontend/src/features/permits/components/form/ContactDetails.tsx @@ -5,12 +5,10 @@ import "./ContactDetails.scss"; import { InfoBcGovBanner } from "../../../../common/components/banners/InfoBcGovBanner"; import { CustomFormComponent } from "../../../../common/components/form/CustomFormComponents"; import { BANNER_MESSAGES } from "../../../../common/constants/bannerMessages"; -import { - invalidEmail, - invalidExtensionLength, - invalidPhoneLength, - requiredMessage, -} from "../../../../common/helpers/validationMessages"; +import { invalidEmail, requiredMessage } from "../../../../common/helpers/validationMessages"; +import { validatePhoneNumber } from "../../../../common/helpers/phone/validatePhoneNumber"; +import { validatePhoneExtension } from "../../../../common/helpers/phone/validatePhoneExtension"; +import { validateOptionalPhoneNumber } from "../../../../common/helpers/phone/validateOptionalPhoneNumber"; export const ContactDetails = ({ feature }: { feature: string }) => { return ( @@ -56,9 +54,7 @@ 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) => validatePhoneNumber(phone), }, }, @@ -76,10 +72,7 @@ export const ContactDetails = ({ feature }: { feature: string }) => { required: false, validate: { validateExt1: (ext?: string) => - !ext || - ext.length === 0 || - ext.length <= 5 || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -97,11 +90,7 @@ 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) => validateOptionalPhoneNumber(phone), }, }, label: "Alternate Number", @@ -118,10 +107,7 @@ export const ContactDetails = ({ feature }: { feature: string }) => { required: false, validate: { validateExt2: (ext?: string) => - !ext || - ext.length === 0 || - ext.length <= 5 || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -179,7 +165,12 @@ export const ContactDetails = ({ feature }: { feature: string }) => { feature={feature} options={{ name: "permitData.contactDetails.fax", - rules: { required: false }, + rules: { + required: false, + validate: { + validateFax: (fax?: string) => validateOptionalPhoneNumber(fax), + }, + }, label: "Fax", }} /> diff --git a/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx b/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx index b25227d1d..76a7d689d 100644 --- a/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx +++ b/frontend/src/features/permits/pages/Void/components/VoidPermitForm.tsx @@ -16,23 +16,20 @@ import { useVoidPermit } from "../hooks/useVoidPermit"; import { mapToRevokeRequestData } from "../helpers/mapper"; import { Nullable } from "../../../../../common/types/common"; import { hasPermitsActionFailed } from "../../../helpers/permitState"; +import { usePermitHistoryQuery } from "../../../hooks/hooks"; +import { isValidTransaction } from "../../../helpers/payment"; +import { invalidEmail, requiredMessage } from "../../../../../common/helpers/validationMessages"; +import { validateOptionalPhoneNumber } from "../../../../../common/helpers/phone/validateOptionalPhoneNumber"; import { applyWhenNotNullable, getDefaultRequiredVal, } from "../../../../../common/helpers/util"; -import { usePermitHistoryQuery } from "../../../hooks/hooks"; + import { CustomFormComponent, getErrorMessage, } from "../../../../../common/components/form/CustomFormComponents"; -import { - invalidEmail, - invalidPhoneLength, - requiredMessage, -} from "../../../../../common/helpers/validationMessages"; -import { isValidTransaction } from "../../../helpers/payment"; - const FEATURE = "void-permit"; export const VoidPermitForm = ({ @@ -129,6 +126,7 @@ export const VoidPermitForm = ({
Send Permit and Receipt to
+
+ + - fax == null || - fax === "" || - (fax != null && - fax !== "" && - fax.length >= 10 && - fax.length <= 20) || - invalidPhoneLength(10, 20), + validateFax: (fax?: string) => validateOptionalPhoneNumber(fax), }, }, label: "Fax", @@ -194,6 +187,7 @@ export const VoidPermitForm = ({
Reason for Voiding
+
@@ -219,14 +213,17 @@ export const VoidPermitForm = ({ )} /> +
+
Revoke this permit?
+
Revoking a permit is a severe action that{" "} @@ -237,6 +234,7 @@ export const VoidPermitForm = ({ no refunds for revoked permits.
+ +
+
{ 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) => validateOptionalPhoneNumber(phone), }, }, label: "Alternate Phone", }} className="user-info-wizard-form__input user-info-wizard-form__input--left" /> + { required: false, validate: { validateExt2: (ext?: string) => - ext == null || - ext === "" || - (ext != null && ext !== "" && ext.length <= 5) || - invalidExtensionLength(5), + validatePhoneExtension(ext), }, }, label: "Ext", @@ -160,6 +151,7 @@ export const UserInformationWizardForm = memo(() => { className="user-info-wizard-form__input user-info-wizard-form__input--right" />
+ { 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) => validateOptionalPhoneNumber(fax), }, }, label: "Fax", }} className="user-info-wizard-form__input user-info-wizard-form__input--left" /> + { isProvinceRequired={true} provinceClassName="user-info-wizard-form__input" /> +