From 66601ed3464eb81eb97bb508962808feefaa74a8 Mon Sep 17 00:00:00 2001
From: Fernando Terra <79578735+fterra-encora@users.noreply.github.com>
Date: Tue, 7 Jan 2025 19:20:59 -0300
Subject: [PATCH] feat(fe:FSADT1-1682): CLIENT_VIEWER Client Location/Contact
 accordion title style (#1376)

* fix style for accordion's title

* adjust contact data

* test: fix description
---
 .../cypress/e2e/pages/ClientDetailsPage.cy.ts | 28 +++++++--------
 frontend/src/assets/styles/global.scss        | 11 +++++-
 frontend/src/dto/CommonTypesDto.ts            |  4 +--
 frontend/src/pages/ClientDetailsPage.vue      | 21 ++++++------
 .../src/pages/client-details/ContactView.vue  | 27 ++++++---------
 .../__files/response-clients-details-G.json   |  3 --
 .../__files/response-clients-details-S.json   |  1 -
 .../pages/client-details/ContactView.cy.ts    | 34 +++++++++----------
 8 files changed, 64 insertions(+), 65 deletions(-)

diff --git a/frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts b/frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts
index 87968512a..a13015f69 100644
--- a/frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts
+++ b/frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts
@@ -231,16 +231,16 @@ describe("Client Details Page", () => {
         });
       });
 
-      it("displays the contact name on the accordion's title", () => {
-        cy.get("#contact-00 [slot='title']").contains("Cheryl Bibby");
-        cy.get("#contact-01 [slot='title']").contains("Edward Burns");
-        cy.get("#contact-02 [slot='title']").contains("Christoffer Stewart");
+      it("displays the contacts names on the accordions' titles sorted by contact name", () => {
+        cy.get("#contact-0 [slot='title']").contains("Cheryl Bibby");
+        cy.get("#contact-1 [slot='title']").contains("Christoffer Stewart");
+        cy.get("#contact-2 [slot='title']").contains("Edward Burns");
       });
 
       it("displays the associated locations on the accordion's title while it's collapsed", () => {
-        cy.get("#contact-00-title-locations").should("be.visible");
-        cy.get("#contact-01-title-locations").should("be.visible");
-        cy.get("#contact-02-title-locations").should("be.visible");
+        cy.get("#contact-0-title-locations").should("be.visible");
+        cy.get("#contact-1-title-locations").should("be.visible");
+        cy.get("#contact-2-title-locations").should("be.visible");
       });
     });
 
@@ -259,14 +259,14 @@ describe("Client Details Page", () => {
 
         it("hides the associated locations on the accordion's title when it's expanded", () => {
           // Clicks to expand the accordion
-          cy.get("#contact-00 [slot='title']").click();
-          cy.get("#contact-00-title-locations").should("not.be.visible");
+          cy.get("#contact-0 [slot='title']").click();
+          cy.get("#contact-0-title-locations").should("not.be.visible");
         });
 
         it("keeps accordions' states while tabs are switched", () => {
           // Expand first and third contacts, leave second one collapsed
-          cy.get("#contact-00 [slot='title']").click();
-          cy.get("#contact-02 [slot='title']").click();
+          cy.get("#contact-0 [slot='title']").click();
+          cy.get("#contact-2 [slot='title']").click();
           // Switch to another tab (Locations)
           cy.get("#tab-locations").click();
           // Make sure the current tab panel was effectively switched
@@ -275,11 +275,11 @@ describe("Client Details Page", () => {
           // Switch back to tab Contacts
           cy.get("#tab-contacts").click();
           // First contact is still open
-          cy.get("#contact-00 cds-accordion-item").should("have.attr", "open");
+          cy.get("#contact-0 cds-accordion-item").should("have.attr", "open");
           // Second contact is still closed
-          cy.get("#contact-01 cds-accordion-item").should("not.have.attr", "open");
+          cy.get("#contact-1 cds-accordion-item").should("not.have.attr", "open");
           // Third contact is still open
-          cy.get("#contact-02 cds-accordion-item").should("have.attr", "open");
+          cy.get("#contact-2 cds-accordion-item").should("have.attr", "open");
         });
       });
       describe("no contacts", () => {
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
index 27af3f317..f8eea97e8 100644
--- a/frontend/src/assets/styles/global.scss
+++ b/frontend/src/assets/styles/global.scss
@@ -956,7 +956,8 @@ cds-actionable-notification * {
   align-self: stretch;
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 1rem;
+  border-radius: 0 0 0.5rem 0.5rem;
   background: #fff;
   padding: 1rem;
 }
@@ -1033,6 +1034,10 @@ cds-actionable-notification * {
   gap: 2rem;
 }
 
+cds-accordion-item:not([open]) {
+  gap: 0; // removes unwanted extra space when accordion item is closed.
+}
+
 .grouping-13 {
   align-self: stretch;
   display: flex;
@@ -1468,6 +1473,10 @@ cds-side-nav {
   width: 100%;
 }
 
+cds-accordion-item::part(expando) {
+  min-block-size: 3rem;
+}
+
 cds-accordion-item[open]:not([disabled])::part(content),
 :host(cds-accordion-item[open]:not([disabled]))
   .cds-ce--accordion__content--md {
diff --git a/frontend/src/dto/CommonTypesDto.ts b/frontend/src/dto/CommonTypesDto.ts
index a164f9d40..42042cf9b 100644
--- a/frontend/src/dto/CommonTypesDto.ts
+++ b/frontend/src/dto/CommonTypesDto.ts
@@ -282,8 +282,8 @@ export interface ClientLocation {
 
 export interface ClientContact {
   clientNumber: string;
-  clientLocnCode: string[];
-  contactCode: string;
+  clientLocnCode: string;
+  locationCode: string[];
   contactName: string;
   contactTypeCode: string;
   contactTypeDesc: string;
diff --git a/frontend/src/pages/ClientDetailsPage.vue b/frontend/src/pages/ClientDetailsPage.vue
index 106c3047f..e40b7af47 100644
--- a/frontend/src/pages/ClientDetailsPage.vue
+++ b/frontend/src/pages/ClientDetailsPage.vue
@@ -97,7 +97,7 @@ const sortedLocations = computed(() =>
 );
 
 const sortedContacts = computed(() =>
-  data.value.contacts?.toSorted((a, b) => compareString(a.contactCode, b.contactCode)),
+  data.value.contacts?.toSorted((a, b) => compareString(a.contactName, b.contactName)),
 );
 
 const formatLocations = (
@@ -116,8 +116,8 @@ const formatLocations = (
 
 const associatedLocationsRecord = computed(() => {
   const result: Record<string, string> = {};
-  sortedContacts.value?.forEach((contact) => {
-    result[contact.contactCode] = formatLocations(contact.locationCode);
+  sortedContacts.value?.forEach((contact, index) => {
+    result[index] = formatLocations(contact.locationCode);
   });
   return result;
 });
@@ -281,26 +281,27 @@ const toolsSvg = useSvg(tools);
             {{ pluralize("contact", data.contacts?.length) }}
           </h3>
           <cds-accordion
-            v-for="contact in sortedContacts"
-            :key="contact.contactCode"
-            :id="`contact-${contact.contactCode}`"
+            v-for="(contact, index) in sortedContacts"
+            :key="contact.contactName"
+            :id="`contact-${index}`"
           >
             <cds-accordion-item size="lg" class="grouping-13">
               <div slot="title" class="flex-column-0_25rem">
                 <span class="label-with-icon">
                   <User20 />
-                  {{ contact.contactCode }} - {{ contact.contactName }}
+                  {{ contact.contactName }}
                 </span>
                 <span
-                  :id="`contact-${contact.contactCode}-title-locations`"
+                  :id="`contact-${index}-title-locations`"
                   class="hide-open body-compact-01 padding-left-1_625rem"
                 >
-                  {{ associatedLocationsRecord[contact.contactCode] }}
+                  {{ associatedLocationsRecord[index] }}
                 </span>
               </div>
               <contact-view
                 :data="contact"
-                :associatedLocationsString="associatedLocationsRecord[contact.contactCode]"
+                :index="index"
+                :associatedLocationsString="associatedLocationsRecord[index]"
               />
             </cds-accordion-item>
           </cds-accordion>
diff --git a/frontend/src/pages/client-details/ContactView.vue b/frontend/src/pages/client-details/ContactView.vue
index 669d6968c..90b782b6e 100644
--- a/frontend/src/pages/client-details/ContactView.vue
+++ b/frontend/src/pages/client-details/ContactView.vue
@@ -1,31 +1,24 @@
 <script setup lang="ts">
 import type { ClientContact } from "@/dto/CommonTypesDto";
 
-const props = defineProps<{
+defineProps<{
   data: ClientContact;
+  index: number;
   associatedLocationsString: string;
 }>();
-
-const indexString = props.data.clientLocnCode;
 </script>
 
 <template>
-  <div
-    :id="`contact-${indexString}-general-section`"
-    class="flex-column-1_5rem margin-left-1_75rem"
-  >
-    <read-only-component label="Contact type" :id="`contact-${indexString}-contactType`">
+  <div :id="`contact-${index}-general-section`" class="flex-column-1_5rem margin-left-1_75rem">
+    <read-only-component label="Contact type" :id="`contact-${index}-contactType`">
       <span class="body-compact-01">{{ data.contactTypeDesc }}</span>
     </read-only-component>
-    <read-only-component
-      label="Associated locations"
-      :id="`contact-${indexString}-associatedLocations`"
-    >
+    <read-only-component label="Associated locations" :id="`contact-${index}-associatedLocations`">
       <span class="body-compact-01">{{ associatedLocationsString }}</span>
     </read-only-component>
     <read-only-component
       label="Email address"
-      :id="`contact-${indexString}-emailAddress`"
+      :id="`contact-${index}-emailAddress`"
       v-if="data.emailAddress"
     >
       <a :href="`mailto:${data.emailAddress}`">
@@ -33,13 +26,13 @@ const indexString = props.data.clientLocnCode;
       </a>
     </read-only-component>
     <div
-      :id="`contact-${indexString}-phone-section`"
+      :id="`contact-${index}-phone-section`"
       class="grouping-10 no-padding"
       v-if="data.businessPhone || data.secondaryPhone || data.faxNumber"
     >
       <read-only-component
         label="Primary phone number"
-        :id="`contact-${indexString}-primaryPhoneNumber`"
+        :id="`contact-${index}-primaryPhoneNumber`"
         v-if="data.businessPhone"
       >
         <a :href="`tel:${data.businessPhone}`">
@@ -48,14 +41,14 @@ const indexString = props.data.clientLocnCode;
       </read-only-component>
       <read-only-component
         label="Secondary phone number"
-        :id="`contact-${indexString}-secondaryPhoneNumber`"
+        :id="`contact-${index}-secondaryPhoneNumber`"
         v-if="data.secondaryPhone"
       >
         <a :href="`tel:${data.secondaryPhone}`">
           <span class="body-compact-01 colorless">{{ data.secondaryPhone }}</span>
         </a>
       </read-only-component>
-      <read-only-component label="Fax" :id="`contact-${indexString}-fax`" v-if="data.faxNumber">
+      <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>
diff --git a/frontend/stub/__files/response-clients-details-G.json b/frontend/stub/__files/response-clients-details-G.json
index 44cb360af..1b8b2d0ff 100644
--- a/frontend/stub/__files/response-clients-details-G.json
+++ b/frontend/stub/__files/response-clients-details-G.json
@@ -14,7 +14,6 @@
     "contacts": [
         {
             "locationCode": ["00"],
-            "contactCode": "00",
             "contactName": "Cheryl Bibby",
             "contactTypeCode": "BL",
             "contactTypeDesc": "Billing",
@@ -25,7 +24,6 @@
         },
         {
             "locationCode": ["01", "02"],
-            "contactCode": "01",
             "contactName": "Edward Burns",
             "contactTypeCode": "DI",
             "contactTypeDesc": "Director",
@@ -36,7 +34,6 @@
         },
         {
             "locationCode": ["02"],
-            "contactCode": "02",
             "contactName": "Christoffer Stewart",
             "contactTypeCode": "BL",
             "contactTypeDesc": "Billing",
diff --git a/frontend/stub/__files/response-clients-details-S.json b/frontend/stub/__files/response-clients-details-S.json
index eb87ef874..aea358d13 100644
--- a/frontend/stub/__files/response-clients-details-S.json
+++ b/frontend/stub/__files/response-clients-details-S.json
@@ -19,7 +19,6 @@
     "wcbFirmNumber": "{{randomValue length=7 type='NUMERIC'}}",
     "contacts": [{
         "locationCode": ["00"],
-        "contactCode": "00",
         "contactName": "Cheryl Bibby",
         "contactTypeCode": "BL",
         "contactTypeDesc": "Billing",
diff --git a/frontend/tests/components/pages/client-details/ContactView.cy.ts b/frontend/tests/components/pages/client-details/ContactView.cy.ts
index fdc9ebb07..10605eda9 100644
--- a/frontend/tests/components/pages/client-details/ContactView.cy.ts
+++ b/frontend/tests/components/pages/client-details/ContactView.cy.ts
@@ -4,8 +4,7 @@ import ContactView from "@/pages/client-details/ContactView.vue";
 describe("<contact-view />", () => {
   const getDefaultProps = () => ({
     data: {
-      clientLocnCode: ["00"],
-      contactCode: "00",
+      locationCode: ["01"],
       contactName: "Cheryl Bibby",
       contactTypeCode: "BL",
       contactTypeDesc: "Billing",
@@ -14,7 +13,8 @@ describe("<contact-view />", () => {
       faxNumber: "(250) 286-3768",
       emailAddress: "cheryl@ktb.com",
     } as ClientContact,
-    associatedLocationsString: "00 - Mailing address",
+    index: 0,
+    associatedLocationsString: "01 - Town office",
   });
 
   let currentProps: ReturnType<typeof getDefaultProps> = null;
@@ -49,18 +49,18 @@ describe("<contact-view />", () => {
 
     const emailPrefix = "mailto:";
 
-    cy.get("#contact-00-general-section").within(() => {
-      testField("#contact-00-contactType", currentProps.data.contactTypeDesc);
-      testField("#contact-00-associatedLocations", currentProps.associatedLocationsString);
-      testField("#contact-00-emailAddress", currentProps.data.emailAddress, emailPrefix);
+    cy.get("#contact-0-general-section").within(() => {
+      testField("#contact-0-contactType", currentProps.data.contactTypeDesc);
+      testField("#contact-0-associatedLocations", currentProps.associatedLocationsString);
+      testField("#contact-0-emailAddress", currentProps.data.emailAddress, emailPrefix);
     });
 
     const phonePrefix = "tel:";
 
-    cy.get("#contact-00-phone-section").within(() => {
-      testField("#contact-00-primaryPhoneNumber", currentProps.data.businessPhone, phonePrefix);
-      testField("#contact-00-secondaryPhoneNumber", currentProps.data.secondaryPhone, phonePrefix);
-      testField("#contact-00-fax", currentProps.data.faxNumber, phonePrefix);
+    cy.get("#contact-0-phone-section").within(() => {
+      testField("#contact-0-primaryPhoneNumber", currentProps.data.businessPhone, phonePrefix);
+      testField("#contact-0-secondaryPhoneNumber", currentProps.data.secondaryPhone, phonePrefix);
+      testField("#contact-0-fax", currentProps.data.faxNumber, phonePrefix);
     });
   });
 
@@ -75,7 +75,7 @@ describe("<contact-view />", () => {
       ...getDefaultProps(),
       data,
     });
-    cy.get("#contact-00-phone-section").should("not.exist");
+    cy.get("#contact-0-phone-section").should("not.exist");
   });
 
   it("hides general fields when they are empty", () => {
@@ -88,14 +88,14 @@ describe("<contact-view />", () => {
       data,
     });
 
-    testFieldHidden("#contact-00-emailAddress");
+    testFieldHidden("#contact-0-emailAddress");
   });
 
   describe("while there is at least one phone to be displayed", () => {
     const scenarios = [
-      ["businessPhone", "#contact-00-primaryPhoneNumber"],
-      ["secondaryPhone", "#contact-00-secondaryPhoneNumber"],
-      ["faxNumber", "#contact-00-fax"],
+      ["businessPhone", "#contact-0-primaryPhoneNumber"],
+      ["secondaryPhone", "#contact-0-secondaryPhoneNumber"],
+      ["faxNumber", "#contact-0-fax"],
     ];
 
     scenarios.forEach((scenario) => {
@@ -116,7 +116,7 @@ describe("<contact-view />", () => {
           });
         });
         it(`displays the one phone with value: ${propName}`, () => {
-          cy.get("#contact-00-phone-section").within(() => {
+          cy.get("#contact-0-phone-section").within(() => {
             testField(selector, currentProps.data[propName]);
           });
         });