Concierge AI Feature Promo Modal v2

config/eslint/eslint.seatbelt.tsv

@@ -697,6 +697,7 @@
 "../../src/libs/Navigation/PlatformStackNavigation/ScreenLayout.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent/ScreenFreezeWrapper/index.native.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	2
 "../../src/libs/Navigation/PlatformStackNavigation/navigationOptions/animation/withAnimation.ts"	"@typescript-eslint/no-unsafe-type-assertion"	6
+"../../src/libs/Navigation/guards/AIFeaturesPromoGuard.ts"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/libs/Navigation/guards/MigratedUserWelcomeModalGuard.ts"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/libs/Navigation/guards/OnboardingGuard.ts"	"@typescript-eslint/no-unsafe-type-assertion"	2
 "../../src/libs/Navigation/helpers/createNormalizedConfigs.ts"	"@typescript-eslint/no-deprecated/escape"	1

jest/setupAfterEnv.ts

@@ -8,6 +8,11 @@ import Onyx from 'react-native-onyx';
 
 jest.useRealTimers();
 
+jest.mock('@hooks/useAIFeaturesPromoModal', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
+
 // Patch Keyboard.addListener to return a subscription object with .remove() so that
 // @react-navigation/bottom-tabs useIsKeyboardShown hook doesn't crash on cleanup.
 if (Keyboard && typeof Keyboard.addListener === 'function') {

src/CONST/index.ts

@@ -7266,6 +7266,7 @@ const CONST = {
         SCREENS.SAML_SIGN_IN,
         SCREENS.VALIDATE_LOGIN,
         SCREENS.MIGRATED_USER_WELCOME_MODAL.DYNAMIC_ROOT,
+        SCREENS.AI_FEATURES_PROMO_MODAL.DYNAMIC_ROOT,
         SCREENS.MONEY_REQUEST.STEP_SCAN,
         SCREENS.DOMAIN.MEMBERS_MOVE_TO_GROUP,
         ...Object.values(SCREENS.MULTIFACTOR_AUTHENTICATION),
@@ -7800,6 +7801,14 @@ const CONST = {
 
     MIGRATED_USER_WELCOME_MODAL: 'migratedUserWelcomeModal',
 
+    AI_FEATURES_PROMO_MODAL: 'aiFeaturesPromoModal',
+
+    AI_FEATURES_PROMO_LEARN_MORE_URLS: {
+        SPEND_ANALYSIS: 'https://help.expensify.com/articles/new-expensify/concierge-ai/How-Concierge-Analyzes-Spend',
+        EXPENSE_ASSISTANT: 'https://help.expensify.com/articles/new-expensify/concierge-ai/Expense-Assistant',
+        BUILD_AGENTS: 'https://help.expensify.com/articles/new-expensify/ai-agents/Create-Agent-Rules',
+    },
+
     BASE_LIST_ITEM_TEST_ID: 'base-list-item-',
     SELECTION_BUTTON_TEST_ID: 'selection-button-',
     PRODUCT_TRAINING_TOOLTIP_NAMES: {
@@ -8812,6 +8821,14 @@ const CONST = {
                 ROW: 'DomainMembers-Row',
             },
         },
+        FEATURE_TRAINING: {
+            CLOSE_BUTTON: 'FeatureTraining-CloseButton',
+            BACK_BUTTON: 'FeatureTraining-BackButton',
+        },
+        AI_FEATURES_PROMO_MODAL: {
+            CONFIRM_BUTTON: 'AIFeaturesPromoModal-ConfirmButton',
+            HELP_BUTTON: 'AIFeaturesPromoModal-HelpButton',
+        },
     },
 
     DOMAIN: {

src/NAVIGATORS.ts

@@ -8,6 +8,7 @@ export default {
     ONBOARDING_MODAL_NAVIGATOR: 'OnboardingModalNavigator',
     FEATURE_TRAINING_MODAL_NAVIGATOR: 'FeatureTrainingModalNavigator',
     MIGRATED_USER_MODAL_NAVIGATOR: 'MigratedUserModalNavigator',
+    AI_FEATURES_PROMO_MODAL_NAVIGATOR: 'AIFeaturesPromoModalNavigator',
     TEST_DRIVE_DEMO_NAVIGATOR: 'TestDriveDemoNavigator',
     REPORTS_SPLIT_NAVIGATOR: 'ReportsSplitNavigator',
     SETTINGS_SPLIT_NAVIGATOR: 'SettingsSplitNavigator',

src/ROUTES.ts

@@ -144,6 +144,10 @@ const DYNAMIC_ROUTES = {
         path: 'migrated-user-welcome',
         entryScreens: [SCREENS.HOME, SCREENS.INBOX, SCREENS.REPORT, SCREENS.SEARCH.ROOT, SCREENS.WORKSPACES_LIST, SCREENS.WORKSPACE.PROFILE, SCREENS.SETTINGS.ROOT],
     },
+    AI_FEATURES_PROMO: {
+        path: 'ai-features-promo',
+        entryScreens: ['*'],
+    },
     EXPENSE_LIMIT_TYPE_SELECTOR: {
         path: 'expense-limit-type',
         entryScreens: [SCREENS.WORKSPACE.DYNAMIC_CATEGORY_FLAG_AMOUNTS_OVER],

src/SCREENS.ts

@@ -967,6 +967,10 @@ const SCREENS = {
         DYNAMIC_ROOT: 'Dynamic_MigratedUserWelcomeModal_Root',
     },
 
+    AI_FEATURES_PROMO_MODAL: {
+        DYNAMIC_ROOT: 'Dynamic_AIFeaturesPromoModal_Root',
+    },
+
     TEST_DRIVE_DEMO: {
         ROOT: 'TestDrive_Demo_Root',
     },

src/components/AIFeaturesPromoModal.tsx

@@ -0,0 +1,107 @@
+import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import {dismissProductTraining} from '@libs/actions/Welcome';
+import Navigation from '@libs/Navigation/Navigation';
+
+import variables from '@styles/variables';
+
+import CONST from '@src/CONST';
+
+import React from 'react';
+import {View} from 'react-native';
+
+import type {FeatureTrainingContentDataProps} from './FeatureTrainingContent';
+
+import Badge from './Badge';
+import CenteredModalLayout from './CenteredModalLayout';
+import {FeatureTrainingCarousel} from './FeatureTrainingContent';
+import LottieAnimations from './LottieAnimations';
+import Text from './Text';
+
+function AIFeaturesPromoModal() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isBetaEnabled} = usePermissions();
+    const canUseCustomAgent = isBetaEnabled(CONST.BETAS.CUSTOM_AGENT);
+
+    const customAgentPromoTitle = (
+        <View style={[styles.dFlex, styles.flexRow]}>
+            <Text style={[styles.textHeadlineH1, styles.mb2]}>{translate('aiFeaturesPromoModal.customAgents.title')}</Text>
+            <Badge
+                isStrong
+                isCondensed
+                text={translate('common.beta')}
+                badgeStyles={styles.mb2}
+            />
+        </View>
+    );
+
+    const pages: FeatureTrainingContentDataProps[] = [
+        {
+            animation: LottieAnimations.SpendAnalysis,
+            title: translate('aiFeaturesPromoModal.spendAnalysis.title'),
+            subtitle: translate('aiFeaturesPromoModal.subtitle'),
+            description: translate('aiFeaturesPromoModal.spendAnalysis.description'),
+            confirmText: translate('common.next'),
+        },
+        {
+            animation: LottieAnimations.ExpenseAssistant,
+            title: translate('aiFeaturesPromoModal.expenseAssistant.title'),
+            subtitle: translate('aiFeaturesPromoModal.subtitle'),
+            description: translate('aiFeaturesPromoModal.expenseAssistant.description'),
+            confirmText: canUseCustomAgent ? translate('common.next') : translate('aiFeaturesPromoModal.confirmText'),
+        },
+        ...(canUseCustomAgent
+            ? [
+                  {
+                      animation: LottieAnimations.CustomAgents,
+                      title: customAgentPromoTitle,
+                      subtitle: translate('aiFeaturesPromoModal.subtitle'),
+                      description: translate('aiFeaturesPromoModal.customAgents.description'),
+                      confirmText: translate('aiFeaturesPromoModal.confirmText'),
+                  },
+              ]
+            : []),
+    ];
+
+    const dismissNVP = (isDismissedUsingCloseButton: boolean) => {
+        dismissProductTraining(CONST.AI_FEATURES_PROMO_MODAL, isDismissedUsingCloseButton);
+    };
+
+    const confirmAndCloseModal = () => {
+        Navigation.goBack();
+        dismissNVP(false);
+    };
+
+    const closeModal = () => {
+        Navigation.goBack();
+        dismissNVP(true);
+    };
+
+    return (
+        <CenteredModalLayout
+            onBackdropPress={closeModal}
+            width={variables.aiFeaturesPromoModalWidth}
+            contentStyle={styles.pt0}
+        >
+            <FeatureTrainingCarousel
+                pages={pages}
+                onConfirm={confirmAndCloseModal}
+                onClose={closeModal}
+                width={variables.aiFeaturesPromoModalWidth}
+                shouldRenderHTMLDescription
+                shouldUseScrollView
+                illustrationOuterContainerStyle={styles.p0}
+                illustrationAspectRatio={LottieAnimations.SpendAnalysis.w / LottieAnimations.SpendAnalysis.h}
+                contentInnerContainerStyles={styles.mb4}
+                titleStyles={styles.mb2}
+                confirmSentryLabel={CONST.SENTRY_LABEL.AI_FEATURES_PROMO_MODAL.CONFIRM_BUTTON}
+                helpSentryLabel={CONST.SENTRY_LABEL.AI_FEATURES_PROMO_MODAL.HELP_BUTTON}
+            />
+        </CenteredModalLayout>
+    );
+}
+
+export default AIFeaturesPromoModal;