Adds generalized validator PhoneNumberValidator

[rithviknishad]

WHAT

🤖 Generated by Copilot at abbed90

Added a new feature to support different types of phone numbers in the application. Modified the PhoneNumberFormField component to accept a types prop and validate the input accordingly. Updated various components that use the PhoneNumberFormField component to pass the types prop. Refactored the PhoneNumberValidator and SupportPhoneNumberValidator functions to use dynamic regular expressions based on the phone number types.

Proposed Changes

• Related to Generalize Phone Number Field Regex Validators care#1497

Allowed phone number types in each phone number fields

Field Name	Mobile	Landline	Support
Death Report Form: Phone Number	✅	✅	❌
External Result List: Search by Phone	✅	✅	❌
Asset Form: Support Number	✅	✅	✅
Facility Form: Emergency Contact	✅	✅	❌
Patient Registration: Phone No.	✅	✅	❌
Patient Registration: Emergency No.	✅	✅	❌
Shifting Form: Referring Facility Phone	✅	✅	❌
Resource Form: Referring Facility Phone	✅	✅	❌
Shifting List Filter: Patient Phone	✅	✅	❌
Shift Form: Ambulance Phone	✅	✅	❌
User Form: Phone No.	✅	✅	❌
User Form: Whatsapp No.	✅	❌	❌
User Filter: Phone No.	✅	✅	❌
User Filter: Whatsapp No.	✅	❌	❌
User Profile: Phone No.	✅	✅	❌
User Profile: Whatsapp No.	✅	❌	❌

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at abbed90

• Add a types prop to the PhoneNumberFormField component to specify the valid types of phone numbers that can be entered in the field (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Modify the PhoneNumberValidator and SupportPhoneNumberValidator functions in FieldValidators.tsx to use a PhoneNumberType type and a PHONE_NUMBER_REGEX_MAP object to dynamically generate regular expressions based on the types of phone numbers passed as arguments (link)
• Create a validator variable using the useMemo hook in the PhoneNumberFormField component to use the PhoneNumberValidator function with the types prop as an argument (link)
• Replace the AnyValidator function with the validator variable in the PhoneNumberFormField component to allow for more flexibility and specificity in validating phone numbers (link)
• Modify the setValue function in the PhoneNumberFormField component to replace all non-digit and non-plus characters in the phone number input with empty strings (link)
• Add a labelSuffix prop to the FormField component in the PhoneNumberFormField component to render icons and tooltips for different types of phone numbers using the PhoneNumberTypesHelp component (link)
• Add the phoneNumberTypeIcons and PhoneNumberTypesHelp constants to the PhoneNumberFormField component to map PhoneNumberType values to icon names and render icons and tooltips using the CareIcon and tooltip components (link)
• Import the PhoneNumberType type and the CareIcon component in the PhoneNumberFormField component to define the types prop and display icons for different types of phone numbers (link)
• Modify the fieldProps function in the UserAdd component to use the as any type assertion to access the state.form and state.errors objects using the name parameter as a key, to resolve a TypeScript error caused by the name parameter being a union type of string literals (link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 8, 2023 9:02am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	5e71952
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/64d2046b2babf9000816a423
😎 Deploy Preview	https://deploy-preview-5999--care-egov-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

@rithviknishad this PR looks good, but the front-end validation needs an enhancement, so conditionally approving it

-> Invalid input's post-submission getting rejected without error message
-> Even though in user filters, we say it says whatsapp phone number doesn't support landline number, the field is accepting the data and showing the badge

[github-actions]

@rithviknishad We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.