feat(recruiter): support multiple locations in opportunity edit screen (#5452)

rebelchris · claude · github-actions[bot] · web-flow · commit c361d4dd1b11 · 2026-02-09T12:18:58.000+02:00
Co-authored-by: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
Co-authored-by: claude[bot] &lt;41898282+claude[bot]@users.noreply.github.com&gt;
Co-authored-by: Chris Bongers &lt;rebelchris@users.noreply.github.com&gt;
diff --git a/AGENTS.md b/AGENTS.md
@@ -131,6 +131,33 @@ import ControlledTextarea from '@dailydotdev/shared/src/components/fields/Contro
 import ControlledSwitch from '@dailydotdev/shared/src/components/fields/ControlledSwitch';
 ```
 
+**IMPORTANT - Zod Type Inference:**
+- **ALWAYS use `z.infer` to derive TypeScript types from Zod schemas**
+- **NEVER manually define types that duplicate Zod schema structure**
+
+```typescript
+// ❌ WRONG: Manual type definition that duplicates schema
+const userSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+});
+
+interface User {
+  name: string;
+  age: number;
+}
+
+// ✅ RIGHT: Infer type from schema
+const userSchema = z.object({
+  name: z.string(),
+  age: z.number(),
+});
+
+export type User = z.infer<typeof userSchema>;
+```
+
+This ensures type safety, reduces duplication, and keeps types automatically in sync with schemas.
+
 ## Quick Commands
 
 ```bash
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/hooks/useOpportunityEditForm.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/hooks/useOpportunityEditForm.tsx
@@ -75,16 +75,20 @@ export function opportunityToFormData(
     title: opportunity.title || '',
     tldr: opportunity.tldr || '',
     keywords: opportunity.keywords?.map((k) => ({ keyword: k.keyword })) || [],
-    externalLocationId: opportunity.locations?.[0]?.location?.city || undefined,
     locationType: opportunity.locations?.[0]?.type,
-    locationData: opportunity.locations?.[0]?.location
-      ? {
-          id: '',
-          city: opportunity.locations[0].location.city,
-          country: opportunity.locations[0].location.country || '',
-          subdivision: opportunity.locations[0].location.subdivision,
-        }
-      : undefined,
+    locations:
+      opportunity.locations?.map((loc) => ({
+        locationId: loc.locationId || undefined,
+        externalLocationId: undefined,
+        locationData: loc.location
+          ? {
+              id: '',
+              city: loc.location.city,
+              country: loc.location.country || '',
+              subdivision: loc.location.subdivision,
+            }
+          : undefined,
+      })) || [],
     meta: {
       employmentType: opportunity.meta?.employmentType ?? 0,
       teamSize: opportunity.meta?.teamSize ?? 1,
@@ -123,20 +127,17 @@ export function formDataToPreviewOpportunity(
     title: formData.title,
     tldr: formData.tldr,
     keywords: formData.keywords,
-    locations: formData.locationType
-      ? [
-          {
-            type: formData.locationType,
-            location: formData.locationData
-              ? {
-                  city: formData.locationData.city,
-                  country: formData.locationData.country,
-                  subdivision: formData.locationData.subdivision,
-                }
-              : null,
-          },
-        ]
-      : undefined,
+    locations:
+      formData.locations?.map((loc) => ({
+        type: formData.locationType,
+        location: loc.locationData
+          ? {
+              city: loc.locationData.city,
+              country: loc.locationData.country,
+              subdivision: loc.locationData.subdivision,
+            }
+          : null,
+      })) || [],
     meta: formData.meta
       ? {
           employmentType: formData.meta.employmentType,
@@ -186,8 +187,14 @@ export function formDataToMutationPayload(
     title: formData.title,
     tldr: formData.tldr,
     keywords: formData.keywords,
-    externalLocationId: formData.externalLocationId,
-    locationType: formData.locationType,
+    location: formData.locations?.map((loc) => ({
+      locationId: loc.locationId,
+      externalLocationId: loc.externalLocationId,
+      type: formData.locationType,
+      city: loc.locationData?.city,
+      country: loc.locationData?.country,
+      subdivision: loc.locationData?.subdivision,
+    })),
     meta: {
       employmentType: formData.meta.employmentType,
       teamSize: formData.meta.teamSize,
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/sections/RoleInfoSection.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/sections/RoleInfoSection.tsx
@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useCallback } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 import { TextField } from '../../../fields/TextField';
 import Textarea from '../../../fields/Textarea';
 import {
@@ -14,6 +14,12 @@ import type { TLocation } from '../../../../graphql/autocomplete';
 import { LocationDataset } from '../../../../graphql/autocomplete';
 import type { Opportunity } from '../../../../features/opportunity/types';
 import type { OpportunitySideBySideEditFormData } from '../hooks/useOpportunityEditForm';
+import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button';
+import { PlusIcon } from '../../../icons/Plus';
+import { TrashIcon } from '../../../icons/Trash';
+import { IconSize } from '../../../Icon';
+import { LocationType } from '../../../../features/opportunity/protobuf/util';
+import { Radio } from '../../../fields/Radio';
 
 export interface RoleInfoSectionProps {
   opportunity: Opportunity;
@@ -26,13 +32,24 @@ export function RoleInfoSection({
     register,
     control,
     setValue,
+    watch,
     formState: { errors },
   } = useFormContext<OpportunitySideBySideEditFormData>();
 
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'locations',
+  });
+
   const handleLocationSelect = useCallback(
-    (location: TLocation | null) => {
+    (location: TLocation | null, index: number) => {
+      setValue(
+        `locations.${index}.externalLocationId`,
+        location?.id || undefined,
+        { shouldDirty: true },
+      );
       setValue(
-        'locationData',
+        `locations.${index}.locationData`,
         location
           ? {
               id: location.id,
@@ -47,6 +64,25 @@ export function RoleInfoSection({
     [setValue],
   );
 
+  const locationType = watch('locationType');
+
+  const locationTypeOptions = [
+    { label: 'Remote', value: `${LocationType.REMOTE}` },
+    { label: 'Hybrid', value: `${LocationType.HYBRID}` },
+    { label: 'On-site', value: `${LocationType.OFFICE}` },
+  ];
+
+  const handleAddLocation = useCallback(() => {
+    append({});
+  }, [append]);
+
+  const handleRemoveLocation = useCallback(
+    (index: number) => {
+      remove(index);
+    },
+    [remove],
+  );
+
   return (
     <div className="flex flex-col gap-4">
       <div data-field-key="title">
@@ -110,24 +146,63 @@ export function RoleInfoSection({
         />
       </div>
 
-      <div data-field-key="location">
-        <ProfileLocation
-          locationName="externalLocationId"
-          typeName="locationType"
-          dataset={LocationDataset.Internal}
-          defaultValue={
-            opportunity?.locations?.[0]?.location
-              ? {
-                  id: '',
-                  city: opportunity.locations[0].location.city,
-                  country: opportunity.locations[0].location.country || '',
-                  subdivision: opportunity.locations[0].location.subdivision,
-                  type: opportunity.locations[0].type,
-                }
-              : undefined
+      <div data-field-key="locations" className="flex flex-col gap-3">
+        <Typography bold type={TypographyType.Caption1}>
+          Locations
+        </Typography>
+        <Radio
+          name="locationType"
+          options={locationTypeOptions}
+          value={`${locationType}`}
+          onChange={(val) =>
+            setValue('locationType', Number(val), { shouldDirty: true })
           }
-          onLocationSelect={handleLocationSelect}
+          className={{ container: '!flex-row' }}
         />
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex items-start gap-2">
+            <div className="flex-1">
+              <ProfileLocation
+                locationName={`locations.${index}.externalLocationId`}
+                dataset={LocationDataset.Internal}
+                defaultValue={
+                  opportunity?.locations?.[index]?.location
+                    ? {
+                        id: '',
+                        city: opportunity.locations[index].location.city,
+                        country:
+                          opportunity.locations[index].location.country || '',
+                        subdivision:
+                          opportunity.locations[index].location.subdivision,
+                      }
+                    : undefined
+                }
+                onLocationSelect={(location) =>
+                  handleLocationSelect(location, index)
+                }
+              />
+            </div>
+            {fields.length > 1 && (
+              <Button
+                type="button"
+                variant={ButtonVariant.Tertiary}
+                size={ButtonSize.Small}
+                icon={<TrashIcon size={IconSize.Small} />}
+                onClick={() => handleRemoveLocation(index)}
+                className="mt-6"
+              />
+            )}
+          </div>
+        ))}
+        <Button
+          type="button"
+          variant={ButtonVariant.Secondary}
+          size={ButtonSize.Small}
+          icon={<PlusIcon size={IconSize.Small} />}
+          onClick={handleAddLocation}
+        >
+          Add location
+        </Button>
       </div>
     </div>
   );
diff --git a/packages/shared/src/features/opportunity/graphql.ts b/packages/shared/src/features/opportunity/graphql.ts
@@ -121,6 +121,7 @@ export const OPPORTUNITY_FRAGMENT = gql`
       equity
     }
     locations {
+      locationId
       type
       location {
         city
diff --git a/packages/shared/src/features/opportunity/types.ts b/packages/shared/src/features/opportunity/types.ts
@@ -125,7 +125,11 @@ export type Opportunity = {
   };
   meta: OpportunityMeta;
   recruiters: RecruiterProfile[];
-  locations: Array<{ location: OpportunityLocation; type?: ProtoEnumValue }>;
+  locations: Array<{
+    location: OpportunityLocation;
+    type?: ProtoEnumValue;
+    locationId?: string;
+  }>;
   keywords?: Keyword[];
   questions?: OpportunityScreeningQuestion[];
   feedbackQuestions?: OpportunityFeedbackQuestion[];
diff --git a/packages/shared/src/lib/schema/opportunity.ts b/packages/shared/src/lib/schema/opportunity.ts
@@ -13,6 +13,22 @@ const processSalaryValue = (val: unknown) => {
   return val;
 };
 
+const locationEntrySchema = z.object({
+  locationId: z.string().optional(),
+  externalLocationId: z.string().optional(),
+  locationData: z
+    .object({
+      id: z.string(),
+      city: z.string().nullish(),
+      country: z.string(),
+      subdivision: z.string().nullish(),
+    })
+    .nullable()
+    .optional(),
+});
+
+export type LocationEntry = z.infer<typeof locationEntrySchema>;
+
 export const opportunityEditInfoSchema = z.object({
   title: z.string().nonempty('Add a job title').max(240),
   tldr: z.string().nonempty('Add a short description').max(480),
@@ -24,17 +40,8 @@ export const opportunityEditInfoSchema = z.object({
     )
     .min(1, 'Add at least one skill')
     .max(100),
-  externalLocationId: z.string().optional(),
   locationType: z.number().optional(),
-  locationData: z
-    .object({
-      id: z.string(),
-      city: z.string().nullish(),
-      country: z.string(),
-      subdivision: z.string().nullish(),
-    })
-    .nullable()
-    .optional(),
+  locations: z.array(locationEntrySchema).optional().default([]),
   meta: z.object({
     employmentType: z.coerce.number().min(1, 'Select an employment type'),
     teamSize: z
@@ -165,6 +172,7 @@ export interface LocationInput {
   city?: string;
   subdivision?: string;
   type?: number;
+  locationId?: string;
   externalLocationId?: string;
 }
 

Original file line number	Diff line number	Diff line change
@@ -121,6 +121,7 @@ export const OPPORTUNITY_FRAGMENT = gql`
`121`	`121`	`equity`
`122`	`122`	`}`
`123`	`123`	`locations {`
	`124`	`+ locationId`
`124`	`125`	`type`
`125`	`126`	`location {`
`126`	`127`	`city`