diff --git a/assets/images/simple-illustrations/simple-illustration__abacus.svg b/assets/images/simple-illustrations/simple-illustration__abacus.svg new file mode 100644 index 000000000000..df94ab653982 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__abacus.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__binoculars.svg b/assets/images/simple-illustrations/simple-illustration__binoculars.svg new file mode 100644 index 000000000000..381be8988873 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__binoculars.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__company-card.svg b/assets/images/simple-illustrations/simple-illustration__company-card.svg new file mode 100644 index 000000000000..4121bbeeb205 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__company-card.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__receiptupload.svg b/assets/images/simple-illustrations/simple-illustration__receiptupload.svg new file mode 100644 index 000000000000..b8fe5101715f --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__receiptupload.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__splitbill.svg b/assets/images/simple-illustrations/simple-illustration__splitbill.svg new file mode 100644 index 000000000000..dfed7535ee90 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__splitbill.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index 9804ce484219..a72a8f8c9c78 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3267,6 +3267,14 @@ const CONST = { MINIMUM_WORKSPACES_TO_SHOW_SEARCH: 8, }, + ONBOARDING_CHOICES: { + TRACK: 'newDotTrack', + EMPLOYER: 'newDotEmployer', + MANAGE_TEAM: 'newDotManageTeam', + CHAT_SPLIT: 'newDotSplitChat', + LOOKING_AROUND: 'newDotLookingAround', + }, + REPORT_FIELD_TITLE_FIELD_ID: 'text_title', DEBUG_CONSOLE: { diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 3f6b6ca20540..b774bd2624f1 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -63,6 +63,11 @@ import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustrati import TrackShoe from '@assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; import TrashCan from '@assets/images/simple-illustrations/simple-illustration__trashcan.svg'; import TreasureChest from '@assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; +import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg'; +import Binoculars from '@assets/images/simple-illustrations/simple-illustration__binoculars.svg'; +import CompanyCard from '@assets/images/simple-illustrations/simple-illustration__company-card.svg'; +import ReceiptUpload from '@assets/images/simple-illustrations/simple-illustration__receiptupload.svg'; +import SplitBill from '@assets/images/simple-illustrations/simple-illustration__splitbill.svg'; export { Abracadabra, @@ -130,4 +135,9 @@ export { Gears, QRCode, House, + Abacus, + Binoculars, + CompanyCard, + ReceiptUpload, + SplitBill, }; diff --git a/src/languages/en.ts b/src/languages/en.ts index 684dc167c3bd..249e14007b87 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1213,6 +1213,14 @@ export default { onboarding: { welcome: 'Welcome!', whatsYourName: "What's your name?", + purpose: { + title: "What do you want to do today?", + [CONST.ONBOARDING_CHOICES.TRACK]: "Track business spend for taxes", + [CONST.ONBOARDING_CHOICES.EMPLOYER]: "Get paid back by my employer", + [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: "Manage my team's expenses", + [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: "Chat and split bills with friends", + [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: "I'm just looking around" + }, error: { requiredFirstName: 'Please input your first name to continue', requiredLasttName: 'Please input your last name to continue', diff --git a/src/pages/OnboardingPurpose.tsx b/src/pages/OnboardingPurpose.tsx index 799581a353b0..9dd913ecb17b 100644 --- a/src/pages/OnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; @@ -7,28 +7,99 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import * as Report from '@userActions/Report'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import Button from '@components/Button'; +import MenuItemList from '@components/MenuItemList'; +import type { MenuItemProps } from '@components/MenuItem'; +import CONST from '@src/CONST'; +import * as Illustrations from '@components/Icon/Illustrations'; +import * as Expensicons from '@components/Icon/Expensicons'; +import variables from '@styles/variables'; +import Icon from '@components/Icon'; + +type ValuesType = T[keyof T]; +type SelectedPurposeType = ValuesType | undefined; + +const menuIcons = { + [CONST.ONBOARDING_CHOICES.TRACK]: Illustrations.CompanyCard, + [CONST.ONBOARDING_CHOICES.EMPLOYER]: Illustrations.ReceiptUpload, + [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: Illustrations.Abacus, + [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: Illustrations.SplitBill, + [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: Illustrations.Binoculars, +}; function OnboardingPurpose() { const styles = useThemeStyles(); + const {translate} = useLocalize(); const {windowHeight} = useWindowDimensions(); const {shouldUseNarrowLayout} = useOnboardingLayout(); + const [selectedPurpose, setSelectedPurpose] = useState(undefined); const theme = useTheme(); + const handleGoBack = useCallback(() => { + Navigation.goBack(); + }, []); + const closeModal = useCallback(() => { Report.dismissEngagementModal(); Navigation.goBack(); }, []); + const selectedCheckboxIcon = useMemo(() => ( + + + ), [styles.pointerEventsAuto, styles.popoverMenuIcon, theme.success]); + + const menuItems: MenuItemProps[] = + Object.values(CONST.ONBOARDING_CHOICES).map((choice) => { + const translationKey = `onboarding.purpose.${choice}` as const; + return { + key: translationKey, + title: translate(translationKey), + icon: menuIcons[choice], + iconWidth: variables.purposeMenuIconSize, + iconHeight: variables.purposeMenuIconSize, + iconStyles: [styles.mh3], + wrapperStyle: [styles.purposeMenuItem], + rightComponent: selectedCheckboxIcon, + shouldShowRightComponent: (selectedPurpose === choice), + onPress: () => { + setSelectedPurpose(choice); + }, + }; + }, + ); + return ( - - + + + + + + {translate('onboarding.purpose.title')} + + + +