[offers][feat] Enhance submit offers form (yangshun#366)

* [eslint] Replace no-shadow with typescript no-shadow

* [offers][feat] Add auto scroll to top

* [offers][feat] Add error messages for text input fields

* [offers][fix] Add warning dialogs

* [offers][fix] Auto change currency according to TC currency

* [offers][fix] Add select error messages and fix date picker labels

* [offers][fix] Fix console warnings

Author: ailing35

apps/portal/src/components/offers/Breadcrumb.tsx

@@ -7,7 +7,7 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
   return (
     <div className="flex space-x-1">
       {stepLabels.map((label, index) => (
-        <>
+        <div key={label}>
           {index === currentStep ? (
             <p className="text-sm text-purple-700">{label}</p>
           ) : (
@@ -16,7 +16,7 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
           {index !== stepLabels.length - 1 && (
             <p className="text-sm text-gray-400">{'>'}</p>
           )}
-        </>
+        </div>
       ))}
     </div>
   );

apps/portal/src/components/offers/OffersNavigation.ts

@@ -1,7 +1,6 @@
 import type { ProductNavigationItems } from '~/components/global/ProductNavigation';
 
 const navigation: ProductNavigationItems = [
-  { href: '/offers', name: 'Home' },
   { href: '/offers/submit', name: 'Benchmark your offer' },
 ];
 

apps/portal/src/components/offers/constants.ts

@@ -1,13 +1,9 @@
 import { EducationBackgroundType } from './types';
 
-const emptyOption = {
-  label: '----',
-  value: '',
-};
+export const emptyOption = '----';
 
 // TODO: use enums
 export const titleOptions = [
-  emptyOption,
   {
     label: 'Software engineer',
     value: 'Software engineer',
@@ -27,7 +23,6 @@ export const titleOptions = [
 ];
 
 export const companyOptions = [
-  emptyOption,
   {
     label: 'Amazon',
     value: 'cl93patjt0000txewdi601mub',
@@ -51,7 +46,6 @@ export const companyOptions = [
 ];
 
 export const locationOptions = [
-  emptyOption,
   {
     label: 'Singapore, Singapore',
     value: 'Singapore, Singapore',
@@ -67,7 +61,6 @@ export const locationOptions = [
 ];
 
 export const internshipCycleOptions = [
-  emptyOption,
   {
     label: 'Summer',
     value: 'Summer',
@@ -91,7 +84,6 @@ export const internshipCycleOptions = [
 ];
 
 export const yearOptions = [
-  emptyOption,
   {
     label: '2021',
     value: '2021',
@@ -110,17 +102,14 @@ export const yearOptions = [
   },
 ];
 
-const educationBackgroundTypes = Object.entries(EducationBackgroundType).map(
-  ([key, value]) => ({
-    label: key,
-    value,
-  }),
-);
-
-export const educationLevelOptions = [emptyOption, ...educationBackgroundTypes];
+export const educationLevelOptions = Object.entries(
+  EducationBackgroundType,
+).map(([key, value]) => ({
+  label: key,
+  value,
+}));
 
 export const educationFieldOptions = [
-  emptyOption,
   {
     label: 'Computer Science',
     value: 'Computer Science',
@@ -134,3 +123,9 @@ export const educationFieldOptions = [
     value: 'Business Analytics',
   },
 ];
+
+export enum FieldError {
+  NonNegativeNumber = 'Please fill in a non-negative number in this field.',
+  Number = 'Please fill in a number in this field.',
+  Required = 'Please fill in this field.',
+}