fix(REGISTRY-2731): Improve tabs on Organisation profile (#850)

Author: SaharBatol-HDRUK

cypress/e2e/user-journeys/admin/sro.cy.ts

@@ -20,7 +20,7 @@ describe("SRO journey", () => {
   describe("Organisation not approved", () => {
     beforeEach(() => {
       loginUnapprovedOrganisation();
-      cy.visitFirst(ROUTES.profileOrganisationDetailsNameAndAddress.path);
+      cy.visitFirst(ROUTES.profileOrganisationDetailsNameAndSRO.path);
     });
 
     after(() => {
@@ -67,7 +67,7 @@ describe("SRO journey", () => {
     beforeEach(() => {
       loginUnapprovedOrganisation();
 
-      cy.visitFirst(ROUTES.profileOrganisationDetailsNameAndAddress.path);
+      cy.visitFirst(ROUTES.profileOrganisationDetailsNameAndSRO.path);
     });
 
     after(() => {

cypress/e2e/user-journeys/organisations/subsidiaries.cy.ts

@@ -27,7 +27,7 @@ describe("Subsidiaries journey", () => {
   beforeEach(() => {
     loginOrganisation();
 
-    cy.visitFirst(ROUTES.profileOrganisationDetailsNameAndAddress.path);
+    cy.visitFirst(ROUTES.profileOrganisationDetailsOrganisationDetails.path);
   });
 
   after(() => {

mocks/data/cms.tsx

@@ -435,18 +435,10 @@ export type ProfileGuidance = Record<string, TabGuidance>;
 
 export const mockedOrganisationProfileGuidance: TabGuidance = {
   details: {
-    "name-and-address": {
-      infoTitle: "Why are we asking for this information?",
+    "name-and-sro": {
+      infoTitle: "What’s a Senior Responsible Officer?",
       info: (
         <>
-          <Typography mb={5}>
-            Providing the Safe People Registry with full Organisation
-            information helps Data Custodians validate your Organisation. The
-            more information you provide, the faster and easier the validation
-            process becomes for Users (an employee or student of an
-            Organisation) to gain access to sensitive data.
-          </Typography>
-
           <Typography mb={3}>
             <strong>Senior Responsible Officers (SROs)</strong> are responsible
             for:
@@ -479,30 +471,44 @@ export const mockedOrganisationProfileGuidance: TabGuidance = {
         </>
       ),
     },
-    "digital-identifiers": {
-      infoTitle: "More information, faster validation",
+    address: {
+      infoTitle: "Why are we asking for this information?",
       info: (
         <>
           <Typography mb={5}>
-            Providing the Safe People Registry with your Organisation's
-            persistent digital identifiers enables Data Custodians to rapidly
-            validate your Organisation.
+            Providing the Safe People Registry with full Organisation
+            information helps Data Custodians validate your Organisation. The
+            more information you provide, the faster and easier the validation
+            process becomes for Users (an employee or student of an
+            Organisation) to gain access to sensitive data.
           </Typography>
           <Typography mb={5}>
-            If your Organisation’s headquarters is based in the UK, your
-            Organisation legal name and address should align with your
-            Organisation's listing on Companies House.
+            If your Organisation headquarters is based within the UK, your
+            Organisation legal name and address information should align with
+            your Organisation’s listing on Companies House.
           </Typography>
         </>
       ),
     },
-    "sector-size-and-website": {
+    "organisation-details": {
       infoTitle: "More facts, quicker access",
+      info: (
+        <>
+          <Typography mb={5}>
+            Providing the Safe People Registry with information on your
+            Organisation’s sector, size and website accelerates Organisation
+            validation by Data Custodians.
+          </Typography>
+        </>
+      ),
+    },
+    "digital-identifiers": {
+      infoTitle: "More information, faster validation",
       info: (
         <Typography mb={5}>
-          Providing the Safe People Registry with information on your
-          Organisation’s sector, size and website accelerates Organisation
-          validation by Data Custodians.
+          Providing the Safe People Registry with your Organisation's persistent
+          digital identifiers enables Data Custodians to rapidly validate your
+          Organisation.
         </Typography>
       ),
     },

next.config.js

@@ -65,7 +65,7 @@ const nextConfig = withNextIntl({
       },
       {
         source: "/:locale/organisation/profile/details",
-        destination: `/:locale/organisation/profile/details/name-and-address`,
+        destination: `/:locale/organisation/profile/details/name-and-sro`,
       },
       {
         source: "/:locale/organisation/profile/user-administration",

src/app/[locale]/(logged-in)/data-custodian/profile/components/Webhooks/Webhooks.tsx

@@ -272,7 +272,7 @@ export default function Webhooks() {
                     <FormActions>
                       <ProfileNavigationFooter
                         previousHref={
-                          ROUTES.profileOrganisationDetailsSectorSizeAndWebsite
+                          ROUTES.profileOrganisationDetailsOrganisationDetails
                             .path
                         }
                         isLoading={isPostLoading || isDeleteLoading}

src/app/[locale]/(logged-in)/organisation/profile/components/Address/Address.test.tsx

@@ -0,0 +1,92 @@
+import { mockedOrganisation } from "@/mocks/data/organisation";
+import { fireEvent, render, screen, waitFor } from "@/utils/testUtils";
+import Address from "./Address";
+
+const putProps = {
+  isError: false,
+  isPending: false,
+  error: null,
+  onSubmit: jest.fn().mockResolvedValue(null),
+};
+
+jest.mock("../../hooks/useUpdateOrganisation", () => ({
+  __esModule: true,
+  default: () => putProps,
+}));
+
+function setupTest() {
+  return render(<Address />);
+}
+
+const userData = {
+  id: 1,
+  first_name: "first",
+  last_name: "last",
+  email: "email@example.com",
+  role: "SRO",
+  departments: [{ id: 123, name: "Research" }],
+};
+
+function getAllInputs() {
+  return [/Address 1/, /Address 2/, /Town/, /County/, /Country/, /Postcode/];
+}
+
+const organisation = mockedOrganisation();
+
+describe("<Address />", () => {
+  beforeEach(() => {
+    mockUseStore({
+      config: { organisation, user: userData },
+    });
+    // mutateUserMock.mockClear();
+    putProps.onSubmit.mockClear();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders all address fields", () => {
+    setupTest();
+
+    const inputs = getAllInputs();
+
+    inputs.forEach(selector => {
+      expect(screen.getAllByLabelText(selector)[0]).toBeInTheDocument();
+    });
+  });
+
+  it("submits the form when values are filled", async () => {
+    setupTest();
+
+    const form = await screen.findByRole("form", { name: "Address" });
+    fireEvent.submit(form);
+
+    const { address_1, address_2, county, country, town, postcode } =
+      organisation;
+
+    await waitFor(() => {
+      expect(putProps.onSubmit).toHaveBeenCalledWith({
+        address_1,
+        address_2,
+        county,
+        country,
+        town,
+        postcode,
+      });
+    });
+  });
+
+  it("does not submit the form when values are cleared", async () => {
+    setupTest();
+
+    clearInputsByLabelText(getAllInputs());
+
+    const form = await screen.findByRole("form", { name: "Address" });
+    fireEvent.submit(form);
+
+    await waitFor(() => {
+      expect(putProps.onSubmit).not.toHaveBeenCalled();
+    });
+  });
+});