[Submit] In-product modal for existing "Get paid back" intent users (Wave 4)

src/CONST/index.ts

@@ -7282,6 +7282,7 @@ const CONST = {
         SCREENS.SAML_SIGN_IN,
         SCREENS.VALIDATE_LOGIN,
         SCREENS.MIGRATED_USER_WELCOME_MODAL.DYNAMIC_ROOT,
+        SCREENS.SUBMIT_PLAN_WELCOME_MODAL.DYNAMIC_ROOT,
         SCREENS.AI_FEATURES_PROMO_MODAL.DYNAMIC_ROOT,
         SCREENS.MONEY_REQUEST.STEP_SCAN,
         SCREENS.DOMAIN.MEMBERS_MOVE_TO_GROUP,
@@ -7817,6 +7818,10 @@ const CONST = {
 
     MIGRATED_USER_WELCOME_MODAL: 'migratedUserWelcomeModal',
 
+    // Backend NVP name for the Submit migration modal. The Onyx key is prefixed with `nvp_`
+    // (ONYXKEYS.NVP_SUBMIT_MIGRATION_MODAL_SHOWN), but the API expects the unprefixed name.
+    SUBMIT_MIGRATION_MODAL_SHOWN_NVP_NAME: 'submitMigrationModalShown',
+
     AI_FEATURES_PROMO_MODAL: 'aiFeaturesPromoModal',
 
     AI_FEATURES_PROMO_LEARN_MORE_URLS: {

src/NAVIGATORS.ts

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

src/ONYXKEYS.ts

@@ -522,6 +522,9 @@ const ONYXKEYS = {
     // Object containing names/timestamps of dismissed product training elements (Modal, Tooltip, etc.)
     NVP_DISMISSED_PRODUCT_TRAINING: 'nvp_dismissedProductTraining',
 
+    // Whether the user has seen the Submit plan migration in-product modal (shown once to existing "Get paid back" users)
+    NVP_SUBMIT_MIGRATION_MODAL_SHOWN: 'nvp_submitMigrationModalShown',
+
     // Max width supported for HTML <canvas> element
     MAX_CANVAS_WIDTH: 'maxCanvasWidth',
 
@@ -1667,6 +1670,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.PRESERVED_USER_SESSION]: OnyxTypes.Session;
     [ONYXKEYS.PRESERVED_ACCOUNT]: OnyxTypes.Account;
     [ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING]: OnyxTypes.DismissedProductTraining;
+    [ONYXKEYS.NVP_SUBMIT_MIGRATION_MODAL_SHOWN]: boolean;
     [ONYXKEYS.CORPAY_ONBOARDING_FIELDS]: OnyxTypes.CorpayOnboardingFields;
     [ONYXKEYS.LAST_FULL_RECONNECT_TIME]: string;
     [ONYXKEYS.TRAVEL_PROVISIONING]: OnyxTypes.TravelProvisioning;

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],
     },
+    SUBMIT_PLAN_WELCOME: {
+        path: 'submit-plan-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: ['*'],

src/SCREENS.ts

@@ -967,6 +967,10 @@ const SCREENS = {
         DYNAMIC_ROOT: 'Dynamic_MigratedUserWelcomeModal_Root',
     },
 
+    SUBMIT_PLAN_WELCOME_MODAL: {
+        DYNAMIC_ROOT: 'Dynamic_SubmitPlanWelcomeModal_Root',
+    },
+
     AI_FEATURES_PROMO_MODAL: {
         DYNAMIC_ROOT: 'Dynamic_AIFeaturesPromoModal_Root',
     },

src/components/SubmitPlanWelcomeModal.tsx

@@ -0,0 +1,96 @@
+import useAutoCreateSubmitWorkspace from '@hooks/useAutoCreateSubmitWorkspace';
+import useBeforeRemove from '@hooks/useBeforeRemove';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import Navigation from '@libs/Navigation/Navigation';
+
+import colors from '@styles/theme/colors';
+import variables from '@styles/variables';
+
+import {setSubmitMigrationModalShown} from '@userActions/User';
+
+import type {TranslationPaths} from '@src/languages/types';
+
+import React from 'react';
+import {View} from 'react-native';
+
+import CenteredModalLayout from './CenteredModalLayout';
+import FeatureTrainingContent from './FeatureTrainingContent';
+import Text from './Text';
+
+const FEATURE_TRANSLATION_KEYS: TranslationPaths[] = [
+    'submitPlanWelcomeModal.features.getReimbursed',
+    'submitPlanWelcomeModal.features.buildReports',
+    'submitPlanWelcomeModal.features.categorize',
+    'submitPlanWelcomeModal.features.inviteBoss',
+];
+
+function SubmitPlanWelcomeModal() {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const illustrations = useMemoizedLazyIllustrations(['ReceiptWranglerSpaceCowgirl']);
+    const {firstName, lastName} = useCurrentUserPersonalDetails();
+    const autoCreateSubmitWorkspace = useAutoCreateSubmitWorkspace();
+
+    // Whenever this modal is removed from the navigation stack (confirmed, dismissed, or closed),
+    // persist that the user has seen it so it never triggers again.
+    useBeforeRemove(() => {
+        setSubmitMigrationModalShown();
+    });
+
+    const handleClose = () => Navigation.goBack();
+
+    const handleConfirm = () => {
+        // The user has already completed onboarding, so we skip CompleteGuidedSetup and just create the
+        // Submit workspace. autoCreateSubmitWorkspace then dismisses this modal and navigates to Categories
+        // with #admins in the RHP, which triggers the useBeforeRemove persistence above.
+        autoCreateSubmitWorkspace(firstName ?? '', lastName ?? '', false);
+    };
+
+    return (
+        <CenteredModalLayout
+            onBackdropPress={handleClose}
+            contentStyle={[styles.pt0, styles.pb0]}
+        >
+            <FeatureTrainingContent
+                image={illustrations.ReceiptWranglerSpaceCowgirl}
+                contentFitImage="contain"
+                illustrationAspectRatio={variables.submitPlanWelcomeModalIllustrationAspectRatio}
+                illustrationInnerContainerStyle={[styles.alignItemsCenter, styles.justifyContentCenter, styles.p5, StyleUtils.getBackgroundColorStyle(colors.yellow400)]}
+                illustrationOuterContainerStyle={styles.p0}
+                title={translate('submitPlanWelcomeModal.title')}
+                description={translate('submitPlanWelcomeModal.description')}
+                confirmText={translate('submitPlanWelcomeModal.confirmText')}
+                helpText={translate('submitPlanWelcomeModal.dismissText')}
+                onConfirm={handleConfirm}
+                onHelp={handleClose}
+                onClose={handleClose}
+                shouldCloseOnConfirm={false}
+                contentInnerContainerStyles={styles.mb5}
+                contentOuterContainerStyles={!shouldUseNarrowLayout && [styles.mt8, styles.mh8]}
+                shouldUseScrollView
+            >
+                <View style={[styles.gap2, styles.mt3]}>
+                    {FEATURE_TRANSLATION_KEYS.map((translationKey) => (
+                        <View
+                            key={translationKey}
+                            style={[styles.flexRow, styles.alignItemsStart]}
+                        >
+                            <Text style={styles.textSupporting}>{'\u2022  '}</Text>
+                            <Text style={[styles.textSupporting, styles.flex1]}>{translate(translationKey)}</Text>
+                        </View>
+                    ))}
+                </View>
+            </FeatureTrainingContent>
+        </CenteredModalLayout>
+    );
+}
+
+export default SubmitPlanWelcomeModal;

src/hooks/useAutoCreateSubmitWorkspace.ts

@@ -53,7 +53,9 @@ function useAutoCreateSubmitWorkspace() {
     const [conciergeChat] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${conciergeReportID}`);
 
     const autoCreateSubmitWorkspace = useCallback(
-        async (firstName: string, lastName: string) => {
+        // Callers that already finished onboarding (e.g. the Submit plan welcome modal) don't need to
+        // run guided setup again, so they can skip the CompleteGuidedSetup request by passing `false`.
+        async (firstName: string, lastName: string, shouldCompleteOnboarding = true) => {
             const shouldCreateWorkspace = !isRestrictedPolicyCreation && !onboardingPolicyID && !hasEditableGroupPolicy;
             const displayName = createDisplayName(currentUserEmail, {firstName, lastName}, formatPhoneNumber);
 
@@ -79,20 +81,25 @@ function useAutoCreateSubmitWorkspace() {
                   })
                 : {adminsChatReportID: onboardingAdminsChatReportID, policyID: onboardingPolicyID};
 
-            try {
-                await completeOnboarding({
-                    engagementChoice: CONST.ONBOARDING_CHOICES.EMPLOYER,
-                    onboardingMessage: onboardingMessages[CONST.ONBOARDING_CHOICES.EMPLOYER],
-                    firstName,
-                    lastName,
-                    adminsChatReportID: newAdminsChatReportID,
-                    onboardingPolicyID: newPolicyID,
-                    introSelected,
-                    isSelfTourViewed,
-                    conciergeChat,
-                });
-            } catch (error) {
-                Log.warn('[useAutoCreateSubmitWorkspace] Error completing onboarding', {error});
+            if (shouldCompleteOnboarding) {
+                try {
+                    await completeOnboarding({
+                        engagementChoice: CONST.ONBOARDING_CHOICES.EMPLOYER,
+                        onboardingMessage: onboardingMessages[CONST.ONBOARDING_CHOICES.EMPLOYER],
+                        firstName,
+                        lastName,
+                        adminsChatReportID: newAdminsChatReportID,
+                        onboardingPolicyID: newPolicyID,
+                        introSelected,
+                        isSelfTourViewed,
+                        conciergeChat,
+                    });
+                } catch (error) {
+                    // Swallow onboarding completion failures so a network error doesn't block workspace
+                    // creation or the follow-up navigation; the optimistic Onyx data is already applied.
+                    // Still log so the failure remains diagnosable.
+                    Log.warn('[useAutoCreateSubmitWorkspace] Error completing onboarding', {error});
+                }
             }
 
             setOnboardingAdminsChatReportID();

src/languages/de.ts

@@ -10060,6 +10060,18 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
             chat: 'Bei jeder Ausgabe chatten, um Fragen schnell zu klären',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Möchtest du einen KOSTENLOSEN Mitarbeitertarif?',
+        description: 'Warte nicht, bis dein Unternehmen Expensify einführt. Wir haben einen kostenlosen Tarif nur für dich entwickelt:',
+        confirmText: 'Kostenlosen Tarif holen',
+        dismissText: 'Nein, danke',
+        features: {
+            getReimbursed: 'Schneller erstattet werden – direkt in Expensify',
+            buildReports: 'Erstelle Ausgabenberichte in Sekunden',
+            categorize: 'Kategorisiere deine Ausgaben',
+            inviteBoss: 'Lade deinen Chef ein, wenn du bereit bist',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>Beginne <strong>hier!</strong></tooltip>',
         saveSearchTooltip: '<tooltip><strong>Benenne deine gespeicherten Suchen um</strong> – hier!</tooltip>',

src/languages/en.ts

@@ -10171,6 +10171,18 @@ const translations = {
             chat: 'Chat on any expense to resolve questions quickly',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Want a FREE employee plan?',
+        description: "Don't wait for your company to get Expensify. We built a free plan just for you:",
+        confirmText: 'Get the free plan',
+        dismissText: 'No thanks',
+        features: {
+            getReimbursed: 'Get reimbursed faster, right in Expensify',
+            buildReports: 'Build expense reports in seconds',
+            categorize: 'Categorize your expenses',
+            inviteBoss: "Invite your boss when you're ready",
+        },
+    },
     aiFeaturesPromoModal: {
         subtitle: 'New to Concierge AI',
         confirmText: "Let's go!",

src/languages/es.ts

@@ -10208,6 +10208,18 @@ El plan Controlar empieza en 9 $ por miembro activo al mes.`,
             chat: 'Chatea en tus gastos para resolver cualquier duda rápidamente.',
         },
     },
+    submitPlanWelcomeModal: {
+        title: '¿Quieres un plan de empleado GRATIS?',
+        description: 'No esperes a que tu empresa use Expensify. Creamos un plan gratuito solo para ti:',
+        confirmText: 'Obtener el plan gratuito',
+        dismissText: 'No, gracias',
+        features: {
+            getReimbursed: 'Recibe tus reembolsos más rápido, directamente en Expensify',
+            buildReports: 'Crea informes de gastos en segundos',
+            categorize: 'Clasifica tus gastos',
+            inviteBoss: 'Invita a tu jefe cuando estés listo',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>¡Comienza <strong>aquí</strong>!</tooltip>',
         saveSearchTooltip: '<tooltip><strong>Renombra tus búsquedas guardadas</strong> aquí</tooltip>',

src/languages/fr.ts

@@ -10094,6 +10094,18 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
             chat: 'Discutez sur chaque dépense pour résoudre les questions rapidement',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Vous voulez un forfait employé GRATUIT ?',
+        description: "N'attendez pas que votre entreprise adopte Expensify. Nous avons créé un forfait gratuit rien que pour vous :",
+        confirmText: 'Obtenir le forfait gratuit',
+        dismissText: 'Non merci',
+        features: {
+            getReimbursed: 'Soyez remboursé plus vite, directement dans Expensify',
+            buildReports: 'Créez des rapports de dépenses en quelques secondes',
+            categorize: 'Catégorisez vos dépenses',
+            inviteBoss: 'Invitez votre responsable quand vous êtes prêt',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>Commencez <strong>ici&nbsp;!</strong></tooltip>',
         saveSearchTooltip: '<tooltip><strong>Renommez vos recherches enregistrées</strong> ici !</tooltip>',

src/languages/it.ts

@@ -10048,6 +10048,18 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
             chat: 'Chatta su qualsiasi spesa per risolvere rapidamente i dubbi',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Vuoi un piano dipendente GRATUITO?',
+        description: 'Non aspettare che la tua azienda adotti Expensify. Abbiamo creato un piano gratuito apposta per te:',
+        confirmText: 'Ottieni il piano gratuito',
+        dismissText: 'No, grazie',
+        features: {
+            getReimbursed: 'Ottieni il rimborso più velocemente, direttamente in Expensify',
+            buildReports: 'Crea report di spesa in pochi secondi',
+            categorize: 'Categorizza le tue spese',
+            inviteBoss: 'Invita il tuo capo quando sei pronto',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>Inizia <strong>qui!</strong></tooltip>',
         saveSearchTooltip: '<tooltip><strong>Rinomina qui le ricerche salvate</strong>!</tooltip>',

src/languages/ja.ts

@@ -9905,6 +9905,18 @@ ${reportName}`,
             chat: 'あらゆる経費でチャットして、疑問をすばやく解決しましょう',
         },
     },
+    submitPlanWelcomeModal: {
+        title: '無料の従業員プランはいかがですか？',
+        description: '会社がExpensifyを導入するのを待つ必要はありません。あなたのために無料プランを用意しました。',
+        confirmText: '無料プランを利用する',
+        dismissText: 'いいえ、結構です',
+        features: {
+            getReimbursed: 'Expensifyで、より早く精算を受けられます',
+            buildReports: '数秒で経費レポートを作成',
+            categorize: '経費を分類する',
+            inviteBoss: '準備ができたら上司を招待しましょう',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>まずは<strong>こちらから！</strong></tooltip>',
         saveSearchTooltip: '<tooltip>保存済み検索の<strong>名前を変更</strong>しましょう！</tooltip>',

src/languages/nl.ts

@@ -10016,6 +10016,18 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
             chat: 'Chat over elke uitgave om vragen snel op te lossen',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Wil je een GRATIS werknemersabonnement?',
+        description: 'Wacht niet tot je bedrijf Expensify gaat gebruiken. We hebben een gratis abonnement speciaal voor jou gemaakt:',
+        confirmText: 'Kies het gratis abonnement',
+        dismissText: 'Nee, bedankt',
+        features: {
+            getReimbursed: 'Krijg sneller terugbetaald, direct in Expensify',
+            buildReports: 'Maak onkostenrapporten in enkele seconden',
+            categorize: 'Categoriseer je uitgaven',
+            inviteBoss: 'Nodig je baas uit wanneer je er klaar voor bent',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>Begin <strong>hier!</strong></tooltip>',
         saveSearchTooltip: '<tooltip><strong>Hernoem hier je opgeslagen zoekopdrachten</strong>!</tooltip>',

src/languages/pl.ts

@@ -9987,6 +9987,18 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
             chat: 'Czatuj przy każdym wydatku, aby szybko rozwiązać wątpliwości',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Chcesz DARMOWY plan dla pracownika?',
+        description: 'Nie czekaj, aż Twoja firma zacznie korzystać z Expensify. Stworzyliśmy darmowy plan specjalnie dla Ciebie:',
+        confirmText: 'Wybierz darmowy plan',
+        dismissText: 'Nie, dziękuję',
+        features: {
+            getReimbursed: 'Szybciej otrzymuj zwroty kosztów, bezpośrednio w Expensify',
+            buildReports: 'Twórz raporty wydatków w kilka sekund',
+            categorize: 'Kategoryzuj swoje wydatki',
+            inviteBoss: 'Zaproś swojego szefa, gdy będziesz gotowy',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>Rozpocznij <strong>tutaj!</strong></tooltip>',
         saveSearchTooltip: '<tooltip><strong>Zmień nazwę zapisanych wyszukiwań</strong> tutaj!</tooltip>',

src/languages/pt-BR.ts

@@ -10002,6 +10002,18 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
             chat: 'Converse em qualquer despesa para resolver dúvidas rapidamente',
         },
     },
+    submitPlanWelcomeModal: {
+        title: 'Quer um plano de funcionário GRÁTIS?',
+        description: 'Não espere sua empresa adotar o Expensify. Criamos um plano gratuito só para você:',
+        confirmText: 'Obter o plano gratuito',
+        dismissText: 'Não, obrigado',
+        features: {
+            getReimbursed: 'Seja reembolsado mais rápido, direto no Expensify',
+            buildReports: 'Crie relatórios de despesas em segundos',
+            categorize: 'Categorize suas despesas',
+            inviteBoss: 'Convide seu chefe quando estiver pronto',
+        },
+    },
     productTrainingTooltip: {
         conciergeLHNGBR: '<tooltip>Comece <strong>aqui!</strong></tooltip>',
         saveSearchTooltip: '<tooltip><strong>Renomeie suas buscas salvas</strong> aqui!</tooltip>',