[offers][style] style offers form

3 years ago · db6ac5d701
parent 0b13faa5e1
commit db6ac5d701
6 changed files with 92 additions and 66 deletions
--- a/apps/portal/src/components/offers/constants.ts
+++ b/apps/portal/src/components/offers/constants.ts
@ -1,5 +1,13 @@
+import { EducationBackgroundType } from './types';
+
+const emptyOption = {
+  label: '----',
+  value: '',
+};
+
 // TODO: use enums
 export const titleOptions = [
+  emptyOption,
  {
    label: 'Software engineer',
    value: 'Software engineer',
@ -18,36 +26,48 @@ export const titleOptions = [
  },
 ];

-export const currencyOptions = [
+export const companyOptions = [
+  emptyOption,
  {
-    label: 'USD',
-    value: 'USD',
+    label: 'Bytedance',
+    value: 'id-abc123',
  },
  {
-    label: 'SGD',
-    value: 'SGD',
+    label: 'Google',
+    value: 'id-abc567',
  },
  {
-    label: 'EUR',
-    value: 'EUR',
+    label: 'Meta',
+    value: 'id-abc456',
  },
-];
-
-export const companyOptions = [
  {
    label: 'Shopee',
-    value: 'id-abc123',
+    value: 'id-abc345',
+  },
+  {
+    label: 'Tik Tok',
+    value: 'id-abc678',
  },
 ];

 export const locationOptions = [
+  emptyOption,
  {
    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 = [
+  emptyOption,
  {
    label: 'Summer',
    value: 'Summer',
@ -65,12 +85,13 @@ export const internshipCycleOptions = [
    value: 'Fall',
  },
  {
-    label: 'Full-year',
-    value: 'Full-year',
+    label: 'Full year',
+    value: 'Full year',
  },
 ];

 export const yearOptions = [
+  emptyOption,
  {
    label: '2021',
    value: '2021',
@ -89,22 +110,17 @@ export const yearOptions = [
  },
 ];

-export const educationLevelOptions = [
-  {
-    label: 'Bachelor',
-    value: 'Bachelor',
-  },
-  {
-    label: 'Masters',
-    value: 'Masters',
-  },
-  {
-    label: 'Doctorate',
-    value: 'Doctorate',
-  },
-];
+const educationBackgroundTypes = Object.entries(EducationBackgroundType).map(
+  ([key, value]) => ({
+    label: key,
+    value,
+  }),
+);
+
+export const educationLevelOptions = [emptyOption, ...educationBackgroundTypes];

 export const educationFieldOptions = [
+  emptyOption,
  {
    label: 'Computer Science',
    value: 'Computer Science',
--- a/apps/portal/src/components/offers/forms/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/forms/BackgroundForm.tsx
@ -1,4 +1,4 @@
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, useWatch } from 'react-hook-form';
 import { Collapsible, RadioList } from '@tih/ui';

 import FormRadioList from './FormRadioList';
@ -6,12 +6,13 @@ import FormSelect from './FormSelect';
 import FormTextInput from './FormTextInput';
 import {
  companyOptions,
-  currencyOptions,
  educationFieldOptions,
  educationLevelOptions,
  locationOptions,
  titleOptions,
 } from '../constants';
+import { JobType } from '../types';
+import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';

 function YoeSection() {
  const { register } = useFormContext();
@ -25,6 +26,7 @@ function YoeSection() {
        <div className="mb-2 grid grid-cols-3 space-x-3">
          <FormTextInput
            label="Total YOE"
+            placeholder="0"
            type="number"
            {...register(`background.totalYoe`)}
          />
@ -87,7 +89,7 @@ function FullTimeJobFields() {
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`background.experience.totalCompensation.currency`)}
            />
          }
@ -156,7 +158,7 @@ function InternshipJobFields() {
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`background.experience.monthlySalary.currency`)}
            />
          }
@ -189,8 +191,11 @@ function InternshipJobFields() {
 }

 function CurrentJobSection() {
-  const { register, watch } = useFormContext();
-  const watchJobType = watch('background.experience.jobType', 'FULLTIME');
+  const { register } = useFormContext();
+  const watchJobType = useWatch({
+    defaultValue: JobType.FullTime,
+    name: 'background.experience.jobType',
+  });

  return (
    <>
@ -200,7 +205,7 @@ function CurrentJobSection() {
      <div className="mb-5 rounded-lg border border-gray-200 px-10 py-5">
        <div className="mb-5">
          <FormRadioList
-            defaultValue="Full-time"
+            defaultValue={JobType.FullTime}
            isLabelHidden={true}
            label="Job Type"
            orientation="horizontal"
@ -208,16 +213,16 @@ function CurrentJobSection() {
            <RadioList.Item
              key="Full-time"
              label="Full-time"
-              value="Full-time"
+              value={JobType.FullTime}
            />
            <RadioList.Item
              key="Internship"
              label="Internship"
-              value="Internship"
+              value={JobType.Internship}
            />
          </FormRadioList>
        </div>
-        {watchJobType === 'Full-time' ? (
+        {watchJobType === JobType.FullTime ? (
          <FullTimeJobFields />
        ) : (
          <InternshipJobFields />
@ -250,7 +255,7 @@ function EducationSection() {
          />
        </div>
        <Collapsible label="Add more details">
-          <div className="mb-5 grid grid-cols-3 space-x-3">
+          <div className="mb-5">
            <FormTextInput
              label="School"
              placeholder="e.g. National University of Singapore"
@ -269,7 +274,7 @@ export default function BackgroundForm() {
      <h5 className="mb-2 text-center text-4xl font-bold text-gray-900">
        Help us better gauge your offers
      </h5>
-      <h6 className="mb-8 text-center text-xl font-light ">
+      <h6 className="mx-10 mb-8 text-center text-lg font-light text-gray-600">
        This section is optional, but your background information helps us
        benchmark your offers.
      </h6>
--- a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
@ -15,7 +15,6 @@ import FormTextArea from './FormTextArea';
 import FormTextInput from './FormTextInput';
 import {
  companyOptions,
-  currencyOptions,
  internshipCycleOptions,
  locationOptions,
  titleOptions,
@ -23,6 +22,7 @@ import {
 } from '../constants';
 import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types';
 import { JobType } from '../types';
+import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';

 type FullTimeOfferDetailsFormProps = Readonly<{
  index: number;
@ -39,7 +39,7 @@ function FullTimeOfferDetailsForm({

  return (
    <div className="my-5 rounded-lg border border-gray-200 px-10 py-5">
-      <div className="mb-5 grid grid-cols-3 space-x-3">
+      <div className="mb-5 grid grid-cols-2 space-x-3">
        <FormSelect
          display="block"
          label="Title"
@ -57,6 +57,8 @@ function FullTimeOfferDetailsForm({
            required: true,
          })}
        />
+      </div>
+      <div className="mb-5 grid grid-cols-2 space-x-3">
        <FormSelect
          display="block"
          label="Company"
@ -64,14 +66,14 @@ function FullTimeOfferDetailsForm({
          required={true}
          {...register(`offers.${index}.companyId`, { required: true })}
        />
-      </div>
-      <div className="mb-5 grid grid-cols-3 space-x-3">
        <FormTextInput
          label="Level"
          placeholder="e.g. L4, Junior"
          required={true}
          {...register(`offers.${index}.job.level`, { required: true })}
        />
+      </div>
+      <div className="mb-5 grid grid-cols-2 space-x-3">
        <FormSelect
          display="block"
          label="Location"
@ -93,7 +95,7 @@ function FullTimeOfferDetailsForm({
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`offers.${index}.job.totalCompensation.currency`, {
                required: true,
              })}
@ -111,14 +113,14 @@ function FullTimeOfferDetailsForm({
          })}
        />
      </div>
-      <div className="mb-5 grid grid-cols-3 space-x-3">
+      <div className="mb-5 grid grid-cols-2 space-x-3">
        <FormTextInput
          endAddOn={
            <FormSelect
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`offers.${index}.job.base.currency`)}
            />
          }
@ -137,7 +139,7 @@ function FullTimeOfferDetailsForm({
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`offers.${index}.job.bonus.currency`)}
            />
          }
@ -150,13 +152,15 @@ function FullTimeOfferDetailsForm({
          type="number"
          {...register(`offers.${index}.job.bonus.value`)}
        />
+      </div>
+      <div className="mb-5 grid grid-cols-2 space-x-3">
        <FormTextInput
          endAddOn={
            <FormSelect
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`offers.${index}.job.stocks.currency`)}
            />
          }
@ -316,7 +320,7 @@ function InternshipOfferDetailsForm({
              borderStyle="borderless"
              isLabelHidden={true}
              label="Currency"
-              options={currencyOptions}
+              options={CURRENCY_OPTIONS}
              {...register(`offers.${index}.job.monthlySalary.currency`)}
            />
          }
@ -381,7 +385,7 @@ export default function OfferDetailsForm() {
        <div className="mx-5 w-1/3">
          <Button
            display="block"
-            label={JobType.FullTime}
+            label="Full-time"
            size="md"
            variant={jobType === JobType.FullTime ? 'secondary' : 'tertiary'}
            onClick={changeJobType(JobType.FullTime)}
@ -391,7 +395,7 @@ export default function OfferDetailsForm() {
        <div className="mx-5 w-1/3">
          <Button
            display="block"
-            label={JobType.Internship}
+            label="Internship"
            size="md"
            variant={jobType === JobType.Internship ? 'secondary' : 'tertiary'}
            onClick={changeJobType(JobType.Internship)}
--- a/apps/portal/src/components/offers/profile/EducationCard.tsx
+++ b/apps/portal/src/components/offers/profile/EducationCard.tsx
@ -3,17 +3,7 @@ import {
  LightBulbIcon,
 } from '@heroicons/react/24/outline';

-// To be replaced by form enums
-// eslint-disable-next-line no-shadow
-export enum EducationBackgroundType {
-  Bachelor = 'Bachelor',
-  Diploma = 'Diploma',
-  Masters = 'Masters',
-  PhD = 'PhD',
-  Professional = 'Professional',
-  Seconday = 'Secondary',
-  SelfTaught = 'Self-taught',
-}
+import type { EducationBackgroundType } from '../types';

 type EducationEntity = {
  backgroundType?: EducationBackgroundType;
--- a/apps/portal/src/components/offers/types.ts
+++ b/apps/portal/src/components/offers/types.ts
@ -1,13 +1,23 @@
+/* eslint-disable no-shadow */
 /*
- *  Offer Profile Submission
+ *  Offer Profile
 */

-// eslint-disable-next-line no-shadow
 export enum JobType {
  FullTime = 'FULLTIME',
  Internship = 'INTERNSHIP',
 }

+export enum EducationBackgroundType {
+  Bachelor = 'Bachelor',
+  Diploma = 'Diploma',
+  Masters = 'Masters',
+  PhD = 'PhD',
+  Professional = 'Professional',
+  Seconday = 'Secondary',
+  SelfTaught = 'Self-taught',
+}
+
 type Money = {
  currency: string;
  value: number;
--- a/apps/portal/src/pages/offers/submit.tsx
+++ b/apps/portal/src/pages/offers/submit.tsx
@ -22,7 +22,7 @@ const defaultOfferValues = {
  offers: [
    {
      comments: '',
-      companyId: 'Shopee',
+      companyId: '',
      job: {
        base: {
          currency: 'USD',
@ -45,6 +45,7 @@ const defaultOfferValues = {
        },
      },
      jobType: 'FULLTIME',
+      location: '',
      monthYearReceived: '',
      negotiationStrategy: '',
    },
@ -74,7 +75,7 @@ export default function OffersSubmissionPage() {
  return (
    <div className="fixed h-full w-full overflow-y-scroll">
      <div className="mb-20 flex justify-center">
-        <div className="my-5 block w-3/4 rounded-lg bg-white py-10 px-10 shadow-lg">
+        <div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg">
          <Breadcrumbs />
          <FormProvider {...formMethods}>
            <form onSubmit={formMethods.handleSubmit(onSubmit)}>