Concierge AI Feature Promo Modal

config/eslint/eslint.seatbelt.tsv

@@ -171,8 +171,9 @@
 "../../src/components/EmptySelectionListContent.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	1
 "../../src/components/EnvironmentBadge.tsx"	"no-restricted-syntax"	1
 "../../src/components/ExplanationModal.tsx"	"no-restricted-syntax"	1
-"../../src/components/FeatureTrainingModal.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	2
-"../../src/components/FeatureTrainingModal.tsx"	"react-hooks/set-state-in-effect"	1
+"../../src/components/FeatureTrainingModal/FeatureTrainingModalIllustration.tsx"	"@typescript-eslint/no-unsafe-type-assertion"	2
+"../../src/components/FeatureTrainingModal/FeatureTrainingModalIllustration.tsx"	"react-hooks/set-state-in-effect"	1
+"../../src/components/FeatureTrainingModal/index.tsx"	"no-restricted-imports"	1
 "../../src/components/FeedbackSurvey.tsx"	"react-hooks/set-state-in-effect"	1
 "../../src/components/FilePicker/index.native.tsx"	"react-hooks/refs"	1
 "../../src/components/FilePicker/index.tsx"	"react-hooks/refs"	1
@@ -671,6 +672,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

@@ -6,6 +6,16 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 jest.useRealTimers();
 
+// Globally short-circuit AIFeaturesPromoGuard in tests. The real guard proactively
+// navigates any authenticated session to /ai-features-promo unless the dismissal NVP
+// is set, which would otherwise intercept navigation in unrelated UI tests. Tests
+// that need the real guard can override this mock locally.
+jest.mock('@libs/Navigation/guards/AIFeaturesPromoGuard', () => ({
+    __esModule: true,
+    default: {name: 'AIFeaturesPromoGuard', evaluate: () => ({type: 'ALLOW'})},
+    onSessionOrLoadingAppChanged: 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

@@ -7248,6 +7248,7 @@ const CONST = {
         SCREENS.SAML_SIGN_IN,
         SCREENS.VALIDATE_LOGIN,
         SCREENS.MIGRATED_USER_WELCOME_MODAL.ROOT,
+        SCREENS.AI_FEATURES_PROMO_MODAL.ROOT,
         SCREENS.MONEY_REQUEST.STEP_SCAN,
         SCREENS.DOMAIN.MEMBERS_MOVE_TO_GROUP,
         ...Object.values(SCREENS.MULTIFACTOR_AUTHENTICATION),
@@ -7766,6 +7767,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: {

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_MODAL_NAVIGATOR: 'TestDriveModalNavigator',
     TEST_DRIVE_DEMO_NAVIGATOR: 'TestDriveDemoNavigator',
     REPORTS_SPLIT_NAVIGATOR: 'ReportsSplitNavigator',

src/ROUTES.ts

@@ -3367,6 +3367,7 @@ const ROUTES = {
 
         getRoute: (backTo?: string) => getUrlWithBackToParam('onboarding/migrated-user-welcome', backTo, false),
     },
+    AI_FEATURES_PROMO_MODAL: 'ai-features-promo',
 
     TRANSACTION_RECEIPT: {
         route: 'r/:reportID/transaction/:transactionID/receipt/:action?/:iouType?',

src/SCREENS.ts

@@ -968,6 +968,10 @@ const SCREENS = {
         ROOT: 'MigratedUserWelcomeModal_Root',
     },
 
+    AI_FEATURES_PROMO_MODAL: {
+        ROOT: 'AIFeaturesPromoModal_Root',
+    },
+
     TEST_DRIVE_MODAL: {
         ROOT: 'TestDrive_Modal_Root',
     },

src/components/AIFeaturesPromoModal/index.tsx

@@ -0,0 +1,92 @@
+import React, {useRef} from 'react';
+import {View} from 'react-native';
+import Badge from '@components/Badge';
+import FeatureTrainingModal from '@components/FeatureTrainingModal';
+import type {FeatureTrainingModalPageProps} from '@components/FeatureTrainingModal';
+import LottieAnimations from '@components/LottieAnimations';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {dismissProductTraining} from '@libs/actions/Welcome';
+import Log from '@libs/Log';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+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: FeatureTrainingModalPageProps[] = [
+        {
+            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 wasDismissedViaConfirmRef = useRef(false);
+
+    const onConfirm = () => {
+        Log.hmmm('[AIFeaturesPromoModal] onConfirm called, recording click dismissal');
+        wasDismissedViaConfirmRef.current = true;
+    };
+
+    const onClose = () => {
+        const isCloseButtonDismissal = !wasDismissedViaConfirmRef.current;
+        Log.hmmm(`[AIFeaturesPromoModal] onClose called, dismissing product training via ${isCloseButtonDismissal ? 'x' : 'click'}`);
+        dismissProductTraining(CONST.AI_FEATURES_PROMO_MODAL, isCloseButtonDismissal);
+    };
+
+    return (
+        <FeatureTrainingModal
+            pages={pages}
+            onConfirm={onConfirm}
+            onClose={onClose}
+            width={variables.aiFeaturesPromoModalWidth}
+            shouldRenderHTMLDescription
+            shouldUseScrollView
+            illustrationOuterContainerStyle={styles.p0}
+            illustrationAspectRatio={LottieAnimations.SpendAnalysis.w / LottieAnimations.SpendAnalysis.h}
+            contentInnerContainerStyles={styles.mb4}
+            modalInnerContainerStyle={styles.pt0}
+            titleStyles={styles.mb2}
+        />
+    );
+}
+
+export default AIFeaturesPromoModal;

src/components/FeatureTrainingModal/FeatureTrainingModalBody.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {View} from 'react-native';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import FeatureTrainingModalContent from './FeatureTrainingModalContent';
+import FeatureTrainingModalIllustration from './FeatureTrainingModalIllustration';
+import type {BaseFeatureTrainingModalProps, FeatureTrainingModalPageProps} from './index';
+
+type FeatureTrainingModalBodyProps = BaseFeatureTrainingModalProps &
+    FeatureTrainingModalPageProps & {
+        /** Padding for the modal */
+        modalPadding: number;
+
+        /** Whether the modal should be shown again */
+        willShowAgain: boolean;
+
+        /** A callback to call when the modal should be shown again */
+        toggleWillShowAgain: () => void;
+
+        /** A callback to call when we want to close the modal */
+        closeModal: (didPressHelpButton?: boolean) => void;
+
+        /** A callback to call when we want to close the modal and confirm */
+        confirmModal: () => void;
+
+        /** Whether to show the back button to navigate back to the previous page in carousel mode */
+        shouldShowBackButton?: boolean;
+
+        /** A callback to call when we want to navigate back to the previous page in carousel mode */
+        onBack?: () => void;
+    };
+
+function FeatureTrainingModalBody({
+    illustrationInnerContainerStyle,
+    illustrationOuterContainerStyle,
+    illustrationAspectRatio: illustrationAspectRatioProp,
+    width,
+    title = '',
+    subtitle = '',
+    description = '',
+    secondaryDescription = '',
+    titleStyles,
+    shouldShowDismissModalOption = false,
+    confirmText = '',
+    helpText = '',
+    onHelp = () => {},
+    children,
+    contentInnerContainerStyles,
+    contentOuterContainerStyles,
+    shouldRenderSVG = true,
+    shouldRenderHTMLDescription = false,
+    shouldShowConfirmationLoader = false,
+    canConfirmWhileOffline = true,
+    shouldCallOnHelpWhenModalHidden = false,
+    helpSentryLabel,
+    confirmSentryLabel,
+    modalPadding,
+    willShowAgain = true,
+    toggleWillShowAgain,
+    closeModal,
+    confirmModal,
+    shouldShowBackButton = false,
+    onBack,
+    ...props
+}: FeatureTrainingModalBodyProps) {
+    const StyleUtils = useStyleUtils();
+    const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
+
+    return (
+        <View style={width && onboardingIsMediumOrLargerScreenWidth ? StyleUtils.getWidthStyle(width) : undefined}>
+            <FeatureTrainingModalIllustration
+                illustrationAspectRatio={illustrationAspectRatioProp}
+                illustrationInnerContainerStyle={illustrationInnerContainerStyle}
+                illustrationOuterContainerStyle={illustrationOuterContainerStyle}
+                shouldRenderSVG={shouldRenderSVG}
+                modalPadding={modalPadding}
+                {...props}
+            />
+            <FeatureTrainingModalContent
+                title={title}
+                subtitle={subtitle}
+                description={description}
+                secondaryDescription={secondaryDescription}
+                confirmText={confirmText}
+                helpText={helpText}
+                onHelp={onHelp}
+                shouldCallOnHelpWhenModalHidden={shouldCallOnHelpWhenModalHidden}
+                helpSentryLabel={helpSentryLabel}
+                confirmSentryLabel={confirmSentryLabel}
+                shouldShowDismissModalOption={shouldShowDismissModalOption}
+                willShowAgain={willShowAgain}
+                toggleWillShowAgain={toggleWillShowAgain}
+                closeModal={closeModal}
+                confirmModal={confirmModal}
+                shouldShowBackButton={shouldShowBackButton}
+                onBack={onBack}
+                shouldShowConfirmationLoader={shouldShowConfirmationLoader}
+                canConfirmWhileOffline={canConfirmWhileOffline}
+                titleStyles={titleStyles}
+                contentInnerContainerStyles={contentInnerContainerStyles}
+                contentOuterContainerStyles={contentOuterContainerStyles}
+                shouldRenderHTMLDescription={shouldRenderHTMLDescription}
+            >
+                {children}
+            </FeatureTrainingModalContent>
+        </View>
+    );
+}
+
+export default FeatureTrainingModalBody;