[Home Page] Create ForYouSection Component (1/2) - Preparing the Home Page layout

src/components/WidgetContainer.tsx

@@ -0,0 +1,66 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import {View} from 'react-native';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import type IconAsset from '@src/types/utils/IconAsset';
+import Icon from './Icon';
+import Text from './Text';
+
+type WidgetContainerProps = {
+    /** The icon to display along with the title */
+    icon?: IconAsset;
+
+    /** The text to display in the title of the widget */
+    title?: string;
+
+    /** Custom color for the title text */
+    titleColor?: string;
+
+    /** The width of the icon. */
+    iconWidth?: number;
+
+    /** The height of the icon. */
+    iconHeight?: number;
+
+    /** The content to display inside the widget container */
+    children: ReactNode;
+};
+
+function WidgetContainer({
+    children,
+    icon,
+    title,
+    titleColor,
+    iconWidth = variables.iconSizeNormal,
+    iconHeight = variables.iconSizeNormal,
+}: WidgetContainerProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <View style={styles.widgetContainer}>
+            <View style={[styles.flexRow, styles.alignItemsStart, styles.mh8, styles.mt8, styles.mb5]}>
+                {!!icon && (
+                    <View style={[styles.flexGrow0, styles.flexShrink0]}>
+                        <Icon
+                            src={icon}
+                            width={iconWidth}
+                            height={iconHeight}
+                        />
+                    </View>
+                )}
+                <View style={[styles.flexShrink1, styles.flexGrow1, styles.flexRow, styles.alignItemsCenter, styles.gap2]}>
+                    {!!title && (
+                        <Text style={styles.getWidgetContainerTitleStyle(titleColor ?? theme.text)}>{title}</Text>
+                    )}
+                </View>
+            </View>
+            {children}
+        </View>
+    );
+}
+
+export type {WidgetContainerProps};
+export default WidgetContainer;

src/languages/en.ts

@@ -988,6 +988,11 @@ const translations = {
             description: "We're fine-tuning a few more bits and pieces of New Expensify to accommodate your specific setup. In the meantime, head over to Expensify Classic.",
         },
     },
+    homePage: {
+        forYou: 'For you',
+        announcements: 'Announcements',
+        discover: 'Discover',
+    },
     allSettingsScreen: {
         subscription: 'Subscription',
         domains: 'Domains',

src/languages/es.ts

@@ -733,6 +733,11 @@ const translations: TranslationDeepObject<typeof en> = {
             description: 'Estamos ajustando algunos detalles de New Expensify para adaptarla a tu configuración específica. Mientras tanto, dirígete a Expensify Classic.',
         },
     },
+    homePage: {
+        forYou: 'Para ti',
+        announcements: 'Anuncios',
+        discover: 'Descubrir',
+    },
     allSettingsScreen: {
         subscription: 'Suscripcion',
         domains: 'Dominios',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -86,7 +86,7 @@ const loadLogOutPreviousUserPage = () => require<ReactComponentModule>('../../..
 const loadConciergePage = () => require<ReactComponentModule>('../../../pages/ConciergePage').default;
 const loadTrackExpensePage = () => require<ReactComponentModule>('../../../pages/TrackExpensePage').default;
 const loadSubmitExpensePage = () => require<ReactComponentModule>('../../../pages/SubmitExpensePage').default;
-const loadHomePage = () => require<ReactComponentModule>('../../../pages/HomePage').default;
+const loadHomePage = () => require<ReactComponentModule>('../../../pages/home/HomePage').default;
 const loadWorkspaceJoinUser = () => require<ReactComponentModule>('@pages/workspace/WorkspaceJoinUserPage').default;
 
 const loadReportSplitNavigator = () => require<ReactComponentModule>('./Navigators/ReportsSplitNavigator').default;

src/pages/home/AnnouncementsSection.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {View} from 'react-native';
+import WidgetContainer from '@components/WidgetContainer';
+import useLocalize from '@hooks/useLocalize';
+
+/**
+ * This is an empty placeholder component for the Announcements section.
+ * The actual implementation will be added in upcoming PRs.
+ */
+function AnnouncementsSection() {
+    const {translate} = useLocalize();
+
+    return (
+        <WidgetContainer title={translate('homePage.announcements')}>
+            <View style={{height: 400}} />
+        </WidgetContainer>
+    );
+}
+
+export default AnnouncementsSection;

src/pages/home/DiscoverSection.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {View} from 'react-native';
+import WidgetContainer from '@components/WidgetContainer';
+import useLocalize from '@hooks/useLocalize';
+
+/**
+ * This is an empty placeholder component for the Discover section.
+ * The actual implementation will be added in upcoming PRs.
+ */
+function DiscoverSection() {
+    const {translate} = useLocalize();
+
+    return (
+        <WidgetContainer title={translate('homePage.discover')}>
+            <View style={{height: 400}} />
+        </WidgetContainer>
+    );
+}
+
+export default DiscoverSection;

src/pages/home/ForYouSection.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import WidgetContainer from '@components/WidgetContainer';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import {buildQueryStringFromFilterFormValues} from '@libs/SearchQueryUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import {accountIDSelector} from '@src/selectors/Session';
+
+/**
+ * This is a placeholder component for the For You section.
+ * The actual implementation will be added in upcoming PRs.
+ */
+function ForYouSection() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: accountIDSelector});
+
+    const handleGoToSearch = () => {
+        Navigation.navigate(
+            ROUTES.SEARCH_ROOT.getRoute({
+                query: buildQueryStringFromFilterFormValues({
+                    type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
+                    action: CONST.SEARCH.ACTION_FILTERS.SUBMIT,
+                    from: [`${accountID}`],
+                }),
+            }),
+        );
+    };
+
+    const handleGoToApproveSearch = () => {
+        Navigation.navigate(
+            ROUTES.SEARCH_ROOT.getRoute({
+                query: buildQueryStringFromFilterFormValues({
+                    type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
+                    action: CONST.SEARCH.ACTION_FILTERS.APPROVE,
+                    to: [`${accountID}`],
+                }),
+            }),
+        );
+    };
+
+    const handleGoToPaySearch = () => {
+        Navigation.navigate(
+            ROUTES.SEARCH_ROOT.getRoute({
+                query: buildQueryStringFromFilterFormValues({
+                    type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
+                    action: CONST.SEARCH.ACTION_FILTERS.PAY,
+                    reimbursable: CONST.SEARCH.BOOLEAN.YES,
+                    payer: accountID?.toString(),
+                }),
+            }),
+        );
+    };
+
+    const handleGoToExportSearch = () => {
+        Navigation.navigate(
+            ROUTES.SEARCH_ROOT.getRoute({
+                query: buildQueryStringFromFilterFormValues({
+                    type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
+                    action: CONST.SEARCH.ACTION_FILTERS.EXPORT,
+                    exporter: [`${accountID}`],
+                    exportedOn: CONST.SEARCH.DATE_PRESETS.NEVER,
+                }),
+            }),
+        );
+    };
+
+    return (
+        <WidgetContainer title={translate('homePage.forYou')}>
+            <View style={[styles.flexColumn, styles.gap3]}>
+                <Button
+                    text="Go to submitted expense reports"
+                    onPress={handleGoToSearch}
+                />
+                <Button
+                    text="Go to expense reports to approve"
+                    onPress={handleGoToApproveSearch}
+                />
+                <Button
+                    text="Go to expense reports to pay"
+                    onPress={handleGoToPaySearch}
+                />
+                <Button
+                    text="Go to expense reports to export"
+                    onPress={handleGoToExportSearch}
+                />
+            </View>
+        </WidgetContainer>
+    );
+}
+
+export default ForYouSection;

src/pages/home/HomePage.tsx

@@ -0,0 +1,68 @@
+import React, {useEffect} from 'react';
+import {View} from 'react-native';
+import NavigationTabBar from '@components/Navigation/NavigationTabBar';
+import NAVIGATION_TABS from '@components/Navigation/NavigationTabBar/NAVIGATION_TABS';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {confirmReadyToOpenApp} from '@libs/actions/App';
+import usePreloadFullScreenNavigators from '@libs/Navigation/AppNavigator/usePreloadFullScreenNavigators';
+import TopBar from '@components/Navigation/TopBar';
+import useLocalize from '@hooks/useLocalize';
+import AnnouncementsSection from './AnnouncementsSection';
+import DiscoverSection from './DiscoverSection';
+import ForYouSection from './ForYouSection';
+
+function HomePage() {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const shouldDisplayLHB = !shouldUseNarrowLayout;
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    useEffect(() => {
+        confirmReadyToOpenApp();
+    }, []);
+
+    // This hook preloads the screens of adjacent tabs to make changing tabs faster.
+    usePreloadFullScreenNavigators();
+
+    return (
+        <ScreenWrapper
+            shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicatorInWideScreen
+            testID="HomePage"
+            enableEdgeToEdgeBottomSafeAreaPadding={false}
+            bottomContent={
+                shouldUseNarrowLayout && (
+                    <NavigationTabBar
+                        selectedTab={NAVIGATION_TABS.HOME}
+                        shouldShowFloatingButtons
+                    />
+                )
+            }
+        >
+            <TopBar
+                breadcrumbLabel={translate('common.home')}
+                shouldShowLoadingBar={false}
+            />
+            <ScrollView
+                contentContainerStyle={styles.homePageContentContainer}
+                addBottomSafeAreaPadding
+            >
+                <View style={styles.homePageMainLayout(shouldUseNarrowLayout)}>
+                    <View style={styles.homePageLeftColumn(shouldUseNarrowLayout)}>
+                        <ForYouSection />
+                        <DiscoverSection />
+                    </View>
+                    <View style={styles.homePageRightColumn(shouldUseNarrowLayout)}>
+                        <AnnouncementsSection />
+                    </View>
+                </View>
+            </ScrollView>
+            {shouldDisplayLHB && <NavigationTabBar selectedTab={NAVIGATION_TABS.HOME} />}
+        </ScreenWrapper>
+    );
+}
+
+export default HomePage;

src/styles/index.ts

@@ -3663,6 +3663,17 @@ const staticStyles = (theme: ThemeColors) =>
             marginHorizontal: variables.sectionMargin,
         },
 
+        widgetContainer: {
+            backgroundColor: theme.cardBG,
+            borderRadius: variables.componentBorderRadiusLarge,
+            overflow: 'hidden',
+        },
+
+        homePageContentContainer: {
+            flexGrow: 1,
+            padding: 20,
+        },
+
         cardSectionIllustration: {
             width: 'auto',
             height: variables.sectionIllustrationHeight,
@@ -6193,6 +6204,31 @@ const plainStyles = (theme: ThemeColors) =>
         searchTopBarZIndexStyle: {
             zIndex: variables.searchTopBarZIndex,
         },
+
+        getWidgetContainerTitleStyle: (color: string) =>
+            ({
+                ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
+                fontSize: 17,
+                lineHeight: 20,
+                color,
+            }) satisfies TextStyle,
+
+        homePageMainLayout: (shouldUseNarrowLayout: boolean) =>
+            ({
+                flexDirection: shouldUseNarrowLayout ? 'column' : 'row',
+                gap: 20,
+                width: '100%',
+            }) satisfies ViewStyle,
+
+        homePageLeftColumn: (shouldUseNarrowLayout: boolean) =>
+            shouldUseNarrowLayout
+                ? ({width: '100%', flexDirection: 'column', gap: 20}) satisfies ViewStyle
+                : ({flex: 2, flexBasis: '66.666%', maxWidth: variables.homePageLeftColumnMaxWidth, flexDirection: 'column', gap: 20}) satisfies ViewStyle,
+
+        homePageRightColumn: (shouldUseNarrowLayout: boolean) =>
+            shouldUseNarrowLayout
+                ? ({width: '100%'}) satisfies ViewStyle
+                : ({flex: 1, flexBasis: '33.333%', maxWidth: variables.homePageRightColumnMaxWidth}) satisfies ViewStyle,
     }) satisfies Styles;
 
 const styles = (theme: ThemeColors) =>