Add email and phone contact fields to the review step with validation. - #1108
Conversation
| isInvalid={contactTouched && !!validation.phoneError} | ||
| errorMessage={contactTouched ? (validation.phoneError ?? undefined) : undefined} | ||
| // @ts-expect-error placeholder is supported by underlying react-aria TextField | ||
| placeholder="250-555-0100" |
There was a problem hiding this comment.
I think we should leave the placeholders off these fields (phone and email) to avoid any confusion on the user's part.
| email: string | ||
| telephone: string |
There was a problem hiding this comment.
telephone and email can both be null from the API, e.g. when I sign in to prod using my BCSC, email is populated but telephone is null.
| email: string | |
| telephone: string | |
| email: string | null | |
| telephone: string | null |
| const email = contactEmail ?? (profile?.email?.trim() || session?.email?.trim() || '') | ||
| const phone = contactPhone ?? (profile?.telephone?.trim() || '') |
There was a problem hiding this comment.
Nit, but do contactEmail and contactPhone need to be trimmed here as well?
|
|
||
| export function isValidPhone(phone: string): boolean { | ||
| const normalized = phone.trim().replace(/[ ()]/g, '') | ||
| return normalized.length > 0 && /^\+?1?[-.]?\d{3}[-.]?\d{3}[-.]?\d{4}$/.test(normalized) |
There was a problem hiding this comment.
I realize the current app uses a regex. I think this is a good opportunity for us to move to a library like https://github.com/google/libphonenumber and do this properly. e.g. (250) 387-7000 isn't a valid number with that regex, neither is 306 555 1212, etc.
Added libphonenumber-js for phone validation, allow nullable email/telephone, trim resolved contact values, and removed field placeholders.
|
2 participants
Summary