From a8947d955d9ddfd382df11de89f8889d67fa287a Mon Sep 17 00:00:00 2001
From: Fernando Terra <fernando.terra@encora.com>
Date: Mon, 16 Dec 2024 17:39:04 -0300
Subject: [PATCH] add links to email address and phone numbers

---
 .../src/pages/client-details/LocationView.vue | 20 ++++++++++++-----
 .../pages/client-details/LocationView.cy.ts   | 22 ++++++++++++++-----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/client-details/LocationView.vue b/frontend/src/pages/client-details/LocationView.vue
index 57fd00969..ddeae4ec4 100644
--- a/frontend/src/pages/client-details/LocationView.vue
+++ b/frontend/src/pages/client-details/LocationView.vue
@@ -56,7 +56,9 @@ const indexString = props.data.clientLocnCode;
     </div>
     <div :id="`location-${indexString}-email-section`" class="grouping-23" v-if="data.emailAddress">
       <read-only-component label="Email address" :id="`location-${indexString}-emailAddress`">
-        <span class="body-compact-01">{{ data.emailAddress }}</span>
+        <a :href="`mailto:${data.emailAddress}`">
+          <span class="body-compact-01 colorless">{{ data.emailAddress }}</span>
+        </a>
       </read-only-component>
     </div>
     <div
@@ -69,24 +71,32 @@ const indexString = props.data.clientLocnCode;
         :id="`location-${indexString}-primaryPhoneNumber`"
         v-if="data.businessPhone"
       >
-        <span class="body-compact-01">{{ data.businessPhone }}</span>
+        <a :href="`tel:${data.businessPhone}`">
+          <span class="body-compact-01 colorless">{{ data.businessPhone }}</span>
+        </a>
       </read-only-component>
       <read-only-component
         label="Secondary phone number"
         :id="`location-${indexString}-secondaryPhoneNumber`"
         v-if="data.cellPhone"
       >
-        <span class="body-compact-01">{{ data.cellPhone }}</span>
+        <a :href="`tel:${data.cellPhone}`">
+          <span class="body-compact-01 colorless">{{ data.cellPhone }}</span>
+        </a>
       </read-only-component>
       <read-only-component label="Fax" :id="`location-${indexString}-fax`" v-if="data.faxNumber">
-        <span class="body-compact-01">{{ data.faxNumber }}</span>
+        <a :href="`tel:${data.faxNumber}`">
+          <span class="body-compact-01 colorless">{{ data.faxNumber }}</span>
+        </a>
       </read-only-component>
       <read-only-component
         label="Other"
         :id="`location-${indexString}-other`"
         v-if="data.homePhone"
       >
-        <span class="body-compact-01">{{ data.homePhone }}</span>
+        <a :href="`tel:${data.homePhone}`">
+          <span class="body-compact-01 colorless">{{ data.homePhone }}</span>
+        </a>
       </read-only-component>
     </div>
     <div
diff --git a/frontend/tests/components/pages/client-details/LocationView.cy.ts b/frontend/tests/components/pages/client-details/LocationView.cy.ts
index bcea8a713..0849feb6a 100644
--- a/frontend/tests/components/pages/client-details/LocationView.cy.ts
+++ b/frontend/tests/components/pages/client-details/LocationView.cy.ts
@@ -35,10 +35,16 @@ describe("<location-view />", () => {
       .as("vueWrapper");
   };
 
-  const testField = (selector: string, value: string) => {
+  const testField = (selector: string, value: string, linkPrefix?: string) => {
     cy.get(selector).should("be.visible");
     cy.get(selector).contains(value);
     expect(value.length).to.be.greaterThan(0);
+
+    if (linkPrefix) {
+      cy.get(selector).within(() => {
+        cy.get("a").should("have.attr", "href", `${linkPrefix}${value}`);
+      });
+    }
   };
 
   const testFieldHidden = (selector: string) => {
@@ -67,15 +73,19 @@ describe("<location-view />", () => {
       testField("#location-00-deliveryInformation", currentProps.data.addressThree);
     });
 
+    const emailPrefix = "mailto:";
+
     cy.get("#location-00-email-section").within(() => {
-      testField("#location-00-emailAddress", currentProps.data.emailAddress);
+      testField("#location-00-emailAddress", currentProps.data.emailAddress, emailPrefix);
     });
 
+    const phonePrefix = "tel:";
+
     cy.get("#location-00-phone-section").within(() => {
-      testField("#location-00-primaryPhoneNumber", currentProps.data.businessPhone);
-      testField("#location-00-secondaryPhoneNumber", currentProps.data.cellPhone);
-      testField("#location-00-fax", currentProps.data.faxNumber);
-      testField("#location-00-other", currentProps.data.homePhone);
+      testField("#location-00-primaryPhoneNumber", currentProps.data.businessPhone, phonePrefix);
+      testField("#location-00-secondaryPhoneNumber", currentProps.data.cellPhone, phonePrefix);
+      testField("#location-00-fax", currentProps.data.faxNumber, phonePrefix);
+      testField("#location-00-other", currentProps.data.homePhone, phonePrefix);
     });
 
     cy.get("#location-00-notes-section").within(() => {