fix(fe): display year of birth when birthdate is masked (#1380)

* fix: display year of birth * feat: format phone numbers --------- Co-authored-by: Maria Martinez <77364706+mamartinezmejia@users.noreply.github.com>
bcgov · Jan 9, 2025 · 1ccfdf1 · 1ccfdf1
1 parent 55dfc2b
commit 1ccfdf1
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 86 deletions.
diff --git a/frontend/src/pages/client-details/ContactView.vue b/frontend/src/pages/client-details/ContactView.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import type { ClientContact } from "@/dto/CommonTypesDto";
+import { formatPhoneNumber } from "@/services/ForestClientService";
 
-defineProps<{
+const props = defineProps<{
   data: ClientContact;
   index: number;
   associatedLocationsString: string;
 }>();
+
+const businessPhone = computed(() => formatPhoneNumber(props.data.businessPhone));
+const secondaryPhone = computed(() => formatPhoneNumber(props.data.secondaryPhone));
+const faxNumber = computed(() => formatPhoneNumber(props.data.faxNumber));
 </script>
 
 <template>
@@ -35,22 +41,22 @@ defineProps<{
         :id="`contact-${index}-primaryPhoneNumber`"
         v-if="data.businessPhone"
       >
-        <a :href="`tel:${data.businessPhone}`">
-          <span class="body-compact-01 colorless">{{ data.businessPhone }}</span>
+        <a :href="`tel:${businessPhone}`">
+          <span class="body-compact-01 colorless">{{ businessPhone }}</span>
         </a>
       </read-only-component>
       <read-only-component
         label="Secondary phone number"
         :id="`contact-${index}-secondaryPhoneNumber`"
         v-if="data.secondaryPhone"
       >
-        <a :href="`tel:${data.secondaryPhone}`">
-          <span class="body-compact-01 colorless">{{ data.secondaryPhone }}</span>
+        <a :href="`tel:${secondaryPhone}`">
+          <span class="body-compact-01 colorless">{{ secondaryPhone }}</span>
         </a>
       </read-only-component>
       <read-only-component label="Fax" :id="`contact-${index}-fax`" v-if="data.faxNumber">
-        <a :href="`tel:${data.faxNumber}`">
-          <span class="body-compact-01 colorless">{{ data.faxNumber }}</span>
+        <a :href="`tel:${faxNumber}`">
+          <span class="body-compact-01 colorless">{{ faxNumber }}</span>
         </a>
       </read-only-component>
     </div>

diff --git a/frontend/src/pages/client-details/LocationView.vue b/frontend/src/pages/client-details/LocationView.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import type { ClientLocation } from "@/dto/CommonTypesDto";
-import { getFormattedHtml } from "@/services/ForestClientService";
+import { formatPhoneNumber, getFormattedHtml } from "@/services/ForestClientService";
 
 const props = defineProps<{
   data: ClientLocation;
 }>();
 
 const indexString = props.data.clientLocnCode;
+
+const businessPhone = computed(() => formatPhoneNumber(props.data.businessPhone));
+const cellPhone = computed(() => formatPhoneNumber(props.data.cellPhone));
+const homePhone = computed(() => formatPhoneNumber(props.data.homePhone));
+const faxNumber = computed(() => formatPhoneNumber(props.data.faxNumber));
 </script>
 
 <template>
@@ -60,31 +66,31 @@ const indexString = props.data.clientLocnCode;
         :id="`location-${indexString}-primaryPhoneNumber`"
         v-if="data.businessPhone"
       >
-        <a :href="`tel:${data.businessPhone}`">
-          <span class="body-compact-01 colorless">{{ data.businessPhone }}</span>
+        <a :href="`tel:${businessPhone}`">
+          <span class="body-compact-01 colorless">{{ businessPhone }}</span>
         </a>
       </read-only-component>
       <read-only-component
         label="Secondary phone number"
         :id="`location-${indexString}-secondaryPhoneNumber`"
         v-if="data.cellPhone"
       >
-        <a :href="`tel:${data.cellPhone}`">
-          <span class="body-compact-01 colorless">{{ data.cellPhone }}</span>
+        <a :href="`tel:${cellPhone}`">
+          <span class="body-compact-01 colorless">{{ cellPhone }}</span>
         </a>
       </read-only-component>
       <read-only-component
         label="Tertiary phone number"
         :id="`location-${indexString}-tertiaryPhoneNumber`"
         v-if="data.homePhone"
       >
-        <a :href="`tel:${data.homePhone}`">
-          <span class="body-compact-01 colorless">{{ data.homePhone }}</span>
+        <a :href="`tel:${homePhone}`">
+          <span class="body-compact-01 colorless">{{ homePhone }}</span>
         </a>
       </read-only-component>
       <read-only-component label="Fax" :id="`location-${indexString}-fax`" v-if="data.faxNumber">
-        <a :href="`tel:${data.faxNumber}`">
-          <span class="body-compact-01 colorless">{{ data.faxNumber }}</span>
+        <a :href="`tel:${faxNumber}`">
+          <span class="body-compact-01 colorless">{{ faxNumber }}</span>
         </a>
       </read-only-component>
     </div>

diff --git a/frontend/src/pages/client-details/SummaryView.vue b/frontend/src/pages/client-details/SummaryView.vue
@@ -32,17 +32,25 @@ const doingBusinessAs = computed(() => {
   return undefined;
 });
 
-const birthdateLabel = computed(() =>
-  props.data.birthdate.length > 4 ? "Date of birth" : "Year of birth",
-);
-
 const dateOfBirth = computed(() => {
+  if (props.data.birthdate) {
+    if (props.data.birthdate.length === 4) {
+      return props.data.birthdate;
+    }
+
+    // if masked (month and day)
+    if (props.data.birthdate.includes("*")) {
+      return props.data.birthdate.slice(0, 4);
+    }
 
-  if(props.data.birthdate) {
-    return new Date(props.data.birthdate).toISOString().split('T')[0];
+    return new Date(props.data.birthdate).toISOString().split("T")[0];
   }
-  return '';
+  return "";
 });
+
+const birthdateLabel = computed(() =>
+  dateOfBirth.value.length > 4 ? "Date of birth" : "Year of birth",
+);
 </script>
 
 <template>

diff --git a/frontend/src/services/ForestClientService.ts b/frontend/src/services/ForestClientService.ts
@@ -140,3 +140,15 @@ export const goodStanding = (goodStanding: string): string => {
   if (goodStanding) return goodStanding === "Y" ? "Good standing" : "Not in good standing";
   return "Unknown";
 };
+
+export const formatPhoneNumber = (phoneNumber: string): string => {
+  if (!phoneNumber) {
+    return "";
+  }
+
+  const part1 = phoneNumber.slice(0, 3);
+  const part2 = phoneNumber.slice(3, 6);
+  const part3 = phoneNumber.slice(6);
+
+  return `(${part1}) ${part2}-${part3}`;
+};
diff --git a/frontend/stub/__files/response-clients-details-G.json b/frontend/stub/__files/response-clients-details-G.json
@@ -17,19 +17,19 @@
             "contactName": "Cheryl Bibby",
             "contactTypeCode": "BL",
             "contactTypeDesc": "Billing",
-            "businessPhone": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
-            "secondaryPhone": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
-            "faxNumber": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
+            "businessPhone": "{{randomValue length=10 type='NUMERIC'}}",
+            "secondaryPhone": "{{randomValue length=10 type='NUMERIC'}}",
+            "faxNumber": "{{randomValue length=10 type='NUMERIC'}}",
             "emailAddress": "cheryl@ktb.com"
         },
         {
             "locationCode": ["01", "02"],
             "contactName": "Edward Burns",
             "contactTypeCode": "DI",
             "contactTypeDesc": "Director",
-            "businessPhone": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
-            "secondaryPhone": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
-            "faxNumber": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
+            "businessPhone": "{{randomValue length=10 type='NUMERIC'}}",
+            "secondaryPhone": "{{randomValue length=10 type='NUMERIC'}}",
+            "faxNumber": "{{randomValue length=10 type='NUMERIC'}}",
             "emailAddress": "burns@ktb.com"
         },
         {
@@ -57,10 +57,10 @@
             "city":"Hampton",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "contact@mail.com",
-            "businessPhone": "(250) 286-3767",
-            "cellPhone": "(250) 555-3700",
-            "homePhone": "(250) 555-3101",
-            "faxNumber": "(250) 286-3768",
+            "businessPhone": "2502863767",
+            "cellPhone": "2505553700",
+            "homePhone": "2505553101",
+            "faxNumber": "2502863768",
             "cliLocnComment": "Sample location 00 comment",
             "locnExpiredInd": "N"
         },
@@ -77,10 +77,10 @@
             "city":"Deer Lake",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "account@mail.com",
-            "businessPhone": "(250) 286-4767",
-            "cellPhone": "(250) 555-4700",
-            "homePhone": "(250) 555-4101",
-            "faxNumber": "(250) 286-4768",
+            "businessPhone": "2502864767",
+            "cellPhone": "2505554700",
+            "homePhone": "2505554101",
+            "faxNumber": "2502864768",
             "cliLocnComment": "Sample location 01 comment",
             "locnExpiredInd": "N"
         },
@@ -97,10 +97,10 @@
             "city":"Deer Lake",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "warehouse@mail.com",
-            "businessPhone": "(250) 286-5767",
-            "cellPhone": "(250) 555-5700",
-            "homePhone": "(250) 555-5101",
-            "faxNumber": "(250) 286-5768",
+            "businessPhone": "2502865767",
+            "cellPhone": "2505555700",
+            "homePhone": "2505555101",
+            "faxNumber": "2502865768",
             "cliLocnComment": "Sample location 02 comment",
             "locnExpiredInd": "N"
         }

diff --git a/frontend/stub/__files/response-clients-details-GD.json b/frontend/stub/__files/response-clients-details-GD.json
@@ -31,7 +31,7 @@
             "city":"Hampton",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "contact@mail.com",
-            "businessPhone": "(250) 286-3767",
+            "businessPhone": "2502863767",
             "cellPhone": "",
             "homePhone": "",
             "faxNumber": "",
@@ -51,8 +51,8 @@
             "city":"Deer Lake",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "account@mail.com",
-            "businessPhone": "(250) 286-4767",
-            "cellPhone": "(250) 555-4700",
+            "businessPhone": "2502864767",
+            "cellPhone": "2505554700",
             "homePhone": "",
             "faxNumber": "",
             "cliLocnComment": "Sample location 01 comment",

diff --git a/frontend/stub/__files/response-clients-details-I.json b/frontend/stub/__files/response-clients-details-I.json
@@ -5,7 +5,7 @@
     "clientName": "Silver",
     "legalFirstName": "John",
     "legalMiddleName": "",
-    "birthdate": "1952-08-17",
+    "birthdate": "1952-08-17T00:00",
     "clientIdTypeCode": "BCDL",
     "clientIdTypeDesc": "British Columbia Driver's Licence",
     "clientIdentification": "64242646",
@@ -32,7 +32,7 @@
             "city":"Hampton",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "tony.pineda@mail.com",
-            "businessPhone": "(250) 286-3767",
+            "businessPhone": "2502863767",
             "cellPhone": "",
             "homePhone": "",
             "faxNumber": "",

diff --git a/frontend/stub/__files/response-clients-details-IV.json b/frontend/stub/__files/response-clients-details-IV.json
@@ -5,7 +5,7 @@
     "clientName": "Silver",
     "legalFirstName": "John",
     "legalMiddleName": "",
-    "birthdate": "1952",
+    "birthdate": "1952-**-**",
     "clientIdTypeCode": "BCDL",
     "clientIdTypeDesc": "British Columbia Driver's Licence",
     "clientIdentification": "6****646",
@@ -32,7 +32,7 @@
             "city":"Hampton",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "tony.pineda@mail.com",
-            "businessPhone": "(250) 286-3767",
+            "businessPhone": "2502863767",
             "cellPhone": "",
             "homePhone": "",
             "faxNumber": "",

diff --git a/frontend/stub/__files/response-clients-details-NL.json b/frontend/stub/__files/response-clients-details-NL.json
@@ -6,7 +6,7 @@
     "legalFirstName": "Michael",
     "legalMiddleName": "",
     "doingBusinessAs": [],
-    "birthdate": "1962-08-17",
+    "birthdate": "1962-08-17T00:00",
     "clientAcronym": "",
     "clientTypeCode": "RSP",
     "clientTypeDesc": "Registered sole proprietorship",

diff --git a/frontend/stub/__files/response-clients-details-S.json b/frontend/stub/__files/response-clients-details-S.json
@@ -8,7 +8,7 @@
     "doingBusinessAs": [
         {"doingBusinessAsName": "Dunder Mifflin Paper Company"}
     ],
-    "birthdate": "1962-08-17",
+    "birthdate": "1962-08-17T00:00",
     "clientAcronym": "DMPC",
     "clientTypeCode": "RSP",
     "clientTypeDesc": "Registered sole proprietorship",
@@ -22,7 +22,7 @@
         "contactName": "Cheryl Bibby",
         "contactTypeCode": "BL",
         "contactTypeDesc": "Billing",
-        "businessPhone": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
+        "businessPhone": "{{randomValue length=10 type='NUMERIC'}}",
         "secondaryPhone": "",
         "faxNumber": "",
         "emailAddress": ""
@@ -41,10 +41,10 @@
             "city":"Hampton",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "contact@mail.com",
-            "businessPhone": "(250) 286-3767",
-            "cellPhone": "(250) 555-3700",
-            "homePhone": "(250) 555-3101",
-            "faxNumber": "(250) 286-3768",
+            "businessPhone": "2502863767",
+            "cellPhone": "2505553700",
+            "homePhone": "2505553101",
+            "faxNumber": "2502863768",
             "cliLocnComment": "Sample location 00 comment",
             "locnExpiredInd": "N"
         },
@@ -61,10 +61,10 @@
             "city":"Deer Lake",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "account@mail.com",
-            "businessPhone": "(250) 286-4767",
-            "cellPhone": "(250) 555-4700",
-            "homePhone": "(250) 555-4101",
-            "faxNumber": "(250) 286-4768",
+            "businessPhone": "2502864767",
+            "cellPhone": "2505554700",
+            "homePhone": "2505554101",
+            "faxNumber": "2502864768",
             "cliLocnComment": "Sample location 01 comment",
             "locnExpiredInd": "N"
         }

diff --git a/frontend/stub/__files/response-clients-details-SE.json b/frontend/stub/__files/response-clients-details-SE.json
@@ -20,7 +20,7 @@
         "contactName": "Cheryl Bibby",
         "contactTypeCode": "BL",
         "contactTypeDesc": "Billing",
-        "businessPhone": "({{randomValue length=3 type='NUMERIC'}}) {{randomValue length=3 type='NUMERIC'}}-{{randomValue length=4 type='NUMERIC'}}",
+        "businessPhone": "{{randomValue length=10 type='NUMERIC'}}",
         "secondaryPhone": "",
         "faxNumber": "",
         "emailAddress": ""
@@ -39,10 +39,10 @@
             "city":"Hampton",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "contact@mail.com",
-            "businessPhone": "(250) 286-3767",
-            "cellPhone": "(250) 555-3700",
-            "homePhone": "(250) 555-3101",
-            "faxNumber": "(250) 286-3768",
+            "businessPhone": "2502863767",
+            "cellPhone": "2505553700",
+            "homePhone": "2505553101",
+            "faxNumber": "2502863768",
             "cliLocnComment": "Sample location 00 comment",
             "locnExpiredInd": "N"
         },
@@ -59,10 +59,10 @@
             "city":"Deer Lake",
             "postalCode": "{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}{{randomValue length=1 type='ALPHABETIC' uppercase=true}}{{randomValue length=1 type='NUMERIC'}}",
             "emailAddress": "account@mail.com",
-            "businessPhone": "(250) 286-4767",
-            "cellPhone": "(250) 555-4700",
-            "homePhone": "(250) 555-4101",
-            "faxNumber": "(250) 286-4768",
+            "businessPhone": "2502864767",
+            "cellPhone": "2505554700",
+            "homePhone": "2505554101",
+            "faxNumber": "2502864768",
             "cliLocnComment": "Sample location 01 comment",
             "locnExpiredInd": "N"
         }