Merge pull request #40688 from rezkiy37/fix/onboarding-fixes

Onboarding fixes

src/CONST.ts

@@ -3650,24 +3650,24 @@ const CONST = {
                     type: 'createWorkspace',
                     autoCompleted: true,
                     title: 'Create a workspace',
-                    subtitle: 'Create a workspace to track expenses, scan receipts, chat, and more.',
+                    subtitle: '<strong>Create a workspace</strong> to track expenses, scan receipts, chat, and more.',
                     message:
                         'Here’s how to create a workspace:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
                         '2. Click <strong>Workspaces</strong> > <strong>New workspace</strong>.\n' +
                         '\n' +
-                        'Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.',
+                        '<strong>Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.</strong>',
                 },
                 {
                     type: 'trackExpense',
                     autoCompleted: false,
                     title: 'Track an expense',
-                    subtitle: 'Track an expense in any currency, in just a few clicks.',
+                    subtitle: '<strong>Track an expense</strong> in any currency, in just a few clicks.',
                     message:
                         'Here’s how to track an expense:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Track expense</strong>.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
                         '4. Click <strong>Track</strong>.\n' +
@@ -3690,11 +3690,11 @@ const CONST = {
                     type: 'submitExpense',
                     autoCompleted: false,
                     title: 'Submit an expense',
-                    subtitle: 'Submit an expense by entering an amount or scanning a receipt.',
+                    subtitle: '<strong>Submit an expense</strong> by entering an amount or scanning a receipt.',
                     message:
                         'Here’s how to submit an expense:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Submit expense</strong>.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
                         '4. Add your reimburser to the request.\n' +
@@ -3705,7 +3705,7 @@ const CONST = {
                     type: 'enableWallet',
                     autoCompleted: false,
                     title: 'Enable your wallet',
-                    subtitle: 'You’ll need to enable your Expensify Wallet to get paid back. Don’t worry, it’s easy!',
+                    subtitle: 'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!',
                     message:
                         'Here’s how to set up your wallet:\n' +
                         '\n' +
@@ -3731,14 +3731,14 @@ const CONST = {
                     type: 'createWorkspace',
                     autoCompleted: true,
                     title: 'Create a workspace',
-                    subtitle: 'Create a workspace to track expenses, scan receipts, chat, and more.',
+                    subtitle: '<strong>Create a workspace</strong> to track expenses, scan receipts, chat, and more.',
                     message:
                         'Here’s how to create a workspace:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
                         '2. Click <strong>Workspaces<strong> > <strong>New workspace<strong>.\n' +
                         '\n' +
-                        'Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.',
+                        '<strong>Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.</strong>',
                 },
                 {
                     type: 'meetGuide',
@@ -3754,7 +3754,7 @@ const CONST = {
                     type: 'setupCategories',
                     autoCompleted: false,
                     title: 'Set up categories',
-                    subtitle: 'Set up categories so your team can code expenses for easy reporting.',
+                    subtitle: '<strong>Set up categories</strong> so your team can code expenses for easy reporting.',
                     message:
                         'Here’s how to set up categories:\n' +
                         '\n' +
@@ -3764,29 +3764,29 @@ const CONST = {
                         '4. Enable and disable default categories.\n' +
                         '5. Click <strong>Add categories</strong> to make your own.\n' +
                         '\n' +
-                        'For more controls like requiring a category for every expense, click Settings.',
+                        'For more controls like requiring a category for every expense, click <strong>Settings</strong>.',
                 },
                 {
                     type: 'addExpenseApprovals',
                     autoCompleted: false,
                     title: 'Add expense approvals',
-                    subtitle: 'Add expense approvals to review your team’s spend and keep it under control.',
+                    subtitle: '<strong>Add expense approvals</strong> to review your team’s spend and keep it under control.',
                     message:
                         'Here’s how to add expense approvals:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
-                        '2. Go to Workspaces > [your workspace].\n' +
+                        '2. Go to <strong>Workspaces</strong> > [your workspace].\n' +
                         '3. Click <strong>More features</strong>.\n' +
                         '4. Enable <strong>Workflows</strong>.\n' +
-                        '5. In Workflows, enable <strong>Add approvals</strong>.\n' +
+                        '5. In <strong>Workflows</strong>, enable <strong>Add approvals</strong>.\n' +
                         '\n' +
                         'You’ll be set as the expense approver. You can change this to any admin once you invite your team.',
                 },
                 {
                     type: 'inviteTeam',
                     autoCompleted: false,
                     title: 'Invite your team',
-                    subtitle: 'Invite your team to Expensify so they can start tracking expenses today.',
+                    subtitle: '<strong>Invite your team</strong> to Expensify so they can start tracking expenses today.',
                     message:
                         'Here’s how to invite your team:\n' +
                         '\n' +
@@ -3814,14 +3814,14 @@ const CONST = {
                     type: 'trackExpense',
                     autoCompleted: false,
                     title: 'Track an expense',
-                    subtitle: 'Track an expense in any currency, whether you have a receipt or not.',
+                    subtitle: '<strong>Track an expense</strong> in any currency, whether you have a receipt or not.',
                     message:
                         'Here’s how to track an expense:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Track expense</strong>.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
-                        '4. Click Track.\n' +
+                        '4. Click <strong>Track</strong>.\n' +
                         '\n' +
                         'And you’re done! Yep, it’s that easy.',
                 },
@@ -3841,27 +3841,27 @@ const CONST = {
                     type: 'startChat',
                     autoCompleted: false,
                     title: 'Start a chat',
-                    subtitle: 'Start a chat with a friend or group using their email or phone number.',
+                    subtitle: '<strong>Start a chat</strong> with a friend or group using their email or phone number.',
                     message:
                         'Here’s how to start a chat:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Start chat</strong>.\n' +
                         '3. Enter emails or phone numbers.\n' +
                         '\n' +
-                        'If any of your friends aren’t using Expensify already, they’ll be invited automatically. \n' +
+                        'If any of your friends aren’t using Expensify already, they’ll be invited automatically.\n' +
                         '\n' +
                         'Every chat will also turn into an email or text that they can respond to directly.',
                 },
                 {
                     type: 'splitExpense',
                     autoCompleted: false,
                     title: 'Split an expense',
-                    subtitle: 'Split an expense right in your chat with one or more friends.',
+                    subtitle: '<strong>Split an expense</strong> right in your chat with one or more friends.',
                     message:
                         'Here’s how to request money:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Split expense</strong>.\n' +
                         '3. Scan a receipt or enter an amount.\n' +
                         '4. Add your friend(s) to the request.\n' +
@@ -3872,7 +3872,7 @@ const CONST = {
                     type: 'enableWallet',
                     autoCompleted: false,
                     title: 'Enable your wallet',
-                    subtitle: 'You’ll need to enable your Expensify Wallet to get paid back. Don’t worry, it’s easy!',
+                    subtitle: 'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!',
                     message:
                         'Here’s how to enable your wallet:\n' +
                         '\n' +

src/components/OnboardingWelcomeVideo.tsx

@@ -148,7 +148,7 @@ function OnboardingWelcomeVideo() {
                                     success
                                     pressOnEnter
                                     onPress={closeModal}
-                                    text={translate('onboarding.welcomeVideo.button')}
+                                    text={translate('footer.getStarted')}
                                 />
                             </View>
                         </View>

src/languages/en.ts

@@ -1320,8 +1320,7 @@ export default {
     onboarding: {
         welcomeVideo: {
             title: 'Welcome to Expensify',
-            description: 'Getting paid is as easy as sending a message.',
-            button: "Let's go",
+            description: 'One app to handle all your business and personal spend in a chat. Built for your business, your team, and your friends.',
         },
         whatsYourName: "What's your name?",
         whereYouWork: 'Where do you work?',

src/languages/es.ts

@@ -314,7 +314,7 @@ export default {
             subtitleText2: 'o crea algo usando el botón',
             subtitleText3: '.',
         },
-        businessName: 'Nombre del Negocio',
+        businessName: 'Nombre de la empresa',
     },
     location: {
         useCurrent: 'Usar ubicación actual',
@@ -1319,8 +1319,7 @@ export default {
     onboarding: {
         welcomeVideo: {
             title: 'Bienvenido a Expensify',
-            description: 'Cobrar es tan fácil como enviar un mensaje.',
-            button: 'Vámonos',
+            description: 'Una aplicación para gestionar todos tus gastos de empresa y personales en un chat. Pensada para tu empresa, tu equipo y tus amigos.',
         },
         whatsYourName: '¿Cómo te llamas?',
         whereYouWork: '¿Dónde trabajas?',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -10,6 +10,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
+import getOnboardingModalScreenOptions from '@libs/Navigation/getOnboardingModalScreenOptions';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import NetworkConnection from '@libs/NetworkConnection';
@@ -160,7 +161,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const {isSmallScreenWidth} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useOnboardingLayout();
     const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils);
-    const onboardingScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(shouldUseNarrowLayout), [screenOptions, shouldUseNarrowLayout]);
+    const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(shouldUseNarrowLayout), [screenOptions, shouldUseNarrowLayout]);
+    const onboardingScreenOptions = useMemo(
+        () => getOnboardingModalScreenOptions(isSmallScreenWidth, styles, StyleUtils, shouldUseNarrowLayout),
+        [StyleUtils, isSmallScreenWidth, shouldUseNarrowLayout, styles],
+    );
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -364,12 +369,12 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     />
                     <RootStack.Screen
                         name={NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR}
-                        options={onboardingScreenOptions}
+                        options={onboardingModalScreenOptions}
                         component={WelcomeVideoModalNavigator}
                     />
                     <RootStack.Screen
                         name={NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR}
-                        options={screenOptions.fullScreen}
+                        options={onboardingScreenOptions}
                         component={OnboardingModalNavigator}
                     />
                     <RootStack.Screen

src/libs/Navigation/getOnboardingModalScreenOptions/index.native.ts

@@ -0,0 +1,9 @@
+import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
+import type {ThemeStyles} from '@styles/index';
+import type {StyleUtilsType} from '@styles/utils';
+
+function getOnboardingModalScreenOptions(isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType) {
+    return getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils).fullScreen;
+}
+
+export default getOnboardingModalScreenOptions;

src/libs/Navigation/getOnboardingModalScreenOptions/index.ts

@@ -0,0 +1,9 @@
+import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
+import type {ThemeStyles} from '@styles/index';
+import type {StyleUtilsType} from '@styles/utils';
+
+function getOnboardingModalScreenOptions(isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType, shouldUseNarrowLayout: boolean) {
+    return getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils).onboardingModalNavigator(shouldUseNarrowLayout);
+}
+
+export default getOnboardingModalScreenOptions;