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

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;
step?: number;
};
}>;
type BreadcrumbsProps = Readonly<{
currentStep: number;
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) {
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) => (
<div key={label} className="flex space-x-1">
{step === currentStep
? getPrimaryText(label)
: step !== undefined
? getTextWithLink(label, () => setStep(step))
: getSlateText(label)}
{index !== steps.length - 1 && getSlateText('>')}
</div>
<li key={step} className="flex items-center">
{index > 0 && (
<ChevronRightIcon
aria-hidden="true"
className="h-5 w-5 flex-shrink-0 text-slate-400"
/>
)}
<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 (
<div ref={pageRef} className="fixed h-full w-full overflow-y-scroll">
<div className="mb-20 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="mb-4 flex justify-end">
<div ref={pageRef} className="w-full overflow-y-scroll">
<div className="flex justify-center">
<div className="block w-full max-w-screen-md overflow-hidden rounded-lg sm:shadow-lg md:my-10">
<div className="bg-primary-100 flex justify-center px-4 py-4 sm:px-6 lg:px-8">
<Breadcrumbs
currentStep={step}
setStep={setStep}
steps={breadcrumbSteps}
/>
</div>
<div className="bg-white p-6 sm:p-10">
<FormProvider {...formMethods}>
<form
className="space-y-6 text-sm"
@ -300,6 +301,7 @@ export default function OffersSubmissionForm({
{step === 1 && (
<div className="flex items-center justify-between">
<Button
addonPosition="start"
icon={ArrowLeftIcon}
label="Previous"
variant="secondary"
@ -314,6 +316,7 @@ export default function OffersSubmissionForm({
/>
<Button
disabled={isSubmitting || isSubmitSuccessful}
icon={ArrowRightIcon}
isLoading={isSubmitting || isSubmitSuccessful}
label="Submit"
type="submit"
@ -326,5 +329,6 @@ export default function OffersSubmissionForm({
</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';
import FormRadioList from '../../forms/FormRadioList';
import FormSection from '../../forms/FormSection';
import FormSelect from '../../forms/FormSelect';
import FormTextInput from '../../forms/FormTextInput';
@ -29,14 +30,10 @@ function YoeSection() {
background: BackgroundPostData;
}>();
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">
<div className="mb-2 grid grid-cols-3 space-x-3">
return (
<FormSection title="Years of Experience (YOE)">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormTextInput
errorMessage={backgroundFields?.totalYoe?.message}
label="Total YOE"
@ -51,7 +48,8 @@ function YoeSection() {
/>
</div>
<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
errorMessage={backgroundFields?.specificYoes?.[0]?.yoe?.message}
label="Specific YOE 1"
@ -63,11 +61,11 @@ function YoeSection() {
/>
<FormTextInput
label="Specific Domain 1"
placeholder="e.g. Frontend"
placeholder="e.g. Front End"
{...register(`background.specificYoes.0.domain`)}
/>
</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
errorMessage={backgroundFields?.specificYoes?.[1]?.yoe?.message}
label="Specific YOE 2"
@ -79,13 +77,13 @@ function YoeSection() {
/>
<FormTextInput
label="Specific Domain 2"
placeholder="e.g. Backend"
placeholder="e.g. Back End"
{...register(`background.specificYoes.1.domain`)}
/>
</div>
</Collapsible>
</div>
</>
</Collapsible>
</FormSection>
);
}
@ -107,8 +105,7 @@ function FullTimeJobFields() {
return (
<>
<div className="mb-5 grid grid-cols-2 space-x-3">
<div>
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<JobTitlesTypeahead
value={{
id: watchJobTitle,
@ -121,8 +118,6 @@ function FullTimeJobFields() {
}
}}
/>
</div>
<div>
<CompaniesTypeahead
value={{
id: watchCompanyId,
@ -137,8 +132,7 @@ function FullTimeJobFields() {
}}
/>
</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
endAddOn={
<FormSelect
@ -166,7 +160,7 @@ function FullTimeJobFields() {
/>
</div>
<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
label="Level"
placeholder="e.g. L4, Junior"
@ -178,8 +172,6 @@ function FullTimeJobFields() {
options={locationOptions}
{...register(`background.experiences.0.location`)}
/>
</div>
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormTextInput
errorMessage={experiencesField?.durationInMonths?.message}
label="Duration (months)"
@ -213,8 +205,7 @@ function InternshipJobFields() {
return (
<>
<div className="mb-5 grid grid-cols-2 space-x-3">
<div>
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<JobTitlesTypeahead
value={{
id: watchJobTitle,
@ -227,8 +218,6 @@ function InternshipJobFields() {
}
}}
/>
</div>
<div>
<CompaniesTypeahead
value={{
id: watchCompanyId,
@ -243,8 +232,6 @@ function InternshipJobFields() {
}}
/>
</div>
</div>
<div className="mb-5 grid grid-cols-1 space-x-3">
<FormTextInput
endAddOn={
<FormSelect
@ -268,9 +255,7 @@ function InternshipJobFields() {
valueAsNumber: true,
})}
/>
</div>
<Collapsible label="Add more details">
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect
display="block"
label="Location"
@ -278,7 +263,6 @@ function InternshipJobFields() {
placeholder={emptyOption}
{...register(`background.experiences.0.location`)}
/>
</div>
</Collapsible>
</>
);
@ -291,12 +275,7 @@ function CurrentJobSection() {
});
return (
<>
<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">
<FormSection title="Current / Previous Job">
<FormRadioList
defaultValue={watchJobType}
isLabelHidden={true}
@ -314,26 +293,20 @@ function CurrentJobSection() {
value={JobType.INTERN}
/>
</FormRadioList>
</div>
{watchJobType === JobType.FULLTIME ? (
<FullTimeJobFields />
) : (
<InternshipJobFields />
)}
</div>
</>
</FormSection>
);
}
function EducationSection() {
const { register } = useFormContext();
return (
<>
<h6 className="mb-2 text-left text-xl font-medium text-slate-400">
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">
<FormSection title="Education">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormSelect
display="block"
label="Education Level"
@ -350,26 +323,23 @@ function EducationSection() {
/>
</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>
</>
</FormSection>
);
}
export default function BackgroundForm() {
return (
<div>
<h5 className="mb-8 text-center text-4xl font-bold text-slate-900">
<div className="space-y-6">
<h2 className="mb-8 text-2xl font-bold text-slate-900 sm:text-center sm:text-4xl">
Help us better gauge your offers
</h5>
<div>
</h2>
<div className="space-y-8 rounded-lg border border-slate-200 p-6 sm:space-y-16 sm:p-8">
<YoeSection />
<CurrentJobSection />
<EducationSection />

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

@ -29,6 +29,7 @@ import {
yearOptions,
} from '../../constants';
import FormMonthYearPicker from '../../forms/FormMonthYearPicker';
import FormSection from '../../forms/FormSection';
import FormSelect from '../../forms/FormSelect';
import FormTextArea from '../../forms/FormTextArea';
import FormTextInput from '../../forms/FormTextInput';
@ -45,23 +46,6 @@ 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,
@ -95,8 +79,8 @@ function FullTimeOfferDetailsForm({
return (
<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">
<FormSection title="Company & Title Information">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<JobTitlesTypeahead
required={true}
value={{
@ -120,7 +104,7 @@ function FullTimeOfferDetailsForm({
})}
/>
</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
required={true}
value={{
@ -147,9 +131,9 @@ function FullTimeOfferDetailsForm({
})}
/>
</div>
</Section>
<Section title="Compensation Details">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
</FormSection>
<FormSection title="Compensation Details">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormMonthYearPicker
monthLabel="Date Received"
monthRequired={true}
@ -269,8 +253,8 @@ function FullTimeOfferDetailsForm({
})}
/>
</div>
</Section>
<Section title="Additional Information">
</FormSection>
<FormSection 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"
@ -296,7 +280,7 @@ function FullTimeOfferDetailsForm({
</div>
</div>
)}
</Section>
</FormSection>
</div>
);
}
@ -327,7 +311,7 @@ function InternshipOfferDetailsForm({
return (
<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
required={true}
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
required={true}
value={{
@ -369,7 +353,7 @@ function InternshipOfferDetailsForm({
})}
/>
</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
display="block"
errorMessage={offerFields?.offersIntern?.internshipCycle?.message}
@ -394,9 +378,9 @@ function InternshipOfferDetailsForm({
})}
/>
</div>
</Section>
<Section title="Compensation Details">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
</FormSection>
<FormSection title="Compensation Details">
<div className="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-6">
<FormMonthYearPicker
monthLabel="Date Received"
monthRequired={true}
@ -438,8 +422,8 @@ function InternshipOfferDetailsForm({
})}
/>
</div>
</Section>
<Section title="Additional Information">
</FormSection>
<FormSection 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."
@ -450,7 +434,7 @@ function InternshipOfferDetailsForm({
placeholder="e.g. Encountered similar questions using the Technical Interview Handbook."
{...register(`offers.${index}.comments`)}
/>
</Section>
</FormSection>
{index > 0 && (
<div className="space-y-4 sm:space-y-6">
<HorizontalDivider />
@ -541,10 +525,9 @@ export default function OfferDetailsForm({
return (
<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
</h5>
<div>
</h2>
<JobTypeTabs
value={jobType}
onChange={(newJobType) => {
@ -555,7 +538,6 @@ export default function OfferDetailsForm({
setDialogOpen(true);
}}
/>
</div>
<OfferDetailsFormArray
fieldArrayValues={fieldArrayValues}
jobType={jobType}

Write Preview
Loading…
Cancel
Save