Onboarding

.circleci/config.yml

@@ -262,7 +262,7 @@ workflows:
             branches:
               only:
                 - dev
-                - talent-search
+                - onboarding
 
       - deployQa:
           context : org-global

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vue.features.codeActions.enable": false
+}

package.json

@@ -83,6 +83,7 @@
     "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",

src/apps/onboarding/index.ts

@@ -0,0 +1 @@
+export * from './src'

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

@@ -0,0 +1,99 @@
+/**
+ * DateInput
+ *
+ * Date Input control.
+ */
+import { Portal } from 'react-overlays'
+import { createRef, FC, useState } from 'react'
+import DatePicker from 'react-datepicker'
+import cn from 'classnames'
+import moment from 'moment'
+import 'react-datepicker/dist/react-datepicker.css'
+
+import { IconOutline } from '~/libs/ui'
+
+import { ReactComponent as CalendarIcon } from '../../assets/images/calendar.svg'
+
+import styles from './styles.module.scss'
+
+interface CalendarContainerProps {
+    children?: any
+}
+const CalendarContainer: FC<CalendarContainerProps> = (props: CalendarContainerProps) => {
+    const el: any = document.getElementById('calendar-portal')
+
+    return <Portal container={el}>{props.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={function openCalendar() {
+                    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={function closeCalendar() {
+                    setOpen(false)
+                }}
+                onFocus={props.onFocus}
+                showYearDropdown
+                dropdownMode='select'
+                onCalendarOpen={function openCalendar() {
+                    setOpen(true)
+                }}
+                maxDate={
+                    props.allowFutureDate ? undefined : moment()
+                        .subtract(1, 'days')
+                        .toDate()
+                }
+                disabled={props.disabled}
+                popperContainer={CalendarContainer}
+            />
+            <div
+                className={cn(
+                    styles.icon,
+                    styles['icon-arrow'],
+                    open ? styles['icon-arrow-open'] : '',
+                )}
+                onClick={function openCalendar() {
+                    calendarRef.current.setOpen(true)
+                }}
+            >
+                <IconOutline.ChevronDownIcon />
+            </div>
+        </div>
+    )
+}
+
+export default DateInput

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

@@ -0,0 +1,77 @@
+@import '@libs/ui/styles/includes';
+
+.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: $black-60;
+            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/FieldAvatar/index.tsx

@@ -0,0 +1,135 @@
+/**
+ * FieldAvatar
+ *
+ * A Form Field Is a wrapper for input to add the label to it
+ */
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { Button, IconOutline } from '~/libs/ui'
+
+import AvatarPlaceholder from '../../assets/images/avatar-placeholder.png'
+import MemberInfo from '../../models/MemberInfo'
+import ModalUploadPhoto from '../modal-upload-photo'
+
+import styles from './styles.module.scss'
+
+interface FieldAvatarProps {
+    className?: string
+    memberInfo?: MemberInfo,
+    setMemberPhotoUrl: (photoUrl: string) => void
+    updateMemberPhotoUrl: (photoUrl: string) => void
+}
+
+const FieldAvatar: FC<FieldAvatarProps> = (props: FieldAvatarProps) => {
+    const [imgUrl, setImgUrl] = useState<string>('')
+    useEffect(() => {
+        if (props.memberInfo) {
+            setImgUrl(props.memberInfo.photoURL)
+        }
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [props.memberInfo])
+
+    const [isPhotoEditMode, setIsPhotoEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+    const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    function handleModifyPhotoModalClose(): void {
+        setIsPhotoEditMode(false)
+    }
+
+    async function handleRemovePhoto(): Promise<void> {
+        setIsSaving(true)
+        try {
+            await props.updateMemberPhotoUrl('')
+        } catch (error) {
+        }
+
+        setIsSaving(false)
+    }
+
+    function showEditPhoto(): void {
+        setIsPhotoEditMode(true)
+    }
+
+    return (
+        <div
+            className={classNames(styles.container, props.className, 'd-flex flex-column gap-20 align-items-start')}
+        >
+            <h3>Photo</h3>
+            <div className='d-flex gap-30'>
+                <div className={classNames(
+                    'd-flex',
+                    styles.blockImg,
+                    {
+                        [styles.haveImg]: !!imgUrl,
+                    },
+                )}
+                >
+                    {imgUrl ? (
+                        <img className={styles.img} src={imgUrl} alt='avatar' />
+                    ) : (
+                        <img className={styles.imgPlaceholder} src={AvatarPlaceholder} alt='avatar' />
+                    )}
+                </div>
+                <div className='d-flex flex-column align-items-start'>
+                    <span className='color-black-60'>
+                        Make a great first impression to potential customers with a
+                        professional photo that represents your style.
+                    </span>
+                    {imgUrl ? (
+                        <div className='d-flex gap-8'>
+                            <Button
+                                size='lg'
+                                secondary
+                                iconToLeft
+                                icon={IconOutline.UploadIcon}
+                                disabled={!props.memberInfo || isSaving}
+                                onClick={showEditPhoto}
+                                className='mt-16'
+                            >
+                                change
+                            </Button>
+                            <Button
+                                size='lg'
+                                secondary
+                                iconToLeft
+                                icon={IconOutline.TrashIcon}
+                                disabled={!props.memberInfo || isSaving}
+                                onClick={handleRemovePhoto}
+                                className='mt-16'
+                            >
+                                delete
+                            </Button>
+                        </div>
+                    ) : (
+                        <Button
+                            size='lg'
+                            secondary
+                            iconToLeft
+                            icon={IconOutline.UploadIcon}
+                            disabled={!props.memberInfo}
+                            onClick={showEditPhoto}
+                            className='mt-16'
+                        >
+                            add image
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            {
+                isPhotoEditMode && props.memberInfo && (
+                    <ModalUploadPhoto
+                        onClose={handleModifyPhotoModalClose}
+                        memberInfo={props.memberInfo}
+                        setMemberPhotoUrl={props.setMemberPhotoUrl}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default FieldAvatar

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

@@ -0,0 +1,36 @@
+.container {
+    strong {
+        font-weight: bold;
+    }
+
+    ul {
+        list-style: unset;
+        padding-left: 30px;
+    }
+}
+
+.blockImg {
+    width: 120px;
+    height: 120px;
+    display: flex;
+    border-radius: 100%;
+    overflow: hidden;
+    border: 3px dashed white;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.09);
+    flex-shrink: 0;
+
+    .img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .imgPlaceholder {
+        width: 144px;
+        height: 144px;
+        object-fit: contain;
+        max-width: none;
+        margin-left: -15px;
+        margin-top: -11px;
+    }
+}