Add full screen engagement modal to NewDot #32154
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,178 @@ | ||
| import {useNavigation} from '@react-navigation/native'; | ||
| import React, {useCallback, useEffect, useMemo, useState} from 'react'; | ||
| import {ScrollView, View} from 'react-native'; | ||
| import type {ValueOf} from 'type-fest'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useStyleUtils from '@hooks/useStyleUtils'; | ||
| import useTheme from '@hooks/useTheme'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import useWindowDimensions from '@hooks/useWindowDimensions'; | ||
| import * as Report from '@userActions/Report'; | ||
| import * as Welcome from '@userActions/Welcome'; | ||
| import CONST from '@src/CONST'; | ||
| import NAVIGATORS from '@src/NAVIGATORS'; | ||
| import SCREENS from '@src/SCREENS'; | ||
| import HeaderWithBackButton from './HeaderWithBackButton'; | ||
| import * as Expensicons from './Icon/Expensicons'; | ||
| import Lottie from './Lottie'; | ||
| import LottieAnimations from './LottieAnimations'; | ||
| import type {MenuItemProps} from './MenuItem'; | ||
| import MenuItemList from './MenuItemList'; | ||
| import Modal from './Modal'; | ||
| import Text from './Text'; | ||
|
|
||
| // This is not translated because it is a message coming from concierge, which only supports english | ||
| const messageCopy = { | ||
| [CONST.INTRO_CHOICES.TRACK]: | ||
| 'Great! To track your expenses, I suggest you create a workspace to keep everything contained:\n' + | ||
| '\n' + | ||
| '1. Press your avatar icon\n' + | ||
| '2. Choose Workspaces\n' + | ||
| '3. Choose New Workspace\n' + | ||
| '4. Name your workspace something meaningful (eg, "My Business Expenses")\n' + | ||
| '\n' + | ||
| 'Once you have your workspace set up, you can add expenses to it as follows:\n' + | ||
| '\n' + | ||
| '1. Choose My Business Expenses (or whatever you named it) in the list of chat rooms\n' + | ||
| '2. Choose the + button in the chat compose window\n' + | ||
| '3. Choose Request money\n' + | ||
| "4. Choose what kind of expense you'd like to log, whether a manual expense, scanned receipt, or tracked distance.\n" + | ||
| '\n' + | ||
| "That'll be stored in your My Business Expenses room for your later access. Thanks for asking, and let me know how it goes!", | ||
| [CONST.INTRO_CHOICES.SUBMIT]: | ||
| 'Hi there, to submit expenses for reimbursement, please:\n' + | ||
| '\n' + | ||
| '1. Press the big green + button\n' + | ||
| '2. Choose Request money\n' + | ||
| '3. Indicate how much to request, either manually, by scanning a receipt, or by tracking distance\n' + | ||
| '4. Enter the email address or phone number of your boss\n' + | ||
| '\n' + | ||
| "And we'll take it from there to get you paid back. Please give it a shot and let me know how it goes!", | ||
| [CONST.INTRO_CHOICES.MANAGE_TEAM]: | ||
| "Great! To manage your team's expenses, create a workspace to keep everything contained:\n" + | ||
| '\n' + | ||
| '1. Press your avatar icon\n' + | ||
| '2. Choose Workspaces\n' + | ||
| '3. Choose New Workspace\n' + | ||
| '4. Name your workspace something meaningful (eg, "Galaxy Food Inc.")\n' + | ||
| '\n' + | ||
| 'Once you have your workspace set up, you can invite your team to it via the Members pane and connect a business bank account to reimburse them!', | ||
| [CONST.INTRO_CHOICES.CHAT_SPLIT]: | ||
| 'Hi there, to split an expense such as with a friend, please:\n' + | ||
| '\n' + | ||
| 'Press the big green + button\n' + | ||
| 'Choose *Request money*\n' + | ||
| 'Indicate how much was spent, either manually, by scanning a receipt, or by tracking distance\n' + | ||
| 'Enter the email address or phone number of your friend\n' + | ||
| 'Press *Split* next to their name\n' + | ||
| 'Repeat as many times as you like for each of your friends\n' + | ||
| 'Press *Add to split* when done adding friends\n' + | ||
| 'Press Split to split the bill\n' + | ||
| '\n' + | ||
| "This will send a money request to each of your friends for however much they owe you, and we'll take care of getting you paid back. Thanks for asking, and let me know how it goes!", | ||
| }; | ||
|
|
||
| const menuIcons = { | ||
| [CONST.INTRO_CHOICES.TRACK]: Expensicons.ReceiptSearch, | ||
| [CONST.INTRO_CHOICES.SUBMIT]: Expensicons.Scan, | ||
| [CONST.INTRO_CHOICES.MANAGE_TEAM]: Expensicons.MoneyBag, | ||
| [CONST.INTRO_CHOICES.CHAT_SPLIT]: Expensicons.Briefcase, | ||
| }; | ||
|
|
||
| function PurposeForUsingExpensifyModal() { | ||
| const {translate} = useLocalize(); | ||
| const StyleUtils = useStyleUtils(); | ||
| const styles = useThemeStyles(); | ||
| const {isSmallScreenWidth, windowHeight} = useWindowDimensions(); | ||
| const navigation = useNavigation(); | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| const theme = useTheme(); | ||
|
|
||
| useEffect(() => { | ||
| const navigationState = navigation.getState(); | ||
| const routes = navigationState.routes; | ||
| const currentRoute = routes[navigationState.index]; | ||
| if (currentRoute && NAVIGATORS.CENTRAL_PANE_NAVIGATOR !== currentRoute.name && currentRoute.name !== SCREENS.HOME) { | ||
|
Contributor
There was a problem hiding this comment. Can you please add context behind this logic?
Contributor
Author
There was a problem hiding this comment. If there is a route, we don't want to show the modal unless the page we're on is home or the central pane navigator
Contributor
There was a problem hiding this comment. ok so #32154 (review) is correct. Just wanted to confirm 🙂
Contributor
Author
There was a problem hiding this comment. Yep that's correct! Thanks for double checking :) |
||
| return; | ||
| } | ||
|
|
||
| Welcome.show(routes, () => setIsModalOpen(true)); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| const closeModal = useCallback(() => { | ||
| Report.dismissEngagementModal(); | ||
| setIsModalOpen(false); | ||
| }, []); | ||
|
|
||
| const completeModalAndClose = useCallback((message: string, choice: ValueOf<typeof CONST.INTRO_CHOICES>) => { | ||
| Report.completeEngagementModal(message, choice); | ||
| setIsModalOpen(false); | ||
| Report.navigateToConciergeChat(); | ||
| }, []); | ||
|
|
||
| const menuItems: MenuItemProps[] = useMemo( | ||
| () => | ||
| Object.values(CONST.INTRO_CHOICES).map((choice) => { | ||
| const translationKey = `purposeForExpensify.${choice}` as const; | ||
| return { | ||
| key: translationKey, | ||
| title: translate(translationKey), | ||
| icon: menuIcons[choice], | ||
| iconRight: Expensicons.ArrowRight, | ||
| onPress: () => completeModalAndClose(messageCopy[choice], choice), | ||
| shouldShowRightIcon: true, | ||
| numberOfLinesTitle: 2, | ||
| }; | ||
| }), | ||
| [completeModalAndClose, translate], | ||
| ); | ||
|
|
||
| return ( | ||
| <Modal | ||
| type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} | ||
| isVisible={isModalOpen} | ||
| onClose={closeModal} | ||
| innerContainerStyle={styles.pt0} | ||
| shouldUseCustomBackdrop | ||
| > | ||
| <View style={{maxHeight: windowHeight}}> | ||
| <ScrollView> | ||
| <View style={StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor)}> | ||
| <Lottie | ||
| source={LottieAnimations.Hands} | ||
| style={styles.w100} | ||
| webStyle={styles.w100} | ||
| autoPlay | ||
| loop | ||
| /> | ||
| <HeaderWithBackButton | ||
| shouldShowCloseButton | ||
| shouldShowBackButton={false} | ||
| onCloseButtonPress={closeModal} | ||
| shouldOverlay | ||
| iconFill={theme.iconColorfulBackground} | ||
| /> | ||
| </View> | ||
| <View style={[styles.w100, styles.ph5, styles.pv5]}> | ||
| <Text | ||
| style={[styles.textHeadline, styles.preWrap, styles.mb2]} | ||
| numberOfLines={2} | ||
| > | ||
| {translate('purposeForExpensify.welcomeMessage')} | ||
| </Text> | ||
| <Text>{translate('purposeForExpensify.welcomeSubtitle')}</Text> | ||
| </View> | ||
| <MenuItemList | ||
| menuItems={menuItems} | ||
| shouldUseSingleExecution | ||
stitesExpensify marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /> | ||
| </ScrollView> | ||
| </View> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| PurposeForUsingExpensifyModal.displayName = 'PurposeForUsingExpensifyModal'; | ||
|
|
||
| export default PurposeForUsingExpensifyModal; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.