Mandatory exit survey for users going back to OldDot

package.json

@@ -279,7 +279,7 @@
     "shellcheck": "^1.1.0",
     "style-loader": "^2.0.0",
     "time-analytics-webpack-plugin": "^0.1.17",
-    "type-fest": "^3.12.0",
+    "type-fest": "^4.10.2",
     "typescript": "^5.3.2",
     "wait-port": "^0.2.9",
     "webpack": "^5.76.0",

src/CONST.ts

@@ -3166,6 +3166,16 @@ const CONST = {
     MINI_CONTEXT_MENU_MAX_ITEMS: 4,
 
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
+
+    EXIT_SURVEY: {
+        REASONS: {
+            FEATURE_NOT_AVAILABLE: 'featureNotAvailable',
+            DONT_UNDERSTAND: 'dontUnderstand',
+            PREFER_CLASSIC: 'preferClassic',
+        },
+        REASON_INPUT_ID: 'reason',
+        RESPONSE_INPUT_ID: 'response',
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/ONYXKEYS.ts

@@ -362,6 +362,10 @@ const ONYXKEYS = {
         REIMBURSEMENT_ACCOUNT_FORM_DRAFT: 'reimbursementAccountDraft',
         PERSONAL_BANK_ACCOUNT: 'personalBankAccountForm',
         PERSONAL_BANK_ACCOUNT_DRAFT: 'personalBankAccountFormDraft',
+        EXIT_SURVEY_REASON_FORM: 'exitSurveyReasonForm',
+        EXIT_SURVEY_REASON_FORM_DRAFT: 'exitSurveyReasonFormDraft',
+        EXIT_SURVEY_RESPONSE_FORM: 'exitSurveyResponseForm',
+        EXIT_SURVEY_RESPONSE_FORM_DRAFT: 'exitSurveyResponseFormDraft',
     },
 } as const;
 
@@ -549,6 +553,10 @@ type OnyxValues = {
     [ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT]: OnyxTypes.Form;
     [ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
     [ONYXKEYS.FORMS.PERSONAL_BANK_ACCOUNT_DRAFT]: OnyxTypes.PersonalBankAccount;
+    [ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM]: OnyxTypes.ExitSurveyReasonForm;
+    [ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM_DRAFT]: OnyxTypes.Form;
+    [ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM]: OnyxTypes.ExitSurveyResponseForm;
+    [ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM_DRAFT]: OnyxTypes.ExitSurveyResponseForm;
 };
 
 type OnyxKeyValue<TOnyxKey extends (OnyxKey | OnyxCollectionKey) & keyof OnyxValues> = OnyxEntry<OnyxValues[TOnyxKey]>;

src/ROUTES.ts

@@ -149,6 +149,13 @@ const ROUTES = {
     SETTINGS_STATUS_CLEAR_AFTER_DATE: 'settings/profile/status/clear-after/date',
     SETTINGS_STATUS_CLEAR_AFTER_TIME: 'settings/profile/status/clear-after/time',
 
+    SETTINGS_EXIT_SURVEY_REASON: 'settings/exit-survey/reason',
+    SETTINGS_EXIT_SURVEY_RESPONSE: {
+        route: 'settings/exit-survey/response',
+        getRoute: (reason: ValueOf<typeof CONST.EXIT_SURVEY.REASONS>) => `settings/exit-survey/response?reason=${encodeURIComponent(reason)}` as const,
+    },
+    SETTINGS_EXIT_SURVEY_CONFIRM: 'settings/exit-survey/confirm',
+
     KEYBOARD_SHORTCUTS: 'keyboard-shortcuts',
 
     NEW: 'new',

src/SCREENS.ts

@@ -80,6 +80,12 @@ const SCREENS = {
             REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud',
             CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address',
         },
+
+        EXIT_SURVEY: {
+            REASON: 'Settings_ExitSurvey_Reason',
+            RESPONSE: 'Settings_ExitSurvey_Response',
+            CONFIRM: 'Settings_ExitSurvey_Confirm',
+        },
     },
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',

src/components/Form/FormProvider.tsx

@@ -1,5 +1,5 @@
 import lodashIsEqual from 'lodash/isEqual';
-import type {ForwardedRef, MutableRefObject, ReactNode} from 'react';
+import type {FocusEvent, ForwardedRef, MutableRefObject, ReactNode} from 'react';
 import React, {createRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -273,7 +273,7 @@ function FormProvider(
                     }
                     inputProps.onPressOut?.(event);
                 },
-                onBlur: (event) => {
+                onBlur: (event: FocusEvent) => {
                     // Only run validation when user proactively blurs the input.
                     if (Visibility.isVisible() && Visibility.hasFocus()) {
                         const relatedTarget = event && 'relatedTarget' in event.nativeEvent && event?.nativeEvent?.relatedTarget;

src/components/Form/types.ts

@@ -1,9 +1,10 @@
-import type {ComponentProps, FocusEvent, Key, MutableRefObject, ReactNode, Ref} from 'react';
-import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, ViewStyle} from 'react-native';
+import type {ComponentProps, Key, MutableRefObject, ReactNode, Ref} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import type AddressSearch from '@components/AddressSearch';
 import type AmountTextInput from '@components/AmountTextInput';
 import type CheckboxWithLabel from '@components/CheckboxWithLabel';
 import type Picker from '@components/Picker';
+import type RadioButtons from '@components/RadioButtons';
 import type SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import type TextInput from '@components/TextInput';
 import type {OnyxFormKey, OnyxValues} from '@src/ONYXKEYS';
@@ -17,7 +18,7 @@ import type {BaseForm, FormValueType} from '@src/types/onyx/Form';
  * TODO: Add remaining inputs here once these components are migrated to Typescript:
  * CountrySelector | StatePicker | DatePicker | EmojiPickerButtonDropdown | RoomNameInput | ValuePicker
  */
-type ValidInputs = typeof TextInput | typeof AmountTextInput | typeof SingleChoiceQuestion | typeof CheckboxWithLabel | typeof Picker | typeof AddressSearch;
+type ValidInputs = typeof TextInput | typeof AmountTextInput | typeof SingleChoiceQuestion | typeof CheckboxWithLabel | typeof Picker | typeof AddressSearch | typeof RadioButtons;
 
 type ValueTypeKey = 'string' | 'boolean' | 'date';
 
@@ -26,13 +27,13 @@ type MeasureLayoutOnSuccessCallback = (left: number, top: number, width: number,
 type BaseInputProps = {
     shouldSetTouchedOnBlurOnly?: boolean;
     onValueChange?: (value: unknown, key: string) => void;
-    onTouched?: (event: GestureResponderEvent) => void;
+    onTouched?: (event: unknown) => void;
     valueType?: ValueTypeKey;
     value?: FormValueType;
     defaultValue?: FormValueType;
-    onBlur?: (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>) => void;
-    onPressOut?: (event: GestureResponderEvent) => void;
-    onPress?: (event: GestureResponderEvent) => void;
+    onBlur?: (event: unknown) => void;
+    onPressOut?: (event: unknown) => void;
+    onPress?: (event: unknown) => void;
     shouldSaveDraft?: boolean;
     shouldUseDefaultValue?: boolean;
     key?: Key | null | undefined;

src/components/Icon/Illustrations.ts

@@ -16,6 +16,7 @@ import Lounge from '@assets/images/product-illustrations/lounge.svg';
 import MagicCode from '@assets/images/product-illustrations/magic-code.svg';
 import MoneyEnvelopeBlue from '@assets/images/product-illustrations/money-envelope--blue.svg';
 import MoneyMousePink from '@assets/images/product-illustrations/money-mouse--pink.svg';
+import MushroomTopHat from '@assets/images/product-illustrations/mushroom-top-hat.svg';
 import PaymentHands from '@assets/images/product-illustrations/payment-hands.svg';
 import ReceiptYellow from '@assets/images/product-illustrations/receipt--yellow.svg';
 import ReceiptsSearchYellow from '@assets/images/product-illustrations/receipts-search--yellow.svg';
@@ -82,6 +83,7 @@ export {
     Mailbox,
     MoneyEnvelopeBlue,
     MoneyMousePink,
+    MushroomTopHat,
     ReceiptsSearchYellow,
     ReceiptYellow,
     RocketBlue,

src/components/RadioButtonWithLabel.tsx

@@ -54,7 +54,7 @@ function RadioButtonWithLabel({LabelComponent, style, label = '', hasError = fal
                     accessible={false}
                     onPress={onPress}
                     style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}
-                    wrapperStyle={[styles.ml3, styles.pr2, styles.w100]}
+                    wrapperStyle={[styles.flex1, styles.ml3, styles.pr2]}
                     // disable hover style when disabled
                     hoverDimmingValue={0.8}
                     pressDimmingValue={0.5}

src/components/RadioButtons.tsx

@@ -1,11 +1,15 @@
-import React, {useState} from 'react';
+import React, {forwardRef, useState} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
+import type {MaybePhraseKey} from '@libs/Localize';
+import FormHelpMessage from './FormHelpMessage';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
 type Choice = {
     label: string;
     value: string;
+    style?: StyleProp<ViewStyle>;
 };
 
 type RadioButtonsProps = {
@@ -14,31 +18,37 @@ type RadioButtonsProps = {
 
     /** Callback to fire when selecting a radio button */
     onPress: (value: string) => void;
+
+    /** Potential error text provided by a form InputWrapper */
+    errorText?: MaybePhraseKey;
 };
 
-function RadioButtons({items, onPress}: RadioButtonsProps) {
+function RadioButtons({items, onPress, errorText}: RadioButtonsProps) {
     const styles = useThemeStyles();
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
-        <View style={styles.mb3}>
-            {items.map((item) => (
-                <RadioButtonWithLabel
-                    key={item.value}
-                    isChecked={item.value === checkedValue}
-                    style={styles.mt4}
-                    onPress={() => {
-                        setCheckedValue(item.value);
-                        return onPress(item.value);
-                    }}
-                    label={item.label}
-                />
-            ))}
-        </View>
+        <>
+            <View style={styles.mb3}>
+                {items.map((item) => (
+                    <RadioButtonWithLabel
+                        key={item.value}
+                        isChecked={item.value === checkedValue}
+                        style={[styles.mt4, item.style]}
+                        onPress={() => {
+                            setCheckedValue(item.value);
+                            return onPress(item.value);
+                        }}
+                        label={item.label}
+                    />
+                ))}
+            </View>
+            {!!errorText && <FormHelpMessage message={errorText} />}
+        </>
     );
 }
 
 RadioButtons.displayName = 'RadioButtons';
 
 export type {Choice};
-export default RadioButtons;
+export default forwardRef(RadioButtons);

src/components/SingleChoiceQuestion.tsx

@@ -4,7 +4,6 @@ import React, {forwardRef} from 'react';
 import type {Text as RNText} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {MaybePhraseKey} from '@libs/Localize';
-import FormHelpMessage from './FormHelpMessage';
 import type {Choice} from './RadioButtons';
 import RadioButtons from './RadioButtons';
 import Text from './Text';
@@ -32,8 +31,8 @@ function SingleChoiceQuestion({prompt, errorText, possibleAnswers, currentQuesti
                 items={possibleAnswers}
                 key={currentQuestionIndex}
                 onPress={onInputChange}
+                errorText={errorText}
             />
-            <FormHelpMessage message={errorText} />
         </>
     );
 }

src/languages/en.ts

@@ -2136,4 +2136,28 @@ export default {
         taxRateChanged: 'Tax rate was modified',
         taxRequired: 'Missing tax rate',
     },
+    exitSurvey: {
+        header: 'Before you go',
+        reasonPage: {
+            title: "Please tell us why you're leaving",
+            subtitle: 'Before you go, please tell us why you’d like to switch to Expensify Classic.',
+        },
+        reasons: {
+            // TODO: use consts for these keys
+            [CONST.EXIT_SURVEY.REASONS.FEATURE_NOT_AVAILABLE]: "I need a feature that's only available in Expensify Classic.",
+            [CONST.EXIT_SURVEY.REASONS.DONT_UNDERSTAND]: "I don't understand how to use New Expensify.",
+            [CONST.EXIT_SURVEY.REASONS.PREFER_CLASSIC]: 'I understand how to use New Expensify, but I prefer Expensify Classic.',
+        },
+        prompts: {
+            [CONST.EXIT_SURVEY.REASONS.FEATURE_NOT_AVAILABLE]: "What feature do you need that isn't available in New Expensify?",
+            [CONST.EXIT_SURVEY.REASONS.DONT_UNDERSTAND]: 'What are you trying to do?',
+            [CONST.EXIT_SURVEY.REASONS.PREFER_CLASSIC]: 'Why to you prefer Expensify Classic?',
+        },
+        responsePlaceholder: 'Your response',
+        thankYou: 'Thanks for the feedback!',
+        thankYouSubtitle: 'Your responses will help us build a better product to get stuff done. Thank you so much!',
+        goToExpensifyClassic: 'Switch to Expensify Classic',
+        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.",
+    },
 } satisfies TranslationBase;

src/languages/es.ts

@@ -2624,4 +2624,28 @@ export default {
         taxRateChanged: 'La tasa de impuesto fue modificada',
         taxRequired: 'Falta la tasa de impuesto',
     },
+    exitSurvey: {
+        header: 'Antes de irte',
+        reasonPage: {
+            title: 'Dinos por qué te vas',
+            subtitle: 'Antes de irte, por favor dinos por qué te gustaría cambiarte a Expensify Classic.',
+        },
+        reasons: {
+            // TODO: use consts for these keys
+            [CONST.EXIT_SURVEY.REASONS.FEATURE_NOT_AVAILABLE]: 'Necesito una función que sólo está disponible en Expensify Classic.',
+            [CONST.EXIT_SURVEY.REASONS.DONT_UNDERSTAND]: 'No entiendo cómo usar New Expensify.',
+            [CONST.EXIT_SURVEY.REASONS.PREFER_CLASSIC]: 'Entiendo cómo usar New Expensify, pero prefiero Expensify Classic.',
+        },
+        prompts: {
+            [CONST.EXIT_SURVEY.REASONS.FEATURE_NOT_AVAILABLE]: '¿Qué función necesitas que no esté disponible en New Expensify?',
+            [CONST.EXIT_SURVEY.REASONS.DONT_UNDERSTAND]: '¿Qué estás tratando de hacer?',
+            [CONST.EXIT_SURVEY.REASONS.PREFER_CLASSIC]: '¿Por qué prefieres Expensify Classic?',
+        },
+        responsePlaceholder: 'Su respuesta',
+        thankYou: '¡Gracias por tus comentarios!',
+        thankYouSubtitle: 'Sus respuestas nos ayudarán a crear un mejor producto para hacer las cosas bien. ¡Muchas gracias!',
+        goToExpensifyClassic: 'Cambiar a Expensify Classic',
+        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.',
+    },
 } satisfies EnglishTranslation;

src/libs/API/parameters/SwitchToOldDotParams.ts

@@ -0,0 +1,9 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type SwitchToOldDotParams = {
+    reason: ValueOf<typeof CONST.EXIT_SURVEY.REASONS>;
+    surveyResponse: string;
+};
+
+export default SwitchToOldDotParams;

src/libs/API/parameters/index.ts

@@ -122,3 +122,4 @@ export type {default as ReopenTaskParams} from './ReopenTaskParams';
 export type {default as CompleteTaskParams} from './CompleteTaskParams';
 export type {default as CompleteEngagementModalParams} from './CompleteEngagementModalParams';
 export type {default as SetNameValuePairParams} from './SetNameValuePairParams';
+export type {default as SwitchToOldDotParams} from './SwitchToOldDotParams';