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 background submission form (#490)

Browse Source 
* [offers][feat] tweak offer background submission form

* [offers][feat] tweak breadcrumbs
pull/492/head
Yangshun Tay 2 years ago committed by GitHub
parent 6682d81d2e
commit 03b0e4d856
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 303 additions and 324 deletions
Show Stats Download Patch File Download Diff File

71
apps/portal/src/components/offers/Breadcrumb.tsx
Unescape View File

@ -1,45 +1,50 @@
export type BreadcrumbStep = { import clsx from 'clsx';
import { ChevronRightIcon } from '@heroicons/react/20/solid';
export type BreadcrumbStep = Readonly<{
label: string; label: string;
step?: number; step?: number;
}; }>;
type BreadcrumbsProps = Readonly<{ type BreadcrumbsProps = Readonly<{
currentStep: number; currentStep: number;
setStep: (nextStep: number) => void; setStep: (nextStep: number) => void;
steps: Array<BreadcrumbStep>; steps: ReadonlyArray<BreadcrumbStep>;
}>; }>;
function getPrimaryText(text: string) {
return <p className="text-primary-700 text-sm">{text}</p>;
}
function getSlateText(text: string) {
return <p className="text-sm text-slate-400">{text}</p>;
}
function getTextWithLink(text: string, onClickHandler: () => void) {
return (
<p
className="hover:text-primary-700 cursor-pointer text-sm text-slate-400 hover:underline hover:underline-offset-2"
onClick={onClickHandler}>
{text}
</p>
);
}
export function Breadcrumbs({ steps, currentStep, setStep }: BreadcrumbsProps) { export function Breadcrumbs({ steps, currentStep, setStep }: BreadcrumbsProps) {
return ( return (
<div className="flex space-x-1"> <nav aria-label="Submit offer stages" className="inline-flex">
{steps.map(({ label, step }, index) => ( <ol className="mx-auto flex w-full space-x-2 sm:space-x-4" role="list">
<div key={label} className="flex space-x-1"> {steps.map(({ label, step }, index) => (
{step === currentStep <li key={step} className="flex items-center">
? getPrimaryText(label) {index > 0 && (
: step !== undefined <ChevronRightIcon
? getTextWithLink(label, () => setStep(step)) aria-hidden="true"
: getSlateText(label)} className="h-5 w-5 flex-shrink-0 text-slate-400"
{index !== steps.length - 1 && getSlateText('>')} />
</div> )}
))} <button
</div> aria-current={step === currentStep ? 'page' : undefined}
className={clsx(
'text-xs font-medium text-slate-600 sm:text-sm',
index > 0 && 'ml-4',
step != null ? 'hover:text-primary-500' : 'cursor-default',
step === currentStep && 'text-primary-500',
)}
type="button"
{...(step != null
? {
onClick: () => {
setStep(step);
},
}
: {})}>
{label}
</button>
</li>
))}
</ol>
</nav>
); );
} }

18
apps/portal/src/components/offers/forms/FormSection.tsx
Unescape View File

@ -0,0 +1,18 @@
import { HorizontalDivider } from '@tih/ui';
export default function FormSection({
children,
title,
}: Readonly<{ children: React.ReactNode; title: string }>) {
return (
<div>
<div className="mb-4">
<h2 className="text-lg font-medium leading-6 text-slate-900">
{title}
</h2>
<HorizontalDivider />
</div>
<div className="space-y-4 sm:space-y-6">{children}</div>
</div>
);
}

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

@ -264,65 +264,69 @@ export default function OffersSubmissionForm({
}, []); }, []);
return ( return (
<div ref={pageRef} className="fixed h-full w-full overflow-y-scroll"> <div ref={pageRef} className="w-full overflow-y-scroll">
<div className="mb-20 flex justify-center"> <div className="flex justify-center">
<div className="my-5 block w-full max-w-screen-md rounded-lg bg-white py-10 px-10 shadow-lg"> <div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
<div className="mb-4 flex justify-end"> <div className="bg-primary-100 flex justify-center px-4 py-4 sm:px-6 lg:px-8">
<Breadcrumbs <Breadcrumbs
currentStep={step} currentStep={step}
setStep={setStep} setStep={setStep}
steps={breadcrumbSteps} steps={breadcrumbSteps}
/> />
</div> </div>
<FormProvider {...formMethods}> <div className="bg-white p-6 sm:p-10">
<form <FormProvider {...formMethods}>
className="space-y-6 text-sm" <form
onSubmit={handleSubmit(onSubmit)}> className="space-y-6 text-sm"
{steps[step]} onSubmit={handleSubmit(onSubmit)}>
{step === 0 && ( {steps[step]}
<div className="flex justify-end"> {step === 0 && (
<Button <div className="flex justify-end">
disabled={false} <Button
icon={ArrowRightIcon} disabled={false}
label="Next" icon={ArrowRightIcon}
variant="primary" label="Next"
onClick={() => { variant="primary"
goToNextStep(step); onClick={() => {
gaEvent({ goToNextStep(step);
action: 'offers.profile_submission_navigate_next', gaEvent({
category: 'submission', action: 'offers.profile_submission_navigate_next',
label: 'Navigate next', category: 'submission',
}); label: 'Navigate next',
}} });
/> }}
</div> />
)} </div>
{step === 1 && ( )}
<div className="flex items-center justify-between"> {step === 1 && (
<Button <div className="flex items-center justify-between">
icon={ArrowLeftIcon} <Button
label="Previous" addonPosition="start"
variant="secondary" icon={ArrowLeftIcon}
onClick={() => { label="Previous"
setStep(step - 1); variant="secondary"
gaEvent({ onClick={() => {
action: 'offers.profile_submission_navigation_back', setStep(step - 1);
category: 'submission', gaEvent({
label: 'Navigate back', action: 'offers.profile_submission_navigation_back',
}); category: 'submission',
}} label: 'Navigate back',
/> });
<Button }}
disabled={isSubmitting || isSubmitSuccessful} />
isLoading={isSubmitting || isSubmitSuccessful} <Button
label="Submit" disabled={isSubmitting || isSubmitSuccessful}
type="submit" icon={ArrowRightIcon}
variant="primary" isLoading={isSubmitting || isSubmitSuccessful}
/> label="Submit"
</div> type="submit"
)} variant="primary"
</form> />
</FormProvider> </div>
)}
</form>
</FormProvider>
</div>
</div> </div>
</div> </div>
</div> </div>

350
apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
Unescape View File

@ -21,6 +21,7 @@ import {
} from '~/utils/offers/currency/CurrencyEnum'; } from '~/utils/offers/currency/CurrencyEnum';
import FormRadioList from '../../forms/FormRadioList'; import FormRadioList from '../../forms/FormRadioList';
import FormSection from '../../forms/FormSection';
import FormSelect from '../../forms/FormSelect'; import FormSelect from '../../forms/FormSelect';
import FormTextInput from '../../forms/FormTextInput'; import FormTextInput from '../../forms/FormTextInput';
@ -29,29 +30,26 @@ function YoeSection() {
background: BackgroundPostData; background: BackgroundPostData;
}>(); }>();
const backgroundFields = formState.errors.background; const backgroundFields = formState.errors.background;
return (
<>
<h6 className="mb-2 text-left text-xl font-medium text-slate-400">
Years of Experience (YOE)
</h6>
<div className="mb-5 rounded-lg border border-slate-200 px-10 py-5"> return (
<div className="mb-2 grid grid-cols-3 space-x-3"> <FormSection title="Years of Experience (YOE)">
<FormTextInput <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
errorMessage={backgroundFields?.totalYoe?.message} <FormTextInput
label="Total YOE" errorMessage={backgroundFields?.totalYoe?.message}
placeholder="0" label="Total YOE"
required={true} placeholder="0"
type="number" required={true}
{...register(`background.totalYoe`, { type="number"
min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 }, {...register(`background.totalYoe`, {
required: FieldError.REQUIRED, min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
valueAsNumber: true, required: FieldError.REQUIRED,
})} valueAsNumber: true,
/> })}
</div> />
<Collapsible label="Add specific YOEs by domain"> </div>
<div className="mb-5 grid grid-cols-2 space-x-3"> <Collapsible label="Add specific YOEs by domain">
<div className="space-y-4 sm:space-y-6">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormTextInput <FormTextInput
errorMessage={backgroundFields?.specificYoes?.[0]?.yoe?.message} errorMessage={backgroundFields?.specificYoes?.[0]?.yoe?.message}
label="Specific YOE 1" label="Specific YOE 1"
@ -63,11 +61,11 @@ function YoeSection() {
/> />
<FormTextInput <FormTextInput
label="Specific Domain 1" label="Specific Domain 1"
placeholder="e.g. Frontend" placeholder="e.g. Front End"
{...register(`background.specificYoes.0.domain`)} {...register(`background.specificYoes.0.domain`)}
/> />
</div> </div>
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormTextInput <FormTextInput
errorMessage={backgroundFields?.specificYoes?.[1]?.yoe?.message} errorMessage={backgroundFields?.specificYoes?.[1]?.yoe?.message}
label="Specific YOE 2" label="Specific YOE 2"
@ -79,13 +77,13 @@ function YoeSection() {
/> />
<FormTextInput <FormTextInput
label="Specific Domain 2" label="Specific Domain 2"
placeholder="e.g. Backend" placeholder="e.g. Back End"
{...register(`background.specificYoes.1.domain`)} {...register(`background.specificYoes.1.domain`)}
/> />
</div> </div>
</Collapsible> </div>
</div> </Collapsible>
</> </FormSection>
); );
} }
@ -107,38 +105,34 @@ function FullTimeJobFields() {
return ( return (
<> <>
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<div> <JobTitlesTypeahead
<JobTitlesTypeahead value={{
value={{ id: watchJobTitle,
id: watchJobTitle, label: getLabelForJobTitleType(watchJobTitle as JobTitleType),
label: getLabelForJobTitleType(watchJobTitle as JobTitleType), value: watchJobTitle,
value: watchJobTitle, }}
}} onSelect={(option) => {
onSelect={(option) => { if (option) {
if (option) { setValue('background.experiences.0.title', option.value);
setValue('background.experiences.0.title', option.value); }
} }}
}} />
/> <CompaniesTypeahead
</div> value={{
<div> id: watchCompanyId,
<CompaniesTypeahead label: watchCompanyName,
value={{ value: watchCompanyId,
id: watchCompanyId, }}
label: watchCompanyName, onSelect={(option) => {
value: watchCompanyId, if (option) {
}} setValue('background.experiences.0.companyId', option.value);
onSelect={(option) => { setValue('background.experiences.0.companyName', option.label);
if (option) { }
setValue('background.experiences.0.companyId', option.value); }}
setValue('background.experiences.0.companyName', option.label); />
}
}}
/>
</div>
</div> </div>
<div className="mb-5 grid grid-cols-1 space-x-3"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
@ -166,7 +160,7 @@ function FullTimeJobFields() {
/> />
</div> </div>
<Collapsible label="Add more details"> <Collapsible label="Add more details">
<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
label="Level" label="Level"
placeholder="e.g. L4, Junior" placeholder="e.g. L4, Junior"
@ -178,8 +172,6 @@ function FullTimeJobFields() {
options={locationOptions} options={locationOptions}
{...register(`background.experiences.0.location`)} {...register(`background.experiences.0.location`)}
/> />
</div>
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormTextInput <FormTextInput
errorMessage={experiencesField?.durationInMonths?.message} errorMessage={experiencesField?.durationInMonths?.message}
label="Duration (months)" label="Duration (months)"
@ -213,72 +205,64 @@ function InternshipJobFields() {
return ( return (
<> <>
<div className="mb-5 grid grid-cols-2 space-x-3"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<div> <JobTitlesTypeahead
<JobTitlesTypeahead value={{
value={{ id: watchJobTitle,
id: watchJobTitle, label: getLabelForJobTitleType(watchJobTitle as JobTitleType),
label: getLabelForJobTitleType(watchJobTitle as JobTitleType), value: watchJobTitle,
value: watchJobTitle, }}
}} onSelect={(option) => {
onSelect={(option) => { if (option) {
if (option) { setValue('background.experiences.0.title', option.value);
setValue('background.experiences.0.title', option.value); }
} }}
}} />
/> <CompaniesTypeahead
</div> value={{
<div> id: watchCompanyId,
<CompaniesTypeahead label: watchCompanyName,
value={{ value: watchCompanyId,
id: watchCompanyId, }}
label: watchCompanyName, onSelect={(option) => {
value: watchCompanyId, if (option) {
}} setValue('background.experiences.0.companyId', option.value);
onSelect={(option) => { setValue('background.experiences.0.companyName', option.label);
if (option) { }
setValue('background.experiences.0.companyId', option.value); }}
setValue('background.experiences.0.companyName', option.label);
}
}}
/>
</div>
</div>
<div className="mb-5 grid grid-cols-1 space-x-3">
<FormTextInput
endAddOn={
<FormSelect
borderStyle="borderless"
defaultValue={Currency.SGD}
isLabelHidden={true}
label="Currency"
options={CURRENCY_OPTIONS}
{...register(`background.experiences.0.monthlySalary.currency`)}
/>
}
endAddOnType="element"
errorMessage={experiencesField?.monthlySalary?.value?.message}
label="Salary (Monthly)"
placeholder="0.00"
startAddOn="$"
startAddOnType="label"
type="number"
{...register(`background.experiences.0.monthlySalary.value`, {
min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
valueAsNumber: true,
})}
/> />
</div> </div>
<Collapsible label="Add more details"> <FormTextInput
<div className="mb-5 grid grid-cols-2 space-x-3"> endAddOn={
<FormSelect <FormSelect
display="block" borderStyle="borderless"
label="Location" defaultValue={Currency.SGD}
options={locationOptions} isLabelHidden={true}
placeholder={emptyOption} label="Currency"
{...register(`background.experiences.0.location`)} options={CURRENCY_OPTIONS}
{...register(`background.experiences.0.monthlySalary.currency`)}
/> />
</div> }
endAddOnType="element"
errorMessage={experiencesField?.monthlySalary?.value?.message}
label="Salary (Monthly)"
placeholder="0.00"
startAddOn="$"
startAddOnType="label"
type="number"
{...register(`background.experiences.0.monthlySalary.value`, {
min: { message: FieldError.NON_NEGATIVE_NUMBER, value: 0 },
valueAsNumber: true,
})}
/>
<Collapsible label="Add more details">
<FormSelect
display="block"
label="Location"
options={locationOptions}
placeholder={emptyOption}
{...register(`background.experiences.0.location`)}
/>
</Collapsible> </Collapsible>
</> </>
); );
@ -291,85 +275,71 @@ function CurrentJobSection() {
}); });
return ( return (
<> <FormSection title="Current / Previous Job">
<h6 className="mb-2 text-left text-xl font-medium text-slate-400"> <FormRadioList
Current / Previous Job defaultValue={watchJobType}
</h6> isLabelHidden={true}
<div className="mb-5 rounded-lg border border-slate-200 px-10 py-5"> label="Job Type"
<div className="mb-5"> orientation="horizontal"
<FormRadioList {...register('background.experiences.0.jobType')}>
defaultValue={watchJobType} <RadioList.Item
isLabelHidden={true} key="Full-time"
label="Job Type" label="Full-time"
orientation="horizontal" value={JobType.FULLTIME}
{...register('background.experiences.0.jobType')}> />
<RadioList.Item <RadioList.Item
key="Full-time" key="Internship"
label="Full-time" label="Internship"
value={JobType.FULLTIME} value={JobType.INTERN}
/> />
<RadioList.Item </FormRadioList>
key="Internship" {watchJobType === JobType.FULLTIME ? (
label="Internship" <FullTimeJobFields />
value={JobType.INTERN} ) : (
/> <InternshipJobFields />
</FormRadioList> )}
</div> </FormSection>
{watchJobType === JobType.FULLTIME ? (
<FullTimeJobFields />
) : (
<InternshipJobFields />
)}
</div>
</>
); );
} }
function EducationSection() { function EducationSection() {
const { register } = useFormContext(); const { register } = useFormContext();
return ( return (
<> <FormSection title="Education">
<h6 className="mb-2 text-left text-xl font-medium text-slate-400"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
Education <FormSelect
</h6> display="block"
<div className="mb-5 rounded-lg border border-slate-200 px-10 py-5"> label="Education Level"
<div className="mb-5 grid grid-cols-2 space-x-3"> options={educationLevelOptions}
<FormSelect placeholder={emptyOption}
display="block" {...register(`background.educations.0.type`)}
label="Education Level" />
options={educationLevelOptions} <FormSelect
placeholder={emptyOption} display="block"
{...register(`background.educations.0.type`)} label="Field"
/> options={educationFieldOptions}
<FormSelect placeholder={emptyOption}
display="block" {...register(`background.educations.0.field`)}
label="Field" />
options={educationFieldOptions}
placeholder={emptyOption}
{...register(`background.educations.0.field`)}
/>
</div>
<Collapsible label="Add more details">
<div className="mb-5">
<FormTextInput
label="School"
placeholder="e.g. National University of Singapore"
{...register(`background.educations.0.school`)}
/>
</div>
</Collapsible>
</div> </div>
</> <Collapsible label="Add more details">
<FormTextInput
label="School"
placeholder="e.g. National University of Singapore"
{...register(`background.educations.0.school`)}
/>
</Collapsible>
</FormSection>
); );
} }
export default function BackgroundForm() { export default function BackgroundForm() {
return ( return (
<div> <div className="space-y-6">
<h5 className="mb-8 text-center text-4xl font-bold text-slate-900"> <h2 className="mb-8 text-2xl font-bold text-slate-900 sm:text-center sm:text-4xl">
Help us better gauge your offers Help us better gauge your offers
</h5> </h2>
<div> <div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
<YoeSection /> <YoeSection />
<CurrentJobSection /> <CurrentJobSection />
<EducationSection /> <EducationSection />

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

@ -29,6 +29,7 @@ import {
yearOptions, yearOptions,
} from '../../constants'; } from '../../constants';
import FormMonthYearPicker from '../../forms/FormMonthYearPicker'; import FormMonthYearPicker from '../../forms/FormMonthYearPicker';
import FormSection from '../../forms/FormSection';
import FormSelect from '../../forms/FormSelect'; import FormSelect from '../../forms/FormSelect';
import FormTextArea from '../../forms/FormTextArea'; import FormTextArea from '../../forms/FormTextArea';
import FormTextInput from '../../forms/FormTextInput'; import FormTextInput from '../../forms/FormTextInput';
@ -45,23 +46,6 @@ 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,
@ -95,8 +79,8 @@ function FullTimeOfferDetailsForm({
return ( return (
<div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8"> <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"> <FormSection title="Company & Title Information">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<JobTitlesTypeahead <JobTitlesTypeahead
required={true} required={true}
value={{ value={{
@ -120,7 +104,7 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<CompaniesTypeahead <CompaniesTypeahead
required={true} required={true}
value={{ value={{
@ -147,9 +131,9 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
</Section> </FormSection>
<Section title="Compensation Details"> <FormSection title="Compensation Details">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormMonthYearPicker <FormMonthYearPicker
monthLabel="Date Received" monthLabel="Date Received"
monthRequired={true} monthRequired={true}
@ -269,8 +253,8 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
</Section> </FormSection>
<Section title="Additional Information"> <FormSection 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"
@ -296,7 +280,7 @@ function FullTimeOfferDetailsForm({
</div> </div>
</div> </div>
)} )}
</Section> </FormSection>
</div> </div>
); );
} }
@ -327,7 +311,7 @@ function InternshipOfferDetailsForm({
return ( return (
<div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8"> <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"> <FormSection title="Company & Title Information">
<JobTitlesTypeahead <JobTitlesTypeahead
required={true} required={true}
value={{ value={{
@ -342,7 +326,7 @@ function InternshipOfferDetailsForm({
}} }}
/> />
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<CompaniesTypeahead <CompaniesTypeahead
required={true} required={true}
value={{ value={{
@ -369,7 +353,7 @@ function InternshipOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormSelect <FormSelect
display="block" display="block"
errorMessage={offerFields?.offersIntern?.internshipCycle?.message} errorMessage={offerFields?.offersIntern?.internshipCycle?.message}
@ -394,9 +378,9 @@ function InternshipOfferDetailsForm({
})} })}
/> />
</div> </div>
</Section> </FormSection>
<Section title="Compensation Details"> <FormSection title="Compensation Details">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormMonthYearPicker <FormMonthYearPicker
monthLabel="Date Received" monthLabel="Date Received"
monthRequired={true} monthRequired={true}
@ -438,8 +422,8 @@ function InternshipOfferDetailsForm({
})} })}
/> />
</div> </div>
</Section> </FormSection>
<Section title="Additional Information"> <FormSection 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."
@ -450,7 +434,7 @@ function InternshipOfferDetailsForm({
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`)}
/> />
</Section> </FormSection>
{index > 0 && ( {index > 0 && (
<div className="space-y-4 sm:space-y-6"> <div className="space-y-4 sm:space-y-6">
<HorizontalDivider /> <HorizontalDivider />
@ -541,21 +525,19 @@ export default function OfferDetailsForm({
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<h5 className="mb-8 text-center text-4xl font-bold text-slate-900"> <h2 className="mb-8 text-2xl font-bold text-slate-900 sm:text-center sm:text-4xl">
Fill in your offer details Fill in your offer details
</h5> </h2>
<div> <JobTypeTabs
<JobTypeTabs value={jobType}
value={jobType} onChange={(newJobType) => {
onChange={(newJobType) => { if (newJobType === jobType) {
if (newJobType === jobType) { return;
return; }
}
setDialogOpen(true); setDialogOpen(true);
}} }}
/> />
</div>
<OfferDetailsFormArray <OfferDetailsFormArray
fieldArrayValues={fieldArrayValues} fieldArrayValues={fieldArrayValues}
jobType={jobType} jobType={jobType}

Write Preview
Loading…
Cancel
Save