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

[offers][style] style offers form

Browse Source
pull/348/head
Ai Ling 3 years ago
parent 0b13faa5e1
commit db6ac5d701
6 changed files with 92 additions and 66 deletions
Show Stats Download Patch File Download Diff File

70
apps/portal/src/components/offers/constants.ts
Unescape View File

@ -1,5 +1,13 @@
import { EducationBackgroundType } from './types';
const emptyOption = {
label: '----',
value: '',
};
// TODO: use enums // TODO: use enums
export const titleOptions = [ export const titleOptions = [
emptyOption,
{ {
label: 'Software engineer', label: 'Software engineer',
value: 'Software engineer', value: 'Software engineer',
@ -18,36 +26,48 @@ export const titleOptions = [
}, },
]; ];
export const currencyOptions = [ export const companyOptions = [
emptyOption,
{ {
label: 'USD', label: 'Bytedance',
value: 'USD', value: 'id-abc123',
}, },
{ {
label: 'SGD', label: 'Google',
value: 'SGD', value: 'id-abc567',
}, },
{ {
label: 'EUR', label: 'Meta',
value: 'EUR', value: 'id-abc456',
}, },
];
export const companyOptions = [
{ {
label: 'Shopee', label: 'Shopee',
value: 'id-abc123', value: 'id-abc345',
},
{
label: 'Tik Tok',
value: 'id-abc678',
}, },
]; ];
export const locationOptions = [ export const locationOptions = [
emptyOption,
{ {
label: 'Singapore, Singapore', label: 'Singapore, Singapore',
value: 'Singapore, Singapore', value: 'Singapore, Singapore',
}, },
{
label: 'New York, US',
value: 'New York, US',
},
{
label: 'San Francisco, US',
value: 'San Francisco, US',
},
]; ];
export const internshipCycleOptions = [ export const internshipCycleOptions = [
emptyOption,
{ {
label: 'Summer', label: 'Summer',
value: 'Summer', value: 'Summer',
@ -65,12 +85,13 @@ export const internshipCycleOptions = [
value: 'Fall', value: 'Fall',
}, },
{ {
label: 'Full-year', label: 'Full year',
value: 'Full-year', value: 'Full year',
}, },
]; ];
export const yearOptions = [ export const yearOptions = [
emptyOption,
{ {
label: '2021', label: '2021',
value: '2021', value: '2021',
@ -89,22 +110,17 @@ export const yearOptions = [
}, },
]; ];
export const educationLevelOptions = [ const educationBackgroundTypes = Object.entries(EducationBackgroundType).map(
{ ([key, value]) => ({
label: 'Bachelor', label: key,
value: 'Bachelor', value,
}, }),
{ );
label: 'Masters',
value: 'Masters', export const educationLevelOptions = [emptyOption, ...educationBackgroundTypes];
},
{
label: 'Doctorate',
value: 'Doctorate',
},
];
export const educationFieldOptions = [ export const educationFieldOptions = [
emptyOption,
{ {
label: 'Computer Science', label: 'Computer Science',
value: 'Computer Science', value: 'Computer Science',

29
apps/portal/src/components/offers/forms/BackgroundForm.tsx
Unescape View File

@ -1,4 +1,4 @@
import { useFormContext } from 'react-hook-form'; import { useFormContext, useWatch } from 'react-hook-form';
import { Collapsible, RadioList } from '@tih/ui'; import { Collapsible, RadioList } from '@tih/ui';
import FormRadioList from './FormRadioList'; import FormRadioList from './FormRadioList';
@ -6,12 +6,13 @@ import FormSelect from './FormSelect';
import FormTextInput from './FormTextInput'; import FormTextInput from './FormTextInput';
import { import {
companyOptions, companyOptions,
currencyOptions,
educationFieldOptions, educationFieldOptions,
educationLevelOptions, educationLevelOptions,
locationOptions, locationOptions,
titleOptions, titleOptions,
} from '../constants'; } from '../constants';
import { JobType } from '../types';
import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';
function YoeSection() { function YoeSection() {
const { register } = useFormContext(); const { register } = useFormContext();
@ -25,6 +26,7 @@ function YoeSection() {
<div className="mb-2 grid grid-cols-3 space-x-3"> <div className="mb-2 grid grid-cols-3 space-x-3">
<FormTextInput <FormTextInput
label="Total YOE" label="Total YOE"
placeholder="0"
type="number" type="number"
{...register(`background.totalYoe`)} {...register(`background.totalYoe`)}
/> />
@ -87,7 +89,7 @@ function FullTimeJobFields() {
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`background.experience.totalCompensation.currency`)} {...register(`background.experience.totalCompensation.currency`)}
/> />
} }
@ -156,7 +158,7 @@ function InternshipJobFields() {
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`background.experience.monthlySalary.currency`)} {...register(`background.experience.monthlySalary.currency`)}
/> />
} }
@ -189,8 +191,11 @@ function InternshipJobFields() {
} }
function CurrentJobSection() { function CurrentJobSection() {
const { register, watch } = useFormContext(); const { register } = useFormContext();
const watchJobType = watch('background.experience.jobType', 'FULLTIME'); const watchJobType = useWatch({
defaultValue: JobType.FullTime,
name: 'background.experience.jobType',
});
return ( 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 rounded-lg border border-gray-200 px-10 py-5">
<div className="mb-5"> <div className="mb-5">
<FormRadioList <FormRadioList
defaultValue="Full-time" defaultValue={JobType.FullTime}
isLabelHidden={true} isLabelHidden={true}
label="Job Type" label="Job Type"
orientation="horizontal" orientation="horizontal"
@ -208,16 +213,16 @@ function CurrentJobSection() {
<RadioList.Item <RadioList.Item
key="Full-time" key="Full-time"
label="Full-time" label="Full-time"
value="Full-time" value={JobType.FullTime}
/> />
<RadioList.Item <RadioList.Item
key="Internship" key="Internship"
label="Internship" label="Internship"
value="Internship" value={JobType.Internship}
/> />
</FormRadioList> </FormRadioList>
</div> </div>
{watchJobType === 'Full-time' ? ( {watchJobType === JobType.FullTime ? (
<FullTimeJobFields /> <FullTimeJobFields />
) : ( ) : (
<InternshipJobFields /> <InternshipJobFields />
@ -250,7 +255,7 @@ function EducationSection() {
/> />
</div> </div>
<Collapsible label="Add more details"> <Collapsible label="Add more details">
<div className="mb-5 grid grid-cols-3 space-x-3"> <div className="mb-5">
<FormTextInput <FormTextInput
label="School" label="School"
placeholder="e.g. National University of Singapore" 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"> <h5 className="mb-2 text-center text-4xl font-bold text-gray-900">
Help us better gauge your offers Help us better gauge your offers
</h5> </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 This section is optional, but your background information helps us
benchmark your offers. benchmark your offers.
</h6> </h6>

28
apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
Unescape View File

@ -15,7 +15,6 @@ import FormTextArea from './FormTextArea';
import FormTextInput from './FormTextInput'; import FormTextInput from './FormTextInput';
import { import {
companyOptions, companyOptions,
currencyOptions,
internshipCycleOptions, internshipCycleOptions,
locationOptions, locationOptions,
titleOptions, titleOptions,
@ -23,6 +22,7 @@ import {
} from '../constants'; } from '../constants';
import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types'; import type { FullTimeOfferFormData, InternshipOfferFormData } from '../types';
import { JobType } from '../types'; import { JobType } from '../types';
import { CURRENCY_OPTIONS } from '../util/currency/CurrencyEnum';
type FullTimeOfferDetailsFormProps = Readonly<{ type FullTimeOfferDetailsFormProps = Readonly<{
index: number; index: number;
@ -39,7 +39,7 @@ function FullTimeOfferDetailsForm({
return ( return (
<div className="my-5 rounded-lg border border-gray-200 px-10 py-5"> <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 <FormSelect
display="block" display="block"
label="Title" label="Title"
@ -57,6 +57,8 @@ function FullTimeOfferDetailsForm({
required: true, required: true,
})} })}
/> />
</div>
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
label="Company" label="Company"
@ -64,14 +66,14 @@ function FullTimeOfferDetailsForm({
required={true} required={true}
{...register(`offers.${index}.companyId`, { required: true })} {...register(`offers.${index}.companyId`, { required: true })}
/> />
</div>
<div className="mb-5 grid grid-cols-3 space-x-3">
<FormTextInput <FormTextInput
label="Level" label="Level"
placeholder="e.g. L4, Junior" placeholder="e.g. L4, Junior"
required={true} required={true}
{...register(`offers.${index}.job.level`, { required: true })} {...register(`offers.${index}.job.level`, { required: true })}
/> />
</div>
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormSelect <FormSelect
display="block" display="block"
label="Location" label="Location"
@ -93,7 +95,7 @@ function FullTimeOfferDetailsForm({
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.totalCompensation.currency`, { {...register(`offers.${index}.job.totalCompensation.currency`, {
required: true, required: true,
})} })}
@ -111,14 +113,14 @@ function FullTimeOfferDetailsForm({
})} })}
/> />
</div> </div>
<div className="mb-5 grid grid-cols-3 space-x-3"> <div className="mb-5 grid grid-cols-2 space-x-3">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.base.currency`)} {...register(`offers.${index}.job.base.currency`)}
/> />
} }
@ -137,7 +139,7 @@ function FullTimeOfferDetailsForm({
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.bonus.currency`)} {...register(`offers.${index}.job.bonus.currency`)}
/> />
} }
@ -150,13 +152,15 @@ function FullTimeOfferDetailsForm({
type="number" type="number"
{...register(`offers.${index}.job.bonus.value`)} {...register(`offers.${index}.job.bonus.value`)}
/> />
</div>
<div className="mb-5 grid grid-cols-2 space-x-3">
<FormTextInput <FormTextInput
endAddOn={ endAddOn={
<FormSelect <FormSelect
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.stocks.currency`)} {...register(`offers.${index}.job.stocks.currency`)}
/> />
} }
@ -316,7 +320,7 @@ function InternshipOfferDetailsForm({
borderStyle="borderless" borderStyle="borderless"
isLabelHidden={true} isLabelHidden={true}
label="Currency" label="Currency"
options={currencyOptions} options={CURRENCY_OPTIONS}
{...register(`offers.${index}.job.monthlySalary.currency`)} {...register(`offers.${index}.job.monthlySalary.currency`)}
/> />
} }
@ -381,7 +385,7 @@ export default function OfferDetailsForm() {
<div className="mx-5 w-1/3"> <div className="mx-5 w-1/3">
<Button <Button
display="block" display="block"
label={JobType.FullTime} label="Full-time"
size="md" size="md"
variant={jobType === JobType.FullTime ? 'secondary' : 'tertiary'} variant={jobType === JobType.FullTime ? 'secondary' : 'tertiary'}
onClick={changeJobType(JobType.FullTime)} onClick={changeJobType(JobType.FullTime)}
@ -391,7 +395,7 @@ export default function OfferDetailsForm() {
<div className="mx-5 w-1/3"> <div className="mx-5 w-1/3">
<Button <Button
display="block" display="block"
label={JobType.Internship} label="Internship"
size="md" size="md"
variant={jobType === JobType.Internship ? 'secondary' : 'tertiary'} variant={jobType === JobType.Internship ? 'secondary' : 'tertiary'}
onClick={changeJobType(JobType.Internship)} onClick={changeJobType(JobType.Internship)}

12
apps/portal/src/components/offers/profile/EducationCard.tsx
Unescape View File

@ -3,17 +3,7 @@ import {
LightBulbIcon, LightBulbIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
// To be replaced by form enums import type { EducationBackgroundType } from '../types';
// eslint-disable-next-line no-shadow
export enum EducationBackgroundType {
Bachelor = 'Bachelor',
Diploma = 'Diploma',
Masters = 'Masters',
PhD = 'PhD',
Professional = 'Professional',
Seconday = 'Secondary',
SelfTaught = 'Self-taught',
}
type EducationEntity = { type EducationEntity = {
backgroundType?: EducationBackgroundType; backgroundType?: EducationBackgroundType;

14
apps/portal/src/components/offers/types.ts
Unescape View File

@ -1,13 +1,23 @@
/* eslint-disable no-shadow */
/* /*
* Offer Profile Submission * Offer Profile
*/ */
// eslint-disable-next-line no-shadow
export enum JobType { export enum JobType {
FullTime = 'FULLTIME', FullTime = 'FULLTIME',
Internship = 'INTERNSHIP', Internship = 'INTERNSHIP',
} }
export enum EducationBackgroundType {
Bachelor = 'Bachelor',
Diploma = 'Diploma',
Masters = 'Masters',
PhD = 'PhD',
Professional = 'Professional',
Seconday = 'Secondary',
SelfTaught = 'Self-taught',
}
type Money = { type Money = {
currency: string; currency: string;
value: number; value: number;

5
apps/portal/src/pages/offers/submit.tsx
Unescape View File

@ -22,7 +22,7 @@ const defaultOfferValues = {
offers: [ offers: [
{ {
comments: '', comments: '',
companyId: 'Shopee', companyId: '',
job: { job: {
base: { base: {
currency: 'USD', currency: 'USD',
@ -45,6 +45,7 @@ const defaultOfferValues = {
}, },
}, },
jobType: 'FULLTIME', jobType: 'FULLTIME',
location: '',
monthYearReceived: '', monthYearReceived: '',
negotiationStrategy: '', negotiationStrategy: '',
}, },
@ -74,7 +75,7 @@ export default function OffersSubmissionPage() {
return ( return (
<div className="fixed h-full w-full overflow-y-scroll"> <div className="fixed h-full w-full overflow-y-scroll">
<div className="mb-20 flex justify-center"> <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 /> <Breadcrumbs />
<FormProvider {...formMethods}> <FormProvider {...formMethods}>
<form onSubmit={formMethods.handleSubmit(onSubmit)}> <form onSubmit={formMethods.handleSubmit(onSubmit)}>

Write Preview
Loading…
Cancel
Save