[Home Page] Add a simple onboarding slot to Home, focused on "manage my team" intent

src/CONST/index.ts

@@ -8959,6 +8959,7 @@ const CONST = {
         },
         HOME_PAGE: {
             WIDGET_ITEM: 'HomePage-WidgetItem',
+            GETTING_STARTED_ROW: 'HomePage-GettingStartedRow',
         },
         CALENDAR_PICKER: {
             YEAR_PICKER: 'CalendarPicker-YearPicker',

src/languages/de.ts

@@ -1047,6 +1047,14 @@ const translations: TranslationDeepObject<typeof en> = {
             inDays: () => ({one: 'In 1 Tag', other: (count: number) => `In ${count} Tagen`}),
             today: 'Heute',
         },
+        gettingStartedSection: {
+            title: 'Erste Schritte',
+            createWorkspace: 'Workspace erstellen',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Mit ${integrationName} verbinden`,
+            customizeCategories: 'Buchhaltungskategorien anpassen',
+            linkCompanyCards: 'Firmenkarten verknüpfen',
+            setupRules: 'Ausgabelimits einrichten',
+        },
         freeTrialSection: {
             title: ({days}: {days: number}) => `Kostenlose Testversion: Noch ${days} ${days === 1 ? 'Tag' : 'Tage'}!`,
             offer50Body: 'Sparen Sie 50 % im ersten Jahr!',

src/languages/en.ts

@@ -1097,6 +1097,14 @@ const translations = {
                 fireworksDescription: 'Upcoming to-dos will appear here.',
             },
         },
+        gettingStartedSection: {
+            title: 'Getting started',
+            createWorkspace: 'Create a workspace',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Connect to ${integrationName}`,
+            customizeCategories: 'Customize accounting categories',
+            linkCompanyCards: 'Link company cards',
+            setupRules: 'Set up spend rules',
+        },
         upcomingTravel: 'Upcoming travel',
         upcomingTravelSection: {
             flightTo: ({destination}: {destination: string}) => `Flight to ${destination}`,

src/languages/es.ts

@@ -966,6 +966,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 fireworksDescription: 'Las próximas tareas aparecerán aquí.',
             },
         },
+        gettingStartedSection: {
+            title: 'Primeros pasos',
+            createWorkspace: 'Crear un espacio de trabajo',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Conectar con ${integrationName}`,
+            customizeCategories: 'Personalizar categorías contables',
+            linkCompanyCards: 'Vincular tarjetas corporativas',
+            setupRules: 'Configurar reglas de gasto',
+        },
         upcomingTravel: 'Próximos viajes',
         upcomingTravelSection: {
             flightTo: ({destination}: {destination: string}) => `Vuelo a ${destination}`,

src/languages/fr.ts

@@ -1063,6 +1063,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `Temps restant : ${pluralCount} jours`,
             }),
         },
+        gettingStartedSection: {
+            title: 'Premiers pas',
+            createWorkspace: 'Créer un espace de travail',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Se connecter à ${integrationName}`,
+            customizeCategories: 'Personnaliser les catégories comptables',
+            linkCompanyCards: 'Lier des cartes d’entreprise',
+            setupRules: 'Configurer les règles de dépense',
+        },
     },
     allSettingsScreen: {
         subscription: 'Abonnement',

src/languages/it.ts

@@ -1060,6 +1060,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `Tempo rimanente: ${pluralCount} giorni`,
             }),
         },
+        gettingStartedSection: {
+            title: 'Per iniziare',
+            createWorkspace: 'Crea uno spazio di lavoro',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Connetti a ${integrationName}`,
+            customizeCategories: 'Personalizza le categorie contabili',
+            linkCompanyCards: 'Collega carte aziendali',
+            setupRules: 'Configura le regole di spesa',
+        },
     },
     allSettingsScreen: {
         subscription: 'Abbonamento',

src/languages/ja.ts

@@ -1043,6 +1043,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `残り時間：${pluralCount}日`,
             }),
         },
+        gettingStartedSection: {
+            title: 'はじめに',
+            createWorkspace: 'ワークスペースを作成',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `${integrationName}に接続する`,
+            customizeCategories: '会計カテゴリをカスタマイズする',
+            linkCompanyCards: '会社カードを連携',
+            setupRules: '支出ルールを設定',
+        },
     },
     allSettingsScreen: {
         subscription: 'サブスクリプション',

src/languages/nl.ts

@@ -1059,6 +1059,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `Resterende tijd: ${pluralCount} dagen`,
             }),
         },
+        gettingStartedSection: {
+            title: 'Aan de slag',
+            createWorkspace: 'Maak een werkruimte',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Verbind met ${integrationName}`,
+            customizeCategories: 'Boekhoudcategorieën aanpassen',
+            linkCompanyCards: 'Bedrijfspassen koppelen',
+            setupRules: 'Uitgavenregels instellen',
+        },
     },
     allSettingsScreen: {
         subscription: 'Abonnement',

src/languages/pl.ts

@@ -1060,6 +1060,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `Pozostały czas: ${pluralCount} dni`,
             }),
         },
+        gettingStartedSection: {
+            title: 'Pierwsze kroki',
+            createWorkspace: 'Utwórz przestrzeń roboczą',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Połącz z ${integrationName}`,
+            customizeCategories: 'Dostosuj kategorie księgowe',
+            linkCompanyCards: 'Połącz firmowe karty',
+            setupRules: 'Skonfiguruj zasady wydatków',
+        },
     },
     allSettingsScreen: {
         subscription: 'Subskrypcja',

src/languages/pt-BR.ts

@@ -1058,6 +1058,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `Tempo restante: ${pluralCount} dias`,
             }),
         },
+        gettingStartedSection: {
+            title: 'Introdução',
+            createWorkspace: 'Criar um workspace',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `Conectar ao ${integrationName}`,
+            customizeCategories: 'Personalizar categorias contábeis',
+            linkCompanyCards: 'Vincular cartões corporativos',
+            setupRules: 'Configurar regras de gasto',
+        },
     },
     allSettingsScreen: {
         subscription: 'Assinatura',

src/languages/zh-hans.ts

@@ -1026,6 +1026,14 @@ const translations: TranslationDeepObject<typeof en> = {
                 other: (pluralCount: number) => `剩余时间：${pluralCount}天`,
             }),
         },
+        gettingStartedSection: {
+            title: '入门',
+            createWorkspace: '创建工作区',
+            connectAccounting: ({integrationName}: {integrationName: string}) => `连接到 ${integrationName}`,
+            customizeCategories: '自定义会计类别',
+            linkCompanyCards: '关联公司卡',
+            setupRules: '设置消费规则',
+        },
     },
     allSettingsScreen: {
         subscription: '订阅',

src/libs/PolicyUtils.ts

@@ -73,7 +73,7 @@
 
 let allPolicies: OnyxCollection<Policy>;
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
     callback: (value) => (allPolicies = value),
@@ -687,6 +687,25 @@
     return Object.values(policyCategories).some((category) => category && category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !defaultCategoryNames.has(category.name));
 }
 
+/**
+ * Checks if a policy has any non-default rules configured.
+ * Defaults are: no approval/expense/coding rules and no custom rules text.
+ */
+function hasNonDefaultRules(policy: OnyxEntry<Policy>): boolean {
+    if (!policy) {
+        return false;
+    }
+
+    const hasCustomRules = !!policy.customRules && policy.customRules.trim().length > 0;
+
+    const {rules} = policy;
+    const hasApprovalRules = !!rules?.approvalRules && rules.approvalRules.length > 0;
+    const hasExpenseRules = !!rules?.expenseRules && rules.expenseRules.length > 0;
+    const hasCodingRules = !!rules?.codingRules && Object.keys(rules.codingRules).length > 0;
+
+    return hasCustomRules || hasApprovalRules || hasExpenseRules || hasCodingRules;
+}
+
 /**
  * Gets a tag list of a policy by a tag index
  */
@@ -2074,6 +2093,7 @@
     getTagLists,
     hasTags,
     hasCustomCategories,
+    hasNonDefaultRules,
     getTaxByID,
     getUnitRateValue,
     getRateDisplayValue,

src/pages/home/GettingStartedSection/GettingStartedRow.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {View} from 'react-native';
+import Checkbox from '@components/Checkbox';
+import Icon from '@components/Icon';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Text from '@components/Text';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import type {GettingStartedItem} from './hooks/useGettingStartedItems';
+
+type GettingStartedRowProps = {
+    item: GettingStartedItem;
+};
+
+function GettingStartedRow({item}: GettingStartedRowProps) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'Checkmark'] as const);
+
+    const navigateToItem = () => {
+        Navigation.navigate(item.route);
+    };
+
+    return (
+        <PressableWithoutFeedback
+            onPress={navigateToItem}
+            accessibilityLabel={item.label}
+            sentryLabel={CONST.SENTRY_LABEL.HOME_PAGE.GETTING_STARTED_ROW}
+        >
+            {({hovered}) => (
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap3, shouldUseNarrowLayout ? styles.ph5 : styles.ph8, styles.pv3, hovered && styles.hoveredComponentBG]}>
+                    {item.isComplete ? (
+                        <View
+                            style={[
+                                StyleUtils.getCheckboxContainerStyle(variables.iconSizeNormal, variables.componentBorderRadiusSmall),
+                                {backgroundColor: theme.icon, borderColor: theme.icon},
+                            ]}
+                        >
+                            <Icon
+                                src={icons.Checkmark}
+                                fill={theme.textLight}
+                                height={variables.iconSizeSemiSmall}
+                                width={variables.iconSizeSemiSmall}
+                            />
+                        </View>
+                    ) : (
+                        <Checkbox
+                            isChecked={false}
+                            onPress={navigateToItem}
+                            accessibilityLabel={item.label}
+                        />
+                    )}
+                    <Text style={[styles.flex1, styles.textBold, item.isComplete && {color: theme.textSupporting}]}>{item.label}</Text>
+                    {!item.isComplete && (
+                        <Icon
+                            src={icons.ArrowRight}
+                            width={variables.iconSizeNormal}
+                            height={variables.iconSizeNormal}
+                            fill={theme.icon}
+                        />
+                    )}
+                </View>
+            )}
+        </PressableWithoutFeedback>
+    );
+}
+
+export default GettingStartedRow;

src/pages/home/GettingStartedSection/hooks/useGettingStartedItems.ts

@@ -0,0 +1,105 @@
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import {hasAccountingConnections, hasCustomCategories, hasNonDefaultRules} from '@libs/PolicyUtils';
+import isWithinGettingStartedPeriod from '@pages/home/GettingStartedSection/utils/isWithinGettingStartedPeriod';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
+
+type GettingStartedItem = {
+    key: string;
+    label: string;
+    isComplete: boolean;
+    route: Route;
+};
+
+type UseGettingStartedItemsResult = {
+    shouldShowSection: boolean;
+    items: GettingStartedItem[];
+};
+
+const DIRECT_CONNECT_INTEGRATIONS = new Set<string>([
+    CONST.POLICY.CONNECTIONS.NAME.QBO,
+    CONST.POLICY.CONNECTIONS.NAME.QBD,
+    CONST.POLICY.CONNECTIONS.NAME.XERO,
+    CONST.POLICY.CONNECTIONS.NAME.NETSUITE,
+    CONST.POLICY.CONNECTIONS.NAME.SAGE_INTACCT,
+]);
+
+function useGettingStartedItems(): UseGettingStartedItemsResult {
+    const {translate} = useLocalize();
+    const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
+    const [onboardingPurpose] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED);
+    const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
+    const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
+    const [reportedIntegration] = useOnyx(ONYXKEYS.ONBOARDING_USER_REPORTED_INTEGRATION);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);
+    const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${activePolicyID}`);
+
+    const emptyResult: UseGettingStartedItemsResult = {shouldShowSection: false, items: []};
+
+    const intent = introSelected?.choice ?? onboardingPurpose;
+    if (intent !== CONST.ONBOARDING_CHOICES.MANAGE_TEAM) {
+        return emptyResult;
+    }
+
+    if (!activePolicyID || !policy) {
+        return emptyResult;
+    }
+
+    if (!isWithinGettingStartedPeriod(firstDayFreeTrial)) {
+        return emptyResult;
+    }
+
+    const items: GettingStartedItem[] = [];
+
+    items.push({
+        key: 'createWorkspace',
+        label: translate('homePage.gettingStartedSection.createWorkspace'),
+        isComplete: true,
+        route: ROUTES.WORKSPACE_OVERVIEW.getRoute(activePolicyID),
+    });
+
+    const isDirectConnect = !!reportedIntegration && DIRECT_CONNECT_INTEGRATIONS.has(reportedIntegration);
+
+    if (isDirectConnect) {
+        const integrationName = CONST.ONBOARDING_ACCOUNTING_MAPPING[reportedIntegration as keyof typeof CONST.ONBOARDING_ACCOUNTING_MAPPING] ?? String(reportedIntegration);
+        items.push({
+            key: 'connectAccounting',
+            label: translate('homePage.gettingStartedSection.connectAccounting', {integrationName}),
+            isComplete: hasAccountingConnections(policy),
+            route: ROUTES.WORKSPACE_ACCOUNTING.getRoute(activePolicyID),
+        });
+    } else {
+        items.push({
+            key: 'customizeCategories',
+            label: translate('homePage.gettingStartedSection.customizeCategories'),
+            isComplete: hasCustomCategories(policyCategories),
+            route: ROUTES.WORKSPACE_CATEGORIES.getRoute(activePolicyID),
+        });
+    }
+
+    if (policy.areCompanyCardsEnabled) {
+        items.push({
+            key: 'linkCompanyCards',
+            label: translate('homePage.gettingStartedSection.linkCompanyCards'),
+            isComplete: false,
+            route: ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(activePolicyID),
+        });
+    }
+
+    if (policy.areRulesEnabled) {
+        items.push({
+            key: 'setupRules',
+            label: translate('homePage.gettingStartedSection.setupRules'),
+            isComplete: hasNonDefaultRules(policy),
+            route: ROUTES.WORKSPACE_RULES.getRoute(activePolicyID),
+        });
+    }
+
+    return {shouldShowSection: true, items};
+}
+
+export default useGettingStartedItems;
+export type {GettingStartedItem, UseGettingStartedItemsResult};