[$250] User can't turn off auto-renew in subscription settings

[m-natarajan]

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: 9.3.51-10
Reproducible in staging?: Needs Reproduction (Reproduction blocked)
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @marianaabussamra
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. As billing owner navigate to Account > Subscription
2. Observe the Annual subscription settings
3. Click on the subscription settings, see it as PPU

Expected Result:

Should see the annual subscription details, matching what they see in Expensify Classic and in the preview of the subscription settings in New Expensify

Actual Result:

See it as if it was a PPU subscription

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

The screenshots for the issue are in Slack thread

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Eskalifer1

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022040484034337317235
• Upwork Job ID: 2040484034337317235
• Last Price Increase: 2026-04-04

[MelvinBot]

Proposal

Problem: Users with a Collect (Team) plan who have an annual subscription see "Annual" in the subscription summary/preview, but when they click into the subscription settings detail view, it shows "Pay-per-use" and hides the auto-renew toggle entirely.

Root Cause: The SubscriptionSettings detail view branches on isCollect and when true, always hardcodes the PPU display regardless of the actual privateSubscription.type value from the server. The auto-renew toggle only renders in the non-Collect branch, so it's never shown for Collect users — even those with annual subscriptions.

Solution: Update the Collect branch in SubscriptionSettings (both web and native) to respect privateSubscription.type when rendering the subscription type display, and show the auto-renew toggle for Collect users who have annual subscriptions.

Code references and evidence

Preview (correct behavior): SubscriptionPlanCardActionButton.tsx:134 reads privateSubscription.type directly → shows "Annual" correctly.

Detail view (bug): SubscriptionSettings/index.tsx:232-251 — when isCollect is true, always renders subscription.details.payPerUse with the PPU icon, ignoring the actual subscription type.

Auto-renew hidden: SubscriptionSettings/index.tsx:285-312 — the toggle is inside the else branch of isCollect (line 253), so it never renders for Collect/Team plan users.

Same bug on native: SubscriptionSettings/index.native.tsx:103-119 has the identical hardcoded PPU pattern.

Likely affected users: Those who downgraded from Corporate (Control) to Team (Collect) but kept their NVP_PRIVATE_SUBSCRIPTION.type as yearly2018 (annual) on the server.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[wildan-m]

Proposal

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

Users on a Collect (Team) plan with an annual subscription see "Annual" in the subscription summary/preview card, but when they tap into the subscription settings detail view, it displays "Pay-per-use" with the PPU icon and hides the auto-renew toggle entirely — so they cannot turn off auto-renew.

What is the root cause of that problem?

There are two bugs in the SubscriptionSettings detail view:

Bug 1 — Hardcoded PPU display in the Collect branch. Both the web and native versions of SubscriptionSettings always render the "Pay per use" OptionItem when isCollect is true, completely ignoring the actual privateSubscription.type value:

App/src/pages/settings/Subscription/SubscriptionSettings/index.tsx

Lines 244 to 250 in 425edfe

	<OptionItem
	title="subscription.details.payPerUse"
	icon={illustrations.SubscriptionPPU}
	style={styles.flex0}
	isSelected
	isDisabled
	/>

App/src/pages/settings/Subscription/SubscriptionSettings/index.native.tsx

Lines 114 to 119 in 425edfe

	<OptionItem
	title="subscription.details.payPerUse"
	icon={illustrations.SubscriptionPPU}
	style={[styles.mt5, styles.flex0]}
	isDisabled
	/>

Meanwhile, the summary/preview card in SubscriptionPlanCardActionButton correctly reads privateSubscription.type to determine the label — which is why the preview shows "Annual" while the detail view shows "Pay-per-use":

App/src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCardActionButton.tsx

Lines 133 to 134 in 425edfe

	const autoIncrease = privateSubscription?.addNewUsersAutomatically ? translate('subscription.subscriptionSettings.on') : translate('subscription.subscriptionSettings.off');
	const subscriptionType = isAnnual ? translate('subscription.subscriptionSettings.annual') : translate('subscription.details.payPerUse');

Bug 2 — Auto-renew toggle hidden for Collect users. On the web version, the auto-renew and auto-increase toggles are nested inside the non-Collect (else) branch of the isCollect conditional, so they never render for Collect/Team plan users — even when the subscription is annual:

App/src/pages/settings/Subscription/SubscriptionSettings/index.tsx

Lines 285 to 312 in 425edfe

	{isAnnual ? (
	<>
	<OfflineWithFeedback pendingAction={privateSubscription?.pendingFields?.autoRenew}>
	<View style={styles.mt5}>
	<ToggleSettingOptionRow
	title={translate('subscription.subscriptionSettings.autoRenew')}
	switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
	onToggle={handleAutoRenewToggle}
	isActive={privateSubscription?.autoRenew}
	/>
	{!!autoRenewalDate && (
	<Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.renewsOn', autoRenewalDate)}</Text>
	)}
	</View>
	</OfflineWithFeedback>
	<OfflineWithFeedback pendingAction={privateSubscription?.pendingFields?.addNewUsersAutomatically}>
	<View style={styles.mt3}>
	<ToggleSettingOptionRow
	customTitle={customTitle}
	switchAccessibilityLabel={translate('subscription.subscriptionSettings.autoRenew')}
	onToggle={handleAutoIncreaseToggle}
	isActive={privateSubscription?.addNewUsersAutomatically ?? false}
	/>
	<Text style={[styles.mutedTextLabel, styles.mt2]}>{translate('subscription.subscriptionSettings.automaticallyIncrease')}</Text>
	</View>
	</OfflineWithFeedback>
	</>
	) : null}

The same applies to the subscriptionSizeSection (user count display) which is rendered at line 282 inside the non-Collect branch only — so Collect annual users also can't see their subscription size.

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

1. Fix the Collect branch OptionItem in both index.tsx and index.native.tsx — make it dynamic based on privateSubscription.type instead of hardcoding PPU. Use isAnnual (already defined) to choose the correct title and icon.

2. Move the auto-renew/auto-increase toggles outside the isCollect conditional in index.tsx (web). Currently the toggles are inside the non-Collect branch; they should render after the isCollect ternary block whenever isAnnual is true, regardless of plan type. This also avoids duplicating the toggle code in the Collect branch.

3. Move subscriptionSizeSection rendering similarly outside the conditional so Collect annual users can see their subscription size.

What alternative solutions did you explore? (Optional)

Alternative A — Duplicate the toggle code. Add the auto-renew/auto-increase toggles inside the Collect branch when isAnnual. Rejected because it creates code duplication that will drift over time — extracting the shared block is cleaner.

Alternative B — Remove the isCollect branch entirely and unify rendering. This would consolidate all plan types into a single render path with the OptionsPicker. Rejected because the Collect branch intentionally shows a simplified, read-only view (disabled OptionItem, no plan switching) with different descriptive text — that UX distinction should be preserved.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/87136-collect-annual-subscription?expand=1

[wildan-m]

Proposal

Updated

Added compare branch with implementation.

[trasnake87]

Proposal

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

Collect (Team) plan users with annual subscriptions cannot see or toggle the auto-renew setting in the subscription settings detail view — the view always displays "Pay-per-use" regardless of the actual subscription type stored in privateSubscription.type.

What is the root cause of that problem?

The root cause is in SubscriptionUtils.ts — the getSubscriptionPlanInfo function at https://github.com/Expensify/App/blob/main/src/libs/SubscriptionUtils.ts#L519-L561 already receives privateSubscriptionType as a parameter but completely discards subscription type information from its return value for Team (Collect) plans. This means there is no centralized utility that provides subscription type display data, forcing each UI consumer to independently determine it. The PaymentCard/index.tsx at https://github.com/Expensify/App/blob/main/src/pages/settings/Subscription/PaymentCard/index.tsx#L46-L54 correctly checks privateSubscription.type and hasTeam2025Pricing to display the right pricing text, but other views that lack this logic hardcode PPU for all Collect users.

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

We should extend the SubscriptionPlanInfo type and getSubscriptionPlanInfo function in SubscriptionUtils.ts to include subscription type display data, providing a single source of truth for all consumers. The subscription settings views can then use these fields instead of hardcoding PPU for Collect plans, and conditionally render the auto-renew toggle when isAnnual is true.

// In SubscriptionUtils.ts — extend the return type and function:
type SubscriptionPlanInfo = {
    title: string;
    subtitle: string;
    note: string | undefined;
    benefits: string[];
    src: IconAsset;
    description: string;
    subscriptionTypeKey: string;  // 'subscription.details.annual' or 'subscription.details.payPerUse'
    isAnnual: boolean;
};

// Inside getSubscriptionPlanInfo, compute once for both branches:
const isAnnual = privateSubscriptionType === CONST.SUBSCRIPTION.TYPE.ANNUAL;
const subscriptionTypeKey = isAnnual ? 'subscription.details.annual' : 'subscription.details.payPerUse';

// Include in both TEAM and CORPORATE return objects:
return {
    ...existingFields,
    subscriptionTypeKey,
    isAnnual,
};

This follows the same correct pattern already used in PaymentCard/index.tsx (line 46-54) where isAnnual is derived from privateSubscription.type, and ensures the subscription settings detail view uses the actual subscription type when rendering the option item and deciding whether to show the auto-renew toggle.

[trasnake87]

Contributor details
Your Expensify account email: trasnake87@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f770315ab181656

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!