feat(REGISTRY-1006): Organisations - add parent organisation (subsidiaries) (#839)

Author: SaharBatol-HDRUK

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

@@ -24,6 +24,7 @@ import { useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
 import useUpdateOrganisation from "../../hooks/useUpdateOrganisation";
 import SroFields from "../SroFields";
+import OrganisationsParents from "@/organisms/OrganisationsParents";
 
 export interface NameAndAddressFormValues {
   organisation_name: string;
@@ -258,6 +259,10 @@ export default function NameAndAddress() {
                   </Grid>
                 </Grid>
               </PageSection>
+              <OrganisationsParents
+                onEditSuccess={() => handleRefetch()}
+                onDeleteSuccess={() => handleRefetch()}
+              />
               <OrganisationsSubsidiaries
                 onEditSuccess={() => handleRefetch()}
                 onDeleteSuccess={() => handleRefetch()}

src/config/locales/en.json

@@ -1495,6 +1495,7 @@
     },
     "Subsidiaries": {
       "heading": "UK subsidiaries",
+      "description": "If your Organisation is based internationally, please add any UK-based subsidiaries below.",
       "addSubsidiaryButton": "Add a subsidiary",
       "removeSubsidiaryToolTip": "Remove this subsidiary",
       "editSubsidiaryToolTip": "Edit this subsidiary",
@@ -1503,6 +1504,7 @@
       "organisationName": "Name",
       "address": "Address",
       "actions": "Actions",
+      "add": "Add subsidiary",
       "edit": "Edit subsidiary",
       "delete": "Delete subsidiary",
       "subsidiaryNameRequired": "Subsidiary name is required",
@@ -1515,6 +1517,28 @@
       "countyRequiredInvalid": "County is required",
       "countryRequiredInvalid": "Country is required"
     },
+    "Parents": {
+      "heading": "Parent",
+      "description": "If you have a parent organisation, please add it below.",
+      "addParentButton": "Add a parent",
+      "removeParentToolTip": "Remove this parent",
+      "editParentToolTip": "Edit this parent",
+      "cancelButton": "Cancel",
+      "saveButton": "Save",
+      "organisationName": "Name",
+      "address": "Address",
+      "actions": "Actions",
+      "add": "Add parent",
+      "edit": "Edit parent",
+      "delete": "Delete parent",
+      "parentNameRequired": "Parent name is required",
+      "postcodeRequiredInvalid": "Postcode is required",
+      "postcodeFormatInvalid": "The postcode is not valid",
+      "address1RequiredInvalid": "Line 1 of the address is required",
+      "townRequiredInvalid": "Town is required",
+      "countyRequiredInvalid": "County is required",
+      "countryRequiredInvalid": "Country is required"
+    },
     "SroDeclaratation": {
       "heading": "SRO Declaration",
       "intro": "In order to grant you full Organisation account privileges (including adding Users from your Organisation and those Users being validated by Data Custodians), you will need to complete and upload the form below.",

src/organisms/OrganisationsParents/OrganisationsParents.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useStore } from "@/data/store";
+import { PageSection } from "@/modules";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import FormModal from "@/components/FormModal";
+import useQueryAlerts from "@/hooks/useQueryAlerts";
+import OrganisationsSubsidiaryEditForm from "@/modules/OrganisationsSubsidiariesEditForm";
+import OrganisationsSubsidiariesTable from "@/modules/OrganisationsSubsidiariesTable";
+import useMutationWithConfirmation from "@/queries/useMutationWithConfirmation";
+import { Subsidiary } from "@/types/application";
+import Button from "@mui/material/Button";
+import { deleteSubsidiaryQuery } from "@/services/subsidiaries";
+import useMutationUpdateSubsidiary from "../../queries/useMutationUpdateSubsidiary";
+
+const NAMESPACE_TRANSLATION = "Organisations.Parents";
+
+interface OrganisationsParentsProps {
+  onDeleteSuccess?: () => void;
+  onEditSuccess?: () => void;
+}
+
+export default function OrganisationsParents({
+  onDeleteSuccess,
+  onEditSuccess,
+}: OrganisationsParentsProps) {
+  const organisation = useStore(state => state.config.organisation);
+  const t = useTranslations(NAMESPACE_TRANSLATION);
+  const [activeParent, setActiveParent] = useState<Subsidiary>();
+
+  const { mutateAsync: mutateUpdateAysnc, ...restUpdateState } =
+    useMutationUpdateSubsidiary();
+
+  const { showConfirm } = useMutationWithConfirmation(deleteSubsidiaryQuery(), {
+    onSuccess: () => {
+      onDeleteSuccess?.();
+    },
+  });
+
+  useQueryAlerts(restUpdateState, {
+    onSuccess: () => {
+      setActiveParent(undefined);
+      onEditSuccess?.();
+    },
+  });
+
+  const parents = organisation?.subsidiaries?.filter(s => s.is_parent) ?? [];
+
+  return (
+    <>
+      <PageSection heading={t("heading")} description={t("description")}>
+        <div>
+          <OrganisationsSubsidiariesTable
+            data={parents}
+            t={t}
+            isPaginated={false}
+            onEdit={parent => setActiveParent(parent)}
+            onDelete={parent =>
+              showConfirm({
+                params: {
+                  subsidiaryId: parent.id,
+                  organisationId: organisation.id,
+                  isParent: true,
+                },
+              })
+            }
+          />
+        </div>
+        <Button
+          variant="outlined"
+          onClick={() => setActiveParent({})}
+          sx={{ mt: 2 }}>
+          {t("addParentButton")}
+        </Button>
+      </PageSection>
+      <FormModal
+        open={!!activeParent}
+        heading={activeParent?.id ? t("edit") : t("add")}>
+        <OrganisationsSubsidiaryEditForm
+          t={t}
+          mutateState={restUpdateState}
+          defaultValues={activeParent}
+          onCancel={() => setActiveParent(undefined)}
+          onSubmit={(payload: Subsidiary | Partial<Subsidiary>) => {
+            mutateUpdateAysnc({
+              payload: { ...payload, is_parent: true },
+              params: {
+                organisationId: organisation.id,
+                subsidiaryId: activeParent?.id,
+              },
+            });
+          }}
+        />
+      </FormModal>
+    </>
+  );
+}

src/organisms/OrganisationsParents/index.ts

@@ -0,0 +1,3 @@
+import OrganisationsParents from "./OrganisationsParents";
+
+export default OrganisationsParents;

src/organisms/OrganisationsSubsidiaries/OrganisationsSubsidiaries.tsx

@@ -49,10 +49,7 @@ export default function OrganisationsSubsidiaries({
 
   return (
     <>
-      <PageSection
-        heading={t("heading")}
-        description="If your Organisation is based internationally, please add any
-            UK-based subsidiaries below.">
+      <PageSection heading={t("heading")} description={t("description")}>
         <div>
           <OrganisationsSubsidiariesTable
             data={organisation?.subsidiaries || []}
@@ -78,7 +75,7 @@ export default function OrganisationsSubsidiaries({
       </PageSection>
       <FormModal
         open={!!activeSubsidiary}
-        heading={activeSubsidiary?.id ? "Edit subsidiary" : "Add subsidiary"}>
+        heading={activeSubsidiary?.id ? t("edit") : t("add")}>
         <OrganisationsSubsidiaryEditForm
           t={t}
           mutateState={restUpdateState}

src/services/subsidiaries/deleteSubsidiaryQuery.ts

@@ -3,19 +3,25 @@ import { MutateWithArgs, MutationOptions } from "@/types/requests";
 import deleteSubsidiary from "@/app/actions/subsidiaries/deleteSubsidiary";
 
 type DeleteSubsidiaryMutationArgs = MutateWithArgs<
-  { organisationId: number; subsidiaryId: number },
+  { organisationId: number; subsidiaryId: number; isParent?: boolean },
   undefined
 >;
 
 export default function deleteSubsidiaryQuery(options?: MutationOptions) {
   return {
     mutationKey: ["deleteSubsidiary", ...(options?.mutationKeySuffix || [])],
     mutationFn: ({ params }: DeleteSubsidiaryMutationArgs) => {
-      return deleteSubsidiary(params.subsidiaryId, params.organisationId, {
-        error: { message: "deleteSubsidiaryError" },
-        ...options?.responseOptions,
-      });
+      return deleteSubsidiary(
+        params.subsidiaryId,
+        params.organisationId,
+        {
+          error: { message: "deleteSubsidiaryError" },
+          ...options?.responseOptions,
+        },
+        params?.isParent
+      );
     },
+
     ...options,
   } as UseMutationOptions<
     Awaited<ReturnType<typeof deleteSubsidiary>>,

src/types/application.ts

@@ -241,6 +241,7 @@ interface Subsidiary extends AddressFields {
     subsidiary_id: number;
   };
   website?: string;
+  is_parent?: boolean;
 }
 
 interface Charity extends AddressFields {