Side Pane Stage 3: Specific help content for different types of reports

src/CONST.ts

@@ -1374,6 +1374,16 @@ const CONST = {
             BILL: 'bill',
         },
         CHAT_TYPE: chatTypes,
+        HELP_TYPE: {
+            ...chatTypes,
+            CHAT_CONCIERGE: 'concierge',
+            EXPENSE_REPORT: 'expenseReport',
+            EXPENSE: 'expense',
+            CHAT: 'chat',
+            IOU: 'iou',
+            TASK: 'task',
+            INVOICE: 'invoice',
+        },
         WORKSPACE_CHAT_ROOMS: {
             ANNOUNCE: '#announce',
             ADMINS: '#admins',
@@ -2659,6 +2669,14 @@ const CONST = {
             SCAN: 'scan',
             PER_DIEM: 'per-diem',
         },
+        EXPENSE_TYPE: {
+            DISTANCE: 'distance',
+            MANUAL: 'manual',
+            SCAN: 'scan',
+            PER_DIEM: 'per-diem',
+            EXPENSIFY_CARD: 'expensifyCard',
+            PENDING_EXPENSIFY_CARD: 'pendingExpensifyCard',
+        },
         REPORT_ACTION_TYPE: {
             PAY: 'pay',
             CREATE: 'create',

src/components/HeaderWithBackButton/index.tsx

@@ -8,7 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PinButton from '@components/PinButton';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import SearchButton from '@components/Search/SearchRouter/SearchButton';
-import HelpButton from '@components/SidePane/HelpButton';
+import HelpButton from '@components/SidePane/HelpComponents/HelpButton';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';

src/components/Navigation/TopBar.tsx

@@ -5,7 +5,7 @@ import Breadcrumbs from '@components/Breadcrumbs';
 import LoadingBar from '@components/LoadingBar';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import SearchButton from '@components/Search/SearchRouter/SearchButton';
-import HelpButton from '@components/SidePane/HelpButton';
+import HelpButton from '@components/SidePane/HelpComponents/HelpButton';
 import Text from '@components/Text';
 import WorkspaceSwitcherButton from '@components/WorkspaceSwitcherButton';
 import useLocalize from '@hooks/useLocalize';

src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

@@ -18,7 +18,7 @@ import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types'
 import {isSearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SearchQueryItem} from '@components/SelectionList/Search/SearchQueryListItem';
 import type {SelectionListHandle} from '@components/SelectionList/types';
-import HelpButton from '@components/SidePane/HelpButton';
+import HelpButton from '@components/SidePane/HelpComponents/HelpButton';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/SidePane/HelpComponents/HelpBulletList.tsx

@@ -0,0 +1,26 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+import CONST from '@src/CONST';
+
+type HelpBulletListProps = {
+    styles: ThemeStyles;
+    items: ReactNode[];
+};
+
+function HelpBulletList({items, styles}: HelpBulletListProps) {
+    return items.map((item, index) => (
+        <View
+            // eslint-disable-next-line react/no-array-index-key
+            key={`bullet-list-item-${index}`}
+            style={[styles.flexRow, styles.alignItemsStart, styles.mt3]}
+        >
+            <Text style={[styles.textNormal, styles.pr2, styles.userSelectNone]}>{CONST.DOT_SEPARATOR}</Text>
+            <View style={[styles.flex1]}>{item}</View>
+        </View>
+    ));
+}
+
+export default HelpBulletList;

src/components/SidePane/HelpComponents/HelpContent.tsx

@@ -0,0 +1,89 @@
+import {findFocusedRoute} from '@react-navigation/native';
+import React, {useEffect, useMemo, useRef} from 'react';
+// Importing from the react-native-gesture-handler package instead of the `components/ScrollView` to fix scroll issue:
+// https://github.com/react-native-modal/react-native-modal/issues/236
+import {ScrollView} from 'react-native-gesture-handler';
+import {useOnyx} from 'react-native-onyx';
+import HeaderGap from '@components/HeaderGap';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import getHelpContent from '@components/SidePane/HelpContent/getHelpContent';
+import useEnvironment from '@hooks/useEnvironment';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useRootNavigationState from '@hooks/useRootNavigationState';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
+import {getHelpPaneReportType} from '@libs/ReportUtils';
+import {substituteRouteParameters} from '@libs/SidePaneUtils';
+import {getExpenseType} from '@libs/TransactionUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type HelpContentProps = {
+    closeSidePane: (shouldUpdateNarrow?: boolean) => void;
+};
+
+function HelpContent({closeSidePane}: HelpContentProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isProduction} = useEnvironment();
+    const {isExtraLargeScreenWidth} = useResponsiveLayout();
+
+    const routeParams = useRootNavigationState((state) => (findFocusedRoute(state)?.params as Record<string, string>) ?? {});
+    const reportID = routeParams.reportID || CONST.DEFAULT_NUMBER_ID;
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID || CONST.DEFAULT_NUMBER_ID}`, {
+        canEvict: false,
+    });
+    const parentReportAction = report?.parentReportActionID ? parentReportActions?.[report.parentReportActionID] : undefined;
+    const linkedTransactionID = useMemo(() => (isMoneyRequestAction(parentReportAction) ? getOriginalMessage(parentReportAction)?.IOUTransactionID : undefined), [parentReportAction]);
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${linkedTransactionID ?? CONST.DEFAULT_NUMBER_ID}`);
+
+    const route = useMemo(() => {
+        const expenseType = getExpenseType(transaction);
+        const overrides = {reportID: expenseType ? `:${CONST.REPORT.HELP_TYPE.EXPENSE}/:${expenseType}` : `:${getHelpPaneReportType(report)}`};
+        const activeRoute = Navigation.getActiveRouteWithoutParams();
+        return substituteRouteParameters(activeRoute, routeParams, overrides);
+    }, [transaction, report, routeParams]);
+
+    const wasPreviousNarrowScreen = useRef(!isExtraLargeScreenWidth);
+    useEffect(() => {
+        // Close the side pane when the screen size changes from large to small
+        if (!isExtraLargeScreenWidth && !wasPreviousNarrowScreen.current) {
+            closeSidePane(true);
+            wasPreviousNarrowScreen.current = true;
+        }
+
+        // Reset the trigger when the screen size changes back to large
+        if (isExtraLargeScreenWidth) {
+            wasPreviousNarrowScreen.current = false;
+        }
+    }, [isExtraLargeScreenWidth, closeSidePane]);
+
+    return (
+        <>
+            <HeaderGap />
+            <HeaderWithBackButton
+                title={translate('common.help')}
+                style={styles.headerBarDesktopHeight}
+                onBackButtonPress={() => closeSidePane(false)}
+                onCloseButtonPress={() => closeSidePane(false)}
+                shouldShowBackButton={!isExtraLargeScreenWidth}
+                shouldShowCloseButton={isExtraLargeScreenWidth}
+                shouldDisplayHelpButton={false}
+            />
+            <ScrollView
+                style={[styles.ph5, styles.pb5]}
+                userSelect="auto"
+            >
+                {getHelpContent(styles, route, isProduction)}
+            </ScrollView>
+        </>
+    );
+}
+
+HelpContent.displayName = 'HelpContent';
+
+export default HelpContent;

src/components/SidePane/HelpComponents/HelpExpandable.tsx

@@ -0,0 +1,38 @@
+import React, {useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import {View} from 'react-native';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+
+type HelpExpandableProps = {
+    children: React.ReactNode;
+    styles: ThemeStyles;
+    containerStyle?: StyleProp<ViewStyle>;
+    title?: string;
+    moreText?: string;
+};
+
+function HelpExpandable({children, styles, containerStyle, title, moreText = '(more)'}: HelpExpandableProps) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    return (
+        <View style={containerStyle}>
+            <Text style={styles.textNormal}>
+                {title}{' '}
+                {!isExpanded && (
+                    <Text
+                        style={styles.link}
+                        onPress={() => setIsExpanded(true)}
+                    >
+                        {moreText}
+                    </Text>
+                )}
+            </Text>
+            {isExpanded && children}
+        </View>
+    );
+}
+
+HelpExpandable.displayName = 'ExpandableHelp';
+
+export default HelpExpandable;

src/components/SidePane/SidePaneOverlay.tsx → src/components/SidePane/HelpComponents/HelpOverlay.tsx

@@ -5,7 +5,7 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-type SidePaneOverlayProps = {
+type HelpOverlayProps = {
     /** Whether the side pane is displayed over RHP */
     isRHPVisible: boolean;
 
@@ -15,7 +15,7 @@ type SidePaneOverlayProps = {
 
 const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
 
-function SidePaneOverlay({isRHPVisible, onBackdropPress}: SidePaneOverlayProps) {
+function HelpOverlay({isRHPVisible, onBackdropPress}: HelpOverlayProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -51,6 +51,6 @@ function SidePaneOverlay({isRHPVisible, onBackdropPress}: SidePaneOverlayProps)
     );
 }
 
-SidePaneOverlay.displayName = 'SidePaneOverlay';
+HelpOverlay.displayName = 'HelpOverlay';
 
-export default SidePaneOverlay;
+export default HelpOverlay;

src/components/SidePane/HelpContent/chat/admins.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import BulletList from '@components/SidePane/HelpComponents/HelpBulletList';
+import ExpandableHelp from '@components/SidePane/HelpComponents/HelpExpandable';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+
+function AdminsChatRoom({styles}: {styles: ThemeStyles}) {
+    return (
+        <>
+            <Text style={[styles.textHeadlineH1, styles.mb4]}>#admins</Text>
+            <ExpandableHelp
+                styles={styles}
+                title="Every workspace automatically receives a special #admins chat room. Every admin is automatically added to this room as a member. The #admins room is used for several purposes:"
+            >
+                <BulletList
+                    styles={styles}
+                    items={[
+                        <Text style={styles.textNormal}>
+                            <Text style={styles.textBold}>Talking with Concierge, your setup specialist, or your account manager</Text> - When you first create the workspace, Concierge and a
+                            setup specialist will be added. Feel free to ask any setup questions you have about how to configure the workspace, onboard your team, connect your accounting, or
+                            anything else you might need.
+                        </Text>,
+                        <Text style={styles.textNormal}>
+                            <Text style={styles.textBold}>Monitoring workspace changes</Text> - Every #admins room shows an audit trail of any configuration changes or significant events
+                            happening inside the workspace.
+                        </Text>,
+                        <Text style={styles.textNormal}>
+                            <Text style={styles.textBold}>Chatting with other admins</Text> - The #admins room is a useful space for workspace admins to chat with each other about anything,
+                            whether or not it relates to Expensify.
+                        </Text>,
+                    ]}
+                />
+            </ExpandableHelp>
+        </>
+    );
+}
+
+export default AdminsChatRoom;

src/components/SidePane/HelpContent/chat/concierge.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+
+function Concierge({styles}: {styles: ThemeStyles}) {
+    return (
+        <>
+            <Text style={[styles.textHeadlineH1, styles.mb4]}>Concierge</Text>
+            <Text style={styles.textNormal}>
+                Concierge is available 24/7 to answer any question you have about anything, whether that's how to get set up, how to fix a problem, or general best practices. Concierge is a
+                bot, but is really smart, and can escalate you to a human whenever you want. Say hi, it's friendly!
+            </Text>
+        </>
+    );
+}
+
+export default Concierge;

src/components/SidePane/HelpContent/chat/expense/expensifyCard.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable react/no-unescaped-entities */
+import React from 'react';
+import Text from '@components/Text';
+import type {ThemeStyles} from '@styles/index';
+
+function ExpensifyCardExpense({styles}: {styles: ThemeStyles}) {
+    return (
+        <>
+            <Text style={[styles.textHeadlineH1, styles.mb4]}>Expensify Card</Text>
+            <Text style={styles.textNormal}>An "Expensify Card" expense corresponds to a "posted" (meaning, finalized by the bank) purchase.</Text>
+            <Text style={[styles.textNormal, styles.pt3]}>Expensify Card expenses cannot be reimbursed as they are centrally paid by the bank account linked to the workspace.</Text>
+        </>
+    );
+}
+
+export default ExpensifyCardExpense;