PSP-9520 Acquisition files- Additional fields to be moved from H120 t…

…o F forms (Front-end) (#4587)

source/backend/apimodels/Models/Concepts/CompensationRequisition/CompensationRequisitionMap.cs

@@ -23,8 +23,6 @@ public void Register(TypeAdapterConfig config)
                 .Map(dest => dest.Responsibility, src => src.Responsibility)
                 .Map(dest => dest.FinalizedDate, src => src.FinalizedDate)
                 .Map(dest => dest.AgreementDate, src => src.AgreementDt)
-                .Map(dest => dest.ExpropriationNoticeServedDate, src => src.ExpropNoticeServedDt)
-                .Map(dest => dest.ExpropriationVestingDate, src => src.ExpropVestingDt)
                 .Map(dest => dest.GenerationDate, src => src.GenerationDt)
                 .Map(dest => dest.Financials, src => src.PimsCompReqFinancials)
                 .Map(dest => dest.AcquisitionOwnerId, src => src.AcquisitionOwnerId)
@@ -57,8 +55,6 @@ public void Register(TypeAdapterConfig config)
                 .Map(dest => dest.ResponsibilityId, src => src.ResponsibilityId)
                 .Map(dest => dest.FinalizedDate, src => src.FinalizedDate)
                 .Map(dest => dest.AgreementDt, src => src.AgreementDate)
-                .Map(dest => dest.ExpropNoticeServedDt, src => src.ExpropriationNoticeServedDate)
-                .Map(dest => dest.ExpropVestingDt, src => src.ExpropriationVestingDate)
                 .Map(dest => dest.GenerationDt, src => src.GenerationDate)
                 .Map(dest => dest.PimsCompReqFinancials, src => src.Financials)
                 .Map(dest => dest.AcquisitionOwnerId, src => src.AcquisitionOwnerId)

source/backend/apimodels/Models/Concepts/CompensationRequisition/CompensationRequisitionModel.cs

@@ -38,10 +38,6 @@ public class CompensationRequisitionModel : BaseAuditModel
 
         public DateOnly? AgreementDate { get; set; }
 
-        public DateOnly? ExpropriationNoticeServedDate { get; set; }
-
-        public DateOnly? ExpropriationVestingDate { get; set; }
-
         public DateOnly? GenerationDate { get; set; }
 
         public List<CompensationFinancialModel> Financials { get; set; }

source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/hooks/useGenerateExpropriationForm1.test.tsx

@@ -8,15 +8,17 @@ import { useDocumentGenerationRepository } from '@/features/documents/hooks/useD
 import { useApiContacts } from '@/hooks/pims-api/useApiContacts';
 import { useAcquisitionProvider } from '@/hooks/repositories/useAcquisitionProvider';
 import { useInterestHolderRepository } from '@/hooks/repositories/useInterestHolderRepository';
+import { fromContactSummary } from '@/interfaces';
 import { mockAcquisitionFileResponse } from '@/mocks/acquisitionFiles.mock';
 import { getMockContactOrganizationWithOnePerson } from '@/mocks/contacts.mock';
+import { DocumentGenerationRequest } from '@/models/api/DocumentGenerationRequest';
 import { ApiGen_CodeTypes_ExternalResponseStatus } from '@/models/api/generated/ApiGen_CodeTypes_ExternalResponseStatus';
+import { ApiGen_CodeTypes_FormTypes } from '@/models/api/generated/ApiGen_CodeTypes_FormTypes';
 import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
-import { ApiGen_Concepts_Property } from '@/models/api/generated/ApiGen_Concepts_Property';
+import { Api_GenerateExpropriationForm1 } from '@/models/generate/acquisition/GenerateExpropriationForm1';
 
 import { ExpropriationForm1Model } from '../../../tabs/expropriation/models';
 import { useGenerateExpropriationForm1 } from './useGenerateExpropriationForm1';
-import { fromContactSummary } from '@/interfaces';
 
 const generateFn = vi
   .fn()
@@ -126,6 +128,24 @@ describe('useGenerateExpropriationForm1 functions', () => {
     expect(getOrganizationConceptFn).toHaveBeenCalled();
   });
 
+  it(`sends "Expropriation notice served date" in the json payload to generation api`, async () => {
+    const generate = setup();
+    const expropriationModel = new ExpropriationForm1Model();
+    expropriationModel.expropriationNoticeServedDate = '2024-10-05';
+
+    await act(async () => generate(1, expropriationModel));
+
+    const generateRequest: DocumentGenerationRequest = {
+      templateType: ApiGen_CodeTypes_FormTypes.FORM1.toString(),
+      convertToType: null,
+      templateData: expect.objectContaining<Partial<Api_GenerateExpropriationForm1>>({
+        notice_served_date: '2024-10-05',
+      }),
+    };
+
+    expect(generateFn).toHaveBeenCalledWith(generateRequest);
+  });
+
   it('throws an error if no acquisition file is found', async () => {
     const generate = setup();
     getAcquisitionFileFn.mockResolvedValue(undefined);

source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/hooks/useGenerateExpropriationForm1.tsx

@@ -73,6 +73,7 @@ export const useGenerateExpropriationForm1 = () => {
       impactedProperties: selectedProperties,
       landInterest: formModel?.landInterest,
       purpose: formModel?.purpose,
+      expropriationNoticeServedDate: formModel?.expropriationNoticeServedDate,
     });
 
     const generatedFile = await generate({

source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/hooks/useGenerateExpropriationForm9.test.tsx

@@ -8,15 +8,17 @@ import { useDocumentGenerationRepository } from '@/features/documents/hooks/useD
 import { useApiContacts } from '@/hooks/pims-api/useApiContacts';
 import { useAcquisitionProvider } from '@/hooks/repositories/useAcquisitionProvider';
 import { useInterestHolderRepository } from '@/hooks/repositories/useInterestHolderRepository';
+import { fromContactSummary } from '@/interfaces';
 import { mockAcquisitionFileResponse } from '@/mocks/acquisitionFiles.mock';
 import { getMockContactOrganizationWithOnePerson } from '@/mocks/contacts.mock';
+import { DocumentGenerationRequest } from '@/models/api/DocumentGenerationRequest';
 import { ApiGen_CodeTypes_ExternalResponseStatus } from '@/models/api/generated/ApiGen_CodeTypes_ExternalResponseStatus';
+import { ApiGen_CodeTypes_FormTypes } from '@/models/api/generated/ApiGen_CodeTypes_FormTypes';
 import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
-import { ApiGen_Concepts_Property } from '@/models/api/generated/ApiGen_Concepts_Property';
+import { Api_GenerateExpropriationForm9 } from '@/models/generate/acquisition/GenerateExpropriationForm9';
 
 import { ExpropriationForm9Model } from '../../../tabs/expropriation/models';
 import { useGenerateExpropriationForm9 } from './useGenerateExpropriationForm9';
-import { fromContactSummary } from '@/interfaces';
 
 const generateFn = vi
   .fn()
@@ -87,7 +89,7 @@ const setup = (params?: {
   return result.current;
 };
 
-describe('useGenerateExpropriationForm5 functions', () => {
+describe('useGenerateExpropriationForm9 functions', () => {
   it('makes requests to expected api endpoints', async () => {
     const generate = setup();
     await act(async () => generate(1, new ExpropriationForm9Model()));
@@ -112,6 +114,24 @@ describe('useGenerateExpropriationForm5 functions', () => {
     expect(getOrganizationConceptFn).toHaveBeenCalled();
   });
 
+  it(`sends "Expropriation vesting date" in the json payload to generation api`, async () => {
+    const generate = setup();
+    const expropriationModel = new ExpropriationForm9Model();
+    expropriationModel.expropriationVestingDate = '2024-10-05';
+
+    await act(async () => generate(1, expropriationModel));
+
+    const generateRequest: DocumentGenerationRequest = {
+      templateType: ApiGen_CodeTypes_FormTypes.FORM9.toString(),
+      convertToType: null,
+      templateData: expect.objectContaining<Partial<Api_GenerateExpropriationForm9>>({
+        vesting_date: '2024-10-05',
+      }),
+    };
+
+    expect(generateFn).toHaveBeenCalledWith(generateRequest);
+  });
+
   it('throws an error if no acquisition file is found', async () => {
     const generate = setup();
     getAcquisitionFileFn.mockResolvedValue(undefined);

source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/hooks/useGenerateExpropriationForm9.tsx

@@ -53,6 +53,7 @@ export const useGenerateExpropriationForm9 = () => {
       expropriationAuthority: expAuthority?.data ?? null,
       impactedProperties: selectedProperties,
       registeredPlanNumbers: formModel?.registeredPlanNumbers ?? '',
+      expropriationVestingDate: formModel?.expropriationVestingDate ?? '',
     });
 
     const generatedFile = await generate({

source/frontend/src/features/mapSideBar/acquisition/models/PayeeOptionModel.ts

@@ -100,8 +100,6 @@ export class PayeeOption {
       responsibilityId: null,
       responsibility: null,
       agreementDate: null,
-      expropriationNoticeServedDate: null,
-      expropriationVestingDate: null,
       generationDate: null,
       financials: [],
       compReqLeaseStakeholder: [],

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/ExpropriationForm1.tsx

@@ -5,7 +5,7 @@ import { FaFileContract } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { Button } from '@/components/common/buttons';
-import { Input } from '@/components/common/form';
+import { FastDatePicker, Input } from '@/components/common/form';
 import { ContactInputContainer } from '@/components/common/form/ContactInput/ContactInputContainer';
 import ContactInputView from '@/components/common/form/ContactInput/ContactInputView';
 import FormItem from '@/components/common/form/FormItem';
@@ -95,6 +95,9 @@ export const ExpropriationForm1: React.FC<IExpropriationForm1Props> = ({
           <SectionField label="Purpose of expropriation">
             <Input field="purpose" />
           </SectionField>
+          <SectionField label="Expropriation notice served date">
+            <FastDatePicker field="expropriationNoticeServedDate" formikProps={formikProps} />
+          </SectionField>
 
           <RightFlexRow>
             <Col xs="auto" className="pr-4">

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/ExpropriationForm1YupSchema.ts

@@ -2,6 +2,7 @@
 import * as yup from 'yup';
 
 export const ExpropriationForm1YupSchema = yup.object().shape({
+  expropriationNoticeServedDate: yup.string(),
   impactedProperties: yup.array().min(1, 'At lease one impacted property is required'),
   expropriationAuthority: yup.object().shape({
     contact: yup.object().required('Expropriation authority is required').nullable(),

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap

@@ -590,6 +590,90 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
       </div>
     </div>
   </div>
+  .c2 .react-datepicker__calendar-icon {
+  width: 2.4rem;
+  height: 3rem;
+  margin-top: 0.5rem;
+  margin-right: 1.2rem;
+  right: 0;
+  fill: var(--surface-color-primary-button-default);
+  pointer-events: none;
+}
+
+.c2 .react-datepicker__view-calendar-icon input {
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
+}
+
+.c2 .react-datepicker-wrapper {
+  max-width: 17rem;
+}
+
+.c3.c3.form-control.is-valid {
+  background-image: none;
+}
+
+.c3.c3.form-control.is-invalid {
+  border-color: #d8292f !important;
+}
+
+.c1.required::before {
+  content: '*';
+  position: absolute;
+  top: 0.75rem;
+  left: 0rem;
+}
+
+.c0 {
+  font-weight: bold;
+}
+
+<div
+    class="pb-2 row"
+  >
+    <div
+      class="pr-0 text-left col-4"
+    >
+      <label
+        class="c0"
+      >
+        Expropriation notice served date:
+      </label>
+    </div>
+    <div
+      class="c1 text-left col"
+    >
+      <div
+        class="c2 form-group"
+      >
+        <div
+          class="react-datepicker-wrapper d-block"
+        >
+          <div
+            class="react-datepicker__input-container react-datepicker__view-calendar-icon"
+          >
+            <svg
+              class="react-datepicker__calendar-icon"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"
+              />
+            </svg>
+            <input
+              autocomplete="off"
+              class="c3 form-control date-picker"
+              id="datepicker-expropriationNoticeServedDate"
+              name="expropriationNoticeServedDate"
+              placeholder="MMM DD, YYYY"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   .c1.btn {
   display: -webkit-box;
   display: -webkit-flex;

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/ExpropriationForm9.tsx

@@ -5,7 +5,7 @@ import { FaFileContract } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import { Button } from '@/components/common/buttons';
-import { Input } from '@/components/common/form';
+import { FastDatePicker, Input } from '@/components/common/form';
 import { ContactInputContainer } from '@/components/common/form/ContactInput/ContactInputContainer';
 import ContactInputView from '@/components/common/form/ContactInput/ContactInputView';
 import FormItem from '@/components/common/form/FormItem';
@@ -92,6 +92,9 @@ export const ExpropriationForm9: React.FC<IExpropriationForm9Props> = ({
           <SectionField label="Shown on plan(s)">
             <Input field="registeredPlanNumbers" />
           </SectionField>
+          <SectionField label="Expropriation vesting date">
+            <FastDatePicker field="expropriationVestingDate" formikProps={formikProps} />
+          </SectionField>
 
           <RightFlexRow>
             <Col xs="auto" className="pr-4">

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/ExpropriationForm9YupSchema.ts

@@ -2,6 +2,7 @@
 import * as yup from 'yup';
 
 export const ExpropriationForm9YupSchema = yup.object().shape({
+  expropriationVestingDate: yup.string(),
   impactedProperties: yup.array().min(1, 'At lease one impacted property is required'),
   expropriationAuthority: yup.object().shape({
     contact: yup.object().required('Expropriation authority is required').nullable(),

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap

@@ -551,6 +551,90 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
       </div>
     </div>
   </div>
+  .c2 .react-datepicker__calendar-icon {
+  width: 2.4rem;
+  height: 3rem;
+  margin-top: 0.5rem;
+  margin-right: 1.2rem;
+  right: 0;
+  fill: var(--surface-color-primary-button-default);
+  pointer-events: none;
+}
+
+.c2 .react-datepicker__view-calendar-icon input {
+  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
+}
+
+.c2 .react-datepicker-wrapper {
+  max-width: 17rem;
+}
+
+.c3.c3.form-control.is-valid {
+  background-image: none;
+}
+
+.c3.c3.form-control.is-invalid {
+  border-color: #d8292f !important;
+}
+
+.c1.required::before {
+  content: '*';
+  position: absolute;
+  top: 0.75rem;
+  left: 0rem;
+}
+
+.c0 {
+  font-weight: bold;
+}
+
+<div
+    class="pb-2 row"
+  >
+    <div
+      class="pr-0 text-left col-4"
+    >
+      <label
+        class="c0"
+      >
+        Expropriation vesting date:
+      </label>
+    </div>
+    <div
+      class="c1 text-left col"
+    >
+      <div
+        class="c2 form-group"
+      >
+        <div
+          class="react-datepicker-wrapper d-block"
+        >
+          <div
+            class="react-datepicker__input-container react-datepicker__view-calendar-icon"
+          >
+            <svg
+              class="react-datepicker__calendar-icon"
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"
+              />
+            </svg>
+            <input
+              autocomplete="off"
+              class="c3 form-control date-picker"
+              id="datepicker-expropriationVestingDate"
+              name="expropriationVestingDate"
+              placeholder="MMM DD, YYYY"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   .c1.btn {
   display: -webkit-box;
   display: -webkit-flex;