Skip to content

Commit

Permalink
feat(fe:FSADT1-1595): CLIENT_VIEWER Client Contacts Section - Front-E…
Browse files Browse the repository at this point in the history 
…nd (#1369)

* add the contacts tab contents

* clear outdated data on stubs

* add empty contacts view

* hide email when empty

* test: display contacts tab content

* test: display contact information

* test: fix phone numbers on tests

* center empty list view (contacts)

* test: display/hide instruction text

* add contact stub businessPhone only

* update svg size

* replace pictogram
  • Loading branch information
@fterra-encora
fterra-encora authored Dec 27, 2024
1 parent 249f81f commit 59868a2
Show file tree
Hide file tree
Showing 12 changed files with 579 additions and 148 deletions.
196 changes: 171 additions & 25 deletions frontend/cypress/e2e/pages/ClientDetailsPage.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,28 @@
describe("Client Details Page", () => {
beforeEach(() => {
const getTestRole = (ctx: Mocha.Context) => {
const titlePath = ctx.currentTest.titlePath();
for (const title of titlePath.reverse()) {
if (!title.includes("role:")) continue;

const suffix = title.split("role:")[1];
const words = suffix.replace(/[^\w\s]/g, "").split(/\s+/);
const role = words[0];

return role;
}
return undefined;
};

beforeEach(function () {
cy.location().then((location) => {
if (location.pathname === "blank") {
cy.visit("/");

const role = getTestRole(this) || "CLIENT_VIEWER";
cy.login("[email protected]", "Uat Test", "idir", {
given_name: "James",
family_name: "Baxter",
"cognito:groups": ["CLIENT_VIEWER"],
"cognito:groups": [role],
});
}
});
Expand Down Expand Up @@ -98,6 +113,7 @@ describe("Client Details Page", () => {
before(() => {
cy.visit("/clients/details/g");
});

it("displays the number of locations", () => {
cy.get("#panel-locations").contains("03 locations");
});
Expand Down Expand Up @@ -141,40 +157,170 @@ describe("Client Details Page", () => {
});
});

it("hides the address on the accordion's title when it's expanded", () => {
cy.visit("/clients/details/g");
describe("regular, isolated tests", () => {
beforeEach(() => {
cy.visit("/clients/details/g");
});

it("hides the address on the accordion's title when it's expanded", () => {
cy.visit("/clients/details/g");

// Clicks to expand the accordion
cy.get("#location-00 [slot='title']").click();

cy.get("#location-00-title-address").should("not.be.visible");
});

it("keeps accordions' states while tabs are switched", () => {
cy.visit("/clients/details/g");

// Expand first and third locations, leave second one collapsed
cy.get("#location-00 [slot='title']").click();
cy.get("#location-02 [slot='title']").click();

// Switch to tab another tab (Contacts)
cy.get("#tab-contacts").click();

// Make sure the current tab panel was effectively switched
cy.get("#panel-locations").should("have.attr", "hidden");
cy.get("#panel-contacts").should("not.have.attr", "hidden");

// Switch back to tab Locations
cy.get("#tab-locations").click();

// First location is still open
cy.get("#location-00 cds-accordion-item").should("have.attr", "open");

// Second location is still closed
cy.get("#location-01 cds-accordion-item").should("not.have.attr", "open");

// Third location is still open
cy.get("#location-02 cds-accordion-item").should("have.attr", "open");
});
});
});

describe("contacts tab", () => {
describe("non-user action tests", { testIsolation: false }, () => {
before(() => {
cy.visit("/clients/details/g");

// Switch to tab another tab (Contacts)
cy.get("#tab-contacts").click();

// Make sure the current tab panel was effectively switched
cy.get("#panel-locations").should("have.attr", "hidden");
cy.get("#panel-contacts").should("not.have.attr", "hidden");
});

it("displays the number of contacts", () => {
cy.get("#panel-contacts").contains("03 contacts");
});

it("displays one collapsed accordion component for each contact", () => {
cy.get("#panel-contacts").within(() => {
// There are 3 accordions
cy.get("cds-accordion").should("have.length", 3);

// Clicks to expand the accordion
cy.get("#location-00 [slot='title']").click();
// All accordions are initially collapsed
cy.get("cds-accordion cds-accordion-item").each(($el) => {
expect($el).not.to.have.attr("open");
});
});
});

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");
});

cy.get("#location-00-title-address").should("not.be.visible");
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");
});
});

it("keeps accordions' states while tabs are switched", () => {
cy.visit("/clients/details/g");
describe("regular, isolated tests", () => {
describe("3 contacts", () => {
beforeEach(() => {
cy.visit("/clients/details/g");

// Expand first and third locations, leave second one collapsed
cy.get("#location-00 [slot='title']").click();
cy.get("#location-02 [slot='title']").click();
// Switch to tab another tab (Contacts)
cy.get("#tab-contacts").click();

// Switch to tab another tab (Contacts)
cy.get("#tab-contacts").click();
// Make sure the current tab panel was effectively switched
cy.get("#panel-locations").should("have.attr", "hidden");
cy.get("#panel-contacts").should("not.have.attr", "hidden");
});

// Make sure the current tab panel was effectively switched
cy.get("#panel-locations").should("have.attr", "hidden");
cy.get("#panel-contacts").should("not.have.attr", "hidden");
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");
});

// Switch back to tab Locations
cy.get("#tab-locations").click();
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();
// Switch to tab another tab (Locations)
cy.get("#tab-locations").click();
// Make sure the current tab panel was effectively switched
cy.get("#panel-contacts").should("have.attr", "hidden");
cy.get("#panel-locations").should("not.have.attr", "hidden");
// 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");
// Second contact is still closed
cy.get("#contact-01 cds-accordion-item").should("not.have.attr", "open");
// Third contact is still open
cy.get("#contact-02 cds-accordion-item").should("have.attr", "open");
});
});
describe("no contacts", () => {
beforeEach(() => {
cy.visit("/clients/details/gd");

// First location is still open
cy.get("#location-00 cds-accordion-item").should("have.attr", "open");
// Switch to tab another tab (Contacts)
cy.get("#tab-contacts").click();

// Second location is still closed
cy.get("#location-01 cds-accordion-item").should("not.have.attr", "open");
// Make sure the current tab panel was effectively switched
cy.get("#panel-locations").should("have.attr", "hidden");
cy.get("#panel-contacts").should("not.have.attr", "hidden");
});

it("displays the empty view", () => {
cy.contains("#panel-contacts", "Nothing to show yet!");
});

const addContactText = "Click “Add contact” button to start";
const alternateText = "No contacts have been added to this client account";

// Third location is still open
cy.get("#location-02 cds-accordion-item").should("have.attr", "open");
describe("when role:CLIENT_VIEWER", () => {
it("doesn't display instruction for adding contacts", () => {
cy.contains("#panel-contacts", addContactText).should("not.exist");

// displays the alternate text
cy.contains("#panel-contacts", alternateText);
});
});

describe("when user has authority", () => {
["CLIENT_EDITOR", "CLIENT_SUSPEND", "CLIENT_ADMIN"].forEach((role) => {
describe(`role:${role}`, () => {
it("displays instruction for adding contacts", () => {
cy.contains("#panel-contacts", addContactText);

// doesn't display the alternate text
cy.contains("#panel-contacts", alternateText).should("not.exist");
});
});
});
});
});
});
});
});
28 changes: 26 additions & 2 deletions frontend/src/assets/styles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1799,11 +1799,21 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01:not(.default-typo
width: 7.875rem;
}

.tab-panels-container {
height: 100%;

& > div {
height: 100%;
}
}

.tab-panel {
padding: 2.5rem;
height: 100%;
background: var(--light-theme-layer-layer-01, #f3f3f5);
box-sizing: border-box;

& > div {
&--populated {
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 2rem;
Expand All @@ -1813,6 +1823,20 @@ div.internal-grouping-01:has(svg.warning) span.body-compact-01:not(.default-typo
display: none;
}
}

&--empty {
padding: 5rem;
justify-content: center;

.empty-table-list {
height: 100%;

svg {
height: 3rem;
width: 3rem;
}
}
}
}

/* Small (up to 671px) */
Expand Down
18 changes: 18 additions & 0 deletions frontend/src/dto/CommonTypesDto.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,23 @@ export interface ClientLocation {
returnedMailDate: string;
trustLocationInd: string;
cliLocnComment: string;
createdBy: string;
updatedBy: string;
}

export interface ClientContact {
clientNumber: string;
clientLocnCode: string[];
contactCode: string;
contactName: string;
contactTypeCode: string;
contactTypeDesc: string;
businessPhone: string;
secondaryPhone: string;
faxNumber: string;
emailAddress: string;
createdBy: string;
updatedBy: string;
}

export interface ClientDetails {
Expand All @@ -302,4 +319,5 @@ export interface ClientDetails {
birthdate: string;
doingBusinessAs: ClientDoingBusinessAs[];
addresses: ClientLocation[];
contacts: ClientContact[];
}
Loading

0 comments on commit 59868a2

Please sign in to comment.