From 23b810b3dcd02bb4d1d3c8f43091d8f6adcc903e Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Fri, 17 Nov 2023 21:14:59 -0800
Subject: [PATCH 1/4] Code refactoring and cleanup

---
 .../CompensationRequisitionDetailView.tsx     |  6 +-
 .../tabs/compensation/update/models.ts        | 76 ++++++++++++++-----
 .../src/models/api/CompensationFinancial.ts   |  2 +-
 3 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
index dcf9b07407..fc78f40861 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/CompensationRequisitionDetailView.tsx
@@ -259,7 +259,11 @@ export const CompensationRequisitionDetailView: React.FunctionComponent<
           {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 && (
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/models.ts b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/models.ts
index 025a7ecc27..9f448566cd 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/models.ts
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/models.ts
@@ -1,21 +1,24 @@
+import isNumber from 'lodash/isNumber';
+
+import { SelectOption } from '@/components/common/form';
 import { PayeeOption } from '@/features/mapSideBar/acquisition/models/PayeeOptionModel';
 import { IAutocompletePrediction } from '@/interfaces/IAutocomplete';
 import { Api_CompensationFinancial } from '@/models/api/CompensationFinancial';
 import { Api_CompensationRequisition } from '@/models/api/CompensationRequisition';
 import { Api_FinancialCode } from '@/models/api/FinancialCode';
-import { booleanToString, stringToBoolean, stringToUndefined, toTypeCode } from '@/utils/formUtils';
+import { booleanToString, stringToBoolean, stringToUndefined } from '@/utils/formUtils';
 
 export class CompensationRequisitionFormModel {
   id: number | null;
   acquisitionFileId: number;
   status: string = '';
   fiscalYear: string = '';
-  stob: string = '';
+  stob: SelectOption | null = null;
   yearlyFinancial: Api_FinancialCode | null = null;
-  serviceLine: string = '';
+  serviceLine: SelectOption | null = null;
   chartOfAccounts: Api_FinancialCode | null = null;
-  responsibilityCentre: string = '';
-  Responsibility: Api_FinancialCode | null = null;
+  responsibilityCentre: SelectOption | null = null;
+  responsibility: Api_FinancialCode | null = null;
   readonly finalizedDate: string;
   agreementDateTime: string = '';
   expropriationNoticeServedDateTime: string = '';
@@ -49,11 +52,18 @@ export class CompensationRequisitionFormModel {
           : null,
       isDraft: this.status === 'draft' ? true : false,
       fiscalYear: stringToUndefined(this.fiscalYear),
-      yearlyFinancialId: this.stob === '' ? null : Number(this.stob),
+      yearlyFinancialId:
+        !!this.stob?.value && isNumber(this.stob?.value) ? Number(this.stob?.value) : null,
       yearlyFinancial: null,
-      chartOfAccountsId: this.serviceLine === '' ? null : Number(this.serviceLine),
+      chartOfAccountsId:
+        !!this.serviceLine?.value && isNumber(this.serviceLine?.value)
+          ? Number(this.serviceLine?.value)
+          : null,
       chartOfAccounts: null,
-      responsibilityId: this.responsibilityCentre === '' ? null : Number(this.responsibilityCentre),
+      responsibilityId:
+        !!this.responsibilityCentre?.value && isNumber(this.responsibilityCentre?.value)
+          ? Number(this.responsibilityCentre?.value)
+          : null,
       responsibility: null,
       agreementDate: stringToUndefined(this.agreementDateTime),
       finalizedDate: stringToUndefined(this.finalizedDate),
@@ -70,7 +80,13 @@ export class CompensationRequisitionFormModel {
     };
   }
 
-  static fromApi(apiModel: Api_CompensationRequisition): CompensationRequisitionFormModel {
+  static fromApi(
+    apiModel: Api_CompensationRequisition,
+    yearlyFinancialOptions: SelectOption[] = [],
+    chartOfAccountOptions: SelectOption[] = [],
+    responsibilityCentreOptions: SelectOption[] = [],
+    financialActivityOptions: SelectOption[] = [],
+  ): CompensationRequisitionFormModel {
     const compensation = new CompensationRequisitionFormModel(
       apiModel.id,
       apiModel.acquisitionFileId,
@@ -80,11 +96,21 @@ export class CompensationRequisitionFormModel {
     compensation.status =
       apiModel.isDraft === true ? 'draft' : apiModel.isDraft === null ? '' : 'final';
     compensation.fiscalYear = apiModel.fiscalYear || '';
-    compensation.stob = apiModel.yearlyFinancialId?.toString() || '';
+    compensation.stob =
+      !!apiModel.yearlyFinancialId && isNumber(apiModel.yearlyFinancialId)
+        ? yearlyFinancialOptions.find(c => +c.value === apiModel.yearlyFinancialId) ?? null
+        : null;
     compensation.yearlyFinancial = apiModel.yearlyFinancial;
-    compensation.serviceLine = apiModel.chartOfAccountsId?.toString() || '';
+    compensation.serviceLine =
+      !!apiModel.chartOfAccountsId && isNumber(apiModel.chartOfAccountsId)
+        ? chartOfAccountOptions.find(c => +c.value === apiModel.chartOfAccountsId) ?? null
+        : null;
     compensation.chartOfAccounts = apiModel.chartOfAccounts;
-    compensation.responsibilityCentre = apiModel.responsibilityId?.toString() || '';
+    compensation.responsibilityCentre =
+      !!apiModel.responsibilityId && isNumber(apiModel.responsibilityId)
+        ? responsibilityCentreOptions.find(c => +c.value === apiModel.responsibilityId) ?? null
+        : null;
+    compensation.responsibility = apiModel.responsibility;
     compensation.alternateProject =
       apiModel.alternateProject !== null
         ? {
@@ -92,7 +118,6 @@ export class CompensationRequisitionFormModel {
             text: apiModel.alternateProject?.description || '',
           }
         : null;
-    compensation.Responsibility = apiModel.responsibility;
     compensation.agreementDateTime = apiModel.agreementDate || '';
     compensation.expropriationNoticeServedDateTime = apiModel.expropriationNoticeServedDate || '';
     compensation.expropriationVestingDateTime = apiModel.expropriationVestingDate || '';
@@ -101,7 +126,9 @@ export class CompensationRequisitionFormModel {
     compensation.specialInstruction = apiModel.specialInstruction || '';
     compensation.detailedRemarks = apiModel.detailedRemarks || '';
     compensation.financials =
-      apiModel.financials?.map(x => FinancialActivityFormModel.fromApi(x)) || [];
+      apiModel.financials?.map(x =>
+        FinancialActivityFormModel.fromApi(x, financialActivityOptions),
+      ) || [];
 
     compensation.rowVersion = apiModel.rowVersion ?? null;
 
@@ -130,7 +157,7 @@ export class FinancialActivityFormModel {
   readonly _id: number | null = null;
   readonly _compensationRequisitionId: number;
 
-  financialActivityCodeId: string = '';
+  financialActivityCodeId: SelectOption | null = null;
   financialActivityCode: Api_FinancialCode | null = null;
   pretaxAmount: number = 0;
   isGstRequired: string = '';
@@ -152,10 +179,11 @@ export class FinancialActivityFormModel {
     return {
       id: this._id,
       compensationId: this._compensationRequisitionId,
-      financialActivityCodeId: +this.financialActivityCodeId,
-      financialActivityCode: this.financialActivityCode
-        ? toTypeCode<number>(+this.financialActivityCode) ?? null
-        : null,
+      financialActivityCodeId:
+        !!this.financialActivityCodeId?.value && isNumber(this.financialActivityCodeId?.value)
+          ? Number(this.financialActivityCodeId?.value)
+          : null,
+      financialActivityCode: null,
       pretaxAmount: this.pretaxAmount,
       isGstRequired: stringToBoolean(this.isGstRequired),
       taxAmount: this.taxAmount,
@@ -165,13 +193,19 @@ export class FinancialActivityFormModel {
     };
   }
 
-  static fromApi(model: Api_CompensationFinancial): FinancialActivityFormModel {
+  static fromApi(
+    model: Api_CompensationFinancial,
+    financialActivityOptions: SelectOption[] = [],
+  ): FinancialActivityFormModel {
     const newForm = new FinancialActivityFormModel(model.id, model.compensationId);
     newForm.pretaxAmount = model.pretaxAmount ?? 0;
     newForm.isGstRequired = booleanToString(model.isGstRequired);
     newForm.taxAmount = model.taxAmount ?? 0;
     newForm.totalAmount = model.totalAmount ?? 0;
-    newForm.financialActivityCodeId = model.financialActivityCodeId.toString() ?? '';
+    newForm.financialActivityCodeId =
+      !!model.financialActivityCodeId && isNumber(model.financialActivityCodeId)
+        ? financialActivityOptions.find(c => +c.value === model.financialActivityCodeId) ?? null
+        : null;
     newForm.financialActivityCode = model.financialActivityCode;
     newForm.rowVersion = model.rowVersion ?? null;
     newForm.isDisabled = booleanToString(model.isDisabled);
diff --git a/source/frontend/src/models/api/CompensationFinancial.ts b/source/frontend/src/models/api/CompensationFinancial.ts
index 14cd833bd3..4821601935 100644
--- a/source/frontend/src/models/api/CompensationFinancial.ts
+++ b/source/frontend/src/models/api/CompensationFinancial.ts
@@ -5,7 +5,7 @@ import { Api_FinancialCode } from './FinancialCode';
 export interface Api_CompensationFinancial extends Api_ConcurrentVersion_Null, Api_AuditFields {
   id: number | null;
   compensationId: number;
-  financialActivityCodeId: number;
+  financialActivityCodeId: number | null;
   financialActivityCode: Api_FinancialCode | null;
   pretaxAmount: number | null;
   isGstRequired: boolean | null;

From 4a0f01764d75ad306993b6f8074ee65fb9214257 Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Fri, 17 Nov 2023 21:32:49 -0800
Subject: [PATCH 2/4] Replace dropdowns with typeahead

---
 .../update/CompensationRequisitionYupSchema.ts   |  2 +-
 .../UpdateCompensationRequisitionContainer.tsx   |  8 +++++++-
 .../update/UpdateCompensationRequisitionForm.tsx | 16 ++++++----------
 .../financials/FinancialActivitiesSubForm.tsx    |  7 +++----
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/CompensationRequisitionYupSchema.ts b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/CompensationRequisitionYupSchema.ts
index 38971a15c8..e9c1e94e69 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/CompensationRequisitionYupSchema.ts
+++ b/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()
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.tsx
index d9f2fb812b..f3bb995b24 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.tsx
+++ b/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}
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx
index 79dff74610..1ae3177386 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx
+++ b/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);
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx
index 694241c133..c8af1833e4 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/financials/FinancialActivitiesSubForm.tsx
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { LinkButton, StyledRemoveLinkButton } from '@/components/common/buttons';
 import { FastCurrencyInput } from '@/components/common/form';
 import { Select, SelectOption } from '@/components/common/form/Select';
+import { TypeaheadSelect } from '@/components/common/form/TypeaheadSelect';
 import GenericModal from '@/components/common/GenericModal';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { getCurrencyCleanValue, stringToBoolean } from '@/utils/formUtils';
@@ -100,11 +101,9 @@ export const FinancialActivitiesSubForm: React.FunctionComponent<
                   </StyledSubHeader>
 
                   <SectionField label="Code & Description" labelWidth="4" required>
-                    <Select
-                      field={`financials[${index}].financialActivityCodeId`}
+                    <TypeaheadSelect
+                      field={`financials.${index}.financialActivityCodeId`}
                       options={financialActivityOptions}
-                      placeholder="Select..."
-                      required
                     />
                   </SectionField>
 

From ea08b85ce1de4ae26f2ac531bb64169ebe6b7e77 Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Fri, 17 Nov 2023 21:45:06 -0800
Subject: [PATCH 3/4] Update snapshots

---
 ...nsationRequisitionDetailView.test.tsx.snap |   4 +-
 ...eCompensationRequisitionForm.test.tsx.snap | 191 ++++++++++++------
 2 files changed, 130 insertions(+), 65 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index e6d942ef47..6b34550147 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/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"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
index 272afa224f..fa9ac6c9cd 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
     class="Toastify"
   />
   <div />
-  .c10.btn {
+  .c11.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,49 +36,49 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   cursor: pointer;
 }
 
-.c10.btn:hover {
+.c11.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c10.btn:focus {
+.c11.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c10.btn.btn-primary {
+.c11.btn.btn-primary {
   border: none;
 }
 
-.c10.btn.btn-secondary {
+.c11.btn.btn-secondary {
   background: none;
 }
 
-.c10.btn.btn-info {
+.c11.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c10.btn.btn-info:hover,
-.c10.btn.btn-info:active,
-.c10.btn.btn-info:focus {
+.c11.btn.btn-info:hover,
+.c11.btn.btn-info:active,
+.c11.btn.btn-info:focus {
   background: none;
 }
 
-.c10.btn.btn-light {
+.c11.btn.btn-light {
   border: none;
 }
 
-.c10.btn.btn-dark {
+.c11.btn.btn-dark {
   border: none;
 }
 
-.c10.btn.btn-link {
+.c11.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -99,9 +99,9 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   padding: 0;
 }
 
-.c10.btn.btn-link:hover,
-.c10.btn.btn-link:active,
-.c10.btn.btn-link:focus {
+.c11.btn.btn-link:hover,
+.c11.btn.btn-link:active,
+.c11.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -110,14 +110,14 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   outline: none;
 }
 
-.c10.btn.btn-link:disabled,
-.c10.btn.btn-link.disabled {
+.c11.btn.btn-link:disabled,
+.c11.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c10.btn:disabled,
-.c10.btn:disabled:hover {
+.c11.btn:disabled,
+.c11.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -128,15 +128,15 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   opacity: 0.65;
 }
 
-.c10.Button .Button__icon {
+.c11.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c10.Button--icon-only:focus {
+.c11.Button--icon-only:focus {
   outline: none;
 }
 
-.c10.Button--icon-only .Button__icon {
+.c11.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
@@ -168,7 +168,11 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   border-color: #d8292f !important;
 }
 
-.c9 {
+.c9 button.close {
+  font-size: 2.4rem;
+}
+
+.c10 {
   float: right;
   cursor: pointer;
 }
@@ -198,7 +202,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   font-weight: bold;
 }
 
-.c12 {
+.c13 {
   position: -webkit-sticky;
   position: sticky;
   padding-top: 2rem;
@@ -225,7 +229,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
   padding-bottom: 1rem;
 }
 
-.c11 {
+.c12 {
   margin-right: 1rem;
   padding-bottom: 1rem;
 }
@@ -767,19 +771,40 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
               class="c4 required text-left col"
             >
               <div
-                class="form-group"
+                class="c9 form-group"
+                data-testid="typeahead-select-stob"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-stob"
-                  name="stob"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-stob"
+                      name="typeahead-select-stob"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -799,19 +824,40 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
               class="c4 required text-left col"
             >
               <div
-                class="form-group"
+                class="c9 form-group"
+                data-testid="typeahead-select-serviceLine"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-serviceLine"
-                  name="serviceLine"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-serviceLine"
+                      name="typeahead-select-serviceLine"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -831,19 +877,40 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
               class="c4 required text-left col"
             >
               <div
-                class="form-group"
+                class="c9 form-group"
+                data-testid="typeahead-select-responsibilityCentre"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-responsibilityCentre"
-                  name="responsibilityCentre"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-responsibilityCentre"
+                      name="typeahead-select-responsibilityCentre"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -867,7 +934,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
               class="col-1"
             >
               <svg
-                class="c9"
+                class="c10"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
@@ -1178,7 +1245,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
               class="col-1"
             >
               <svg
-                class="c9"
+                class="c10"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
@@ -1205,7 +1272,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
           class="collapse show"
         >
           <button
-            class="c10 Button btn btn-link"
+            class="c11 Button btn btn-link"
             data-testid="add-financial-activity"
             type="button"
           >
@@ -1255,10 +1322,10 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
       </div>
     </div>
     <div
-      class="c11"
+      class="c12"
     >
       <div
-        class="c12 justify-content-end mt-auto no-gutters row"
+        class="c13 justify-content-end mt-auto no-gutters row"
       >
         <div
           class="pr-3 col-auto"
@@ -1267,7 +1334,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
           class="pr-4 col-auto"
         >
           <button
-            class="c10 Button btn btn-secondary"
+            class="c11 Button btn btn-secondary"
             type="button"
           >
             <div
@@ -1281,7 +1348,7 @@ exports[`Compensation Requisition UpdateForm component renders as expected 1`] =
           class="col-auto"
         >
           <button
-            class="c10 Button Button--disabled btn btn-primary"
+            class="c11 Button Button--disabled btn btn-primary"
             disabled=""
             type="button"
           >

From c7888b890b4de3e8ecbb5967a9736017977b3ecc Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Fri, 17 Nov 2023 22:18:11 -0800
Subject: [PATCH 4/4] Test corrections

---
 ...eCompensationRequisitionContainer.test.tsx | 68 +++----------------
 1 file changed, 11 insertions(+), 57 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.test.tsx b/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.test.tsx
index 40ed475e9a..d7204107a1 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionContainer.test.tsx
+++ b/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 () => {