Onboarding: work experience page and education page

package.json

@@ -74,13 +74,15 @@
     "react-contenteditable": "^3.3.6",
     "react-css-super-themr": "^2.2.0",
     "react-date-range": "^1.1.3",
+    "react-datepicker": "^4.14.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^11.3.2",
     "react-elastic-carousel": "^0.11.5",
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-markdown": "8.0.6",
+    "react-overlays": "^5.2.1",
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",
     "react-responsive": "^9.0.0-beta.5",
@@ -149,6 +151,7 @@
     "@types/node": "^18.8.5",
     "@types/reach__router": "^1.3.11",
     "@types/react": "^18.0.21",
+    "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.0.6",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-helmet": "^6.1.6",

src/apps/onboarding/src/components/DateInput/index.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable ordered-imports/ordered-imports */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable unicorn/no-null */
+/* eslint-disable max-len */
+/* eslint-disable react/destructuring-assignment */
+/**
+ * DateInput
+ *
+ * Date Input control.
+ */
+import React, { FC, createRef, useState } from 'react'
+import DatePicker from 'react-datepicker'
+import { Portal } from 'react-overlays'
+import cn from 'classnames'
+import moment from 'moment'
+
+import 'react-datepicker/dist/react-datepicker.css'
+
+import styles from './styles.module.scss'
+
+const CalendarIcon: any = () => (
+    <svg
+        width='16'
+        height='16'
+        viewBox='0 0 16 16'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+    >
+        <path
+            d='M13.1849 2.66659H12.4441V1.33325H10.9626V2.66659H5.03671V1.33325H3.55523V2.66659H2.81449C1.99227 2.66659 1.34042 3.26659 1.34042 3.99992L1.33301 13.3333C1.33301 14.0666 1.99227 14.6666 2.81449 14.6666H13.1849C13.9997 14.6666 14.6663 14.0666 14.6663 13.3333V3.99992C14.6663 3.26659 13.9997 2.66659 13.1849 2.66659ZM13.1849 13.3333H2.81449V5.99992H13.1849V13.3333ZM4.29597 7.33325H7.99967V10.6666H4.29597V7.33325Z'
+            fill='#7F7F7F'
+        />
+    </svg>
+)
+const ArrowIcon: any = () => (
+    <svg
+        height='20'
+        width='20'
+        viewBox='0 0 20 20'
+        aria-hidden='true'
+        focusable='false'
+    >
+        <path
+            d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'
+        />
+    </svg>
+)
+
+interface CalendarContainerProps {
+    children?: any
+}
+const CalendarContainer: FC<CalendarContainerProps> = ({ children }: CalendarContainerProps) => {
+    const el: any = document.getElementById('calendar-portal')
+
+    return <Portal container={el}>{children}</Portal>
+}
+
+interface DateInputProps {
+    style2?: boolean
+    className?: string
+    placeholder?: string
+    value?: Date
+    onChange?: (date: Date | null) => void
+    onBlur?: () => void
+    onFocus?: () => void
+    allowFutureDate?: boolean
+    disabled?: boolean
+}
+
+const DateInput: FC<DateInputProps> = (props: DateInputProps) => {
+    const [open, setOpen] = useState(false)
+    const calendarRef: any = createRef<any>()
+    return (
+        <div
+            className={cn(
+                styles['datepicker-wrapper'],
+                props.className,
+                props.style2 ? styles.style2 : '',
+            )}
+        >
+            <div
+                onClick={() => calendarRef.current.setOpen(true)}
+                className={cn(styles.icon, styles['icon-calendar'])}
+            >
+                <CalendarIcon />
+            </div>
+            <DatePicker
+                ref={calendarRef}
+                dateFormat='MM/dd/yyyy'
+                placeholderText={props.placeholder}
+                selected={props.value}
+                onChange={props.onChange as any}
+                onBlur={props.onBlur}
+                onCalendarClose={() => {
+                    setOpen(false)
+                }}
+                onFocus={props.onFocus}
+                showYearDropdown
+                onCalendarOpen={() => setOpen(true)}
+                maxDate={
+                    props.allowFutureDate ? null : moment()
+                        .subtract(1, 'days')
+                        .toDate()
+                }
+                disabled={props.disabled}
+                popperContainer={CalendarContainer}
+            />
+            <div
+                className={cn(
+                    styles.icon,
+                    styles['icon-arrow'],
+                    open ? styles['icon-arrow-open'] : '',
+                )}
+                onClick={() => calendarRef.current.setOpen(true)}
+            >
+                <ArrowIcon />
+            </div>
+        </div>
+    )
+}
+
+export default DateInput

src/apps/onboarding/src/components/DateInput/styles.module.scss

@@ -0,0 +1,75 @@
+.datepicker-wrapper {
+    position: relative;
+    padding: 0 10px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+
+    .icon {
+        position: absolute;
+        display: flex;
+        padding: 8px 0 8px 4px;
+        align-items: center;
+
+        &>svg {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .icon-calendar {
+        left: 8px;
+        cursor: pointer;
+    }
+
+    .icon-arrow {
+        right: 8px;
+        top: 0;
+
+        &>svg {
+            color: hsl(0, 0%, 80%);
+        }
+
+        &:hover {
+            &>svg {
+                color: hsl(0, 0%, 60%);
+            }
+        }
+
+        &.icon-arrow-open {
+            &>svg {
+                color: hsl(0, 0%, 40%);
+            }
+        }
+    }
+
+    &.error {
+        input {
+            border-color: #fe665d;
+        }
+    }
+
+    &>div:nth-child(2) {
+        margin-left: 24px;
+    }
+
+    &.style2 input {
+        border: none !important;
+        box-shadow: none !important;
+        margin-bottom: 0 !important;
+        font-size: 14px;
+        font-weight: 400;
+
+        &::placeholder {
+            color: #7F7F7F;
+            font-size: 14px;
+            font-weight: 400;
+            text-transform: none !important;
+            opacity: 1;
+        }
+    }
+}
+
+.datepicker-wrapper>div:nth-child(2)>div:nth-child(2)>div:nth-child(2) {
+    z-index: 100;
+}

src/apps/onboarding/src/components/FormField/index.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable ordered-imports/ordered-imports */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable unicorn/no-null */
+/**
+ * FormField
+ *
+ * A Form Field Is a wrapper for input to add the label to it
+ */
+import React, { FC } from 'react'
+import classNames from 'classnames'
+
+import { IconSolid } from '~/libs/ui'
+
+import styles from './styles.module.scss'
+
+interface FormFieldProps {
+    children?: any
+    className?: string
+    label?: string
+    error?: string
+}
+
+const FormField: FC<FormFieldProps> = ({
+    children,
+    className,
+    label,
+    ...props
+}: FormFieldProps) => {
+    const handleClick: any = (e: any) => {
+        // focus on input label click
+        const inputElement: any = e.target.closest('.form-field')
+            .querySelector('input')
+        inputElement?.focus()
+    }
+
+    return (
+        <div
+            className={classNames(styles['form-field-wrapper'], className || '')}
+        >
+            <div className={classNames(styles['form-field'])} {...props}>
+                <div className={styles.label} onClick={handleClick}>
+                    {label}
+                </div>
+                {children}
+            </div>
+            <div className={classNames(styles.error, 'd-flex align-items-center')}>
+                {props.error ? (<IconSolid.ExclamationIcon width={12} height={12} />) : null}
+                {props.error}
+            </div>
+        </div>
+    )
+}
+
+export default FormField

src/apps/onboarding/src/components/FormField/styles.module.scss

@@ -0,0 +1,32 @@
+$green1: #137d60;
+
+.form-field-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    margin-bottom: 18px;
+
+    .form-field {
+        border: 1px solid #b7b7b7;
+        border-radius: 4px;
+        background: white;
+        padding-top: 24px;
+        margin-bottom: 10px;
+
+        .label {
+            position: absolute;
+            top: 5px;
+            left: 15px;
+            color: $green1;
+            font-size: 11px;
+            font-weight: 500;
+        }
+    }
+
+    .error {
+        color: #ec2710;
+        font-size: 11px;
+        gap: 4px;
+    }
+}

src/apps/onboarding/src/components/connect-linked-in/index.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable ordered-imports/ordered-imports */
+/* eslint-disable react/jsx-no-bind */
+import React, { FC } from 'react'
+
+import { Button } from '~/libs/ui'
+
+const ConnectLinkedIn: FC<{}> = () => (
+    <div className='d-flex flex-column align-items-end'>
+        <span>Wait! Get my skills from LinkedIn instead...</span>
+        <Button
+            size='lg'
+            secondary
+            iconToLeft
+            className='mt-30'
+        >
+            connect to linked in
+        </Button>
+    </div>
+)
+
+export default ConnectLinkedIn