[Home Page] Create ForYouSection Component

src/components/BaseWidgetItem.tsx

@@ -0,0 +1,66 @@
+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 Button from './Button';
+import Icon from './Icon';
+import Text from './Text';
+
+const ICON_SIZE = variables.iconSizeNormal;
+
+type BaseWidgetItemProps = {
+    /** Icon to display */
+    icon: IconAsset;
+
+    /** Background color for the icon container */
+    iconBackgroundColor: string;
+
+    /** Primary title text */
+    title: string;
+
+    /** Secondary subtitle text */
+    subtitle?: string;
+
+    /** Text for the CTA button */
+    ctaText: string;
+
+    /** Callback when CTA is pressed */
+    onCtaPress: () => void;
+
+    /** Optional: fill color for the icon (defaults to white) */
+    iconFill?: string;
+};
+
+function BaseWidgetItem({icon, iconBackgroundColor, title, subtitle, ctaText, onCtaPress, iconFill}: BaseWidgetItemProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+            <View style={styles.getWidgetItemIconContainerStyle(iconBackgroundColor)}>
+                <Icon
+                    src={icon}
+                    width={ICON_SIZE}
+                    height={ICON_SIZE}
+                    fill={iconFill ?? theme.white}
+                />
+            </View>
+            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter]}>
+                {!!subtitle && <Text style={styles.widgetItemSubtitle}>{subtitle}</Text>}
+                <Text style={styles.widgetItemTitle}>{title}</Text>
+            </View>
+            <Button
+                text={ctaText}
+                onPress={onCtaPress}
+                success
+                small
+                style={styles.widgetItemButton}
+            />
+        </View>
+    );
+}
+
+export default BaseWidgetItem;
+export type {BaseWidgetItemProps};

src/components/Icon/Illustrations.ts

@@ -6,6 +6,7 @@ import LaptopWithSecondScreenSync from '@assets/images/laptop-with-second-screen
 import LaptopWithSecondScreenX from '@assets/images/laptop-with-second-screen-x.svg';
 import PendingTravel from '@assets/images/pending-travel.svg';
 import EmptyStateTravel from '@assets/images/product-illustrations/emptystate__travel.svg';
+import Fireworks from '@assets/images/product-illustrations/fireworks.svg';
 import Puzzle from '@assets/images/simple-illustrations/emptystate__puzzlepieces.svg';
 import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg';
 import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
@@ -43,6 +44,7 @@ import Luggage from '@assets/images/simple-illustrations/simple-illustration__lu
 import MagnifyingGlassReceipt from '@assets/images/simple-illustrations/simple-illustration__magnifyingglass-receipt.svg';
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
 import Pencil from '@assets/images/simple-illustrations/simple-illustration__pencil.svg';
+import ThumbsUpStars from '@assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
 import ExpensifyApprovedLogo from '@assets/images/subscription-details__approvedlogo.svg';
 import TurtleInShell from '@assets/images/turtle-in-shell.svg';
 
@@ -75,6 +77,7 @@ export {
     ExpensifyCardImage,
     FastMoney,
     Filters,
+    Fireworks,
     Flash,
     Gears,
     HeadSet,
@@ -93,5 +96,6 @@ export {
     Pencil,
     PendingTravel,
     Puzzle,
+    ThumbsUpStars,
     TurtleInShell,
 };

src/languages/de.ts

@@ -8243,8 +8243,21 @@ Hier ist ein *Testbeleg*, um dir zu zeigen, wie es funktioniert:`,
         discoverSection: {
             title: 'Entdecken',
             menuItemTitleNonAdmin: 'Erfahren Sie, wie Sie Ausgaben erstellen und Berichte einreichen.',
-            menuItemTitleAdmin: 'Erfahren Sie, wie Sie Mitglieder einladen, Genehmigungsworkflows bearbeiten und Firmenkarten abstimmen.',
-            menuItemDescription: 'Sehen Sie, was Expensify in 2 Minuten kann',
+            menuItemTitleAdmin: 'Erfahren Sie, wie Sie Mitglieder einladen, Genehmigungs-Workflows bearbeiten und Firmenkarten abstimmen.',
+            menuItemDescription: 'Sieh dir in 2 Minuten an, was Expensify kann',
+        },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Sende ${count} ${count === 1 ? 'Bericht' : 'Berichte'}`,
+            approve: ({count}: {count: number}) => `Genehmige ${count} ${count === 1 ? 'Bericht' : 'Berichte'}`,
+            pay: ({count}: {count: number}) => `Bezahlen ${count} ${count === 1 ? 'Bericht' : 'Berichte'}`,
+            export: ({count}: {count: number}) => `${count} ${count === 1 ? 'Bericht' : 'Berichte'} exportieren`,
+            begin: 'Beginnen',
+            emptyStateMessages: {
+                nicelyDone: 'Gut gemacht',
+                keepAnEyeOut: 'Behalte im Blick, was als Nächstes kommt!',
+                allCaughtUp: 'Du bist auf dem neuesten Stand',
+                upcomingTodos: 'Anstehende To-dos werden hier angezeigt.',
+            },
         },
     },
 };

src/languages/en.ts

@@ -998,6 +998,19 @@ const translations = {
             menuItemTitleAdmin: 'Learn how to invite members, edit approval workflows, and reconcile company cards.',
             menuItemDescription: 'See what Expensify can do in 2 min',
         },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Submit ${count} ${count === 1 ? 'report' : 'reports'}`,
+            approve: ({count}: {count: number}) => `Approve ${count} ${count === 1 ? 'report' : 'reports'}`,
+            pay: ({count}: {count: number}) => `Pay ${count} ${count === 1 ? 'report' : 'reports'}`,
+            export: ({count}: {count: number}) => `Export ${count} ${count === 1 ? 'report' : 'reports'}`,
+            begin: 'Begin',
+            emptyStateMessages: {
+                nicelyDone: 'Nicely done',
+                keepAnEyeOut: "Keep an eye out for what's coming next!",
+                allCaughtUp: "You're all caught up",
+                upcomingTodos: 'Upcoming to-dos will appear here.',
+            },
+        },
     },
     allSettingsScreen: {
         subscription: 'Subscription',

src/languages/es.ts

@@ -743,6 +743,19 @@ const translations: TranslationDeepObject<typeof en> = {
             menuItemTitleAdmin: 'Aprende a invitar a miembros, editar flujos de aprobación y conciliar tarjetas corporativas.',
             menuItemDescription: 'Descubre lo que Expensify puede hacer en 2 minutos',
         },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Enviar ${count} ${count === 1 ? 'informe' : 'informes'}`,
+            approve: ({count}: {count: number}) => `Aprobar ${count} ${count === 1 ? 'informe' : 'informes'}`,
+            pay: ({count}: {count: number}) => `Pagar ${count} ${count === 1 ? 'informe' : 'informes'}`,
+            export: ({count}: {count: number}) => `Exportar ${count} ${count === 1 ? 'informe' : 'informes'}`,
+            begin: 'Comenzar',
+            emptyStateMessages: {
+                nicelyDone: '¡Muy bien hecho!',
+                keepAnEyeOut: '¡Mantente atento a lo que viene a continuación!',
+                allCaughtUp: 'Ya estás al día',
+                upcomingTodos: 'Las tareas pendientes aparecerán aquí.',
+            },
+        },
     },
     allSettingsScreen: {
         subscription: 'Suscripcion',

src/languages/fr.ts

@@ -8249,8 +8249,21 @@ Voici un *reçu test* pour vous montrer comment cela fonctionne :`,
         discoverSection: {
             title: 'Découvrir',
             menuItemTitleNonAdmin: 'Découvrez comment créer des dépenses et soumettre des rapports.',
-            menuItemTitleAdmin: 'Apprenez à inviter des membres, à modifier les circuits d’approbation et à rapprocher les cartes de l’entreprise.',
-            menuItemDescription: 'Découvrez ce qu’Expensify peut faire en 2 minutes',
+            menuItemTitleAdmin: 'Apprenez à inviter des membres, modifier les workflows d’approbation et rapprocher les cartes de société.',
+            menuItemDescription: 'Découvrez ce qu’Expensify peut faire en 2 minutes',
+        },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Soumettre ${count} ${count === 1 ? 'rapport' : 'rapports'}`,
+            approve: ({count}: {count: number}) => `Approuver ${count} ${count === 1 ? 'rapport' : 'rapports'}`,
+            pay: ({count}: {count: number}) => `Payer ${count} ${count === 1 ? 'rapport' : 'rapports'}`,
+            export: ({count}: {count: number}) => `Exporter ${count} ${count === 1 ? 'rapport' : 'rapports'}`,
+            begin: 'Commencer',
+            emptyStateMessages: {
+                nicelyDone: 'Bien joué',
+                keepAnEyeOut: 'Restez à l’affût de ce qui arrive bientôt !',
+                allCaughtUp: 'Vous êtes à jour',
+                upcomingTodos: 'Les tâches à venir apparaîtront ici.',
+            },
         },
     },
 };

src/languages/it.ts

@@ -8229,9 +8229,22 @@ Ecco una *ricevuta di prova* per mostrarti come funziona:`,
         discoverSection: {
             title: 'Scopri',
             menuItemTitleNonAdmin: 'Scopri come creare spese e inviare report.',
-            menuItemTitleAdmin: 'Scopri come invitare membri, modificare i flussi di approvazione e riconciliare le carte aziendali.',
+            menuItemTitleAdmin: 'Scopri come invitare i membri, modificare i flussi di approvazione e riconciliare le carte aziendali.',
             menuItemDescription: 'Scopri cosa può fare Expensify in 2 minuti',
         },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Invia ${count} ${count === 1 ? 'rendiconto' : 'rapporti'}`,
+            approve: ({count}: {count: number}) => `Approva ${count} ${count === 1 ? 'rendiconto' : 'rapporti'}`,
+            pay: ({count}: {count: number}) => `Paga ${count} ${count === 1 ? 'rendiconto' : 'rapporti'}`,
+            export: ({count}: {count: number}) => `Esporta ${count} ${count === 1 ? 'rendiconto' : 'rapporti'}`,
+            begin: 'Inizia',
+            emptyStateMessages: {
+                nicelyDone: 'Ben fatto',
+                keepAnEyeOut: 'Tieni d’occhio cosa arriverà dopo!',
+                allCaughtUp: 'Sei in pari',
+                upcomingTodos: 'Le prossime attività da fare verranno visualizzate qui.',
+            },
+        },
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/ja.ts

@@ -8141,8 +8141,21 @@ Expensify の使い方をお見せするための*テストレシート*がこ
         discoverSection: {
             title: '発見',
             menuItemTitleNonAdmin: '経費の作成方法とレポートの提出方法を学びましょう。',
-            menuItemTitleAdmin: 'メンバーの招待方法、承認ワークフローの編集方法、会社カードの照合方法について学びましょう。',
-            menuItemDescription: '2 分で Expensify でできることを確認する',
+            menuItemTitleAdmin: 'メンバーの招待方法、承認ワークフローの編集方法、会社カードの照合作業について学びましょう。',
+            menuItemDescription: '2分でExpensifyでできることを確認する',
+        },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `${count} ${count === 1 ? 'レポート' : 'レポート'} を提出`,
+            approve: ({count}: {count: number}) => `${count} ${count === 1 ? 'レポート' : 'レポート'} を承認`,
+            pay: ({count}: {count: number}) => `${count} ${count === 1 ? 'レポート' : 'レポート'} を支払う`,
+            export: ({count}: {count: number}) => `${count} ${count === 1 ? 'レポート' : 'レポート'} をエクスポート`,
+            begin: '開始',
+            emptyStateMessages: {
+                nicelyDone: 'よくできました',
+                keepAnEyeOut: '次に何が来るか注目していてください！',
+                allCaughtUp: 'すべて確認済みです',
+                upcomingTodos: '今後のTo-doがここに表示されます。',
+            },
         },
     },
 };

src/languages/nl.ts

@@ -8203,10 +8203,23 @@ Hier is een *testbon* om je te laten zien hoe het werkt:`,
         forYou: 'Voor jou',
         announcements: 'Aankondigingen',
         discoverSection: {
-            title: 'Ontdek',
+            title: 'Ontdekken',
             menuItemTitleNonAdmin: 'Leer hoe je uitgaven aanmaakt en rapporten indient.',
             menuItemTitleAdmin: 'Leer hoe u leden uitnodigt, goedkeuringsworkflows bewerkt en bedrijfskaarten afstemt.',
-            menuItemDescription: 'Ontdek wat Expensify in 2 minuten kan doen',
+            menuItemDescription: 'Zie wat Expensify in 2 minuten kan doen',
+        },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Verzend ${count} ${count === 1 ? 'rapport' : 'rapporten'}`,
+            approve: ({count}: {count: number}) => `Goedkeuren ${count} ${count === 1 ? 'rapport' : 'rapporten'}`,
+            pay: ({count}: {count: number}) => `Betaal ${count} ${count === 1 ? 'rapport' : 'rapporten'}`,
+            export: ({count}: {count: number}) => `Exporteer ${count} ${count === 1 ? 'rapport' : 'rapporten'}`,
+            begin: 'Beginnen',
+            emptyStateMessages: {
+                nicelyDone: 'Goed gedaan',
+                keepAnEyeOut: 'Houd in de gaten wat er binnenkort komt!',
+                allCaughtUp: 'Je bent helemaal bij',
+                upcomingTodos: 'Aankomende taken verschijnen hier.',
+            },
         },
     },
 };

src/languages/pl.ts

@@ -8185,13 +8185,26 @@ Oto *paragon testowy*, który pokazuje, jak to działa:`,
         fabGpsTripExplained: 'Przejdź do ekranu GPS (przycisk akcji)',
     },
     homePage: {
-        forYou: 'Dla ciebie',
+        forYou: 'Dla Ciebie',
         announcements: 'Ogłoszenia',
         discoverSection: {
             title: 'Odkryj',
-            menuItemTitleNonAdmin: 'Dowiedz się, jak tworzyć wydatki i składać raporty.',
-            menuItemTitleAdmin: 'Dowiedz się, jak zapraszać członków, edytować przepływy akceptacji i uzgadniać karty firmowe.',
-            menuItemDescription: 'Zobacz, co Expensify potrafi w 2 minuty',
+            menuItemTitleNonAdmin: 'Dowiedz się, jak tworzyć wydatki i przesyłać raporty.',
+            menuItemTitleAdmin: 'Dowiedz się, jak zapraszać członków, edytować ścieżki zatwierdzania i uzgadniać karty firmowe.',
+            menuItemDescription: 'Zobacz, co Expensify potrafi zrobić w 2 min',
+        },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Prześlij ${count} ${count === 1 ? 'raport' : 'raporty'}`,
+            approve: ({count}: {count: number}) => `Zatwierdź ${count} ${count === 1 ? 'raport' : 'raporty'}`,
+            pay: ({count}: {count: number}) => `Zapłać ${count} ${count === 1 ? 'raport' : 'raporty'}`,
+            export: ({count}: {count: number}) => `Eksportuj ${count} ${count === 1 ? 'raport' : 'raporty'}`,
+            begin: 'Rozpocznij',
+            emptyStateMessages: {
+                nicelyDone: 'Dobra robota',
+                keepAnEyeOut: 'Wypatruj, co nadchodzi wkrótce!',
+                allCaughtUp: 'Wszystko nadrobione',
+                upcomingTodos: 'Nadchodzące zadania do wykonania pojawią się tutaj.',
+            },
         },
     },
 };

src/languages/pt-BR.ts

@@ -8198,10 +8198,23 @@ Aqui está um *recibo de teste* para mostrar como funciona:`,
         announcements: 'Anúncios',
         discoverSection: {
             title: 'Descobrir',
-            menuItemTitleNonAdmin: 'Aprenda a criar despesas e enviar relatórios.',
-            menuItemTitleAdmin: 'Aprenda a convidar membros, editar fluxos de aprovação e reconciliar cartões corporativos.',
+            menuItemTitleNonAdmin: 'Aprenda como criar despesas e enviar relatórios.',
+            menuItemTitleAdmin: 'Aprenda como convidar membros, editar fluxos de aprovação e reconciliar cartões corporativos.',
             menuItemDescription: 'Veja o que o Expensify pode fazer em 2 minutos',
         },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `Enviar ${count} ${count === 1 ? 'relatório' : 'relatórios'}`,
+            approve: ({count}: {count: number}) => `Aprovar ${count} ${count === 1 ? 'relatório' : 'relatórios'}`,
+            pay: ({count}: {count: number}) => `Pagar ${count} ${count === 1 ? 'relatório' : 'relatórios'}`,
+            export: ({count}: {count: number}) => `Exportar ${count} ${count === 1 ? 'relatório' : 'relatórios'}`,
+            begin: 'Iniciar',
+            emptyStateMessages: {
+                nicelyDone: 'Muito bem feito',
+                keepAnEyeOut: 'Fique de olho no que vem a seguir!',
+                allCaughtUp: 'Você está em dia',
+                upcomingTodos: 'Próximas tarefas aparecerão aqui.',
+            },
+        },
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,

src/languages/zh-hans.ts

@@ -7963,10 +7963,18 @@ ${reportName}
         announcements: '公告',
         discoverSection: {
             title: '发现',
-            menuItemTitleNonAdmin: '了解如何创建费用并提交报表。',
-            menuItemTitleAdmin: '了解如何邀请成员、编辑审批流程以及对公司卡进行对账。',
+            menuItemTitleNonAdmin: '了解如何创建报销和提交报告。',
+            menuItemTitleAdmin: '了解如何邀请成员、编辑审批流程以及对公司信用卡进行对账。',
             menuItemDescription: '看看 Expensify 在 2 分钟内能为你做什么',
         },
+        forYouSection: {
+            submit: ({count}: {count: number}) => `提交 ${count} ${count === 1 ? '报销单' : '报销单'}`,
+            approve: ({count}: {count: number}) => `批准 ${count} ${count === 1 ? '报销单' : '报销单'}`,
+            pay: ({count}: {count: number}) => `支付 ${count} ${count === 1 ? '报销单' : '报销单'}`,
+            export: ({count}: {count: number}) => `导出 ${count} ${count === 1 ? '报销单' : '报销单'}`,
+            begin: '开始',
+            emptyStateMessages: {nicelyDone: '做得很好', keepAnEyeOut: '敬请关注接下来的更新！', allCaughtUp: '你已经全部看完了', upcomingTodos: '即将进行的待办事项会显示在此处。'},
+        },
     },
 };
 // IMPORTANT: This line is manually replaced in generate translation files by scripts/generateTranslations.ts,