23196, 24161 - make phone number a required field and fix the country…

… code prefilling (#218) * make phone number a required field * api updates * revert change to pnpm-local.yaml * update cypress test * update i18n
bcgov · Jan 10, 2025 · 18a3042 · 18a3042
1 parent 3fd34c6
commit 18a3042
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 50 deletions.
diff --git a/btr-api/src/btr_api/schemas/btr-bods/btr-bods-person.json b/btr-api/src/btr_api/schemas/btr-bods/btr-bods-person.json
@@ -152,6 +152,12 @@
       },
       "propertyOrder": 60
     },
+    "phoneNumber": {
+      "title": "Phone number",
+      "description": "A phone number for this individual.",
+      "$ref": "https://btr.gov.bc.ca/.well_known/schemas/components.json#/definitions/PhoneNumber",
+      "propertyOrder": 70
+    },
     "publicationDetails": {
       "title": "Publication details",
       "description": "Information concerning the original publication of this statement.",
@@ -188,6 +194,7 @@
         "isComponent",
         "publicationDetails",
         "hasTaxNumber",
+        "phoneNumber",
         "email",
         "nationalities",
         "names"

diff --git a/btr-api/src/btr_api/schemas/btr-bods/components.json b/btr-api/src/btr_api/schemas/btr-bods/components.json
@@ -223,6 +223,33 @@
         "fullName"
       ]
     },
+    "PhoneNumber": {
+      "title": "Phone Number",
+      "description": "A phone number for this individual.",
+      "type": "object",
+      "properties": {
+        "countryCallingCode": {
+          "type": "string",
+          "description": "Country code number (e.g., +1) for the phone number."
+        },
+        "countryCode2letterIso": {
+          "type": "string",
+          "description": "2-letter country code (ISO 3166-1) for the phone number."
+        },
+        "number": {
+          "type": "string",
+          "description": "The phone number.",
+          "minLength": 1
+        },
+        "extension": {
+          "type": "string",
+          "description": "The optional phone number extension"
+        }
+      },
+      "required": [
+        "number"
+      ]
+    },
     "Interest": {
       "title": "Interest",
       "description": "A description of the interest held by an interestedParty in another entity.",

diff --git a/btr-web/btr-common-components/components/bcros/inputs/PhoneNumber/CountryCode.vue b/btr-web/btr-common-components/components/bcros/inputs/PhoneNumber/CountryCode.vue
@@ -106,7 +106,7 @@ watch(
 watch(
   () => countryCode2letterIso.value,
   () => {
-    if (selectedCountry.value === undefined && countryCode2letterIso.value !== undefined) {
+    if (countryCode2letterIso.value !== undefined) {
       selectCountry(countryCode2letterIso.value)
     }
   }

diff --git a/btr-web/btr-common-components/components/bcros/inputs/PhoneNumber/index.vue b/btr-web/btr-common-components/components/bcros/inputs/PhoneNumber/index.vue
@@ -9,8 +9,12 @@
       />
     </UFormGroup>
     <UFormGroup :name="name + '.number'" class="w-1/2">
-      <template #help>
+      <template #help="{ error }">
+        <span v-if="error">
+          {{ error }}
+        </span>
         <BcrosTooltip
+          v-else
           :popper="{
             placement: 'bottom',
             arrow: true,
@@ -19,25 +23,27 @@
         >
           <template #tooltip-text>
             <span class="whitespace-normal place-content: center">
-              {{ $t('helpTexts.phoneNumber.mustBe10DigitsLongTooltip') }}
+              {{ $t('helpTexts.phoneNumber.tooltip') }}
             </span>
           </template>
           <span class="text-xs">
-            {{ $t('helpTexts.phoneNumber.mustBe10DigitsLong') }}
+            {{ $t('helpTexts.phoneNumber.hint') }}
           </span>
         </BcrosTooltip>
       </template>
-      <UInput
-        v-model="maskedPhoneNumber"
-        v-maska:unmaskedvalue.unmasked
-        variant="bcGov"
-        data-cy="phoneNumber.number"
-        :data-maska="inputMask"
-        :placeholder="$t('placeholder.phoneNumber.number')"
-        @focus="clearPhoneNumberOnEdit"
-        @change="phoneNumberUpdated=true"
-        @blur="revertUnchangedPhoneNumber"
-      />
+      <template #default="{ error }">
+        <UInput
+          v-model="maskedPhoneNumber"
+          v-maska:unmaskedvalue.unmasked
+          data-cy="phoneNumber.number"
+          :data-maska="inputMask"
+          :placeholder="$t('placeholder.phoneNumber.number')"
+          :variant="error ? 'error' : 'bcGov'"
+          @focus="clearPhoneNumberOnEdit"
+          @change="phoneNumberUpdated=true"
+          @blur="revertUnchangedPhoneNumber"
+        />
+      </template>
     </UFormGroup>
     <UFormGroup :name="name + '.extension'" class="w-1/4">
       <UInput

diff --git a/btr-web/btr-common-components/components/bcros/tooltip/index.vue b/btr-web/btr-common-components/components/bcros/tooltip/index.vue
@@ -4,6 +4,10 @@
     :text="text"
     :popper="popper"
     tabindex="0"
+    :ui="{
+      width: 'max-w-[250px]',
+      base: 'max-h-fit text-wrap'
+    }"
     @focus="showTooltipPopup"
     @blur="closeTooltipPopup"
   >

diff --git a/btr-web/btr-main-app/components/individual-person/add-new/index.vue b/btr-web/btr-main-app/components/individual-person/add-new/index.vue
@@ -719,7 +719,7 @@ const countryChange = () => {
   if (
     undefined === inputFormSi.phoneNumber.countryCallingCode &&
     undefined === inputFormSi.phoneNumber.countryCode2letterIso &&
-    undefined === inputFormSi.phoneNumber.number &&
+    !inputFormSi.phoneNumber.number &&
     undefined !== inputFormSi.address?.country?.alpha_2
   ) {
     inputFormSi.phoneNumber.countryCode2letterIso = inputFormSi.address.country.alpha_2
@@ -775,7 +775,10 @@ function handleDoneButtonClick () {
       let section: string = path[0]
       if (section === 'name') {
         section += '.' + path[1]
+      } else if (section === 'phoneNumber') {
+        section += '.' + path[1]
       }
+
       if (!topSection) {
         return section
       }

diff --git a/btr-web/btr-main-app/cypress/e2e/pages/add-individual/phone-number.cy.ts b/btr-web/btr-main-app/cypress/e2e/pages/add-individual/phone-number.cy.ts
@@ -16,10 +16,11 @@ describe('pages -> Add individual', () => {
     // verify phone country code is prepopulated when selecting country address
     cy.get('[data-cy="address-country"]')
       .click()
-
-    cy.get('span.truncate')
+      .get('span.truncate')
       .contains('Canada')
       .click()
+      .get('[data-cy="phoneNumber.countryCode"]')
+      .should('have.value', '+1')
 
     // clear input
     cy.get('[data-cy="phoneNumber.countryCode"]')
@@ -61,31 +62,4 @@ describe('pages -> Add individual', () => {
     cy.get('[data-cy="phoneNumber.countryCode"]')
       .should('have.value', '+1')
   })
-
-  it('verify phone number input mask ', () => {
-    // no selection, verify it has no input mask
-    cy.get('[data-cy="phoneNumber.number"]')
-      .type('1234567890')
-
-    cy.get('[data-cy="phoneNumber.number"]')
-      .should('have.value', '1234567890')
-
-    // select country code canada // it will change to input mask (###) ###-####
-    cy.get('[data-cy="phoneNumberInput"]')
-      .find('button')
-      .click()
-
-    cy.get('ul .flag.f-ca')
-      .click()
-
-    cy.get('[data-cy="phoneNumberInput"]')
-      .find('input+span .flag.f-ca')
-      .should('exist')
-
-    cy.get('[data-cy="phoneNumber.countryCode"]')
-      .should('have.value', '+1')
-
-    cy.get('[data-cy="phoneNumber.number"]')
-      .should('have.value', '(123) 456-7890')
-  })
 })
diff --git a/btr-web/btr-main-app/cypress/e2e/pages/formValidation.cy.ts b/btr-web/btr-main-app/cypress/e2e/pages/formValidation.cy.ts
@@ -27,6 +27,7 @@ describe('pages -> Form Validation', () => {
     cy.contains(i18n.errors.validation.address.city).should('exist')
     cy.contains(i18n.errors.validation.address.region).should('exist')
     cy.contains(i18n.errors.validation.address.postalCode).should('exist')
+    cy.contains(i18n.errors.validation.phoneNumber.required).should('exist')
     cy.contains(i18n.errors.validation.taxNumber.required).should('exist')
     cy.contains(i18n.errors.validation.taxResidency.required).should('exist')
     cy.contains(i18n.errors.validation.missingInfoReason.required).should('not.exist')

diff --git a/btr-web/btr-main-app/cypress/fixtures/individuals.json b/btr-web/btr-main-app/cypress/fixtures/individuals.json
@@ -15,6 +15,11 @@
       ],
       "postalCode": "V0E 1H5"
     },
+    "phoneNumber": {
+      "countryCallingCode": "+1",
+      "countryCode2letterIso": "CA",
+      "number": "7780001111"
+    },
     "taxNumber": "107 676 942",
     "taxResidency": "true",
     "citizenships": [
@@ -46,6 +51,11 @@
       ],
       "postalCode": "V0E 1H5"
     },
+    "phoneNumber": {
+      "countryCallingCode": "+1",
+      "countryCode2letterIso": "CA",
+      "number": "6041112222"
+    },
     "taxNumber": "301 166 476",
     "taxResidency": "true",
     "citizenships": [
@@ -77,6 +87,11 @@
       ],
       "postalCode": "V0E 1H5"
     },
+    "phoneNumber": {
+      "countryCallingCode": "+1",
+      "countryCode2letterIso": "CA",
+      "number": "6040001111"
+    },
     "taxNumber": "301 166 476",
     "taxResidency": "true",
     "citizenships": [

diff --git a/btr-web/btr-main-app/cypress/support/e2e.ts b/btr-web/btr-main-app/cypress/support/e2e.ts
@@ -158,6 +158,7 @@ Cypress.Commands.add('addSingleTestSi', (profile: any) => {
   cy.get('[data-cy="address-region-select"]').click()
   cy.get('[data-cy="address-region-select"]').get('li').contains(profile.address.province[0]).click()
   cy.get('[data-cy="address-postal-code"]').type(profile.address.postalCode)
+  cy.get('[data-cy="phoneNumber.number"]').type(profile.phoneNumber.number)
 
   cy.siSelectCitizenship(profile.citizenships)
 

diff --git a/btr-web/btr-main-app/cypress/support/ownerChangeFormHelper.ts b/btr-web/btr-main-app/cypress/support/ownerChangeFormHelper.ts
@@ -35,6 +35,9 @@ Cypress.Commands.add('fillOutForm', (siDataToEnter) => {
   cy.get('[data-cy="address-region-select"]').get('li').contains(siDataToEnter.address.province[0]).click()
   cy.get('[data-cy="address-postal-code"]').type(siDataToEnter.address.postalCode)
 
+  // phone number
+  cy.get('[data-cy="phoneNumber.number"]').type(siDataToEnter.phoneNumber.number)
+
   // select the citizenship info
   cy.get('[data-cy="citizenshipsComboboxButton"]').click()
   cy.get('[id^="headlessui-combobox-options"]').find('li').first().click({ force: true })

diff --git a/btr-web/btr-main-app/lang/en.json b/btr-web/btr-main-app/lang/en.json
@@ -269,6 +269,9 @@
   },
   "errors": {
     "validation": {
+      "phoneNumber": {
+        "required": "Enter phone number (numbers only)"
+      },
       "controlPercentage": {
         "empty": "Please enter a percentage of shares and/or votes",
         "specialCharacter": "Numbers only",
@@ -350,8 +353,8 @@
   },
   "helpTexts": {
     "phoneNumber": {
-      "mustBe10DigitsLongTooltip": "Please double check your records and if you cannot match the info please check the section below: Unable to obtain information and detail steps taken.",
-      "mustBe10DigitsLong": "Number must be 10 digits long"
+      "tooltip": "Please double check your records and if you cannot match the info please check the section below: Unable to obtain information and detail steps taken.",
+      "hint": "Enter phone number (numbers only)"
     },
     "requestOmit": {
       "detail": "LOREM IPSUM TODO"

diff --git a/btr-web/btr-main-app/utils/error-section-map.ts b/btr-web/btr-main-app/utils/error-section-map.ts
@@ -9,7 +9,7 @@ export const errorSectionMap = {
   email: { sectionId: 'individual-person-email', position: 8 },
   address: { sectionId: 'address', position: 9 },
   mailingAddress: { sectionId: 'mailing-address', position: 10 },
-  // reserve position 11 for the phone number section
+  'phoneNumber.number': { sectionId: 'phone-number', position: 11 },
   birthDate: { sectionId: 'birth-date', position: 12 },
   citizenships: { sectionId: 'citizenships', position: 13 },
   tax: { sectionId: 'tax-details', position: 14 },

diff --git a/btr-web/btr-main-app/utils/si-schema/definitions.ts b/btr-web/btr-main-app/utils/si-schema/definitions.ts
@@ -1,5 +1,4 @@
 import { z } from 'zod'
-import { PhoneSchema } from '../../../btr-common-components/interfaces/zod-schemas-t'
 import { PercentageRangeE } from '~/enums/percentage-range-e'
 
 const StartEndDateGroup = z.object({
@@ -84,7 +83,7 @@ export const SiSchema = z.object({
   tax: TaxSchema,
   isTaxResident: z.boolean().optional(),
   determinationOfIncapacity: z.boolean(),
-  phoneNumber: PhoneSchema,
+  phoneNumber: getPhoneNumberValidator(),
 
   effectiveDates: z.array(StartEndDateGroup).min(1),
 

diff --git a/btr-web/btr-main-app/utils/validation.ts b/btr-web/btr-main-app/utils/validation.ts
@@ -233,3 +233,16 @@ export function validateCitizenshipSuperRefine (citizenships: BtrCountryI[], ctx
   }
   return z.NEVER
 }
+
+export function validatePhoneNumberSuperRefine (phoneNumber: PhoneSchemaType, ctx: RefinementCtx): never {
+  const t = useNuxtApp().$i18n.t
+  if (!phoneNumber.number || phoneNumber.number.length === 0) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: t('errors.validation.phoneNumber.required'),
+      path: ['number'],
+      fatal: true
+    })
+  }
+  return z.NEVER
+}
diff --git a/btr-web/btr-main-app/utils/validators.ts b/btr-web/btr-main-app/utils/validators.ts
@@ -1,4 +1,5 @@
 import { z } from 'zod'
+import { PhoneSchema } from '../../btr-common-components/interfaces/zod-schemas-t'
 
 export function getEmailValidator () {
   const t = useNuxtApp().$i18n.t
@@ -40,3 +41,9 @@ export function validateCitizenshipValidator () {
     validateCitizenshipSuperRefine
   )
 }
+
+export function getPhoneNumberValidator () {
+  return PhoneSchema.superRefine(
+    validatePhoneNumberSuperRefine
+  )
+}