[offers][fix] Use companies typeahead in form

apps/portal/src/components/offers/constants.ts

@@ -22,29 +22,6 @@ export const titleOptions = [
   },
 ];
 
-export const companyOptions = [
-  {
-    label: 'Amazon',
-    value: 'cl93patjt0000txewdi601mub',
-  },
-  {
-    label: 'Microsoft',
-    value: 'cl93patjt0001txewkglfjsro',
-  },
-  {
-    label: 'Apple',
-    value: 'cl93patjt0002txewf3ug54m8',
-  },
-  {
-    label: 'Google',
-    value: 'cl93patjt0003txewyiaky7xx',
-  },
-  {
-    label: 'Meta',
-    value: 'cl93patjt0004txew88wkcqpu',
-  },
-];
-
 export const locationOptions = [
   {
     label: 'Singapore, Singapore',

apps/portal/src/components/offers/forms/BackgroundForm.tsx

@@ -2,7 +2,6 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { Collapsible, RadioList } from '@tih/ui';
 
 import {
-  companyOptions,
   educationFieldOptions,
   educationLevelOptions,
   emptyOption,
@@ -14,6 +13,7 @@ import FormRadioList from '~/components/offers/forms/components/FormRadioList';
 import FormSelect from '~/components/offers/forms/components/FormSelect';
 import FormTextInput from '~/components/offers/forms/components/FormTextInput';
 import { JobType } from '~/components/offers/types';
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 
 import { CURRENCY_OPTIONS } from '~/utils/offers/currency/CurrencyEnum';
 
@@ -74,7 +74,7 @@ function YoeSection() {
 }
 
 function FullTimeJobFields() {
-  const { register } = useFormContext();
+  const { register, setValue } = useFormContext();
   return (
     <>
       <div className="mb-5 grid grid-cols-2 space-x-3">
@@ -85,14 +85,14 @@ function FullTimeJobFields() {
           placeholder={emptyOption}
           {...register(`background.experiences.0.title`)}
         />
-        <FormSelect
+        <div>
-          display="block"
+          <CompaniesTypeahead
-          label="Company"
+            onSelect={({ value }) =>
-          options={companyOptions}
+              setValue(`background.experiences.0.companyId`, value)
-          placeholder={emptyOption}
+            }
-          {...register(`background.experiences.0.companyId`)}
           />
         </div>
+      </div>
       <div className="mb-5 grid grid-cols-1 space-x-3">
         <FormTextInput
           endAddOn={
@@ -151,7 +151,7 @@ function FullTimeJobFields() {
 }
 
 function InternshipJobFields() {
-  const { register } = useFormContext();
+  const { register, setValue } = useFormContext();
   return (
     <>
       <div className="mb-5 grid grid-cols-2 space-x-3">
@@ -162,14 +162,14 @@ function InternshipJobFields() {
           placeholder={emptyOption}
           {...register(`background.experiences.0.title`)}
         />
-        <FormSelect
+        <div>
-          display="block"
+          <CompaniesTypeahead
-          label="Company"
+            onSelect={({ value }) =>
-          options={companyOptions}
+              setValue(`background.experiences.0.companyId`, value)
-          placeholder={emptyOption}
+            }
-          {...register(`background.experiences.0.company`)}
           />
         </div>
+      </div>
       <div className="mb-5 grid grid-cols-1 space-x-3">
         <FormTextInput
           endAddOn={

apps/portal/src/components/offers/forms/OfferDetailsForm.tsx

@@ -11,6 +11,8 @@ import { PlusIcon } from '@heroicons/react/20/solid';
 import { TrashIcon } from '@heroicons/react/24/outline';
 import { Button, Dialog } from '@tih/ui';
 
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+
 import {
   defaultFullTimeOfferValues,
   defaultInternshipOfferValues,
@@ -21,7 +23,6 @@ import FormSelect from './components/FormSelect';
 import FormTextArea from './components/FormTextArea';
 import FormTextInput from './components/FormTextInput';
 import {
-  companyOptions,
   emptyOption,
   FieldError,
   internshipCycleOptions,
@@ -85,18 +86,14 @@ function FullTimeOfferDetailsForm({
           })}
         />
       </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
+      <div className="mb-5 flex grid grid-cols-2 space-x-3">
-        <FormSelect
+        <div>
-          display="block"
+          <CompaniesTypeahead
-          errorMessage={offerFields?.companyId?.message}
+            onSelect={({ value }) =>
-          label="Company"
+              setValue(`offers.${index}.companyId`, value)
-          options={companyOptions}
+            }
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.companyId`, {
-            required: FieldError.Required,
-          })}
           />
+        </div>
         <FormTextInput
           errorMessage={offerFields?.job?.level?.message}
           label="Level"
@@ -275,7 +272,7 @@ function InternshipOfferDetailsForm({
   index,
   remove,
 }: InternshipOfferDetailsFormProps) {
-  const { register, formState } = useFormContext<{
+  const { register, formState, setValue } = useFormContext<{
     offers: Array<InternshipOfferDetailsFormData>;
   }>();
 
@@ -308,17 +305,13 @@ function InternshipOfferDetailsForm({
         />
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormSelect
+        <div>
-          display="block"
+          <CompaniesTypeahead
-          errorMessage={offerFields?.companyId?.message}
+            onSelect={({ value }) =>
-          label="Company"
+              setValue(`offers.${index}.companyId`, value)
-          options={companyOptions}
+            }
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.companyId`, {
-            required: FieldError.Required,
-          })}
           />
+        </div>
         <FormSelect
           display="block"
           errorMessage={offerFields?.location?.message}

apps/portal/src/pages/offers/submit.tsx

@@ -120,7 +120,6 @@ export default function OffersSubmissionPage() {
       console.error(error.message);
     },
     onSuccess() {
-      alert('offer profile submit success!');
       setFormStep(formStep + 1);
       scrollToTop();
     },