make phone number a required field

patrickpeinanw · Jan 10, 2025 · 2a92a51 · 2a92a51
1 parent 6bf640b
commit 2a92a51
Show file tree

Hide file tree

Showing 10 changed files with 2,043 additions and 2,424 deletions.
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"
   >