From 785680c9b59c5b50207b582be9fbef0e234d8167 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Fri, 1 Mar 2024 16:30:58 +0100 Subject: [PATCH] fix menu list styling and add remaining options and responses --- .../simple-illustration__piggybank.svg | 50 ++++++++++++ src/CONST.ts | 78 +++++++++++++++++-- src/components/Icon/Illustrations.ts | 2 + src/components/MenuItem.tsx | 2 +- src/languages/en.ts | 1 + src/pages/OnboardingPurpose.tsx | 74 ++++++++++++------ src/styles/index.ts | 6 +- 7 files changed, 180 insertions(+), 33 deletions(-) create mode 100644 assets/images/simple-illustrations/simple-illustration__piggybank.svg diff --git a/assets/images/simple-illustrations/simple-illustration__piggybank.svg b/assets/images/simple-illustrations/simple-illustration__piggybank.svg new file mode 100644 index 000000000000..a74c634a0489 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__piggybank.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index a72a8f8c9c78..adad3a4c0426 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -40,6 +40,15 @@ const KEYBOARD_SHORTCUT_NAVIGATION_TYPE = 'NAVIGATION_SHORTCUT'; // Explicit type annotation is required const cardActiveStates: number[] = [2, 3, 4, 7]; +const onboardingChoices = { + TRACK: 'newDotTrack', + EMPLOYER: 'newDotEmployer', + MANAGE_TEAM: 'newDotManageTeam', + PERSONAL_SPEND: 'newDotPersonalSpend', + CHAT_SPLIT: 'newDotSplitChat', + LOOKING_AROUND: 'newDotLookingAround', +}; + const CONST = { ANDROID_PACKAGE_NAME, ANIMATED_TRANSITION: 300, @@ -3267,12 +3276,69 @@ const CONST = { MINIMUM_WORKSPACES_TO_SHOW_SEARCH: 8, }, - ONBOARDING_CHOICES: { - TRACK: 'newDotTrack', - EMPLOYER: 'newDotEmployer', - MANAGE_TEAM: 'newDotManageTeam', - CHAT_SPLIT: 'newDotSplitChat', - LOOKING_AROUND: 'newDotLookingAround', + ONBOARDING_CHOICES: {...onboardingChoices}, + + ONBOARDING_CONCIERGE: { + [onboardingChoices.TRACK]: + '# Welcome to Expensify, let\'s start tracking your expenses!\n' + + 'Hi there, I\'m Concierge. Chat with me here for anything you need.\n' + + '\n' + + 'To track your expenses, create a workspace to keep everything in one place. Here\'s how:\n' + + '1. From the home screen, click the green + button > New Workspace\n' + + '2. Give your workspace a name (e.g. "My business expenses”).\n' + + '\n' + + 'Then, add expenses to your workspace:\n' + + '1. Find your workspace using the search field.\n' + + '2. Click the gray + button next to the message field.\n' + + '3. Click Request money, then add your expense type.\n' + + '\n' + + 'We\'ll store all expenses in your new workspace for easy access. Let me know if you have any questions!', + [onboardingChoices.EMPLOYER]: + '# Welcome to Expensify, the fastest way to get paid back!\n' + + 'Hi there, I\'m Concierge. Chat with me here for anything you need.\n' + + '\n' + + 'To submit expenses for reimbursement:\n' + + '1. From the home screen, click the green + button > Request money.\n' + + '2. Enter an amount or scan a receipt, then input your boss\'s email.\n' + + '\n' + + 'That\'ll send a request to get you paid back. Let me know if you have any questions!', + [onboardingChoices.MANAGE_TEAM]: + '# Welcome to Expensify, let\'s start managing your team\'s expenses!\n' + + 'Hi there, I\'m Concierge. Chat with me here for anything you need.\n' + + '\n' + + 'To manage your team\'s expenses, create a workspace to keep everything in one place. Here\'s how:\n' + + '1. From the home screen, click the green + button > New Workspace\n' + + '2. Give your workspace a name (e.g. “Sales team expenses”).\n' + + '\n' + + 'Then, invite your team to your workspace via the Members pane and connect a business bank account to reimburse them. Let me know if you have any questions!', + [onboardingChoices.PERSONAL_SPEND]: + '# Welcome to Expensify, let\'s start tracking your expenses!\n' + + 'Hi there, I\'m Concierge. Chat with me here for anything you need.\n' + + '\n' + + 'To track your expenses, create a workspace to keep everything in one place. Here\'s how:\n' + + '1. From the home screen, click the green + button > New Workspace\n' + + '2. Give your workspace a name (e.g. "My expenses”).\n' + + '\n' + + 'Then, add expenses to your workspace:\n' + + '1. Find your workspace using the search field.\n' + + '2. Click the gray + button next to the message field.\n' + + '3. Click Request money, then add your expense type.\n' + + '\n' + + 'We\'ll store all expenses in your new workspace for easy access. Let me know if you have any questions!', + [onboardingChoices.CHAT_SPLIT]: + '# Welcome to Expensify, where splitting the bill is an easy conversation!\n' + + 'Hi there, I\'m Concierge. Chat with me here for anything you need.\n' + + '\n' + + 'To split an expense:\n' + + '1. From the home screen, click the green + button > Request money.\n' + + '2. Enter an amount or scan a receipt, then choose who you want to split it with.\n' + + '\n' + + 'We\'ll send a request to each person so they can pay you back. Let me know if you have any questions!', + [onboardingChoices.LOOKING_AROUND]: + '# Welcome to Expensify!\n' + + 'Hi there, I\'m Concierge. Chat with me here for anything you need.\n' + + '\n' + + 'Expensify is best known for expense and corporate card management, but we do a lot more than that. Let me know what you\'re interested in and I\'ll help get you started.', }, REPORT_FIELD_TITLE_FIELD_ID: 'text_title', diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index b774bd2624f1..476be7d9b28e 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -68,6 +68,7 @@ import Binoculars from '@assets/images/simple-illustrations/simple-illustration_ 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'; +import PiggyBank from '@assets/images/simple-illustrations/simple-illustration__piggybank.svg'; export { Abracadabra, @@ -140,4 +141,5 @@ export { CompanyCard, ReceiptUpload, SplitBill, + PiggyBank, }; diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 1c2a8a3197fe..67fa58437696 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -418,8 +418,8 @@ function MenuItem( combinedStyle, !interactive && styles.cursorDefault, StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true), - !focused && (isHovered || pressed) && hoverAndPressStyle, ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]), + !focused && (isHovered || pressed) && hoverAndPressStyle, shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled, ] as StyleProp } diff --git a/src/languages/en.ts b/src/languages/en.ts index 249e14007b87..38df5006e713 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1218,6 +1218,7 @@ export default { [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.PERSONAL_SPEND]: "Track and budget personal spend", [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: "Chat and split bills with friends", [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: "I'm just looking around" }, diff --git a/src/pages/OnboardingPurpose.tsx b/src/pages/OnboardingPurpose.tsx index 9dd913ecb17b..4fd33067ed09 100644 --- a/src/pages/OnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose.tsx @@ -4,7 +4,6 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; 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'; @@ -17,6 +16,8 @@ import * as Illustrations from '@components/Icon/Illustrations'; import * as Expensicons from '@components/Icon/Expensicons'; import variables from '@styles/variables'; import Icon from '@components/Icon'; +import { ScrollView } from 'react-native-gesture-handler'; +import useWindowDimensions from '@hooks/useWindowDimensions'; type ValuesType = T[keyof T]; type SelectedPurposeType = ValuesType | undefined; @@ -25,6 +26,7 @@ const menuIcons = { [CONST.ONBOARDING_CHOICES.TRACK]: Illustrations.CompanyCard, [CONST.ONBOARDING_CHOICES.EMPLOYER]: Illustrations.ReceiptUpload, [CONST.ONBOARDING_CHOICES.MANAGE_TEAM]: Illustrations.Abacus, + [CONST.ONBOARDING_CHOICES.PERSONAL_SPEND]: Illustrations.PiggyBank, [CONST.ONBOARDING_CHOICES.CHAT_SPLIT]: Illustrations.SplitBill, [CONST.ONBOARDING_CHOICES.LOOKING_AROUND]: Illustrations.Binoculars, }; @@ -32,9 +34,9 @@ const menuIcons = { function OnboardingPurpose() { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {windowHeight} = useWindowDimensions(); const {shouldUseNarrowLayout} = useOnboardingLayout(); const [selectedPurpose, setSelectedPurpose] = useState(undefined); + const {isSmallScreenWidth} = useWindowDimensions(); const theme = useTheme(); const handleGoBack = useCallback(() => { @@ -54,9 +56,29 @@ function OnboardingPurpose() { /> ), [styles.pointerEventsAuto, styles.popoverMenuIcon, theme.success]); + const completeEngagement = useCallback(() => { + if(selectedPurpose === undefined) { + return; + } + + /* + ! This functionality is temporarily removed until we can disable PurposeForUsingExpensifyPage + ! and refactor the function to support new options for Report.completeEngagementModal(); + + const translationKey = `onboarding.purpose.${selectedPurpose}` as const; + Report.completeEngagementModal(translate(translationKey), selectedPurpose); + */ + + if(!isSmallScreenWidth) { + // Only navigate to concierge chat for wide-screen devices + Report.navigateToConciergeChat(false, true); + } + }, [isSmallScreenWidth, selectedPurpose]); + const menuItems: MenuItemProps[] = Object.values(CONST.ONBOARDING_CHOICES).map((choice) => { const translationKey = `onboarding.purpose.${choice}` as const; + const isSelected = selectedPurpose === choice; return { key: translationKey, title: translate(translationKey), @@ -64,9 +86,10 @@ function OnboardingPurpose() { iconWidth: variables.purposeMenuIconSize, iconHeight: variables.purposeMenuIconSize, iconStyles: [styles.mh3], - wrapperStyle: [styles.purposeMenuItem], + wrapperStyle: [styles.purposeMenuItem, isSelected && styles.purposeMenuItemSelected], + hoverAndPressStyle: [styles.purposeMenuItemSelected], rightComponent: selectedCheckboxIcon, - shouldShowRightComponent: (selectedPurpose === choice), + shouldShowRightComponent: isSelected, onPress: () => { setSelectedPurpose(choice); }, @@ -76,30 +99,31 @@ function OnboardingPurpose() { return ( - - - - - - {translate('onboarding.purpose.title')} - - + + + + + {translate('onboarding.purpose.title')} -