[$100] Move Subscription page copy

[jamesdeanexpensify]

Background

Coming from this conversation, when we show the copy You can't make changes to your subscription in the mobile app. on the Subscription page, let's move it under the Payment section instead and replace the copy that's currently there (Add a card to pay for your Expensify subscription.)

Issue Owner

Current Issue Owner: @grgia

[melvin-bot]

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

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-26 18:58:01 UTC.

Proposal

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

Move Subscription page copy

What is the root cause of that problem?

copy replace

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

lets move this copy

App/src/languages/en.ts

Line 6751 in c1e7177

subtitle: 'Add a card to pay for your Expensify subscription.',

here to replace with current one as mention in OP

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Line 66 in c1e7177

<ReducedFunctionalityMessage />

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @samranahm Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-26 19:43:20 UTC.

Proposal

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

Move Subscription page copy

What is the root cause of that problem?

Copy replace

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

We should remove ReducedFunctionalityMessage here

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Line 66 in f54a2c1

<ReducedFunctionalityMessage />

and
We should replace the copy subscription.cardSection.subtitle here with subscription.mobileReducedFunctionalityMessage for isNative platform

App/src/pages/settings/Subscription/CardSection/CardSection.tsx

Line 84 in f54a2c1

const sectionSubtitle = defaultCard && !!nextPaymentDate ? translate('subscription.cardSection.cardNextPayment', {nextPaymentDate}) : translate('subscription.cardSection.subtitle');

alternatively we can replace the whole sectionSubtitle with mobileReducedFunctionalityMessage for native if we don't want to show nextPaymentDate if there is card but otherwise we can display both nextPaymentDate and mobileReducedFunctionalityMessage copy.

We can also remove ReducedFunctionalityMessage component as it will be unused.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N / A

What alternative solutions did you explore? (Optional)

[lorretheboy]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

I will leave it here for C+ to evaluate it. Personally, I think there is difference between my proposal with the existing one. We submit almost the same time, however, my proposal is more details and use useMemo to reduce computation. If you think it's duplicated, please let me know, I will remove right after that

Proposal

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

Move Subscription page copy

What is the root cause of that problem?

Improvement

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

Replace current code by

const platform = getPlatform();
const isMobilePlatform = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
const sectionSubtitle = useMemo(() => {
if (isMobilePlatform) {
return translate('subscription.mobileReducedFunctionalityMessage');
}
return defaultCard && !!nextPaymentDate ? translate('subscription.cardSection.cardNextPayment', {nextPaymentDate}) : translate('subscription.cardSection.subtitle');
}, [isMobilePlatform, translate, defaultCard, nextPaymentDate]);

App/src/pages/settings/Subscription/CardSection/CardSection.tsx

Line 84 in a563e5f

const sectionSubtitle = defaultCard && !!nextPaymentDate ? translate('subscription.cardSection.cardNextPayment', {nextPaymentDate}) : translate('subscription.cardSection.subtitle');

And remove this code

App/src/pages/settings/Subscription/SubscriptionSettingsPage.tsx

Line 66 in 4148ccb

<ReducedFunctionalityMessage />

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @lorretheboy Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (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.