[offers][fix] Fix offer submission form (#372)

* [offers][fix] Fix breadcrumbs alignment

* [offers][fix] Fix field array

apps/portal/src/components/offers/Breadcrumb.tsx

@@ -7,7 +7,7 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
   return (
     <div className="flex space-x-1">
       {stepLabels.map((label, index) => (
-        <div key={label}>
+        <div key={label} className="flex space-x-1">
           {index === currentStep ? (
             <p className="text-sm text-purple-700">{label}</p>
           ) : (

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

@@ -7,6 +7,11 @@ import { PlusIcon } from '@heroicons/react/20/solid';
 import { TrashIcon } from '@heroicons/react/24/outline';
 import { Button, Dialog } from '@tih/ui';
 
+import {
+  defaultFullTimeOfferValues,
+  defaultInternshipOfferValues,
+} from '~/pages/offers/submit';
+
 import FormMonthYearPicker from './components/FormMonthYearPicker';
 import FormSelect from './components/FormSelect';
 import FormTextArea from './components/FormTextArea';
@@ -479,7 +484,13 @@ function OfferDetailsFormArray({
         label="Add another offer"
         size="lg"
         variant="tertiary"
-        onClick={() => append({})}
+        onClick={() =>
+          append(
+            jobType === JobType.FullTime
+              ? defaultFullTimeOfferValues
+              : defaultInternshipOfferValues,
+          )
+        }
       />
     </div>
   );
@@ -488,16 +499,18 @@ function OfferDetailsFormArray({
 export default function OfferDetailsForm() {
   const [jobType, setJobType] = useState(JobType.FullTime);
   const [isDialogOpen, setDialogOpen] = useState(false);
-  const { control, register } = useFormContext();
+  const { control } = useFormContext();
   const fieldArrayValues = useFieldArray({ control, name: 'offers' });
 
   const toggleJobType = () => {
+    fieldArrayValues.remove();
     if (jobType === JobType.FullTime) {
       setJobType(JobType.Internship);
+      fieldArrayValues.append(defaultInternshipOfferValues);
     } else {
       setJobType(JobType.FullTime);
+      fieldArrayValues.append(defaultFullTimeOfferValues);
     }
-    fieldArrayValues.remove();
   };
 
   const switchJobTypeLabel = () =>
@@ -523,7 +536,6 @@ export default function OfferDetailsForm() {
               }
               setDialogOpen(true);
             }}
-            {...register(`offers.${0}.jobType`)}
           />
         </div>
         <div className="mx-5 w-1/3">
@@ -538,7 +550,6 @@ export default function OfferDetailsForm() {
               }
               setDialogOpen(true);
             }}
-            {...register(`offers.${0}.jobType`)}
           />
         </div>
       </div>

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

@@ -21,13 +21,6 @@ import { getCurrentMonth, getCurrentYear } from '~/utils/offers/time';
 import { trpc } from '~/utils/trpc';
 
 const defaultOfferValues = {
-  background: {
-    educations: [],
-    experiences: [{ jobType: JobType.FullTime }],
-    specificYoes: [],
-  },
-  offers: [
-    {
   comments: '',
   companyId: '',
   job: {},
@@ -38,8 +31,25 @@ const defaultOfferValues = {
     year: getCurrentYear(),
   },
   negotiationStrategy: '',
+};
+
+export const defaultFullTimeOfferValues = {
+  ...defaultOfferValues,
+  jobType: JobType.FullTime,
+};
+
+export const defaultInternshipOfferValues = {
+  ...defaultOfferValues,
+  jobType: JobType.Internship,
+};
+
+const defaultOfferProfileValues = {
+  background: {
+    educations: [],
+    experiences: [{ jobType: JobType.FullTime }],
+    specificYoes: [],
   },
-  ],
+  offers: [defaultOfferValues],
 };
 
 type FormStep = {
@@ -55,7 +65,7 @@ export default function OffersSubmissionPage() {
   const scrollToTop = () =>
     pageRef.current?.scrollTo({ behavior: 'smooth', top: 0 });
   const formMethods = useForm<OfferProfileFormData>({
-    defaultValues: defaultOfferValues,
+    defaultValues: defaultOfferProfileValues,
     mode: 'all',
   });
   const { handleSubmit, trigger } = formMethods;
@@ -121,8 +131,17 @@ export default function OffersSubmissionPage() {
     if (!result) {
       return;
     }
+
     data = removeInvalidMoneyData(data);
+
     const background = cleanObject(data.background);
+    background.specificYoes = data.background.specificYoes.filter(
+      (specificYoe) => specificYoe.domain && specificYoe.yoe > 0,
+    );
+    if (Object.entries(background.experiences[0]).length === 1) {
+      background.experiences = [];
+    }
+
     const offers = data.offers.map((offer: OfferDetailsFormData) => ({
       ...offer,
       monthYearReceived: new Date(
@@ -130,15 +149,9 @@ export default function OffersSubmissionPage() {
         offer.monthYearReceived.month,
       ),
     }));
-    const postData = { background, offers };
 
-    postData.background.specificYoes = data.background.specificYoes.filter(
+    const postData = { background, offers };
-      (specificYoe) => specificYoe.domain && specificYoe.yoe > 0,
-    );
 
-    if (Object.entries(postData.background.experiences[0]).length === 1) {
-      postData.background.experiences = [];
-    }
     createMutation.mutate(postData);
   };