Add full screen engagement modal to NewDot

docs/universal-darwin21

@@ -0,0 +1 @@
+universal-darwin22

src/ONYXKEYS.ts

@@ -110,6 +110,10 @@ const ONYXKEYS = {
     /** This NVP holds to most recent waypoints that a person has used when creating a distance request */
     NVP_RECENT_WAYPOINTS: 'expensify_recentWaypoints',
 
+    NVP_HAS_DISMISSED_IDLE_PANEL: 'hasDismissedIdlePanel',
+
+    NVP_INTRO_SELECTED: 'introSelected',
+
     /** Does this user have push notifications enabled for this device? */
     PUSH_NOTIFICATIONS_ENABLED: 'pushNotificationsEnabled',
 
@@ -393,6 +397,8 @@ type OnyxValues = {
     [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: Record<string, string>;
     [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoint[];
+    [ONYXKEYS.NVP_HAS_DISMISSED_IDLE_PANEL]: boolean;
+    [ONYXKEYS.NVP_INTRO_SELECTED]: OnyxTypes.IntroSelected;
     [ONYXKEYS.PUSH_NOTIFICATIONS_ENABLED]: boolean;
     [ONYXKEYS.PLAID_DATA]: OnyxTypes.PlaidData;
     [ONYXKEYS.IS_PLAID_DISABLED]: boolean;

src/components/AttachmentModal.js

@@ -440,7 +440,7 @@ function AttachmentModal(props) {
                         shouldShowThreeDotsButton={shouldShowThreeDotsButton}
                         threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
                         threeDotsMenuItems={threeDotsMenuItems}
-                        shouldOverlay
+                        shouldOverlayDots
                     />
                     <View style={styles.imageModalImageCenterContainer}>
                         {!_.isEmpty(props.report) && !props.isReceiptAttachment ? (

src/components/HeaderWithBackButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Keyboard, View} from 'react-native';
+import {Keyboard, StyleSheet, View} from 'react-native';
 import AvatarWithDisplayName from '@components/AvatarWithDisplayName';
 import Header from '@components/Header';
 import Icon from '@components/Icon';
@@ -51,6 +51,7 @@ function HeaderWithBackButton({
     threeDotsMenuItems = [],
     shouldEnableDetailPageNavigation = false,
     children = null,
+    shouldOverlayDots = false,
     shouldOverlay = false,
     singleExecution = (func) => func,
     shouldNavigateToTopMostReport = false,
@@ -66,7 +67,7 @@ function HeaderWithBackButton({
             // Hover on some part of close icons will not work on Electron if dragArea is true
             // https://github.com/Expensify/App/issues/29598
             dataSet={{dragArea: false}}
-            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2]}
+            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2, shouldOverlay && StyleSheet.absoluteFillObject]}
         >
             <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
                 {shouldShowBackButton && (
@@ -160,7 +161,7 @@ function HeaderWithBackButton({
                             menuItems={threeDotsMenuItems}
                             onIconPress={onThreeDotsButtonPress}
                             anchorPosition={threeDotsAnchorPosition}
-                            shouldOverlay={shouldOverlay}
+                            shouldOverlay={shouldOverlayDots}
                         />
                     )}
                     {shouldShowCloseButton && (

src/components/Icon/Expensicons.ts

@@ -106,6 +106,7 @@ import Receipt from '@assets/images/receipt.svg';
 import Rotate from '@assets/images/rotate-image.svg';
 import RotateLeft from '@assets/images/rotate-left.svg';
 import Send from '@assets/images/send.svg';
+import Scan from '@assets/images/scan.svg';
 import Shield from '@assets/images/shield.svg';
 import AppleLogo from '@assets/images/signIn/apple-logo.svg';
 import GoogleLogo from '@assets/images/signIn/google-logo.svg';
@@ -241,6 +242,7 @@ export {
     ReceiptSearch,
     Rotate,
     RotateLeft,
+    Scan,
     Send,
     Shield,
     Sync,

src/components/PurposeForUsingExpensifyModal.js

@@ -0,0 +1,208 @@
+import PropTypes from 'prop-types';
+import React, {useState, useCallback, useEffect} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import compose from '@libs/compose';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useThemeStyles from "@hooks/useThemeStyles";
+import useTheme from '@hooks/useTheme';
+import useWindowDimensions from "@hooks/useWindowDimensions";
+import * as Report from '@userActions/Report';
+import useStyleUtils from "@hooks/useStyleUtils";
+import SCREENS from "@src/SCREENS";
+import {View} from "react-native";
+import NAVIGATORS from "@src/NAVIGATORS";
+import * as Welcome from "@userActions/Welcome";
+import lodashGet from "lodash/get";
+import withNavigation from "./withNavigation";
+import LottieAnimations from "./LottieAnimations";
+import Text from "./Text";
+import Lottie from "./Lottie";
+import HeaderWithBackButton from "./HeaderWithBackButton";
+import MenuItemList from "./MenuItemList";
+import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import Modal from "./Modal";
+import * as Expensicons from './Icon/Expensicons';
+
+const propTypes = {
+
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user accountID */
+        accountID: PropTypes.number,
+    }),
+
+    ...windowDimensionsPropTypes,
+};
+
+const defaultProps = {
+    session: {},
+};
+
+function PurposeForUsingExpensifyModal(props) {
+    const {translate} = useLocalize();
+    const StyleUtils = useStyleUtils();
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const theme = useTheme();
+
+    useEffect(() => {
+        const navigationState = props.navigation.getState();
+        const routes = lodashGet(navigationState, 'routes', []);
+        const currentRoute = routes[navigationState.index];
+        if (currentRoute && ![NAVIGATORS.CENTRAL_PANE_NAVIGATOR, SCREENS.HOME].includes(currentRoute.name)) {
+            return;
+        }
+        if (lodashGet(props.demoInfo, 'money2020.isBeginningDemo', false)) {
+            return;
+        }
+        Welcome.show({routes, showEngagementModal: () => setIsModalOpen(true)});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // This is not translated because it is a message coming from concierge, which only supports english
+    const messageCopy = {
+        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!',
+        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!',
+        business: '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!',
+        chatSplit: '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 closeModal = useCallback(() => {
+        Report.dismissEngagementModal();
+        setIsModalOpen(false);
+    }, []);
+
+    const completeModalAndClose = (message, choice) => {
+        Report.completeEngagementModal(message, choice);
+        setIsModalOpen(false)
+    }
+
+    const menuItems = [
+        {
+            key: 'purposeForExpensify.track',
+            title: translate('purposeForExpensify.track'),
+            icon: Expensicons.ReceiptSearch,
+            iconRight: Expensicons.ArrowRight,
+            onPress: () => completeModalAndClose(messageCopy.track, 'trackNewDot'),
+            shouldShowRightIcon: true,
+        },
+        {
+            key: 'purposeForExpensify.submit',
+            title: translate('purposeForExpensify.submit'),
+            icon: Expensicons.Scan,
+            iconRight: Expensicons.ArrowRight,
+            onPress: () => completeModalAndClose(messageCopy.submit, 'submitNewDot'),
+            shouldShowRightIcon: true,
+        },
+        {
+            key: 'purposeForExpensify.business',
+            title: translate('purposeForExpensify.business'),
+            icon: Expensicons.MoneyBag,
+            iconRight: Expensicons.ArrowRight,
+            onPress: () => completeModalAndClose(messageCopy.business, 'businessNewDot'),
+            shouldShowRightIcon: true,
+        },
+        {
+            key: 'purposeForExpensify.chatSplit',
+            title: translate('purposeForExpensify.chatSplit'),
+            icon: Expensicons.Briefcase,
+            iconRight: Expensicons.ArrowRight,
+            onPress: () => completeModalAndClose(messageCopy.chatSplit, 'chatSplitNewDot'),
+            shouldShowRightIcon: true,
+        },
+    ];
+
+    return (
+        <Modal
+            type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isModalOpen}
+            onClose={closeModal}
+        >
+            <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 style={styles.baseFontStyle}>{translate('purposeForExpensify.welcomeSubtitle')}</Text>
+                </View>
+                <MenuItemList
+                    menuItems={menuItems}
+                    shouldUseSingleExecution
+                />
+        </Modal>
+    );
+}
+
+PurposeForUsingExpensifyModal.propTypes = propTypes;
+PurposeForUsingExpensifyModal.defaultProps = defaultProps;
+PurposeForUsingExpensifyModal.displayName = 'AddPaymentMethodMenu';
+
+export default compose(
+    withWindowDimensions,
+    withNavigation,
+    withOnyx({
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    }),
+)(PurposeForUsingExpensifyModal);

src/languages/en.ts

@@ -2018,6 +2018,14 @@ export default {
         },
         copyReferralLink: 'Copy invite link',
     },
+    purposeForExpensify: {
+        track: 'Track my business expenses to file taxes',
+        submit: 'Submit expenses to my employer to get paid back',
+        business: 'Manage my team\'s expenses',
+        chatSplit: 'Chat and split expenses with friends',
+        welcomeMessage: 'Welcome to Expensify',
+        welcomeSubtitle: 'What\'s your main purpose for using Expensify?',
+    },
     violations: {
         allTagLevelsRequired: 'dummy.violations.allTagLevelsRequired',
         autoReportedRejectedExpense: 'dummy.violations.autoReportedRejectedExpense',

src/languages/es.ts

@@ -2505,6 +2505,14 @@ export default {
         },
         copyReferralLink: 'Copiar enlace de invitación',
     },
+    purposeForExpensify: {
+        track: 'Track my business expenses to file taxes',
+        submit: 'Submit expenses to my employer to get paid back',
+        business: 'Manage my team\'s expenses',
+        chatSplit: 'Chat and split expenses with friends',
+        welcomeMessage: 'Welcome to Expensify',
+        welcomeSubtitle: 'What\'s your main purpose for using Expensify?',
+    },
     violations: {
         allTagLevelsRequired: 'dummy.violations.allTagLevelsRequired',
         autoReportedRejectedExpense: 'dummy.violations.autoReportedRejectedExpense',

src/libs/ReportUtils.ts

@@ -2432,12 +2432,13 @@ function getParsedComment(text: string): string {
     return text.length <= CONST.MAX_MARKUP_LENGTH ? parser.replace(text) : lodashEscape(text);
 }
 
-function buildOptimisticAddCommentReportAction(text?: string, file?: File): OptimisticReportAction {
+function buildOptimisticAddCommentReportAction(text?: string, file?: File, actorAccountID?: number): OptimisticReportAction {
     const parser = new ExpensiMark();
     const commentText = getParsedComment(text ?? '');
     const isAttachment = !text && file !== undefined;
     const attachmentInfo = isAttachment ? file : {};
     const htmlForNewComment = isAttachment ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : commentText;
+    const accountID = actorAccountID ?? currentUserAccountID;
 
     // Remove HTML from text when applying optimistic offline comment
     const textForNewComment = isAttachment ? CONST.ATTACHMENT_MESSAGE_TEXT : parser.htmlToText(htmlForNewComment);
@@ -2446,16 +2447,16 @@ function buildOptimisticAddCommentReportAction(text?: string, file?: File): Opti
         reportAction: {
             reportActionID: NumberUtils.rand64(),
             actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
-            actorAccountID: currentUserAccountID,
+            actorAccountID: accountID,
             person: [
                 {
                     style: 'strong',
-                    text: allPersonalDetails?.[currentUserAccountID ?? -1]?.displayName ?? currentUserEmail,
+                    text: allPersonalDetails?.[accountID ?? -1]?.displayName ?? currentUserEmail,
                     type: 'TEXT',
                 },
             ],
             automatic: false,
-            avatar: allPersonalDetails?.[currentUserAccountID ?? -1]?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
+            avatar: allPersonalDetails?.[accountID ?? -1]?.avatar ?? UserUtils.getDefaultAvatarURL(accountID),
             created: DateUtils.getDBTime(),
             message: [
                 {