PSP-7177 h120 dropdowns typeahead

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx

@@ -259,7 +259,11 @@
           {compensation.fiscalYear ?? ''}
         </SectionField>
         <SectionField label="STOB" labelWidth="4">
-          {compensation.yearlyFinancial?.code ?? ''} - {compensation.yearlyFinancial?.description}
+          {compensation.yearlyFinancial && (
+            <label>
+              {compensation.yearlyFinancial?.code} - {compensation.yearlyFinancial?.description}
+            </label>
+          )}
         </SectionField>
         <SectionField label="Service line" labelWidth="4">
           {compensation.chartOfAccounts && (

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap

@@ -688,9 +688,7 @@ exports[`Compensation Detail View Component renders as expected 1`] = `
           </div>
           <div
             class="c8 text-left col"
-          >
-             - 
-          </div>
+          />
         </div>
         <div
           class="pb-2 row"

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/CompensationRequisitionYupSchema.ts

@@ -25,7 +25,7 @@ export const CompensationRequisitionYupSchema = yup.object().shape({
   }),
   financials: yup.array().of(
     yup.object().shape({
-      financialActivityCodeId: yup.string().required('Activity code is required'),
+      financialActivityCodeId: yup.object().required('Activity code is required'),
       isGstRequired: yup.string(),
       pretaxAmount: yup
         .number()

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.test.tsx

@@ -11,7 +11,7 @@ import { mockLookups } from '@/mocks/lookups.mock';
 import { Api_FinancialCode } from '@/models/api/FinancialCode';
 import { lookupCodesSlice } from '@/store/slices/lookupCodes';
 import { systemConstantsSlice } from '@/store/slices/systemConstants/systemConstantsSlice';
-import { act, render, RenderOptions, waitFor } from '@/utils/test-utils';
+import { act, render, RenderOptions, waitFor, waitForEffects } from '@/utils/test-utils';
 
 import { CompensationRequisitionFormModel } from './models';
 import UpdateCompensationRequisitionContainer, {
@@ -38,28 +38,7 @@ jest.mock('@/hooks/repositories/useAcquisitionProvider', () => ({
       getAcquisitionOwners: {
         error: undefined,
         response: mockAcquisitionFileOwnersResponse(1),
-        execute: jest.fn().mockReturnValue(mockAcquisitionFileOwnersResponse(1)),
-        loading: false,
-      },
-      getAcquisitionFileSolicitors: {
-        execute: jest.fn(),
-        loading: false,
-      },
-      getAcquisitionFileRepresentatives: {
-        execute: jest.fn(),
-        loading: false,
-      },
-    };
-  },
-}));
-
-jest.mock('@/hooks/repositories/useAcquisitionProvider', () => ({
-  useAcquisitionProvider: () => {
-    return {
-      getAcquisitionOwners: {
-        error: undefined,
-        response: mockAcquisitionFileOwnersResponse(1),
-        execute: jest.fn().mockReturnValue(mockAcquisitionFileOwnersResponse(1)),
+        execute: jest.fn().mockResolvedValue(mockAcquisitionFileOwnersResponse(1)),
         loading: false,
       },
       getAcquisitionFileSolicitors: {
@@ -85,29 +64,6 @@ jest.mock('@/hooks/repositories/useInterestHolderRepository', () => ({
   },
 }));
 
-jest.mock('@/hooks/repositories/useFinancialCodeRepository', () => ({
-  useInterestHolderRepository: () => {
-    return {
-      getFinancialActivityCodeTypes: {
-        execute: jest.fn(),
-        loading: false,
-      },
-      getChartOfAccountsCodeTypes: {
-        execute: jest.fn(),
-        loading: false,
-      },
-      getYearlyFinancialsCodeTypes: {
-        execute: jest.fn(),
-        loading: false,
-      },
-      getResponsibilityCodeTypes: {
-        execute: jest.fn(),
-        loading: false,
-      },
-    };
-  },
-}));
-
 const mockGetApi = {
   error: undefined,
   response: [],
@@ -174,12 +130,12 @@ describe('UpdateCompensationRequisition Container component', () => {
     jest.clearAllMocks();
   });
 
-  it('Renders the underlying form', async () => {
+  it('renders the underlying form', async () => {
     const { getByText } = await setup();
     expect(getByText(/Content Rendered/)).toBeVisible();
   });
 
-  it('Calls onSuccess when the compensation is saved successfully', async () => {
+  it('calls onSuccess when the compensation is saved successfully', async () => {
     const mockCompensationUpdate = getMockApiDefaultCompensation();
     await setup({
       props: { compensation: mockCompensationUpdate },
@@ -198,7 +154,7 @@ describe('UpdateCompensationRequisition Container component', () => {
     expect(onSuccess).toHaveBeenCalled();
   });
 
-  it('does not call onSucess if the returned value is invalid', async () => {
+  it('does not call onSuccess if the returned value is invalid', async () => {
     const mockCompensationUpdate = getMockApiDefaultCompensation();
     mockUpdateCompensation.mockResolvedValue(undefined);
 
@@ -222,6 +178,8 @@ describe('UpdateCompensationRequisition Container component', () => {
       props: { compensation: mockCompensationUpdate },
     });
 
+    await waitForEffects();
+
     mockCompensationUpdate.detailedRemarks = 'my update';
     mockUpdateCompensation.mockResolvedValue(mockCompensationUpdate);
 
@@ -238,15 +196,11 @@ describe('UpdateCompensationRequisition Container component', () => {
 
     updatedCompensationModel.payee.payeeKey = testPayeeOption.value;
 
-    setTimeout(async () => {
-      await act(async () => {
-        await viewProps?.onSave(updatedCompensationModel);
-      });
+    await act(async () => viewProps?.onSave(updatedCompensationModel));
 
-      expect(mockUpdateCompensation).toHaveBeenCalledWith(
-        updatedCompensationModel.toApi([testPayeeOption]),
-      );
-    }, 500);
+    expect(mockUpdateCompensation).toHaveBeenCalledWith(
+      updatedCompensationModel.toApi([testPayeeOption]),
+    );
   });
 
   it('filters expired financial codes when updating', async () => {

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.tsx

@@ -231,7 +231,13 @@ const UpdateCompensationRequisitionContainer: React.FC<
         loadingYearlyFinancials ||
         loadingInterestHolders
       }
-      initialValues={CompensationRequisitionFormModel.fromApi(compensation)}
+      initialValues={CompensationRequisitionFormModel.fromApi(
+        compensation,
+        yearlyFinancialOptions,
+        chartOfAccountOptions,
+        responsibilityCentreOptions,
+        financialActivityOptions,
+      )}
       payeeOptions={payeeOptions}
       gstConstant={gstDecimalPercentage ?? 0}
       financialActivityOptions={financialActivityOptions}

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx

@@ -14,6 +14,7 @@ import {
   SelectOption,
   TextArea,
 } from '@/components/common/form';
+import { TypeaheadSelect } from '@/components/common/form/TypeaheadSelect';
 import { UnsavedChangesPrompt } from '@/components/common/form/UnsavedChangesPrompt';
 import GenericModal from '@/components/common/GenericModal';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
@@ -220,20 +221,15 @@ const UpdateCompensationRequisitionForm: React.FC<CompensationRequisitionFormPro
                   <Select field="fiscalYear" options={fiscalYearOptions} placeholder="Select..." />
                 </SectionField>
                 <SectionField label="STOB" labelWidth="4" required>
-                  <Select field="stob" options={yearlyFinancialOptions} placeholder="Select..." />
+                  <TypeaheadSelect field="stob" options={yearlyFinancialOptions} />
                 </SectionField>
                 <SectionField label="Service line" labelWidth="4" required>
-                  <Select
-                    field="serviceLine"
-                    options={chartOfAccountsOptions}
-                    placeholder="Select..."
-                  />
+                  <TypeaheadSelect field="serviceLine" options={chartOfAccountsOptions} />
                 </SectionField>
                 <SectionField label="Responsibility centre" labelWidth="4" required>
-                  <Select
+                  <TypeaheadSelect
                     field="responsibilityCentre"
                     options={responsiblityCentreOptions}
-                    placeholder="Select..."
                   />
                 </SectionField>
               </Section>
@@ -314,8 +310,8 @@ const UpdateCompensationRequisitionForm: React.FC<CompensationRequisitionFormPro
             <StyledFooter>
               <SidebarFooter
                 onSave={async () => {
-                  await formikRef?.current?.validateForm();
-                  if (!formikRef?.current?.isValid) {
+                  await formikProps.validateForm();
+                  if (!formikProps.isValid) {
                     setIsValid(false);
                   } else {
                     setIsValid(true);