msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[offers][feat] tweak offer details submission form ()

Browse Source
pull/489/head
Yangshun Tay 2 years ago committed by GitHub
parent 64bc8158c1
commit 21c9d9410a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 301 additions and 284 deletions

7
apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
Unescape View File

@ -275,16 +275,17 @@ export default function OffersSubmissionForm({
/> />
</div> </div>
<FormProvider {...formMethods}> <FormProvider {...formMethods}>
<form className="text-sm" onSubmit={handleSubmit(onSubmit)}> <form
className="space-y-6 text-sm"
onSubmit={handleSubmit(onSubmit)}>
{steps[step]} {steps[step]}
{/* <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre> */}
{step === 0 && ( {step === 0 && (
<div className="flex justify-end"> <div className="flex justify-end">
<Button <Button
disabled={false} disabled={false}
icon={ArrowRightIcon} icon={ArrowRightIcon}
label="Next" label="Next"
variant="secondary" variant="primary"
onClick={() => { onClick={() => {
goToNextStep(step); goToNextStep(step);
gaEvent({ gaEvent({

106
apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
Unescape View File

@ -10,7 +10,7 @@ import { useFieldArray } from 'react-hook-form';
import { PlusIcon } from '@heroicons/react/20/solid'; import { PlusIcon } from '@heroicons/react/20/solid';
import { TrashIcon } from '@heroicons/react/24/outline'; import { TrashIcon } from '@heroicons/react/24/outline';
import { JobType } from '@prisma/client'; 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 CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
import type { JobTitleType } from '~/components/shared/JobTitles'; import type { JobTitleType } from '~/components/shared/JobTitles';
@ -45,6 +45,23 @@ type FullTimeOfferDetailsFormProps = Readonly<{
remove: UseFieldArrayRemove; 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({ function FullTimeOfferDetailsForm({
index, index,
remove, remove,
@ -77,9 +94,9 @@ function FullTimeOfferDetailsForm({
}, [watchCurrency, index, setValue]); }, [watchCurrency, index, setValue]);
return ( return (
<div className="my-5 rounded-lg border border-slate-200 px-10 py-5"> <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
<div className="mb-5 grid grid-cols-2 space-x-3"> <Section title="Company & Title Information">
<div> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<JobTitlesTypeahead <JobTitlesTypeahead
required={true} required={true}
value={{ value={{
@ -93,7 +110,6 @@ function FullTimeOfferDetailsForm({
} }
}} }}
/> />
</div>
<FormTextInput <FormTextInput
errorMessage={offerFields?.offersFullTime?.level?.message} errorMessage={offerFields?.offersFullTime?.level?.message}
label="Level" label="Level"
@ -104,8 +120,7 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div>
<CompaniesTypeahead <CompaniesTypeahead
required={true} required={true}
value={{ value={{
@ -120,7 +135,6 @@ function FullTimeOfferDetailsForm({
} }
}} }}
/> />
</div>
<FormSelect <FormSelect
display="block" display="block"
errorMessage={offerFields?.location?.message} errorMessage={offerFields?.location?.message}
@ -133,7 +147,9 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5 flex grid grid-cols-2 items-start space-x-3"> </Section>
<Section title="Compensation Details">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<FormMonthYearPicker <FormMonthYearPicker
monthLabel="Date Received" monthLabel="Date Received"
monthRequired={true} monthRequired={true}
@ -142,8 +158,6 @@ function FullTimeOfferDetailsForm({
required: FieldError.REQUIRED, required: FieldError.REQUIRED,
})} })}
/> />
</div>
<div className="mb-5">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
@ -180,7 +194,7 @@ function FullTimeOfferDetailsForm({
)} )}
/> />
</div> </div>
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
@ -195,7 +209,9 @@ function FullTimeOfferDetailsForm({
/> />
} }
endAddOnType="element" endAddOnType="element"
errorMessage={offerFields?.offersFullTime?.baseSalary?.value?.message} errorMessage={
offerFields?.offersFullTime?.baseSalary?.value?.message
}
label="Base Salary (Annual)" label="Base Salary (Annual)"
placeholder="0" placeholder="0"
startAddOn="$" startAddOn="$"
@ -229,8 +245,6 @@ function FullTimeOfferDetailsForm({
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
</div>
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
@ -255,31 +269,35 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5"> </Section>
<Section title="Additional Information">
<FormTextArea <FormTextArea
label="Negotiation Strategy / Interview Performance" label="Negotiation Strategy / Interview Performance"
placeholder="e.g. Did well in the behavioral interview / Used competing offers to negotiate for a higher salary" placeholder="e.g. Did well in the behavioral interview / Used competing offers to negotiate for a higher salary"
{...register(`offers.${index}.negotiationStrategy`)} {...register(`offers.${index}.negotiationStrategy`)}
/> />
</div>
<div className="mb-5">
<FormTextArea <FormTextArea
label="Comments" label="Comments"
placeholder="e.g. Benefits offered by the company" placeholder="e.g. Benefits offered by the company"
{...register(`offers.${index}.comments`)} {...register(`offers.${index}.comments`)}
/> />
</div>
<div className="flex justify-end">
{index > 0 && ( {index > 0 && (
<div className="space-y-4 sm:space-y-6">
<HorizontalDivider />
<div className="flex justify-end">
<Button <Button
icon={TrashIcon} icon={TrashIcon}
label="Delete" label="Delete"
variant="secondary" variant="tertiary"
onClick={() => remove(index)} onClick={() => {
remove(index);
}}
/> />
)}
</div> </div>
</div> </div>
)}
</Section>
</div>
); );
} }
@ -308,9 +326,8 @@ function InternshipOfferDetailsForm({
}); });
return ( return (
<div className="my-5 rounded-lg border border-slate-200 px-10 py-5"> <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
<div className="mb-5 grid grid-cols-2 space-x-3"> <Section title="Company & Title Information">
<div>
<JobTitlesTypeahead <JobTitlesTypeahead
required={true} required={true}
value={{ value={{
@ -324,10 +341,8 @@ function InternshipOfferDetailsForm({
} }
}} }}
/> />
</div>
</div> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<div className="mb-5 grid grid-cols-2 space-x-3">
<div>
<CompaniesTypeahead <CompaniesTypeahead
required={true} required={true}
value={{ value={{
@ -342,7 +357,6 @@ function InternshipOfferDetailsForm({
} }
}} }}
/> />
</div>
<FormSelect <FormSelect
display="block" display="block"
errorMessage={offerFields?.location?.message} errorMessage={offerFields?.location?.message}
@ -355,7 +369,7 @@ function InternshipOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<FormSelect <FormSelect
display="block" display="block"
errorMessage={offerFields?.offersIntern?.internshipCycle?.message} errorMessage={offerFields?.offersIntern?.internshipCycle?.message}
@ -380,7 +394,9 @@ function InternshipOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5"> </Section>
<Section title="Compensation Details">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
<FormMonthYearPicker <FormMonthYearPicker
monthLabel="Date Received" monthLabel="Date Received"
monthRequired={true} monthRequired={true}
@ -389,8 +405,6 @@ function InternshipOfferDetailsForm({
required: FieldError.REQUIRED, required: FieldError.REQUIRED,
})} })}
/> />
</div>
<div className="mb-5">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
@ -424,33 +438,35 @@ function InternshipOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5"> </Section>
<Section title="Additional Information">
<FormTextArea <FormTextArea
label="Negotiation Strategy / Interview Performance" label="Negotiation Strategy / Interview Performance"
placeholder="e.g. Did well in the behavioral interview. Used competing offers to negotiate for a higher salary." placeholder="e.g. Did well in the behavioral interview. Used competing offers to negotiate for a higher salary."
{...register(`offers.${index}.negotiationStrategy`)} {...register(`offers.${index}.negotiationStrategy`)}
/> />
</div>
<div className="mb-5">
<FormTextArea <FormTextArea
label="Comments" label="Comments"
placeholder="e.g. Encountered similar questions using the Technical Interview Handbook." placeholder="e.g. Encountered similar questions using the Technical Interview Handbook."
{...register(`offers.${index}.comments`)} {...register(`offers.${index}.comments`)}
/> />
</div> </Section>
<div className="flex justify-end">
{index > 0 && ( {index > 0 && (
<div className="space-y-4 sm:space-y-6">
<HorizontalDivider />
<div className="flex justify-end">
<Button <Button
icon={TrashIcon} icon={TrashIcon}
label="Delete" label="Delete"
variant="secondary" variant="tertiary"
onClick={() => { onClick={() => {
remove(index); remove(index);
}} }}
/> />
)}
</div> </div>
</div> </div>
)}
</div>
); );
} }
@ -466,7 +482,7 @@ function OfferDetailsFormArray({
const { append, remove, fields } = fieldArrayValues; const { append, remove, fields } = fieldArrayValues;
return ( return (
<div> <div className="space-y-8">
{fields.map((item, index) => { {fields.map((item, index) => {
return ( return (
<div key={item.id}> <div key={item.id}>
@ -483,7 +499,7 @@ function OfferDetailsFormArray({
icon={PlusIcon} icon={PlusIcon}
label="Add another offer" label="Add another offer"
size="lg" size="lg"
variant="tertiary" variant="secondary"
onClick={() => onClick={() =>
append( append(
jobType === JobType.FULLTIME jobType === JobType.FULLTIME
@ -524,7 +540,7 @@ export default function OfferDetailsForm({
jobType === JobType.FULLTIME ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME; jobType === JobType.FULLTIME ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME;
return ( return (
<div className="mb-5"> <div className="space-y-6">
<h5 className="mb-8 text-center text-4xl font-bold text-slate-900"> <h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
Fill in your offer details Fill in your offer details
</h5> </h5>

2
packages/ui/src/HorizontalDivider/HorizontalDivider.tsx
Unescape View File

@ -8,7 +8,7 @@ export default function HorizontalDivider({ className }: Props) {
return ( return (
<hr <hr
aria-hidden={true} 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)}
/> />
); );
} }

Write Preview
Loading…
Cancel
Save