From 21c9d9410a5fa127c6903ef559ed7829a11ada81 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 1 Nov 2022 21:17:18 +0800
Subject: [PATCH] [offers][feat] tweak offer details submission form (#488)

---
 .../offersSubmission/OffersSubmissionForm.tsx |   7 +-
 .../submissionForm/OfferDetailsForm.tsx       | 576 +++++++++---------
 .../HorizontalDivider/HorizontalDivider.tsx   |   2 +-
 3 files changed, 301 insertions(+), 284 deletions(-)

diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 325c9afc..440e2686 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -275,16 +275,17 @@ export default function OffersSubmissionForm({
             />
           </div>
           <FormProvider {...formMethods}>
-            <form className="text-sm" onSubmit={handleSubmit(onSubmit)}>
+            <form
+              className="space-y-6 text-sm"
+              onSubmit={handleSubmit(onSubmit)}>
               {steps[step]}
-              {/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
               {step === 0 && (
                 <div className="flex justify-end">
                   <Button
                     disabled={false}
                     icon={ArrowRightIcon}
                     label="Next"
-                    variant="secondary"
+                    variant="primary"
                     onClick={() => {
                       goToNextStep(step);
                       gaEvent({
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
index 34a65829..091a9431 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
@@ -10,7 +10,7 @@ import { useFieldArray } from 'react-hook-form';
 import { PlusIcon } from '@heroicons/react/20/solid';
 import { TrashIcon } from '@heroicons/react/24/outline';
 import { JobType } from '@prisma/client';
-import { Button, Dialog } from '@tih/ui';
+import { Button, Dialog, HorizontalDivider } from '@tih/ui';
 
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import type { JobTitleType } from '~/components/shared/JobTitles';
@@ -45,6 +45,23 @@ type FullTimeOfferDetailsFormProps = Readonly<{
   remove: UseFieldArrayRemove;
 }>;
 
+function Section({
+  children,
+  title,
+}: Readonly<{ children: React.ReactNode; title: string }>) {
+  return (
+    <div>
+      <div className="mb-4">
+        <h3 className="text-lg font-medium leading-6 text-slate-900">
+          {title}
+        </h3>
+        <HorizontalDivider />
+      </div>
+      <div className="space-y-4 sm:space-y-6">{children}</div>
+    </div>
+  );
+}
+
 function FullTimeOfferDetailsForm({
   index,
   remove,
@@ -77,9 +94,9 @@ function FullTimeOfferDetailsForm({
   }, [watchCurrency, index, setValue]);
 
   return (
-    <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+    <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
+      <Section title="Company & Title Information">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <JobTitlesTypeahead
             required={true}
             value={{
@@ -93,19 +110,17 @@ function FullTimeOfferDetailsForm({
               }
             }}
           />
+          <FormTextInput
+            errorMessage={offerFields?.offersFullTime?.level?.message}
+            label="Level"
+            placeholder="e.g. L4, Junior"
+            required={true}
+            {...register(`offers.${index}.offersFullTime.level`, {
+              required: FieldError.REQUIRED,
+            })}
+          />
         </div>
-        <FormTextInput
-          errorMessage={offerFields?.offersFullTime?.level?.message}
-          label="Level"
-          placeholder="e.g. L4, Junior"
-          required={true}
-          {...register(`offers.${index}.offersFullTime.level`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <CompaniesTypeahead
             required={true}
             value={{
@@ -120,165 +135,168 @@ function FullTimeOfferDetailsForm({
               }
             }}
           />
+          <FormSelect
+            display="block"
+            errorMessage={offerFields?.location?.message}
+            label="Location"
+            options={locationOptions}
+            placeholder={emptyOption}
+            required={true}
+            {...register(`offers.${index}.location`, {
+              required: FieldError.REQUIRED,
+            })}
+          />
         </div>
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.location?.message}
-          label="Location"
-          options={locationOptions}
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.location`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-      </div>
-      <div className="mb-5 flex grid grid-cols-2 items-start space-x-3">
-        <FormMonthYearPicker
-          monthLabel="Date Received"
-          monthRequired={true}
-          yearLabel=""
-          {...register(`offers.${index}.monthYearReceived`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-      </div>
-      <div className="mb-5">
-        <FormTextInput
-          endAddOn={
-            <FormSelect
-              borderStyle="borderless"
-              defaultValue={Currency.SGD}
-              isLabelHidden={true}
-              label="Currency"
-              options={CURRENCY_OPTIONS}
-              {...register(
-                `offers.${index}.offersFullTime.totalCompensation.currency`,
-                {
-                  required: FieldError.REQUIRED,
-                },
-              )}
-            />
-          }
-          endAddOnType="element"
-          errorMessage={
-            offerFields?.offersFullTime?.totalCompensation?.value?.message
-          }
-          label="Total Compensation (Annual)"
-          placeholder="0"
-          required={true}
-          startAddOn="$"
-          startAddOnType="label"
-          type="number"
-          {...register(
-            `offers.${index}.offersFullTime.totalCompensation.value`,
-            {
-              min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
+      </Section>
+      <Section title="Compensation Details">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          <FormMonthYearPicker
+            monthLabel="Date Received"
+            monthRequired={true}
+            yearLabel=""
+            {...register(`offers.${index}.monthYearReceived`, {
               required: FieldError.REQUIRED,
+            })}
+          />
+          <FormTextInput
+            endAddOn={
+              <FormSelect
+                borderStyle="borderless"
+                defaultValue={Currency.SGD}
+                isLabelHidden={true}
+                label="Currency"
+                options={CURRENCY_OPTIONS}
+                {...register(
+                  `offers.${index}.offersFullTime.totalCompensation.currency`,
+                  {
+                    required: FieldError.REQUIRED,
+                  },
+                )}
+              />
+            }
+            endAddOnType="element"
+            errorMessage={
+              offerFields?.offersFullTime?.totalCompensation?.value?.message
+            }
+            label="Total Compensation (Annual)"
+            placeholder="0"
+            required={true}
+            startAddOn="$"
+            startAddOnType="label"
+            type="number"
+            {...register(
+              `offers.${index}.offersFullTime.totalCompensation.value`,
+              {
+                min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
+                required: FieldError.REQUIRED,
+                valueAsNumber: true,
+              },
+            )}
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
+          <FormTextInput
+            endAddOn={
+              <FormSelect
+                borderStyle="borderless"
+                defaultValue={Currency.SGD}
+                isLabelHidden={true}
+                label="Currency"
+                options={CURRENCY_OPTIONS}
+                {...register(
+                  `offers.${index}.offersFullTime.baseSalary.currency`,
+                )}
+              />
+            }
+            endAddOnType="element"
+            errorMessage={
+              offerFields?.offersFullTime?.baseSalary?.value?.message
+            }
+            label="Base Salary (Annual)"
+            placeholder="0"
+            startAddOn="$"
+            startAddOnType="label"
+            type="number"
+            {...register(`offers.${index}.offersFullTime.baseSalary.value`, {
+              min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
               valueAsNumber: true,
-            },
-          )}
-        />
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormTextInput
-          endAddOn={
-            <FormSelect
-              borderStyle="borderless"
-              defaultValue={Currency.SGD}
-              isLabelHidden={true}
-              label="Currency"
-              options={CURRENCY_OPTIONS}
-              {...register(
-                `offers.${index}.offersFullTime.baseSalary.currency`,
-              )}
-            />
-          }
-          endAddOnType="element"
-          errorMessage={offerFields?.offersFullTime?.baseSalary?.value?.message}
-          label="Base Salary (Annual)"
-          placeholder="0"
-          startAddOn="$"
-          startAddOnType="label"
-          type="number"
-          {...register(`offers.${index}.offersFullTime.baseSalary.value`, {
-            min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            valueAsNumber: true,
-          })}
-        />
-        <FormTextInput
-          endAddOn={
-            <FormSelect
-              borderStyle="borderless"
-              defaultValue={Currency.SGD}
-              isLabelHidden={true}
-              label="Currency"
-              options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.offersFullTime.bonus.currency`)}
-            />
-          }
-          endAddOnType="element"
-          errorMessage={offerFields?.offersFullTime?.bonus?.value?.message}
-          label="Bonus (Annual)"
-          placeholder="0"
-          startAddOn="$"
-          startAddOnType="label"
-          type="number"
-          {...register(`offers.${index}.offersFullTime.bonus.value`, {
-            min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            valueAsNumber: true,
-          })}
-        />
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormTextInput
-          endAddOn={
-            <FormSelect
-              borderStyle="borderless"
-              defaultValue={Currency.SGD}
-              isLabelHidden={true}
-              label="Currency"
-              options={CURRENCY_OPTIONS}
-              {...register(`offers.${index}.offersFullTime.stocks.currency`)}
-            />
-          }
-          endAddOnType="element"
-          errorMessage={offerFields?.offersFullTime?.stocks?.value?.message}
-          label="Stocks (Annual)"
-          placeholder="0"
-          startAddOn="$"
-          startAddOnType="label"
-          type="number"
-          {...register(`offers.${index}.offersFullTime.stocks.value`, {
-            min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            valueAsNumber: true,
-          })}
-        />
-      </div>
-      <div className="mb-5">
+            })}
+          />
+          <FormTextInput
+            endAddOn={
+              <FormSelect
+                borderStyle="borderless"
+                defaultValue={Currency.SGD}
+                isLabelHidden={true}
+                label="Currency"
+                options={CURRENCY_OPTIONS}
+                {...register(`offers.${index}.offersFullTime.bonus.currency`)}
+              />
+            }
+            endAddOnType="element"
+            errorMessage={offerFields?.offersFullTime?.bonus?.value?.message}
+            label="Bonus (Annual)"
+            placeholder="0"
+            startAddOn="$"
+            startAddOnType="label"
+            type="number"
+            {...register(`offers.${index}.offersFullTime.bonus.value`, {
+              min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
+              valueAsNumber: true,
+            })}
+          />
+          <FormTextInput
+            endAddOn={
+              <FormSelect
+                borderStyle="borderless"
+                defaultValue={Currency.SGD}
+                isLabelHidden={true}
+                label="Currency"
+                options={CURRENCY_OPTIONS}
+                {...register(`offers.${index}.offersFullTime.stocks.currency`)}
+              />
+            }
+            endAddOnType="element"
+            errorMessage={offerFields?.offersFullTime?.stocks?.value?.message}
+            label="Stocks (Annual)"
+            placeholder="0"
+            startAddOn="$"
+            startAddOnType="label"
+            type="number"
+            {...register(`offers.${index}.offersFullTime.stocks.value`, {
+              min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      </Section>
+      <Section title="Additional Information">
         <FormTextArea
           label="Negotiation Strategy / Interview Performance"
           placeholder="e.g. Did well in the behavioral interview / Used competing offers to negotiate for a higher salary"
           {...register(`offers.${index}.negotiationStrategy`)}
         />
-      </div>
-      <div className="mb-5">
         <FormTextArea
           label="Comments"
           placeholder="e.g. Benefits offered by the company"
           {...register(`offers.${index}.comments`)}
         />
-      </div>
-      <div className="flex justify-end">
         {index > 0 && (
-          <Button
-            icon={TrashIcon}
-            label="Delete"
-            variant="secondary"
-            onClick={() => remove(index)}
-          />
+          <div className="space-y-4 sm:space-y-6">
+            <HorizontalDivider />
+            <div className="flex justify-end">
+              <Button
+                icon={TrashIcon}
+                label="Delete"
+                variant="tertiary"
+                onClick={() => {
+                  remove(index);
+                }}
+              />
+            </div>
+          </div>
         )}
-      </div>
+      </Section>
     </div>
   );
 }
@@ -308,26 +326,23 @@ function InternshipOfferDetailsForm({
   });
 
   return (
-    <div className="my-5 rounded-lg border border-slate-200 px-10 py-5">
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
-          <JobTitlesTypeahead
-            required={true}
-            value={{
-              id: watchJobTitle,
-              label: getLabelForJobTitleType(watchJobTitle as JobTitleType),
-              value: watchJobTitle,
-            }}
-            onSelect={(option) => {
-              if (option) {
-                setValue(`offers.${index}.offersIntern.title`, option.value);
-              }
-            }}
-          />
-        </div>
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <div>
+    <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
+      <Section title="Company & Title Information">
+        <JobTitlesTypeahead
+          required={true}
+          value={{
+            id: watchJobTitle,
+            label: getLabelForJobTitleType(watchJobTitle as JobTitleType),
+            value: watchJobTitle,
+          }}
+          onSelect={(option) => {
+            if (option) {
+              setValue(`offers.${index}.offersIntern.title`, option.value);
+            }
+          }}
+        />
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
           <CompaniesTypeahead
             required={true}
             value={{
@@ -342,114 +357,115 @@ function InternshipOfferDetailsForm({
               }
             }}
           />
+          <FormSelect
+            display="block"
+            errorMessage={offerFields?.location?.message}
+            label="Location"
+            options={locationOptions}
+            placeholder={emptyOption}
+            required={true}
+            {...register(`offers.${index}.location`, {
+              required: FieldError.REQUIRED,
+            })}
+          />
         </div>
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.location?.message}
-          label="Location"
-          options={locationOptions}
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.location`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-      </div>
-      <div className="mb-5 grid grid-cols-2 space-x-3">
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.offersIntern?.internshipCycle?.message}
-          label="Internship Cycle"
-          options={internshipCycleOptions}
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.offersIntern.internshipCycle`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-        <FormSelect
-          display="block"
-          errorMessage={offerFields?.offersIntern?.startYear?.message}
-          label="Internship Year"
-          options={yearOptions}
-          placeholder={emptyOption}
-          required={true}
-          {...register(`offers.${index}.offersIntern.startYear`, {
-            required: FieldError.REQUIRED,
-            valueAsNumber: true,
-          })}
-        />
-      </div>
-      <div className="mb-5">
-        <FormMonthYearPicker
-          monthLabel="Date Received"
-          monthRequired={true}
-          yearLabel=""
-          {...register(`offers.${index}.monthYearReceived`, {
-            required: FieldError.REQUIRED,
-          })}
-        />
-      </div>
-      <div className="mb-5">
-        <FormTextInput
-          endAddOn={
-            <FormSelect
-              borderStyle="borderless"
-              defaultValue={Currency.SGD}
-              isLabelHidden={true}
-              label="Currency"
-              options={CURRENCY_OPTIONS}
-              {...register(
-                `offers.${index}.offersIntern.monthlySalary.currency`,
-                {
-                  required: FieldError.REQUIRED,
-                },
-              )}
-            />
-          }
-          endAddOnType="element"
-          errorMessage={
-            offerFields?.offersIntern?.monthlySalary?.value?.message
-          }
-          label="Salary (Monthly)"
-          placeholder="0"
-          required={true}
-          startAddOn="$"
-          startAddOnType="label"
-          type="number"
-          {...register(`offers.${index}.offersIntern.monthlySalary.value`, {
-            min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
-            required: FieldError.REQUIRED,
-            valueAsNumber: true,
-          })}
-        />
-      </div>
-      <div className="mb-5">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          <FormSelect
+            display="block"
+            errorMessage={offerFields?.offersIntern?.internshipCycle?.message}
+            label="Internship Cycle"
+            options={internshipCycleOptions}
+            placeholder={emptyOption}
+            required={true}
+            {...register(`offers.${index}.offersIntern.internshipCycle`, {
+              required: FieldError.REQUIRED,
+            })}
+          />
+          <FormSelect
+            display="block"
+            errorMessage={offerFields?.offersIntern?.startYear?.message}
+            label="Internship Year"
+            options={yearOptions}
+            placeholder={emptyOption}
+            required={true}
+            {...register(`offers.${index}.offersIntern.startYear`, {
+              required: FieldError.REQUIRED,
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      </Section>
+      <Section title="Compensation Details">
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+          <FormMonthYearPicker
+            monthLabel="Date Received"
+            monthRequired={true}
+            yearLabel=""
+            {...register(`offers.${index}.monthYearReceived`, {
+              required: FieldError.REQUIRED,
+            })}
+          />
+          <FormTextInput
+            endAddOn={
+              <FormSelect
+                borderStyle="borderless"
+                defaultValue={Currency.SGD}
+                isLabelHidden={true}
+                label="Currency"
+                options={CURRENCY_OPTIONS}
+                {...register(
+                  `offers.${index}.offersIntern.monthlySalary.currency`,
+                  {
+                    required: FieldError.REQUIRED,
+                  },
+                )}
+              />
+            }
+            endAddOnType="element"
+            errorMessage={
+              offerFields?.offersIntern?.monthlySalary?.value?.message
+            }
+            label="Salary (Monthly)"
+            placeholder="0"
+            required={true}
+            startAddOn="$"
+            startAddOnType="label"
+            type="number"
+            {...register(`offers.${index}.offersIntern.monthlySalary.value`, {
+              min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
+              required: FieldError.REQUIRED,
+              valueAsNumber: true,
+            })}
+          />
+        </div>
+      </Section>
+      <Section title="Additional Information">
         <FormTextArea
           label="Negotiation Strategy / Interview Performance"
           placeholder="e.g. Did well in the behavioral interview. Used competing offers to negotiate for a higher salary."
           {...register(`offers.${index}.negotiationStrategy`)}
         />
-      </div>
-      <div className="mb-5">
         <FormTextArea
           label="Comments"
           placeholder="e.g. Encountered similar questions using the Technical Interview Handbook."
           {...register(`offers.${index}.comments`)}
         />
-      </div>
-      <div className="flex justify-end">
-        {index > 0 && (
-          <Button
-            icon={TrashIcon}
-            label="Delete"
-            variant="secondary"
-            onClick={() => {
-              remove(index);
-            }}
-          />
-        )}
-      </div>
+      </Section>
+      {index > 0 && (
+        <div className="space-y-4 sm:space-y-6">
+          <HorizontalDivider />
+          <div className="flex justify-end">
+            <Button
+              icon={TrashIcon}
+              label="Delete"
+              variant="tertiary"
+              onClick={() => {
+                remove(index);
+              }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -466,7 +482,7 @@ function OfferDetailsFormArray({
   const { append, remove, fields } = fieldArrayValues;
 
   return (
-    <div>
+    <div className="space-y-8">
       {fields.map((item, index) => {
         return (
           <div key={item.id}>
@@ -483,7 +499,7 @@ function OfferDetailsFormArray({
         icon={PlusIcon}
         label="Add another offer"
         size="lg"
-        variant="tertiary"
+        variant="secondary"
         onClick={() =>
           append(
             jobType === JobType.FULLTIME
@@ -524,7 +540,7 @@ export default function OfferDetailsForm({
     jobType === JobType.FULLTIME ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
 
   return (
-    <div className="mb-5">
+    <div className="space-y-6">
       <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
         Fill in your offer details
       </h5>
diff --git a/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx b/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx
index 6e2396dc..c9f3d2b1 100644
--- a/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx
+++ b/packages/ui/src/HorizontalDivider/HorizontalDivider.tsx
@@ -8,7 +8,7 @@ export default function HorizontalDivider({ className }: Props) {
   return (
     <hr
       aria-hidden={true}
-      className={clsx('my-2 h-0 border-t border-slate-100', className)}
+      className={clsx('my-2 h-0 border-t border-slate-200', className)}
     />
   );
 }