[Awaiting checklist] [Due for payment 2026-03-04] [$250] "Enjoying Expensify" popup for new user is not translated, displays in English

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.3.2-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: Exploratory around https://test-management.browserstack.com/projects/2219752/test-runs/TR-2966/folder/13177029/41237846/1125947101
Email or phone of affected tester (no customers): Any new account
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Macbook Pro 2023 / Sequoia 15.2
App Component: Chat Report View

Action Performed:

Precond: Users device is set to Spanish and the user is on a new never used account

1. Access www.staging.new.expensify.com
2. Create a WS
3. Go to Reports > Reports > Create an empty Report and click on it
4. Add an Expense to the report then go back to the main report page
5. Select the report and "Submit" it (You will see a popup)

Expected Result:

User expects that the "How are you liking Expensify" popup is shown in Spanish

Actual Result:

Popup is completely in English

NOTE: If you "Hold" an expense for the first time you will also get a popup for that and that popup is completely translated.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013251273266207545
• Upwork Job ID: 2013251273266207545
• Last Price Increase: 2026-01-19
• Automatic offers:
• daledah | Contributor | 110237052

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When a user's device is set to Spanish (or any non-English language), the "Enjoying New Expensify?" popup modal is displayed entirely in English instead of the user's selected language. Other popups like the "Hold expense" educational modal are correctly translated.

What is the root cause of that problem?

The root cause is in ProactiveAppReviewModal.tsx. All text strings in this component are hardcoded in English instead of using the useLocalize hook and translate() function.

App/src/components/ProactiveAppReviewModal.tsx

Lines 51 to 68 in 476358b

	<Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb3]}>Enjoying New Expensify?</Text>
	<Text style={[styles.textAlignCenter, styles.textSupporting]}>{'Let us know so we can help make your\nexpensing experience even better.'}</Text>
	</View>
	{/* Buttons */}
	<Button
	success
	style={[styles.mt5]}
	onPress={onPositive}
	pressOnEnter
	text="Yeah!"
	large
	/>
	<Button
	style={[styles.mt3, styles.noSelect]}
	onPress={onNegative}
	text="Not really"
	large

In contrast, similar modals like HoldSubmitterEducationalModal.tsx correctly use translations:

const {translate} = useLocalize();
// ...
<FeatureTrainingModal
    title={translate('iou.holdEducationalTitle')}
    description={translate('iou.whatIsHoldExplain')}
    confirmText={translate('common.buttonConfirm')}

What changes do you think we should make in order to solve the problem?

1. Add translation keys to src/languages/en.ts and all other language files:

proactiveAppReview: {
    title: 'Enjoying New Expensify?',
    description: 'Let us know so we can help make your expensing experience even better.',
    positiveButton: 'Yeah!',
    negativeButton: 'Not really',
},

2. Update ProactiveAppReviewModal.tsx to use the useLocalize hook:

import useLocalize from '@hooks/useLocalize';

function ProactiveAppReviewModal({isVisible, onPositive, onNegative, onSkip}: ProactiveAppReviewModalProps) {
    const {translate} = useLocalize();
    // ...
    
    return (
        // ...
        <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb3]}>
            {translate('proactiveAppReview.title')}
        </Text>
        <Text style={[styles.textAlignCenter, styles.textSupporting]}>
            {translate('proactiveAppReview.description')}
        </Text>
        // ...
        <Button
            text={translate('proactiveAppReview.positiveButton')}
        />
        <Button
            text={translate('proactiveAppReview.negativeButton')}
        />
    );
}

3. Add translations for all supported languages (es.ts, fr.ts, de.ts, etc.).

What alternative solutions did you explore? (Optional)

[MobileMage]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The "Enjoying Expensify" popup shown to new users displays in English regardless of the user's device language settings.

What is the root cause of that problem?

The strings in ProactiveAppReviewModal.tsx are hardcoded in English instead of using translation keys:

// src/components/ProactiveAppReviewModal.tsx
<Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb3]}>Enjoying New Expensify?</Text>
<Text style={[styles.textAlignCenter, styles.textSupporting]}>{'Let us know so we can help make your\nexpensing experience even better.'}</Text>

<Button
    text="Yeah!"
    ...
/>
<Button
    text="Not really"
    ...
/>

Similarly, ProactiveAppReviewModalManager.tsx has hardcoded Concierge messages:

const CONCIERGE_POSITIVE_MESSAGE = "Hi there! I'm glad to hear you're enjoying Expensify...";
const CONCIERGE_NEGATIVE_MESSAGE = "Hi there! I'm sorry to hear you aren't fully satisfied...";

Compare this to the Hold expense popup (HoldOrRejectEducationalModal.tsx) which correctly uses translation keys like translate('iou.reject.educationalTitle').

What changes do you think we should make in order to solve the problem?

1. Add translation keys to src/languages/en.ts:

proactiveAppReview: {
    title: 'Enjoying New Expensify?',
    subtitle: 'Let us know so we can help make your\nexpensing experience even better.',
    positiveButton: 'Yeah!',
    negativeButton: 'Not really',
    conciergePositive: "Hi there! I'm glad to hear you're enjoying Expensify. What's your favorite thing about the app? Thanks!",
    conciergeNegative: "Hi there! I'm sorry to hear you aren't fully satisfied with Expensify. What's your #1 frustration? Thanks!",
},

2. Add translations to all other language files (es.ts, de.ts, fr.ts, etc.)

3. Update ProactiveAppReviewModal.tsx to use useLocalize():

+import useLocalize from '@hooks/useLocalize';

 function ProactiveAppReviewModal({isVisible, onPositive, onNegative, onSkip}: ProactiveAppReviewModalProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     const illustrations = useMemoizedLazyIllustrations(['ToddWithPhones']);

     return (
         ...
-        <Text ...>Enjoying New Expensify?</Text>
+        <Text ...>{translate('proactiveAppReview.title')}</Text>
-        <Text ...>{'Let us know so we can help make your\nexpensing experience even better.'}</Text>
+        <Text ...>{translate('proactiveAppReview.subtitle')}</Text>

         <Button
-            text="Yeah!"
+            text={translate('proactiveAppReview.positiveButton')}
             ...
         />
         <Button
-            text="Not really"
+            text={translate('proactiveAppReview.negativeButton')}
             ...
         />

4. Update ProactiveAppReviewModalManager.tsx to use translated Concierge messages:

+import useLocalize from '@hooks/useLocalize';

 function ProactiveAppReviewModalManager() {
+    const {translate} = useLocalize();
     ...

     const handlePositive = useCallback(() => {
-        handleResponse('positive', CONCIERGE_POSITIVE_MESSAGE);
+        handleResponse('positive', translate('proactiveAppReview.conciergePositive'));
         requestStoreReview();
-    }, [handleResponse]);
+    }, [handleResponse, translate]);

What alternative solutions did you explore? (Optional)

None - this is the standard pattern used throughout the app for internationalization. The Hold expense modal uses this exact approach and is properly translated.

[duckemiah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The "Enjoying New Expensify?" popup modal that appears after a user submits their first report is displayed entirely in English, even when the user's device is set to Spanish (or any non-English language). The "Hold expense" educational modal is correctly translated, so there's an established pattern that should be followed.

What is the root cause of that problem?

There are hardcoded English strings in two files:

1. src/components/ProactiveAppReviewModal.tsx (lines 51, 52, 61, 67):

https://github.com/Expensify/App/blob/5f419d25e33/src/components/ProactiveAppReviewModal.tsx#L51-L68

<Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mb3]}>Enjoying New Expensify?</Text>
<Text style={[styles.textAlignCenter, styles.textSupporting]}>{'Let us know so we can help make your\nexpensing experience even better.'}</Text>
// ...
<Button
    // ...
    text="Yeah!"
/>
<Button
    // ...
    text="Not really"
/>

2. src/components/ProactiveAppReviewModalManager.tsx (lines 10-11):

https://github.com/Expensify/App/blob/5f419d25e33/src/components/ProactiveAppReviewModalManager.tsx#L10-L11

const CONCIERGE_POSITIVE_MESSAGE = "Hi there! I'm glad to hear you're enjoying Expensify. What's your favorite thing about the app? Thanks!";
const CONCIERGE_NEGATIVE_MESSAGE = "Hi there! I'm sorry to hear you aren't fully satisfied with Expensify. What's your #1 frustration? Thanks!";

In contrast, HoldSubmitterEducationalModal.tsx correctly uses translations:

https://github.com/Expensify/App/blob/5f419d25e33/src/components/HoldSubmitterEducationalModal.tsx#L19-L30

const {translate} = useLocalize();
// ...
<FeatureTrainingModal
    title={translate('iou.holdEducationalTitle')}
    description={translate('iou.whatIsHoldExplain')}
    confirmText={translate('common.buttonConfirm')}

What changes do you think we should make in order to solve the problem?

1. Add translation keys to src/languages/en.ts (and all other language files):

proactiveAppReview: {
    title: 'Enjoying New Expensify?',
    description: 'Let us know so we can help make your expensing experience even better.',
    positiveButton: 'Yeah!',
    negativeButton: 'Not really',
    conciergePositiveMessage: "Hi there! I'm glad to hear you're enjoying Expensify. What's your favorite thing about the app? Thanks!",
    conciergeNegativeMessage: "Hi there! I'm sorry to hear you aren't fully satisfied with Expensify. What's your #1 frustration? Thanks!",
},

2. Update ProactiveAppReviewModal.tsx to use useLocalize:

import useLocalize from '@hooks/useLocalize';

function ProactiveAppReviewModal({...}: ProactiveAppReviewModalProps) {
    const {translate} = useLocalize();
    // ...
    <Text ...>{translate('proactiveAppReview.title')}</Text>
    <Text ...>{translate('proactiveAppReview.description')}</Text>
    <Button text={translate('proactiveAppReview.positiveButton')} ... />
    <Button text={translate('proactiveAppReview.negativeButton')} ... />
}

3. Update ProactiveAppReviewModalManager.tsx to use useLocalize for the Concierge messages:

import useLocalize from '@hooks/useLocalize';

function ProactiveAppReviewModalManager() {
    const {translate} = useLocalize();
    // ...
    const handlePositive = useCallback(() => {
        handleResponse('positive', translate('proactiveAppReview.conciergePositiveMessage'));
        requestStoreReview();
    }, [handleResponse, translate]);

    const handleNegative = useCallback(() => {
        handleResponse('negative', translate('proactiveAppReview.conciergeNegativeMessage'));
    }, [handleResponse, translate]);
}

4. Add translations for all supported languages (es.ts, fr.ts, de.ts, pt-BR.ts, etc.).

What alternative solutions did you explore? (Optional)

Could add the translations directly to the components without creating a new top-level key, but grouping them under proactiveAppReview is more organized and matches the pattern used elsewhere (e.g., iou.holdEducationalTitle).

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022013251273266207545

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @jayeshmangwani (External)