[offers][feat] Use city typeahead for location field

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

@@ -2,21 +2,6 @@ import { EducationBackgroundType } from './types';
 
 export const emptyOption = '----';
 
-export const locationOptions = [
-  {
-    label: 'Singapore, Singapore',
-    value: 'Singapore, Singapore',
-  },
-  {
-    label: 'New York, US',
-    value: 'New York, US',
-  },
-  {
-    label: 'San Francisco, US',
-    value: 'San Francisco, US',
-  },
-];
-
 export const internshipCycleOptions = [
   {
     label: 'Summer',

apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx

@@ -26,11 +26,11 @@ import { getCurrentMonth, getCurrentYear } from '~/utils/offers/time';
 import { trpc } from '~/utils/trpc';
 
 const defaultOfferValues = {
+  cityId: '',
   comments: '',
   companyId: '',
   jobTitle: '',
   jobType: JobType.FULLTIME,
-  location: '',
   monthYearReceived: {
     month: getCurrentMonth() as Month,
     year: getCurrentYear(),
@@ -277,7 +277,7 @@ export default function OffersSubmissionForm({
           <FormProvider {...formMethods}>
             <form className="text-sm" onSubmit={handleSubmit(onSubmit)}>
               {steps[step]}
-              {/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
+              <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre>
               {step === 0 && (
                 <div className="flex justify-end">
                   <Button

apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx

@@ -7,9 +7,9 @@ import {
   educationLevelOptions,
   emptyOption,
   FieldError,
-  locationOptions,
 } from '~/components/offers/constants';
 import type { BackgroundPostData } from '~/components/offers/types';
+import CitiesTypeahead from '~/components/shared/CitiesTypeahead';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
@@ -104,6 +104,12 @@ function FullTimeJobFields() {
   const watchCompanyName = useWatch({
     name: 'background.experiences.0.companyName',
   });
+  const watchCityId = useWatch({
+    name: 'background.experiences.0.cityId',
+  });
+  const watchCityName = useWatch({
+    name: 'background.experiences.0.cityName',
+  });
 
   return (
     <>
@@ -172,11 +178,22 @@ function FullTimeJobFields() {
             placeholder="e.g. L4, Junior"
             {...register(`background.experiences.0.level`)}
           />
-          <FormSelect
-            display="block"
+          <CitiesTypeahead
             label="Location"
-            options={locationOptions}
-            {...register(`background.experiences.0.location`)}
+            value={{
+              id: watchCityId,
+              label: watchCityName,
+              value: watchCityId,
+            }}
+            onSelect={(option) => {
+              if (option) {
+                setValue('background.experiences.0.cityId', option.value);
+                setValue('background.experiences.0.cityName', option.label);
+              } else {
+                setValue('background.experiences.0.cityId', '');
+                setValue('background.experiences.0.cityName', '');
+              }
+            }}
           />
         </div>
         <div className="mb-5 grid grid-cols-2 space-x-3">
@@ -210,6 +227,12 @@ function InternshipJobFields() {
   const watchCompanyName = useWatch({
     name: 'background.experiences.0.companyName',
   });
+  const watchCityId = useWatch({
+    name: 'background.experiences.0.cityId',
+  });
+  const watchCityName = useWatch({
+    name: 'background.experiences.0.cityName',
+  });
 
   return (
     <>
@@ -271,12 +294,22 @@ function InternshipJobFields() {
       </div>
       <Collapsible label="Add more details">
         <div className="mb-5 grid grid-cols-2 space-x-3">
-          <FormSelect
-            display="block"
+          <CitiesTypeahead
             label="Location"
-            options={locationOptions}
-            placeholder={emptyOption}
-            {...register(`background.experiences.0.location`)}
+            value={{
+              id: watchCityId,
+              label: watchCityName,
+              value: watchCityId,
+            }}
+            onSelect={(option) => {
+              if (option) {
+                setValue('background.experiences.0.cityId', option.value);
+                setValue('background.experiences.0.cityName', option.label);
+              } else {
+                setValue('background.experiences.0.cityId', '');
+                setValue('background.experiences.0.cityName', '');
+              }
+            }}
           />
         </div>
       </Collapsible>

apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx

@@ -12,6 +12,7 @@ import { TrashIcon } from '@heroicons/react/24/outline';
 import { JobType } from '@prisma/client';
 import { Button, Dialog } from '@tih/ui';
 
+import CitiesTypeahead from '~/components/shared/CitiesTypeahead';
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import type { JobTitleType } from '~/components/shared/JobTitles';
 import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
@@ -25,7 +26,6 @@ import {
   emptyOption,
   FieldError,
   internshipCycleOptions,
-  locationOptions,
   yearOptions,
 } from '../../constants';
 import FormMonthYearPicker from '../../forms/FormMonthYearPicker';
@@ -62,6 +62,12 @@ function FullTimeOfferDetailsForm({
   const watchCompanyName = useWatch({
     name: `offers.${index}.companyName`,
   });
+  const watchCityId = useWatch({
+    name: `offers.${index}.cityId`,
+  });
+  const watchCityName = useWatch({
+    name: `offers.${index}.cityName`,
+  });
   const watchCurrency = useWatch({
     name: `offers.${index}.offersFullTime.totalCompensation.currency`,
   });
@@ -104,32 +110,37 @@ function FullTimeOfferDetailsForm({
         />
       </div>
       <div className="mb-5 flex grid grid-cols-2 space-x-3">
-        <div>
-          <CompaniesTypeahead
-            required={true}
-            value={{
-              id: watchCompanyId,
-              label: watchCompanyName,
-              value: watchCompanyId,
-            }}
-            onSelect={(option) => {
-              if (option) {
-                setValue(`offers.${index}.companyId`, option.value);
-                setValue(`offers.${index}.companyName`, option.label);
-              }
-            }}
-          />
-        </div>
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.location?.message}
+        <CompaniesTypeahead
+          required={true}
+          value={{
+            id: watchCompanyId,
+            label: watchCompanyName,
+            value: watchCompanyId,
+          }}
+          onSelect={(option) => {
+            if (option) {
+              setValue(`offers.${index}.companyId`, option.value);
+              setValue(`offers.${index}.companyName`, option.label);
+            }
+          }}
+        />
+        <CitiesTypeahead
           label="Location"
-          options={locationOptions}
-          placeholder={emptyOption}
           required={true}
-          {...register(`offers.${index}.location`, {
-            required: FieldError.REQUIRED,
-          })}
+          value={{
+            id: watchCityId,
+            label: watchCityName,
+            value: watchCityId,
+          }}
+          onSelect={(option) => {
+            if (option) {
+              setValue(`offers.${index}.cityId`, option.value);
+              setValue(`offers.${index}.cityName`, option.label);
+            } else {
+              setValue(`offers.${index}.cityId`, '');
+              setValue(`offers.${index}.cityName`, '');
+            }
+          }}
         />
       </div>
       <div className="mb-5 flex grid grid-cols-2 items-start space-x-3">
@@ -305,6 +316,12 @@ function InternshipOfferDetailsForm({
   const watchCompanyName = useWatch({
     name: `offers.${index}.companyName`,
   });
+  const watchCityId = useWatch({
+    name: `offers.${index}.cityId`,
+  });
+  const watchCityName = useWatch({
+    name: `offers.${index}.cityName`,
+  });
 
   return (
     <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
@@ -342,16 +359,23 @@ function InternshipOfferDetailsForm({
             }}
           />
         </div>
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.location?.message}
+        <CitiesTypeahead
           label="Location"
-          options={locationOptions}
-          placeholder={emptyOption}
           required={true}
-          {...register(`offers.${index}.location`, {
-            required: FieldError.REQUIRED,
-          })}
+          value={{
+            id: watchCityId,
+            label: watchCityName,
+            value: watchCityId,
+          }}
+          onSelect={(option) => {
+            if (option) {
+              setValue(`offers.${index}.cityId`, option.value);
+              setValue(`offers.${index}.cityName`, option.label);
+            } else {
+              setValue(`offers.${index}.cityId`, '');
+              setValue(`offers.${index}.cityName`, '');
+            }
+          }}
         />
       </div>
       <div className="mb-5 grid grid-cols-2 space-x-3">

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

@@ -46,13 +46,14 @@ export type BackgroundPostData = {
 };
 
 type ExperiencePostData = {
+  cityId?: string | null;
+  cityName?: string | null;
   companyId?: string | null;
   companyName?: string | null;
   durationInMonths?: number | null;
   id?: string;
   jobType?: string | null;
   level?: string | null;
-  location?: Location | null;
   monthlySalary?: Money | null;
   title?: string | null;
   totalCompensation?: Money | null;
@@ -77,12 +78,13 @@ type SpecificYoePostData = {
 type SpecificYoe = SpecificYoePostData;
 
 export type OfferPostData = {
+  cityId: string;
+  cityName?: string;
   comments: string;
   companyId: string;
   companyName?: string;
   id?: string;
   jobType: JobType;
-  location: string;
   monthYearReceived: Date;
   negotiationStrategy: string;
   offersFullTime?: OfferFullTimePostData | null;

apps/portal/src/pages/offers/profile/edit/[offerProfileId].tsx

@@ -36,13 +36,14 @@ export default function OffersEditPage() {
               experiences.length === 0
                 ? [{ jobType: JobType.FULLTIME }]
                 : experiences.map((exp) => ({
+                    cityId: exp.location?.cityId,
+                    cityName: exp.location?.cityName,
                     companyId: exp.company?.id,
                     companyName: exp.company?.name,
                     durationInMonths: exp.durationInMonths,
                     id: exp.id,
                     jobType: exp.jobType,
                     level: exp.level,
-                    location: exp.location,
                     monthlySalary: exp.monthlySalary,
                     title: exp.title,
                     totalCompensation: exp.totalCompensation,
@@ -53,12 +54,13 @@ export default function OffersEditPage() {
           },
           id: data.id,
           offers: data.offers.map((offer) => ({
+            cityId: offer.location.cityId,
+            cityName: offer.location.cityName,
             comments: offer.comments,
             companyId: offer.company.id,
             companyName: offer.company.name,
             id: offer.id,
             jobType: offer.jobType,
-            location: offer.location,
             monthYearReceived: convertToMonthYear(offer.monthYearReceived),
             negotiationStrategy: offer.negotiationStrategy,
             offersFullTime: offer.offersFullTime,