feat(fe:FSADT1-1574): CLIENT_VIEWER Client Summary Section - Front-End (

#1335) * chore: remove ineffective sonar comments * feat: add summary fields (corporation) * refactor: get tag color by client status * test: get tag color by client status * chore: add draft stubs * feat: add individual fields * fix: replace organizationName with clientName * fix: fix UI details on fields Standing and Note * fix: fix submission stubs * feat: join registration number parts Also updates property names. * fix: forcely move Note field to next row * fix: move Identification and Date of birth to their correct position * feat: handle fetch errors * minor fixes * network error * update status * feat: make any .grouping-10 take the full row * chore: remove property from stub * rename Notes * add wcbFirmNumber to stubs * refactor: reuse function goodStanding * extract summary component and other changes * test: goodStanding * test: add summary tests * add doingBusinessAs to the model * test: full client name and errors * update client details url * add Doing business as * set label color to black * Revert "set label color to black" This reverts commit cc2a0d5. * update the general style for labels * update stub names * birthdate label * test: update tests * test: fix missing router * test: fix stub mappings
bcgov · Dec 9, 2024 · c030807 · c030807
1 parent eeb04d4
commit c030807
Show file tree

Hide file tree

Showing 32 changed files with 1,000 additions and 78 deletions.
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -5,9 +5,7 @@ ARG APP_VERSION=0.0.1
 
 WORKDIR /app
 COPY . .
-RUN npm ci && \
-    npm version ${APP_VERSION} --no-git-tag-version && \
-    npm run build
+RUN npm ci && npm run build
 
 # Caddy
 FROM caddy:2.8.4-alpine

diff --git a/frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts b/frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts
@@ -7,16 +7,84 @@ describe("Client Details Page", () => {
       family_name: "Baxter",
       "cognito:groups": ["CLIENT_VIEWER"],
     });
-
-    cy.visit("/clients/0");
   });
 
   it("renders the page skeleton", () => {
+    cy.visit("/clients/details/0");
+
     cy.get("cds-breadcrumb").should("contain", "Client search");
     cy.contains("h2", "Client summary");
     cy.contains("cds-tab", "Client locations");
     cy.contains("cds-tab", "Client contacts");
     cy.contains("cds-tab", "Related clients");
     cy.contains("cds-tab", "Activity log");
   });
+
+  const nameScenarios = [
+    {
+      id: "G",
+      type: "corporation",
+      expected: "Kovacek, Thompson And Boyer",
+      expectedDescription: "Client name",
+    },
+    {
+      id: "I",
+      type: "individual without middle name",
+      expected: "John Silver",
+      expectedDescription: "First name + Last name",
+    },
+    {
+      id: "S",
+      type: "individual with middle name",
+      expected: "Michael Gary Scott",
+      expectedDescription: "First name + Middle name + Last name",
+    },
+  ];
+
+  nameScenarios.forEach((scenario) => {
+    const { type, id, expected, expectedDescription } = scenario;
+    describe(`when client is a ${type}`, () => {
+      beforeEach(() => {
+        cy.visit(`/clients/details/${id}`);
+      });
+      it(`displays the full client name in the header as: ${expectedDescription}`, () => {
+        cy.contains("h1", expected);
+      });
+    });
+  });
+
+  const errorScenarios = [
+    {
+      clientId: "enet",
+      elId: "internalServerError",
+      description: "a network error",
+    },
+    {
+      clientId: "e400",
+      elId: "badRequestError",
+      description: "4xx",
+      detail: "There seems to be a problem with the information you entered",
+    },
+    {
+      clientId: "e500",
+      elId: "internalServerError",
+      description: "5xx",
+    },
+  ];
+
+  errorScenarios.forEach((scenario) => {
+    const { clientId, elId, description, detail } = scenario;
+    describe(`when error is ${description}`, () => {
+      beforeEach(() => {
+        cy.visit(`/clients/details/${clientId}`);
+      });
+      const suffix = detail ? ` with detail "${detail}"` : "";
+      it(`displays the error message "Something went wrong"${suffix}`, () => {
+        cy.get(`#${elId}`).should("be.visible");
+        if (detail) {
+          cy.get(`#${elId}`).contains(detail);
+        }
+      });
+    });
+  });
 });
diff --git a/frontend/cypress/e2e/pages/SearchPage.cy.ts b/frontend/cypress/e2e/pages/SearchPage.cy.ts
@@ -182,7 +182,7 @@ describe("Search Page", () => {
       it("navigates to the client details", () => {
         cy.get("@windowOpen").should(
           "be.calledWith",
-          `/clients/${clientNumber}`,
+          `/clients/details/${clientNumber}`,
           "_blank",
           "noopener",
         );
@@ -239,7 +239,7 @@ describe("Search Page", () => {
         it("navigates to the client details", () => {
           cy.get("@windowOpen").should(
             "be.calledWith",
-            `/clients/${clientNumber}`,
+            `/clients/details/${clientNumber}`,
             "_blank",
             "noopener",
           );

diff --git a/frontend/cypress/e2e/pages/SubmissionReviewPage.cy.ts b/frontend/cypress/e2e/pages/SubmissionReviewPage.cy.ts
@@ -222,7 +222,7 @@ describe("Submission Review Page", () => {
         cy.get("cds-actionable-notification")
         .should("not.exist");
 
-        cy.get('.grouping-10 > :nth-child(2) > .title-group-01 > .label-01')
+        cy.get('.grouping-10 > :nth-child(2) > .title-group-01 > .label-02')
         .should("contain", "Client number");
 
         cy.get(".grouping-10 > :nth-child(2) > .body-compact-01")

diff --git a/frontend/cypress/e2e/pages/staffform/BcRegisteredClientInformationWizardStep.cy.ts b/frontend/cypress/e2e/pages/staffform/BcRegisteredClientInformationWizardStep.cy.ts
@@ -461,7 +461,7 @@ describe("BC Registered Staff Wizard Step", () => {
             ".read-only-box > cds-inline-notification#readOnlyNotification"
           ).should("exist");
 
-          cy.get(`.read-only-box > #legalType > .title-group-01 > .label-01`)
+          cy.get(`.read-only-box > #legalType > .title-group-01 > .label-02`)
             .should("exist")
             .and("have.text", "Type");
 
@@ -470,7 +470,7 @@ describe("BC Registered Staff Wizard Step", () => {
             .and("have.text", scenario.type);
 
           cy.get(
-            `.read-only-box > #registrationNumber > .title-group-01 > .label-01`
+            `.read-only-box > #registrationNumber > .title-group-01 > .label-02`
           )
             .should("exist")
             .and("have.text", "Registration number");
@@ -493,7 +493,7 @@ describe("BC Registered Staff Wizard Step", () => {
             //TODO: check the text and style maybe?!
           }
 
-          cy.get(`.read-only-box > #goodStanding > .title-group-01 > .label-01`)
+          cy.get(`.read-only-box > #goodStanding > .title-group-01 > .label-02`)
             .should("exist")
             .and("have.text", "BC Registries standing");
 
@@ -577,17 +577,17 @@ describe("BC Registered Staff Wizard Step", () => {
         ".read-only-box > cds-inline-notification#readOnlyNotification"
       ).should("exist");
 
-      cy.get(".read-only-box > #legalType > .title-group-01 > .label-01")
+      cy.get(".read-only-box > #legalType > .title-group-01 > .label-02")
         .should("exist")
         .and("have.text", "Type");
 
       cy.get(
-        ".read-only-box > #registrationNumber > .title-group-01 > .label-01"
+        ".read-only-box > #registrationNumber > .title-group-01 > .label-02"
       )
         .should("exist")
         .and("have.text", "Registration number");
 
-      cy.get(".read-only-box > #goodStanding > .title-group-01 > .label-01")
+      cy.get(".read-only-box > #goodStanding > .title-group-01 > .label-02")
         .should("exist")
         .and("have.text", "BC Registries standing");
 
@@ -612,15 +612,15 @@ describe("BC Registered Staff Wizard Step", () => {
         ).should("not.exist");
 
         cy.get(
-          ".read-only-box > #legalType > .title-group-01 > .label-01"
+          ".read-only-box > #legalType > .title-group-01 > .label-02"
         ).should("not.exist");
 
         cy.get(
-          ".read-only-box > #registrationNumber > .title-group-01 > .label-01"
+          ".read-only-box > #registrationNumber > .title-group-01 > .label-02"
         ).should("not.exist");
 
         cy.get(
-          ".read-only-box > #goodStanding > .title-group-01 > .label-01"
+          ".read-only-box > #goodStanding > .title-group-01 > .label-02"
         ).should("not.exist");
 
         cy.get("#workSafeBCNumber").should("not.exist");

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -97,7 +97,7 @@
     "source-map-support": "^0.5.21",
     "start-server-and-test": "^2.0.8",
     "ts-node": "^10.9.1",
-    "typescript": "~5.7.0",
+    "typescript": "~5.6.0",
     "unplugin-icons": "^0.20.0",
     "unplugin-vue-components": "^0.27.0",
     "vite": "^5.4.10",

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -1009,6 +1009,8 @@ cds-actionable-notification * {
   gap: 2rem;
   padding: 2rem;
   flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
 }
 .grouping-10-internal {
   display: flex;
@@ -1602,6 +1604,10 @@ cds-header-panel[expanded] {
   background: var(--light-theme-layer-layer-02, #fff);
 }
 
+.no-padding {
+  padding: 0;
+}
+
 // Copied from .cds--side-nav__overlay-active in @carbon/styles/css/styles.css so to make it available on all breakpoints
 .overlay-active {
   z-index: 6000;
@@ -1701,7 +1707,7 @@ div.internal-grouping-01 span.body-compact-01 ~ svg.warning path[data-icon-path=
   opacity: 1;
 }
 
-div.internal-grouping-01:has(svg.warning) span.body-compact-01 {
+div.internal-grouping-01:has(svg.warning) span.body-compact-01:not(.default-typography) {
   font-weight: 900;
   background-color: color-mix(in srgb, var(--cds-support-warning) 40%, white);
 }

diff --git a/frontend/src/components/forms/ReadOnlyComponent.vue b/frontend/src/components/forms/ReadOnlyComponent.vue
@@ -4,9 +4,9 @@ defineProps<{ label: string }>()
 <template>
   <div class="grouping-11">
     <div class="title-group-01">
-      <span class="label-01">{{ label }}</span>   
+      <span class="label-02">{{ label }}</span>
       <slot name="icon"></slot>
-    </div>      
+    </div>
     <slot></slot>
   </div>
 </template>
@@ -17,4 +17,4 @@ defineProps<{ label: string }>()
   flex-direction: row;
   gap: 0.5rem;
 }
-</style>
+</style>
diff --git a/frontend/src/dto/CommonTypesDto.ts b/frontend/src/dto/CommonTypesDto.ts
@@ -249,3 +249,32 @@ export interface SubmissionDetailsMatchers {
   contact: string
   location: string
 }
+
+export interface ClientDoingBusinessAs {
+  doingBusinessAsName: string;
+}
+
+export interface ClientDetails {
+  clientNumber: string;
+  clientName: string;
+  legalFirstName: string;
+  legalMiddleName: string;
+  clientStatusCode: string;
+  clientStatusDesc: string;
+  clientTypeCode: string;
+  clientTypeDesc: string;
+  clientIdTypeCode: string;
+  clientIdTypeDesc: string;
+  clientIdentification: string;
+  registryCompanyTypeCode: string;
+  corpRegnNmbr: string;
+  clientAcronym: string;
+  wcbFirmNumber: string;
+  ocgSupplierNmbr: string;
+  clientComment: string;
+  clientCommentUpdateDate: string;
+  clientCommentUpdateUser: string;
+  goodStandingInd: string;
+  birthdate: string;
+  doingBusinessAs: ClientDoingBusinessAs[];
+}