Improve switch to Expensify Classic flow

Expensify · Nov 14, 2024 · 3d9c90a · 3d9c90a
1 parent 99da1ac
commit 3d9c90a
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 6 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -5848,6 +5848,12 @@ const CONST = {
             DONT_UNDERSTAND: 'dontUnderstand',
             PREFER_CLASSIC: 'preferClassic',
         },
+        BENEFIT: {
+            CHATTING_DIRECTLY: 'chattingDirectly',
+            EVERYTHING_MOBILE: 'everythingMobile',
+            TRAVEL_EXPENSE: 'travelExpense',
+        },
+        BOOK_MEETING_LINK: 'https://calendly.com/d/cqsm-2gm-fxr/expensify-product-team',
     },
 
     SESSION_STORAGE_KEYS: {

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -257,6 +257,7 @@ const ROUTES = {
     },
 
     SETTINGS_EXIT_SURVEY_REASON: 'settings/exit-survey/reason',
+    SETTINGS_EXIT_SURVERY_BOOK_CALL: 'settings/exit-survey/book-call',
     SETTINGS_EXIT_SURVEY_RESPONSE: {
         route: 'settings/exit-survey/response',
         getRoute: (reason?: ValueOf<typeof CONST.EXIT_SURVEY.REASONS>, backTo?: string) =>

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -116,6 +116,7 @@ const SCREENS = {
         },
 
         EXIT_SURVEY: {
+            BOOK_CALL: 'Settings_ExitSurvey_Book_Call',
             REASON: 'Settings_ExitSurvey_Reason',
             RESPONSE: 'Settings_ExitSurvey_Response',
             CONFIRM: 'Settings_ExitSurvey_Confirm',

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -4928,6 +4928,18 @@ const translations = {
         offlineTitle: "Looks like you're stuck here...",
         offline:
             "You appear to be offline. Unfortunately, Expensify Classic doesn't work offline, but New Expensify does. If you prefer to use Expensify Classic, try again when you have an internet connection.",
+        quickTip: 'Quick tip...',
+        quickTipSubTitle: 'You can go straight to Expensify Classic by visiting expensify.com. Bookmark it for an easy shortcut!',
+        bookACall: 'Book a call',
+        noThanks: 'No thanks',
+        bookACallTitle: 'Would you like to speak to a product manager?',
+        benefits: {
+            [CONST.EXIT_SURVEY.BENEFIT.CHATTING_DIRECTLY]: 'Chatting directly on expenses and reports',
+            [CONST.EXIT_SURVEY.BENEFIT.EVERYTHING_MOBILE]: 'Ability to do everything on mobile',
+            [CONST.EXIT_SURVEY.BENEFIT.TRAVEL_EXPENSE]: 'Travel and expense at the speed of chat',
+        },
+        bookACallTextTop: 'By switching to Expensify Classic, you will miss out on:',
+        bookACallTextBottom: 'We’d be excited to get on a call with you to understand why. You can book a call with one of our senior product managers to discuss your needs.',
     },
     listBoundary: {
         errorMessage: 'An error occurred while loading more messages.',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -5442,6 +5442,18 @@ const translations = {
         offlineTitle: 'Parece que estás atrapado aquí...',
         offline:
             'Parece que estás desconectado. Desafortunadamente, Expensify Classic no funciona sin conexión, pero New Expensify sí. Si prefieres utilizar Expensify Classic, inténtalo de nuevo cuando tengas conexión a internet.',
+        quickTip: 'Consejo rápido...',
+        quickTipSubTitle: 'Puedes ir directamente a Expensify Classic visitando expensify.com. Márcalo como favorito para tener un acceso directo fácil.',
+        bookACall: 'Reservar una llamada',
+        noThanks: 'No, gracias',
+        bookACallTitle: '¿Desea hablar con un responsable de producto?',
+        benefits: {
+            [CONST.EXIT_SURVEY.BENEFIT.CHATTING_DIRECTLY]: 'Charla directa sobre gastos e informes',
+            [CONST.EXIT_SURVEY.BENEFIT.EVERYTHING_MOBILE]: 'Posibilidad de hacerlo todo desde el móvil',
+            [CONST.EXIT_SURVEY.BENEFIT.TRAVEL_EXPENSE]: 'Viajes y gastos a la velocidad del chat',
+        },
+        bookACallTextTop: 'Al cambiar a Expensify Classic, se perderá:',
+        bookACallTextBottom: 'Nos encantaría hablar con usted para entender por qué. Puede concertar una llamada con uno de nuestros jefes de producto para hablar de sus necesidades.',
     },
     listBoundary: {
         errorMessage: 'Se ha producido un error al cargar más mensajes.',

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -373,6 +373,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/ReportCardLostPage').default,
     [SCREENS.KEYBOARD_SHORTCUTS]: () => require<ReactComponentModule>('../../../../pages/KeyboardShortcutsPage').default,
     [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: () => require<ReactComponentModule>('../../../../pages/settings/ExitSurvey/ExitSurveyReasonPage').default,
+    [SCREENS.SETTINGS.EXIT_SURVEY.BOOK_CALL]: () => require<ReactComponentModule>('../../../../pages/settings/ExitSurvey/ExitSurveyBookCall').default,
     [SCREENS.SETTINGS.EXIT_SURVEY.RESPONSE]: () => require<ReactComponentModule>('../../../../pages/settings/ExitSurvey/ExitSurveyResponsePage').default,
     [SCREENS.SETTINGS.EXIT_SURVEY.CONFIRM]: () => require<ReactComponentModule>('../../../../pages/settings/ExitSurvey/ExitSurveyConfirmPage').default,
     [SCREENS.WORKSPACE.ACCOUNTING.QUICKBOOKS_ONLINE_IMPORT]: () => require<ReactComponentModule>('../../../../pages/workspace/accounting/qbo/import/QuickbooksImportPage').default,

diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -878,6 +878,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: {
                             path: ROUTES.SETTINGS_EXIT_SURVEY_REASON,
                         },
+                        [SCREENS.SETTINGS.EXIT_SURVEY.BOOK_CALL]: {
+                            path: ROUTES.SETTINGS_EXIT_SURVERY_BOOK_CALL,
+                        },
                         [SCREENS.SETTINGS.EXIT_SURVEY.RESPONSE]: {
                             path: ROUTES.SETTINGS_EXIT_SURVEY_RESPONSE.route,
                         },

diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -777,6 +777,7 @@ type SettingsNavigatorParamList = {
     };
     [SCREENS.KEYBOARD_SHORTCUTS]: undefined;
     [SCREENS.SETTINGS.EXIT_SURVEY.REASON]: undefined;
+    [SCREENS.SETTINGS.EXIT_SURVEY.BOOK_CALL]: undefined;
     [SCREENS.SETTINGS.EXIT_SURVEY.RESPONSE]: {
         [EXIT_SURVEY_REASON_FORM_INPUT_IDS.REASON]: ValueOf<typeof CONST.EXIT_SURVEY.REASONS>;
         backTo: Routes;

diff --git a/src/pages/settings/ExitSurvey/ExitSurveyBookCall.tsx b/src/pages/settings/ExitSurvey/ExitSurveyBookCall.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import FixedFooter from '@components/FixedFooter';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@navigation/Navigation';
+import * as Link from '@userActions/Link';
+import * as Expensicons from '@src/components/Icon/Expensicons';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import ExitSurveyOffline from './ExitSurveyOffline';
+
+function ExitSurveyBookCallPage() {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const styles = useThemeStyles();
+
+    return (
+        <ScreenWrapper testID={ExitSurveyBookCallPage.displayName}>
+            <HeaderWithBackButton
+                title={translate('exitSurvey.header')}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <View style={[styles.flex1, styles.mh5]}>
+                {isOffline && <ExitSurveyOffline />}
+                {!isOffline && (
+                    <>
+                        <Text style={[styles.headerAnonymousFooter, styles.mt3]}>{translate('exitSurvey.bookACallTitle')}</Text>
+                        <Text style={[styles.mt2]}>{translate('exitSurvey.bookACallTextTop')}</Text>
+                        <View style={styles.mv4}>
+                            {Object.values(CONST.EXIT_SURVEY.BENEFIT).map((value) => {
+                                return (
+                                    <View
+                                        key={value}
+                                        style={[styles.flexRow]}
+                                    >
+                                        <View style={styles.liDot} />
+                                        <Text>{translate(`exitSurvey.benefits.${value}`)}</Text>
+                                    </View>
+                                );
+                            })}
+                        </View>
+                        <Text>{translate('exitSurvey.bookACallTextBottom')}</Text>
+                    </>
+                )}
+            </View>
+            <FixedFooter>
+                <Button
+                    style={styles.mb3}
+                    large
+                    text={translate('exitSurvey.noThanks')}
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_REASON);
+                    }}
+                    isDisabled={isOffline}
+                />
+                <Button
+                    success
+                    large
+                    iconRight={Expensicons.NewWindow}
+                    shouldShowRightIcon
+                    isContentCentered
+                    text={translate('exitSurvey.bookACall')}
+                    pressOnEnter
+                    onPress={() => {
+                        Navigation.dismissModal();
+                        Link.openExternalLink(CONST.EXIT_SURVEY.BOOK_MEETING_LINK);
+                    }}
+                    isDisabled={isOffline}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
+}
+
+ExitSurveyBookCallPage.displayName = 'ExitSurveyConfirmPage';
+
+export default ExitSurveyBookCallPage;
diff --git a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
@@ -32,7 +32,9 @@ function ExitSurveyConfirmPage({route, navigation}: ExitSurveyConfirmPageProps)
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
+    const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT);
     const [exitReason] = useOnyx(ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM, {selector: (value: OnyxEntry<ExitSurveyReasonForm>) => value?.[EXIT_SURVEY_REASON_INPUT_IDS.REASON] ?? null});
+    const shouldShowQuickTips = !tryNewDot || tryNewDot?.classicRedirect?.dismissed === true;
 
     const getBackToParam = useCallback(() => {
         if (isOffline) {
@@ -43,7 +45,7 @@ function ExitSurveyConfirmPage({route, navigation}: ExitSurveyConfirmPageProps)
         }
         return ROUTES.SETTINGS;
     }, [exitReason, isOffline]);
-    const {backTo} = route.params;
+    const {backTo} = route.params || {};
     useEffect(() => {
         const newBackTo = getBackToParam();
         if (backTo === newBackTo) {
@@ -57,7 +59,7 @@ function ExitSurveyConfirmPage({route, navigation}: ExitSurveyConfirmPageProps)
     return (
         <ScreenWrapper testID={ExitSurveyConfirmPage.displayName}>
             <HeaderWithBackButton
-                title={translate('exitSurvey.header')}
+                title={translate(shouldShowQuickTips ? 'exitSurvey.goToExpensifyClassic' : 'exitSurvey.header')}
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.mh5]}>
@@ -69,8 +71,10 @@ function ExitSurveyConfirmPage({route, navigation}: ExitSurveyConfirmPageProps)
                             width={variables.mushroomTopHatWidth}
                             height={variables.mushroomTopHatHeight}
                         />
-                        <Text style={[styles.headerAnonymousFooter, styles.mt5, styles.textAlignCenter]}>{translate('exitSurvey.thankYou')}</Text>
-                        <Text style={[styles.mt2, styles.textAlignCenter]}>{translate('exitSurvey.thankYouSubtitle')}</Text>
+                        <Text style={[styles.headerAnonymousFooter, styles.mt5, styles.textAlignCenter]}>
+                            {translate(shouldShowQuickTips ? 'exitSurvey.quickTip' : 'exitSurvey.thankYou')}
+                        </Text>
+                        <Text style={[styles.mt2, styles.textAlignCenter]}>{translate(shouldShowQuickTips ? 'exitSurvey.quickTipSubTitle' : 'exitSurvey.thankYouSubtitle')}</Text>
                     </>
                 )}
             </View>

diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
@@ -82,6 +82,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
     const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
+    const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT);
 
     const network = useNetwork();
     const theme = useTheme();
@@ -101,6 +102,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
     const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false);
 
     const freeTrialText = SubscriptionUtils.getFreeTrialText(policies);
+    const shouldOpenBookACall = tryNewDot?.classicRedirect?.dismissed === false;
 
     useEffect(() => {
         Wallet.openInitialSettingsPage();
@@ -242,7 +244,13 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                           }
                         : {
                               action() {
-                                  resetExitSurveyForm(() => Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_REASON));
+                                  resetExitSurveyForm(() => {
+                                      if (shouldOpenBookACall) {
+                                          Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVERY_BOOK_CALL);
+                                          return;
+                                      }
+                                      Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_CONFIRM.route);
+                                  });
                               },
                           }),
                 },
@@ -270,7 +278,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
                 },
             ],
         };
-    }, [styles.pt4, signOut, setInitialURL]);
+    }, [styles.pt4, signOut, setInitialURL, shouldOpenBookACall]);
 
     /**
      * Retuns JSX.Element with menu items

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -5313,6 +5313,14 @@ const styles = (theme: ThemeColors) =>
             borderColor: theme.border,
             padding: 16,
         },
+        liDot: {
+            width: 4,
+            height: 4,
+            borderRadius: 4,
+            backgroundColor: theme.text,
+            marginHorizontal: 8,
+            alignSelf: 'center',
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;