PSP-5715 : Sec3/Sec6 add forms to acquisition file

source/backend/api/Services/CompensationRequisitionService.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Security.Claims;
+using DocumentFormat.OpenXml.Office2010.Excel;
 using Microsoft.Extensions.Logging;
 using Pims.Core.Extensions;
 using Pims.Dal.Entities;

source/frontend/src/components/common/TabView.tsx

@@ -15,9 +15,6 @@ const TabView: React.FunctionComponent<
 };
 
 const StyledTabWrapper = styled.div`
-  .nav-tabs {
-    height: 2.4rem;
-  }
   .tab-content {
     .tab-pane {
       position: relative;

source/frontend/src/components/common/styles.ts

@@ -86,13 +86,14 @@ export const Tabs = styled(BsTabs)`
   font-size: 1.4rem;
   border-color: transparent;
   .nav-tabs {
-    height: 2.4rem;
+    height: auto;
   }
   .nav-item {
     min-width: 5rem;
     padding: 0.1rem 0.6rem;
 
     &:hover {
+      color: ${props => props.theme.css.secondaryVariantColor};
       border-color: transparent;
     }
     &.active {

source/frontend/src/features/mapSideBar/acquisition/tabs/AcquisitionFileTabs.test.tsx

@@ -78,4 +78,51 @@ describe('AcquisitionFileTabs component', () => {
       expect(getByText('Documents')).toHaveClass('active');
     });
   });
+
+  it('hides the expropiation tab when the Acquisition file type is "Consensual Agreement"', () => {
+    const { queryByText } = setup({
+      acquisitionFile: mockAcquisitionFileResponse(),
+      defaultTab: FileTabType.FILE_DETAILS,
+      setContainerState,
+    });
+
+    const expropiationButton = queryByText('Expropiation');
+    expect(expropiationButton).not.toBeInTheDocument();
+  });
+
+  it('shows the expropiation tab when the Acquisition file type is "Section 3"', () => {
+    const mockAcquisitionFile = mockAcquisitionFileResponse();
+    mockAcquisitionFile.acquisitionTypeCode = {
+      id: 'SECTN3',
+      description: 'Section 3 Agreement',
+      isDisabled: false,
+    };
+
+    const { queryByText } = setup({
+      acquisitionFile: mockAcquisitionFile,
+      defaultTab: FileTabType.FILE_DETAILS,
+      setContainerState,
+    });
+
+    const editButton = queryByText('Expropiation');
+    expect(editButton).toBeInTheDocument();
+  });
+
+  it('shows the expropiation tab when the Acquisition file type is "Section 6"', () => {
+    const mockAcquisitionFile = mockAcquisitionFileResponse();
+    mockAcquisitionFile.acquisitionTypeCode = {
+      id: 'SECTN6',
+      description: 'Section 6 Expropriation',
+      isDisabled: false,
+    };
+
+    const { queryByText } = setup({
+      acquisitionFile: mockAcquisitionFile,
+      defaultTab: FileTabType.FILE_DETAILS,
+      setContainerState,
+    });
+
+    const editButton = queryByText('Expropiation');
+    expect(editButton).toBeInTheDocument();
+  });
 });

source/frontend/src/features/mapSideBar/acquisition/tabs/AcquisitionFileTabs.tsx

@@ -7,7 +7,7 @@ import { NoteTypes } from '@/constants/noteTypes';
 import NoteListView from '@/features/notes/list/NoteListView';
 import ActivityListView from '@/features/properties/map/activity/list/ActivityListView';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
-import { Api_AcquisitionFile } from '@/models/api/AcquisitionFile';
+import { Api_AcquisitionFile, EnumAcquisitionFileType } from '@/models/api/AcquisitionFile';
 
 import { FileTabs, FileTabType, TabFileView } from '../../shared/detail/FileTabs';
 import { AcquisitionContainerState } from '../AcquisitionContainer';
@@ -18,6 +18,8 @@ import { AcquisitionChecklistView } from './checklist/detail/AcquisitionChecklis
 import CompensationListContainer from './compensation/list/CompensationListContainer';
 import CompensationListView from './compensation/list/CompensationListView';
 import AcquisitionDocumentsTab from './documents/AcquisitionDocumentsTab';
+import ExpropiationTabContainer from './expropiation/ExpropiationTabContainer';
+import ExpropiationTabcontainerView from './expropiation/ExpropiationTabContainerView';
 import AcquisitionSummaryView from './fileDetails/detail/AcquisitionSummaryView';
 import StakeHolderContainer from './stakeholders/detail/StakeHolderContainer';
 import StakeHolderView from './stakeholders/detail/StakeHolderView';
@@ -155,6 +157,24 @@ export const AcquisitionFileTabs: React.FC<IAcquisitionFileTabsProps> = ({
     });
   }
 
+  if (
+    acquisitionFile?.id &&
+    (acquisitionFile.acquisitionTypeCode?.id === EnumAcquisitionFileType.SECTN3 ||
+      acquisitionFile.acquisitionTypeCode?.id === EnumAcquisitionFileType.SECTN6)
+  ) {
+    tabViews.push({
+      content: (
+        <ExpropiationTabContainer
+          acquisitionFileId={acquisitionFile.id}
+          acquisitionFileTypeCode={acquisitionFile.acquisitionTypeCode?.id}
+          View={ExpropiationTabcontainerView}
+        ></ExpropiationTabContainer>
+      ),
+      key: FileTabType.EXPROPIATION,
+      name: 'Expropiation',
+    });
+  }
+
   const onSetActiveTab = (tab: FileTabType) => {
     let previousTab = activeTab;
     setActiveTab(tab);

source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap

@@ -176,7 +176,7 @@ exports[`AcquisitionFileTabs component matches snapshot 1`] = `
 }
 
 .c1 .nav-tabs {
-  height: 2.4rem;
+  height: auto;
 }
 
 .c1 .nav-item {
@@ -223,10 +223,6 @@ exports[`AcquisitionFileTabs component matches snapshot 1`] = `
   height: 100%;
 }
 
-.c0 .nav-tabs {
-  height: 2.4rem;
-}
-
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   height: calc(100% - 2.4rem);

source/frontend/src/features/mapSideBar/acquisition/tabs/expropiation/ExpropiationTabContainer.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import { SideBarContext } from '@/features/mapSideBar/context/sidebarContext';
+
+import { IExpropiationTabcontainerViewProps } from './ExpropiationTabContainerView';
+
+export interface IExpropiationTabContainer {
+  acquisitionFileId: number;
+  acquisitionFileTypeCode: string;
+  View: React.FunctionComponent<React.PropsWithChildren<IExpropiationTabcontainerViewProps>>;
+}
+
+export const ExpropiationTabContainer: React.FunctionComponent<
+  React.PropsWithChildren<IExpropiationTabContainer>
+> = ({ View, acquisitionFileTypeCode }) => {
+  const { file, fileLoading } = useContext(SideBarContext);
+  if (!!file && file?.id === undefined && fileLoading === false) {
+    throw new Error('Unable to determine id of current file.');
+  }
+
+  return !!file?.id ? (
+    <>
+      <View loading={fileLoading} acquisitionFileTypeCode={acquisitionFileTypeCode}></View>
+    </>
+  ) : null;
+};
+
+export default ExpropiationTabContainer;

source/frontend/src/features/mapSideBar/acquisition/tabs/expropiation/ExpropiationTabContainerView.test.tsx

@@ -0,0 +1,58 @@
+import { EnumAcquisitionFileType } from '@/models/api/AcquisitionFile';
+import { render, RenderOptions } from '@/utils/test-utils';
+
+import ExpropiationTabcontainerView, {
+  IExpropiationTabcontainerViewProps,
+} from './ExpropiationTabContainerView';
+
+describe('Expropiatin Tab Container View', () => {
+  const setup = async (
+    renderOptions: RenderOptions & { props?: Partial<IExpropiationTabcontainerViewProps> },
+  ) => {
+    const utils = render(
+      <ExpropiationTabcontainerView
+        {...renderOptions.props}
+        loading={renderOptions.props?.loading ?? false}
+        acquisitionFileTypeCode={
+          renderOptions.props?.acquisitionFileTypeCode ?? EnumAcquisitionFileType.SECTN6
+        }
+      />,
+      {
+        ...renderOptions,
+      },
+    );
+
+    return {
+      ...utils,
+    };
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays a loading spinner when loading', async () => {
+    const { getByTestId } = await setup({ props: { loading: true } });
+    const spinner = getByTestId('filter-backdrop-loading');
+    expect(spinner).toBeVisible();
+  });
+
+  it('shows the sections for Acquisition file type "Section 6"', async () => {
+    const { queryByTestId } = await setup({});
+    expect(queryByTestId('form-1-section')).toBeInTheDocument();
+    expect(queryByTestId('form-5-section')).toBeInTheDocument();
+    expect(queryByTestId('form-8-section')).toBeInTheDocument();
+    expect(queryByTestId('form-9-section')).toBeInTheDocument();
+  });
+
+  it('shows the sections for Acquisition file type "Section 3"', async () => {
+    const { queryByTestId } = await setup({
+      props: { acquisitionFileTypeCode: EnumAcquisitionFileType.SECTN3 },
+    });
+
+    expect(queryByTestId('form-1-section')).not.toBeInTheDocument();
+    expect(queryByTestId('form-5-section')).not.toBeInTheDocument();
+    expect(queryByTestId('form-8-section')).toBeInTheDocument();
+    expect(queryByTestId('form-9-section')).not.toBeInTheDocument();
+  });
+});

source/frontend/src/features/mapSideBar/acquisition/tabs/expropiation/ExpropiationTabContainerView.tsx

@@ -0,0 +1,35 @@
+import LoadingBackdrop from '@/components/common/LoadingBackdrop';
+import { Section } from '@/components/common/Section/Section';
+import { EnumAcquisitionFileType } from '@/models/api/AcquisitionFile';
+
+export interface IExpropiationTabcontainerViewProps {
+  loading: boolean;
+  acquisitionFileTypeCode: string;
+}
+
+export const ExpropiationTabcontainerView: React.FunctionComponent<
+  IExpropiationTabcontainerViewProps
+> = ({ loading, acquisitionFileTypeCode }) => {
+  // TODO : Load created Forms
+
+  return (
+    <>
+      <LoadingBackdrop show={loading} />
+      {acquisitionFileTypeCode === EnumAcquisitionFileType.SECTN6 && (
+        <Section header="Form 1 - Notice of Expropiation" data-testid="form-1-section"></Section>
+      )}
+
+      {acquisitionFileTypeCode === EnumAcquisitionFileType.SECTN6 && (
+        <Section header="Form 5 - Certificate of Approval" data-testid="form-5-section"></Section>
+      )}
+
+      <Section header="Form 8 - Notice of Advance Payment" data-testid="form-8-section"></Section>
+
+      {acquisitionFileTypeCode === EnumAcquisitionFileType.SECTN6 && (
+        <Section header="Form 9 - Vesting Notice" data-testid="form-9-section"></Section>
+      )}
+    </>
+  );
+};
+
+export default ExpropiationTabcontainerView;

source/frontend/src/features/mapSideBar/shared/detail/FileTabs.tsx

@@ -26,6 +26,7 @@ export enum FileTabType {
   AGREEMENTS = 'agreements',
   COMPENSATIONS = 'compensations',
   STAKEHOLDERS = 'stakeholders',
+  EXPROPIATION = 'expropiation',
 }
 /**
  * Tab wrapper, provides styling and nests form components within their corresponding tabs.

source/frontend/src/models/api/AcquisitionFile.ts

@@ -11,6 +11,12 @@ import { Api_Person } from './Person';
 import { Api_Product, Api_Project } from './Project';
 import { Api_PropertyFile } from './PropertyFile';
 
+export enum EnumAcquisitionFileType {
+  CONSEN = 'CONSEN',
+  SECTN3 = 'SECTN3',
+  SECTN6 = 'SECTN6',
+}
+
 export interface Api_AcquisitionFile extends Api_ConcurrentVersion, Api_AuditFields, Api_File {
   id?: number;
   fileNo?: number;