diff --git a/apps/portal/src/components/offers/analysis/OfferPercentileAnalysis.tsx b/apps/portal/src/components/offers/analysis/OfferPercentileAnalysis.tsx new file mode 100644 index 00000000..1f4107ca --- /dev/null +++ b/apps/portal/src/components/offers/analysis/OfferPercentileAnalysis.tsx @@ -0,0 +1,27 @@ +import type { Analysis } from '~/types/offers'; + +type OfferPercentileAnalysisProps = Readonly<{ + companyName: string; + offerAnalysis: Analysis; + tab: string; +}>; + +export default function OfferPercentileAnalysis({ + tab, + companyName, + offerAnalysis: { noOfOffers, percentile }, +}: OfferPercentileAnalysisProps) { + return tab === 'Overall' ? ( +

+ Your highest offer is from {companyName}, which is {percentile} percentile + out of {noOfOffers} offers received for the same job type, same level, and + same YOE(+/-1) in the last year. +

+ ) : ( +

+ Your offer from {companyName} is {percentile} percentile out of{' '} + {noOfOffers} offers received in {companyName} for the same job type, same + level, and same YOE(+/-1) in the last year. +

+ ); +} diff --git a/apps/portal/src/components/offers/analysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/analysis/OfferProfileCard.tsx new file mode 100644 index 00000000..9969c953 --- /dev/null +++ b/apps/portal/src/components/offers/analysis/OfferProfileCard.tsx @@ -0,0 +1,61 @@ +import { UserCircleIcon } from '@heroicons/react/24/outline'; + +import { HorizontalDivider } from '~/../../../packages/ui/dist'; +import { formatDate } from '~/utils/offers/time'; + +import { JobType } from '../types'; + +import type { AnalysisOffer } from '~/types/offers'; + +type OfferProfileCardProps = Readonly<{ + offerProfile: AnalysisOffer; +}>; + +export default function OfferProfileCard({ + offerProfile: { + company, + income, + profileName, + totalYoe, + level, + monthYearReceived, + jobType, + location, + title, + previousCompanies, + }, +}: OfferProfileCardProps) { + return ( +
+
+
+ +
+
+

{profileName}

+

Previous company: {previousCompanies[0]}

+

YOE: {totalYoe} year(s)

+
+
+ + +
+
+

{title}

+

+ Company: {company.name}, {location} +

+

Level: {level}

+
+
+

{formatDate(monthYearReceived)}

+

+ {jobType === JobType.FullTime + ? `$${income} / year` + : `$${income} / month`} +

+
+
+
+ ); +} diff --git a/apps/portal/src/components/offers/constants.ts b/apps/portal/src/components/offers/constants.ts index ba77fce1..f289a91e 100644 --- a/apps/portal/src/components/offers/constants.ts +++ b/apps/portal/src/components/offers/constants.ts @@ -63,19 +63,19 @@ export const internshipCycleOptions = [ export const yearOptions = [ { label: '2021', - value: '2021', + value: 2021, }, { label: '2022', - value: '2022', + value: 2022, }, { label: '2023', - value: '2023', + value: 2023, }, { label: '2024', - value: '2024', + value: 2024, }, ]; @@ -106,3 +106,5 @@ export enum FieldError { Number = 'Please fill in a number in this field.', Required = 'Please fill in this field.', } + +export const OVERALL_TAB = 'Overall'; diff --git a/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx b/apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx similarity index 91% rename from apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx rename to apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx index 2b6c414a..ca036b0e 100644 --- a/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx +++ b/apps/portal/src/components/offers/forms/FormMonthYearPicker.tsx @@ -4,7 +4,7 @@ import { useFormContext, useWatch } from 'react-hook-form'; import MonthYearPicker from '~/components/shared/MonthYearPicker'; -import { getCurrentMonth, getCurrentYear } from '../../../../utils/offers/time'; +import { getCurrentMonth, getCurrentYear } from '../../../utils/offers/time'; type MonthYearPickerProps = ComponentProps; diff --git a/apps/portal/src/components/offers/forms/components/FormRadioList.tsx b/apps/portal/src/components/offers/forms/FormRadioList.tsx similarity index 100% rename from apps/portal/src/components/offers/forms/components/FormRadioList.tsx rename to apps/portal/src/components/offers/forms/FormRadioList.tsx diff --git a/apps/portal/src/components/offers/forms/components/FormSelect.tsx b/apps/portal/src/components/offers/forms/FormSelect.tsx similarity index 100% rename from apps/portal/src/components/offers/forms/components/FormSelect.tsx rename to apps/portal/src/components/offers/forms/FormSelect.tsx diff --git a/apps/portal/src/components/offers/forms/components/FormTextArea.tsx b/apps/portal/src/components/offers/forms/FormTextArea.tsx similarity index 100% rename from apps/portal/src/components/offers/forms/components/FormTextArea.tsx rename to apps/portal/src/components/offers/forms/FormTextArea.tsx diff --git a/apps/portal/src/components/offers/forms/components/FormTextInput.tsx b/apps/portal/src/components/offers/forms/FormTextInput.tsx similarity index 100% rename from apps/portal/src/components/offers/forms/components/FormTextInput.tsx rename to apps/portal/src/components/offers/forms/FormTextInput.tsx diff --git a/apps/portal/src/components/offers/forms/OfferAnalysis.tsx b/apps/portal/src/components/offers/forms/OfferAnalysis.tsx deleted file mode 100644 index c3625d6d..00000000 --- a/apps/portal/src/components/offers/forms/OfferAnalysis.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useState } from 'react'; -import { UserCircleIcon } from '@heroicons/react/20/solid'; -import { HorizontalDivider, Tabs } from '@tih/ui'; - -const tabs = [ - { - label: 'Overall', - value: 'overall', - }, - { - label: 'Shopee', - value: 'company-id', - }, -]; - -function OfferPercentileAnalysis() { - const result = { - company: 'Shopee', - numberOfOffers: 105, - percentile: 56, - }; - - return ( -

- Your highest offer is from {result.company}, which is {result.percentile}{' '} - percentile out of {result.numberOfOffers} offers received in Singapore for - the same job type, same level, and same YOE in the last year. -

- ); -} - -function OfferProfileCard() { - return ( -
-
-
- -
-
-

profile-name

-

Previous company: Meta, Singapore

-

YOE: 4 years

-
-
- - -
-
-

Software engineer

-

Company: Google, Singapore

-

Level: G4

-
-
-

Sept 2022

-

$125,000 / year

-
-
-
- ); -} - -function TopOfferProfileList() { - return ( - <> - - - - ); -} - -function OfferAnalysisContent() { - return ( - <> - - - - ); -} - -export default function OfferAnalysis() { - const [tab, setTab] = useState('Overall'); - - return ( -
-
- Result -
-
- - - -
-
- ); -} diff --git a/apps/portal/src/components/offers/forms/BackgroundForm.tsx b/apps/portal/src/components/offers/offers-submission/BackgroundForm.tsx similarity index 84% rename from apps/portal/src/components/offers/forms/BackgroundForm.tsx rename to apps/portal/src/components/offers/offers-submission/BackgroundForm.tsx index 858c357a..645d60ca 100644 --- a/apps/portal/src/components/offers/forms/BackgroundForm.tsx +++ b/apps/portal/src/components/offers/offers-submission/BackgroundForm.tsx @@ -9,16 +9,21 @@ import { locationOptions, titleOptions, } from '~/components/offers/constants'; -import FormRadioList from '~/components/offers/forms/components/FormRadioList'; -import FormSelect from '~/components/offers/forms/components/FormSelect'; -import FormTextInput from '~/components/offers/forms/components/FormTextInput'; +import type { BackgroundPostData } from '~/components/offers/types'; import { JobType } from '~/components/offers/types'; import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; import { CURRENCY_OPTIONS } from '~/utils/offers/currency/CurrencyEnum'; +import FormRadioList from '../forms/FormRadioList'; +import FormSelect from '../forms/FormSelect'; +import FormTextInput from '../forms/FormTextInput'; + function YoeSection() { - const { register } = useFormContext(); + const { register, formState } = useFormContext<{ + background: BackgroundPostData; + }>(); + const backgroundFields = formState.errors.background; return ( <>
@@ -28,11 +33,13 @@ function YoeSection() {
@@ -55,9 +64,11 @@ function YoeSection() {
@@ -74,7 +85,10 @@ function YoeSection() { } function FullTimeJobFields() { - const { register, setValue } = useFormContext(); + const { register, setValue, formState } = useFormContext<{ + background: BackgroundPostData; + }>(); + const experiencesField = formState.errors.background?.experiences?.[0]; return ( <>
@@ -107,12 +121,14 @@ function FullTimeJobFields() { /> } endAddOnType="element" + errorMessage={experiencesField?.totalCompensation?.value?.message} label="Total Compensation (Annual)" placeholder="0.00" startAddOn="$" startAddOnType="label" type="number" {...register(`background.experiences.0.totalCompensation.value`, { + min: { message: FieldError.NonNegativeNumber, value: 0 }, valueAsNumber: true, })} /> @@ -138,9 +154,11 @@ function FullTimeJobFields() { {...register(`background.experiences.0.location`)} /> @@ -151,7 +169,11 @@ function FullTimeJobFields() { } function InternshipJobFields() { - const { register, setValue } = useFormContext(); + const { register, setValue, formState } = useFormContext<{ + background: BackgroundPostData; + }>(); + const experiencesField = formState.errors.background?.experiences?.[0]; + return ( <>
@@ -182,12 +204,16 @@ function InternshipJobFields() { /> } endAddOnType="element" + errorMessage={experiencesField?.monthlySalary?.value?.message} label="Salary (Monthly)" placeholder="0.00" startAddOn="$" startAddOnType="label" type="number" - {...register(`background.experiences.0.monthlySalary.value`)} + {...register(`background.experiences.0.monthlySalary.value`, { + min: { message: FieldError.NonNegativeNumber, value: 0 }, + valueAsNumber: true, + })} />
@@ -238,7 +264,7 @@ function CurrentJobSection() {
diff --git a/apps/portal/src/components/offers/offers-submission/OfferAnalysis.tsx b/apps/portal/src/components/offers/offers-submission/OfferAnalysis.tsx new file mode 100644 index 00000000..6a0717da --- /dev/null +++ b/apps/portal/src/components/offers/offers-submission/OfferAnalysis.tsx @@ -0,0 +1,138 @@ +import Error from 'next/error'; +import { useEffect } from 'react'; +import { useState } from 'react'; +import { HorizontalDivider, Spinner, Tabs } from '@tih/ui'; + +import { trpc } from '~/utils/trpc'; + +import OfferPercentileAnalysis from '../analysis/OfferPercentileAnalysis'; +import OfferProfileCard from '../analysis/OfferProfileCard'; +import { OVERALL_TAB } from '../constants'; + +import type { + Analysis, + AnalysisHighestOffer, + ProfileAnalysis, +} from '~/types/offers'; + +type OfferAnalysisData = { + offer?: AnalysisHighestOffer; + offerAnalysis?: Analysis; +}; + +type OfferAnalysisContentProps = Readonly<{ + analysis: OfferAnalysisData; + tab: string; +}>; + +function OfferAnalysisContent({ + analysis: { offer, offerAnalysis }, + tab, +}: OfferAnalysisContentProps) { + if (!offerAnalysis || !offer || offerAnalysis.noOfOffers === 0) { + return ( +

+ You are the first to submit an offer for these companies! Check back + later when there are more submissions. +

+ ); + } + return ( + <> + + {offerAnalysis.topPercentileOffers.map((topPercentileOffer) => ( + + ))} + + ); +} + +type OfferAnalysisProps = Readonly<{ + profileId?: string; +}>; + +export default function OfferAnalysis({ profileId }: OfferAnalysisProps) { + const [tab, setTab] = useState(OVERALL_TAB); + const [allAnalysis, setAllAnalysis] = useState(null); + const [analysis, setAnalysis] = useState(null); + + useEffect(() => { + if (tab === OVERALL_TAB) { + setAnalysis({ + offer: allAnalysis?.overallHighestOffer, + offerAnalysis: allAnalysis?.overallAnalysis, + }); + } else { + setAnalysis({ + offer: allAnalysis?.overallHighestOffer, + offerAnalysis: allAnalysis?.companyAnalysis[0], + }); + } + }, [tab, allAnalysis]); + + if (!profileId) { + return null; + } + + const getAnalysisResult = trpc.useQuery( + ['offers.analysis.get', { profileId }], + { + onError(error) { + console.error(error.message); + }, + onSuccess(data) { + setAllAnalysis(data); + }, + }, + ); + + const tabOptions = [ + { + label: OVERALL_TAB, + value: OVERALL_TAB, + }, + { + label: allAnalysis?.overallHighestOffer.company.name || '', + value: allAnalysis?.overallHighestOffer.company.id || '', + }, + ]; + + return ( + <> + {getAnalysisResult.isError && ( + + )} + {!getAnalysisResult.isError && analysis && ( +
+
+ Result +
+ {getAnalysisResult.isLoading ? ( + + ) : ( +
+ + + +
+ )} +
+ )} + + ); +} diff --git a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offers-submission/OfferDetailsForm.tsx similarity index 78% rename from apps/portal/src/components/offers/forms/OfferDetailsForm.tsx rename to apps/portal/src/components/offers/offers-submission/OfferDetailsForm.tsx index 6bbc7c4c..eee37504 100644 --- a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx +++ b/apps/portal/src/components/offers/offers-submission/OfferDetailsForm.tsx @@ -18,10 +18,6 @@ import { defaultInternshipOfferValues, } from '~/pages/offers/submit'; -import FormMonthYearPicker from './components/FormMonthYearPicker'; -import FormSelect from './components/FormSelect'; -import FormTextArea from './components/FormTextArea'; -import FormTextInput from './components/FormTextInput'; import { emptyOption, FieldError, @@ -30,10 +26,11 @@ import { titleOptions, yearOptions, } from '../constants'; -import type { - FullTimeOfferDetailsFormData, - InternshipOfferDetailsFormData, -} from '../types'; +import FormMonthYearPicker from '../forms/FormMonthYearPicker'; +import FormSelect from '../forms/FormSelect'; +import FormTextArea from '../forms/FormTextArea'; +import FormTextInput from '../forms/FormTextInput'; +import type { OfferFormData } from '../types'; import { JobTypeLabel } from '../types'; import { JobType } from '../types'; import { CURRENCY_OPTIONS } from '../../../utils/offers/currency/CurrencyEnum'; @@ -48,18 +45,21 @@ function FullTimeOfferDetailsForm({ remove, }: FullTimeOfferDetailsFormProps) { const { register, formState, setValue } = useFormContext<{ - offers: Array; + offers: Array; }>(); const offerFields = formState.errors.offers?.[index]; const watchCurrency = useWatch({ - name: `offers.${index}.job.totalCompensation.currency`, + name: `offers.${index}.offersFullTime.totalCompensation.currency`, }); useEffect(() => { - setValue(`offers.${index}.job.base.currency`, watchCurrency); - setValue(`offers.${index}.job.bonus.currency`, watchCurrency); - setValue(`offers.${index}.job.stocks.currency`, watchCurrency); + setValue( + `offers.${index}.offersFullTime.baseSalary.currency`, + watchCurrency, + ); + setValue(`offers.${index}.offersFullTime.bonus.currency`, watchCurrency); + setValue(`offers.${index}.offersFullTime.stocks.currency`, watchCurrency); }, [watchCurrency, index, setValue]); return ( @@ -67,21 +67,21 @@ function FullTimeOfferDetailsForm({
@@ -95,11 +95,11 @@ function FullTimeOfferDetailsForm({ />
@@ -133,24 +133,32 @@ function FullTimeOfferDetailsForm({ isLabelHidden={true} label="Currency" options={CURRENCY_OPTIONS} - {...register(`offers.${index}.job.totalCompensation.currency`, { - required: FieldError.Required, - })} + {...register( + `offers.${index}.offersFullTime.totalCompensation.currency`, + { + required: FieldError.Required, + }, + )} /> } endAddOnType="element" - errorMessage={offerFields?.job?.totalCompensation?.value?.message} + errorMessage={ + offerFields?.offersFullTime?.totalCompensation?.value?.message + } label="Total Compensation (Annual)" placeholder="0" required={true} startAddOn="$" startAddOnType="label" type="number" - {...register(`offers.${index}.job.totalCompensation.value`, { - min: { message: FieldError.NonNegativeNumber, value: 0 }, - required: FieldError.Required, - valueAsNumber: true, - })} + {...register( + `offers.${index}.offersFullTime.totalCompensation.value`, + { + min: { message: FieldError.NonNegativeNumber, value: 0 }, + required: FieldError.Required, + valueAsNumber: true, + }, + )} />
@@ -161,20 +169,23 @@ function FullTimeOfferDetailsForm({ isLabelHidden={true} label="Currency" options={CURRENCY_OPTIONS} - {...register(`offers.${index}.job.base.currency`, { - required: FieldError.Required, - })} + {...register( + `offers.${index}.offersFullTime.baseSalary.currency`, + { + required: FieldError.Required, + }, + )} /> } endAddOnType="element" - errorMessage={offerFields?.job?.base?.value?.message} + errorMessage={offerFields?.offersFullTime?.baseSalary?.value?.message} label="Base Salary (Annual)" placeholder="0" required={true} startAddOn="$" startAddOnType="label" type="number" - {...register(`offers.${index}.job.base.value`, { + {...register(`offers.${index}.offersFullTime.baseSalary.value`, { min: { message: FieldError.NonNegativeNumber, value: 0 }, required: FieldError.Required, valueAsNumber: true, @@ -187,20 +198,20 @@ function FullTimeOfferDetailsForm({ isLabelHidden={true} label="Currency" options={CURRENCY_OPTIONS} - {...register(`offers.${index}.job.bonus.currency`, { + {...register(`offers.${index}.offersFullTime.bonus.currency`, { required: FieldError.Required, })} /> } endAddOnType="element" - errorMessage={offerFields?.job?.bonus?.value?.message} + errorMessage={offerFields?.offersFullTime?.bonus?.value?.message} label="Bonus (Annual)" placeholder="0" required={true} startAddOn="$" startAddOnType="label" type="number" - {...register(`offers.${index}.job.bonus.value`, { + {...register(`offers.${index}.offersFullTime.bonus.value`, { min: { message: FieldError.NonNegativeNumber, value: 0 }, required: FieldError.Required, valueAsNumber: true, @@ -215,20 +226,20 @@ function FullTimeOfferDetailsForm({ isLabelHidden={true} label="Currency" options={CURRENCY_OPTIONS} - {...register(`offers.${index}.job.stocks.currency`, { + {...register(`offers.${index}.offersFullTime.stocks.currency`, { required: FieldError.Required, })} /> } endAddOnType="element" - errorMessage={offerFields?.job?.stocks?.value?.message} + errorMessage={offerFields?.offersFullTime?.stocks?.value?.message} label="Stocks (Annual)" placeholder="0" required={true} startAddOn="$" startAddOnType="label" type="number" - {...register(`offers.${index}.job.stocks.value`, { + {...register(`offers.${index}.offersFullTime.stocks.value`, { min: { message: FieldError.NonNegativeNumber, value: 0 }, required: FieldError.Required, valueAsNumber: true, @@ -273,7 +284,7 @@ function InternshipOfferDetailsForm({ remove, }: InternshipOfferDetailsFormProps) { const { register, formState, setValue } = useFormContext<{ - offers: Array; + offers: Array; }>(); const offerFields = formState.errors.offers?.[index]; @@ -283,22 +294,22 @@ function InternshipOfferDetailsForm({
@@ -366,20 +378,25 @@ function InternshipOfferDetailsForm({ isLabelHidden={true} label="Currency" options={CURRENCY_OPTIONS} - {...register(`offers.${index}.job.monthlySalary.currency`, { - required: FieldError.Required, - })} + {...register( + `offers.${index}.offersIntern.monthlySalary.currency`, + { + required: FieldError.Required, + }, + )} /> } endAddOnType="element" - errorMessage={offerFields?.job?.monthlySalary?.value?.message} + errorMessage={ + offerFields?.offersIntern?.monthlySalary?.value?.message + } label="Salary (Monthly)" placeholder="0" required={true} startAddOn="$" startAddOnType="label" type="number" - {...register(`offers.${index}.job.monthlySalary.value`, { + {...register(`offers.${index}.offersIntern.monthlySalary.value`, { min: { message: FieldError.NonNegativeNumber, value: 0 }, required: FieldError.Required, valueAsNumber: true, @@ -468,7 +485,7 @@ export default function OfferDetailsForm() { const toggleJobType = () => { remove(); if (jobType === JobType.FullTime) { - setJobType(JobType.Internship); + setJobType(JobType.Intern); append(defaultInternshipOfferValues); } else { setJobType(JobType.FullTime); @@ -477,9 +494,7 @@ export default function OfferDetailsForm() { }; const switchJobTypeLabel = () => - jobType === JobType.FullTime - ? JobTypeLabel.INTERNSHIP - : JobTypeLabel.FULLTIME; + jobType === JobType.FullTime ? JobTypeLabel.INTERN : JobTypeLabel.FULLTIME; return (
@@ -504,11 +519,11 @@ export default function OfferDetailsForm() {