move Delivery information into the Address section

bcgov · Dec 17, 2024 · 154a023 · 154a023
1 parent d6cbceb
commit 154a023
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 48 deletions.
diff --git a/frontend/src/pages/client-details/LocationView.vue b/frontend/src/pages/client-details/LocationView.vue
@@ -1,58 +1,47 @@
 <script setup lang="ts">
-import { computed } from "vue";
-
 import type { ClientLocation } from "@/dto/CommonTypesDto";
 import { getFormattedHtml } from "@/services/ForestClientService";
 
 const props = defineProps<{
   data: ClientLocation;
 }>();
 
-const deliveryInformation = computed(() => {
-  const { addressTwo, addressThree } = props.data;
-  const rawList = [addressTwo, addressThree];
-  const list = [];
-  rawList.forEach((item) => {
-    if (item) {
-      list.push(item);
-    }
-  });
-  return list.join("\n");
-});
-
 const indexString = props.data.clientLocnCode;
 </script>
 
 <template>
   <div class="flex-column-1_5rem">
-    <div
-      :id="`location-${indexString}-delivery-section`"
-      class="grouping-23"
-      v-if="deliveryInformation"
-    >
-      <read-only-component
-        label="Delivery information"
-        :id="`location-${indexString}-deliveryInformation`"
-      >
-        <span
-          class="body-compact-01"
-          v-dompurify-html="getFormattedHtml(deliveryInformation)"
-        ></span>
-      </read-only-component>
-    </div>
     <div :id="`location-${indexString}-address-section`" class="grouping-23">
-      <span :id="`location-${indexString}-streetAddress`" class="body-compact-01">
-        {{ data.addressOne }}
-      </span>
-      <span :id="`location-${indexString}-city-province`" class="body-compact-01">
-        {{ data.city }}, {{ data.provinceDesc }}
-      </span>
-      <span :id="`location-${indexString}-country`" class="body-compact-01">
-        {{ data.countryDesc }}
-      </span>
-      <span :id="`location-${indexString}-postalCode`" class="body-compact-01">
-        {{ data.postalCode }}
-      </span>
+      <read-only-component label="Address" :id="`location-${indexString}-address`">
+        <div class="grouping-23 no-margin">
+          <span
+            :id="`location-${indexString}-addressTwo`"
+            class="body-compact-01"
+            v-if="data.addressTwo"
+          >
+            {{ data.addressTwo }}
+          </span>
+          <span
+            :id="`location-${indexString}-addressThree`"
+            class="body-compact-01"
+            v-if="data.addressThree"
+          >
+            {{ data.addressThree }}
+          </span>
+          <span :id="`location-${indexString}-streetAddress`" class="body-compact-01">
+            {{ data.addressOne }}
+          </span>
+          <span :id="`location-${indexString}-city-province`" class="body-compact-01">
+            {{ data.city }}, {{ data.provinceDesc }}
+          </span>
+          <span :id="`location-${indexString}-country`" class="body-compact-01">
+            {{ data.countryDesc }}
+          </span>
+          <span :id="`location-${indexString}-postalCode`" class="body-compact-01">
+            {{ data.postalCode }}
+          </span>
+        </div>
+      </read-only-component>
     </div>
     <div :id="`location-${indexString}-email-section`" class="grouping-23" v-if="data.emailAddress">
       <read-only-component label="Email address" :id="`location-${indexString}-emailAddress`">

diff --git a/frontend/tests/components/pages/client-details/LocationView.cy.ts b/frontend/tests/components/pages/client-details/LocationView.cy.ts
@@ -56,6 +56,8 @@ describe("<location-view />", () => {
     mount();
 
     cy.get("#location-00-address-section").within(() => {
+      testField("#location-00-addressTwo", currentProps.data.addressTwo);
+      testField("#location-00-addressThree", currentProps.data.addressThree);
       testField("#location-00-streetAddress", currentProps.data.addressOne);
 
       // City, Province
@@ -68,12 +70,6 @@ describe("<location-view />", () => {
       testField("#location-00-postalCode", currentProps.data.postalCode);
     });
 
-    cy.get("#location-00-delivery-section").within(() => {
-      // same field twice because we can't assert the <br> that separates the values as text content.
-      testField("#location-00-deliveryInformation", currentProps.data.addressTwo);
-      testField("#location-00-deliveryInformation", currentProps.data.addressThree);
-    });
-
     const emailPrefix = "mailto:";
 
     cy.get("#location-00-email-section").within(() => {
@@ -108,12 +104,23 @@ describe("<location-view />", () => {
     };
     mount({ data });
 
-    cy.get("#location-00-delivery-section").should("not.exist");
     cy.get("#location-00-email-section").should("not.exist");
     cy.get("#location-00-phone-section").should("not.exist");
     cy.get("#location-00-notes-section").should("not.exist");
   });
 
+  it("hides address fields when they are empty", () => {
+    const data: ClientLocation = {
+      ...getDefaultProps().data,
+      addressTwo: "",
+      addressThree: "",
+    };
+    mount({ data });
+
+    testFieldHidden("#location-00-addressTwo");
+    testFieldHidden("#location-00-addressThree");
+  });
+
   describe("while there is at least one phone to be displayed", () => {
     const scenarios = [
       ["businessPhone", "#location-00-primaryPhoneNumber"],