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 3 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

67
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">
<ol className="mx-auto flex w-full space-x-2 sm:space-x-4" role="list">
{steps.map(({ label, step }, index) => ( {steps.map(({ label, step }, index) => (
<div key={label} className="flex space-x-1"> <li key={step} className="flex items-center">
{step === currentStep {index > 0 && (
? getPrimaryText(label) <ChevronRightIcon
: step !== undefined aria-hidden="true"
? getTextWithLink(label, () => setStep(step)) className="h-5 w-5 flex-shrink-0 text-slate-400"
: getSlateText(label)} />
{index !== steps.length - 1 && getSlateText('>')} )}
</div> <button
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>
))} ))}
</div> </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>
);
}

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

@ -264,16 +264,17 @@ 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>
<div className="bg-white p-6 sm:p-10">
<FormProvider {...formMethods}> <FormProvider {...formMethods}>
<form <form
className="space-y-6 text-sm" className="space-y-6 text-sm"
@ -300,6 +301,7 @@ export default function OffersSubmissionForm({
{step === 1 && ( {step === 1 && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Button <Button
addonPosition="start"
icon={ArrowLeftIcon} icon={ArrowLeftIcon}
label="Previous" label="Previous"
variant="secondary" variant="secondary"
@ -314,6 +316,7 @@ export default function OffersSubmissionForm({
/> />
<Button <Button
disabled={isSubmitting || isSubmitSuccessful} disabled={isSubmitting || isSubmitSuccessful}
icon={ArrowRightIcon}
isLoading={isSubmitting || isSubmitSuccessful} isLoading={isSubmitting || isSubmitSuccessful}
label="Submit" label="Submit"
type="submit" type="submit"
@ -326,5 +329,6 @@ export default function OffersSubmissionForm({
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

78
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,14 +30,10 @@ 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)">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormTextInput <FormTextInput
errorMessage={backgroundFields?.totalYoe?.message} errorMessage={backgroundFields?.totalYoe?.message}
label="Total YOE" label="Total YOE"
@ -51,7 +48,8 @@ function YoeSection() {
/> />
</div> </div>
<Collapsible label="Add specific YOEs by domain"> <Collapsible label="Add specific YOEs by domain">
<div className="mb-5 grid grid-cols-2 space-x-3"> <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,8 +105,7 @@ 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,
@ -121,8 +118,6 @@ function FullTimeJobFields() {
} }
}} }}
/> />
</div>
<div>
<CompaniesTypeahead <CompaniesTypeahead
value={{ value={{
id: watchCompanyId, id: watchCompanyId,
@ -137,8 +132,7 @@ function FullTimeJobFields() {
}} }}
/> />
</div> </div>
</div> <div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<div className="mb-5 grid grid-cols-1 space-x-3">
<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,8 +205,7 @@ 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,
@ -227,8 +218,6 @@ function InternshipJobFields() {
} }
}} }}
/> />
</div>
<div>
<CompaniesTypeahead <CompaniesTypeahead
value={{ value={{
id: watchCompanyId, id: watchCompanyId,
@ -243,8 +232,6 @@ function InternshipJobFields() {
}} }}
/> />
</div> </div>
</div>
<div className="mb-5 grid grid-cols-1 space-x-3">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
@ -268,9 +255,7 @@ function InternshipJobFields() {
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
</div>
<Collapsible label="Add more details"> <Collapsible label="Add more details">
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
label="Location" label="Location"
@ -278,7 +263,6 @@ function InternshipJobFields() {
placeholder={emptyOption} placeholder={emptyOption}
{...register(`background.experiences.0.location`)} {...register(`background.experiences.0.location`)}
/> />
</div>
</Collapsible> </Collapsible>
</> </>
); );
@ -291,12 +275,7 @@ function CurrentJobSection() {
}); });
return ( return (
<> <FormSection title="Current / Previous Job">
<h6 className="mb-2 text-left text-xl font-medium text-slate-400">
Current / Previous Job
</h6>
<div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-5">
<FormRadioList <FormRadioList
defaultValue={watchJobType} defaultValue={watchJobType}
isLabelHidden={true} isLabelHidden={true}
@ -314,26 +293,20 @@ function CurrentJobSection() {
value={JobType.INTERN} value={JobType.INTERN}
/> />
</FormRadioList> </FormRadioList>
</div>
{watchJobType === JobType.FULLTIME ? ( {watchJobType === JobType.FULLTIME ? (
<FullTimeJobFields /> <FullTimeJobFields />
) : ( ) : (
<InternshipJobFields /> <InternshipJobFields />
)} )}
</div> </FormSection>
</>
); );
} }
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
</h6>
<div className="mb-5 rounded-lg border border-slate-200 px-10 py-5">
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
label="Education Level" label="Education Level"
@ -350,26 +323,23 @@ function EducationSection() {
/> />
</div> </div>
<Collapsible label="Add more details"> <Collapsible label="Add more details">
<div className="mb-5">
<FormTextInput <FormTextInput
label="School" label="School"
placeholder="e.g. National University of Singapore" placeholder="e.g. National University of Singapore"
{...register(`background.educations.0.school`)} {...register(`background.educations.0.school`)}
/> />
</div>
</Collapsible> </Collapsible>
</div> </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 />

60
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,10 +525,9 @@ 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) => {
@ -555,7 +538,6 @@ export default function OfferDetailsForm({
setDialogOpen(true); setDialogOpen(true);
}} }}
/> />
</div>
<OfferDetailsFormArray <OfferDetailsFormArray
fieldArrayValues={fieldArrayValues} fieldArrayValues={fieldArrayValues}
jobType={jobType} jobType={jobType}

Write Preview
Loading…
Cancel
Save