From c21809db7380dd35416a21be098e1e505d60a324 Mon Sep 17 00:00:00 2001
From: Fernando Terra <79578735+fterra-encora@users.noreply.github.com>
Date: Mon, 11 Dec 2023 14:24:02 -0300
Subject: [PATCH] [FSADT1-1027] Add icons and remove divider line in step 4
 (#670)

* feat: add icons in the review step

* feat: hide the divider on the review step

---------

Co-authored-by: Paulo Gomes da Cruz Junior <paulo.cruz@gov.bc.ca>
---
 frontend/src/assets/styles/global.scss           |  6 ++++++
 frontend/src/pages/FormBCeIDPage.vue             |  2 +-
 .../src/pages/bceidform/ReviewWizardStep.vue     | 16 +++++++++++++---
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
index ce22cc4df7..dc199e6f70 100644
--- a/frontend/src/assets/styles/global.scss
+++ b/frontend/src/assets/styles/global.scss
@@ -937,6 +937,12 @@ div#app {
   align-self: stretch;
 }
 
+.review-icon-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .cds-text-input-label {
   color: var(--light-theme-text-text-primary, #131315);
   font-family: BC Sans;
diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
index a6e0602776..072fa71004 100644
--- a/frontend/src/pages/FormBCeIDPage.vue
+++ b/frontend/src/pages/FormBCeIDPage.vue
@@ -473,7 +473,7 @@ const scrollToNewContact = () => {
       </div>
     </div>
 
-    <hr class="divider"/>
+    <hr v-if="currentTab < 3" class="divider"/>
   </div>
 
   <div class="form-footer">
diff --git a/frontend/src/pages/bceidform/ReviewWizardStep.vue b/frontend/src/pages/bceidform/ReviewWizardStep.vue
index 84b5a22318..8c880fa20d 100644
--- a/frontend/src/pages/bceidform/ReviewWizardStep.vue
+++ b/frontend/src/pages/bceidform/ReviewWizardStep.vue
@@ -8,6 +8,10 @@ import { useEventBus } from "@vueuse/core";
 import type { FormDataDto } from "@/dto/ApplyClientNumberDto";
 // @ts-ignore
 import Edit16 from "@carbon/icons-vue/es/edit/16";
+import Enterprise20 from "@carbon/icons-vue/es/enterprise/20"
+import LocationStar20 from "@carbon/icons-vue/es/location--star/20"
+import Location20 from "@carbon/icons-vue/es/location/20"
+import User20 from "@carbon/icons-vue/es/user/20"
 import { useFetchTo } from "@/composables/useFetch";
 import { CodeNameType } from "@/dto/CommonTypesDto";
 import { codeConversionFn } from "@/services/ForestClientService";
@@ -53,7 +57,8 @@ onMounted(() => {
   <div class="grouping-05">
     <label class="heading-03">Business information</label>
     <div class="grouping-01">
-      <p class="heading-02">
+      <p class="heading-02 review-icon-title">
+        <Enterprise20 />
         {{ formData.businessInformation.businessName }}
       </p>
       <p class="body-compact-01" id="clientTypeId">
@@ -76,7 +81,10 @@ onMounted(() => {
         :key="address.locationName" 
         class="grouping-07">
       <hr class="divider" v-if="index > 0" />
-      <span class="heading-02">{{ address.locationName }}</span>
+      <span class="heading-02 review-icon-title">
+        <LocationStar20 v-if="index === 0" />
+        <Location20 v-else />{{ address.locationName }}
+      </span>
       <span class="body-compact-01">{{ address.streetAddress }}</span>
       <span class="body-compact-01">{{ address.city }}, {{ address.province.text }}</span>
       <span class="body-compact-01">{{ address.country.text }}</span>
@@ -96,7 +104,9 @@ onMounted(() => {
         class="grouping-07">
       <hr class="divider" 
           v-if="index > 0" />
-      <span class="heading-02">{{ contact.firstName }} {{ contact.lastName }}</span>
+      <span class="heading-02 review-icon-title">
+        <User20 />{{ contact.firstName }} {{ contact.lastName }}
+      </span>
       <span class="body-compact-01">
         {{ contact.locationNames.map((codeDesc) => codeDesc.text).join(', ') }}
       </span>