[HOLD for payment 2024-07-26] [Free trial] Update/Remove the Free banner when a payment card is added during a trial or after a trial has ended

[MitchExpensify]

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.0.7-4
Reproducible in staging?: yes
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): wardmi@tcd.ie
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @MitchExpensify
Slack conversation: Internal: https://expensify.slack.com/archives/C036QM0SLJK/p1721148411167389

Action Performed:

Adding a payment card after the free trial has ended:

1. Add a payment card on an account that has ended its trial
2. Go to https://staging.new.expensify.com/settings/subscription

Adding a payment card during a free trial:

1. Create a workspace on a new account
2. Go to https://staging.new.expensify.com/settings/subscription

Expected Result:

Adding a payment card after the free trial has ended:

• The free trial banner should be completely removed.

Adding a card during a free trial:

• Remove the subtitle in the banner
• Make sure the copy under “Payment” is updated to the one used when a payment card is on file.

Actual Result:

Adding a payment card after the free trial has ended:

• There is a free banner with "add payment card" prompt showing to users who've added a payment card already.

Adding a card during a free trial:

• The subtitle still appears prompting people to add a payment card when they already have.

Workaround:

Ignore the messaging :)

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[Krishna2323]

Proposal

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

[Free trial] Free banner with "add payment card" prompt showing to users with a payment card saved

What is the root cause of that problem?

The subtitle in TrialStartedBillingBanner and TrialEndedBillingBanner is always shown even when the default card is present.

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

Lines 75 to 94 in 28a9a37

	let BillingBanner: React.ReactNode | undefined;
	if (CardSectionUtils.shouldShowPreTrialBillingBanner()) {
	BillingBanner = <PreTrialBillingBanner />;
	} else if (SubscriptionUtils.isUserOnFreeTrial()) {
	BillingBanner = <TrialStartedBillingBanner />;
	} else if (SubscriptionUtils.hasUserFreeTrialEnded()) {
	BillingBanner = <TrialEndedBillingBanner />;
	} else if (billingStatus) {
	BillingBanner = (
	<SubscriptionBillingBanner
	title={billingStatus.title}
	subtitle={billingStatus.subtitle}
	isError={billingStatus.isError}
	icon={billingStatus.icon}
	rightIcon={billingStatus.rightIcon}
	onRightIconPress={handleBillingBannerClose}
	rightIconAccessibilityLabel={translate('common.close')}
	/>
	);
	}

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

We should pass a prop in those component to hide the subtitle or to show a different subtitle (we need to create) when billingStatus or !isEmptyObject(defaultCard?.accountData) is true.

New info title and subtitle can be added or can be used from here:

App/src/languages/en.ts

Lines 3982 to 4045 in 5b35a06

	billingBanner: {
	policyOwnerAmountOwed: {
	title: 'Your payment info is outdated',
	subtitle: ({date}) => `Update your payment card by ${date} to continue using all of your favorite features.`,
	},
	policyOwnerAmountOwedOverdue: {
	title: 'Your payment info is outdated',
	subtitle: 'Please update your payment information.',
	},
	policyOwnerUnderInvoicing: {
	title: 'Your payment info is outdated',
	subtitle: ({date}) => `Your payment is past due. Please pay your invoice by ${date} to avoid service interruption.`,
	},
	policyOwnerUnderInvoicingOverdue: {
	title: 'Your payment info is outdated',
	subtitle: 'Your payment is past due. Please pay your invoice.',
	},
	billingDisputePending: {
	title: 'Your card couldn’t be charged',
	subtitle: ({amountOwed, cardEnding}) =>
	`You disputed the ${amountOwed} charge on the card ending in ${cardEnding}. Your account will be locked until the dispute is resolved with your bank.`,
	},
	cardAuthenticationRequired: {
	title: 'Your card couldn’t be charged',
	subtitle: ({cardEnding}) =>
	`Your payment card hasn’t been fully authenticated. Please complete the authentication process to activate your payment card ending in ${cardEnding}.`,
	},
	insufficientFunds: {
	title: 'Your card couldn’t be charged',
	subtitle: ({amountOwed}) =>
	`Your payment card was declined due to insufficient funds. Please retry or add a new payment card to clear your ${amountOwed} outstanding balance.`,
	},
	cardExpired: {
	title: 'Your card couldn’t be charged',
	subtitle: ({amountOwed}) => `Your payment card expired. Please add a new payment card to clear your ${amountOwed} outstanding balance.`,
	},
	cardExpireSoon: {
	title: 'Your card is expiring soon',
	subtitle: 'Your payment card will expire at the end of this month. Click the three-dot menu below to update it and continue using all your favorite features.',
	},
	retryBillingSuccess: {
	title: 'Success!',
	subtitle: 'Your card has been billed successfully.',
	},
	retryBillingError: {
	title: 'Your card couldn’t be charged',
	subtitle: 'Before retrying, please call your bank directly to authorize Expensify charges and remove any holds. Otherwise, try adding a different payment card.',
	},
	cardOnDispute: ({amountOwed, cardEnding}) =>
	`You disputed the ${amountOwed} charge on the card ending in ${cardEnding}. Your account will be locked until the dispute is resolved with your bank.`,
	preTrial: {
	title: 'Start a free trial',
	subtitle: 'Almost there! Just complete your ',
	subtitleLink: 'setup checklist.',
	},
	trialStarted: {
	title: ({numOfDays}) => `Free trial: ${numOfDays} ${numOfDays === 1 ? 'day' : 'days'} left!`,
	subtitle: 'Add a payment card to continue using all of your favorite features.',
	},
	trialEnded: {
	title: 'Your free trial has ended',
	subtitle: 'Add a payment card to continue using all of your favorite features.',
	},
	},

What alternative solutions did you explore? (Optional)

We can create a new banner for showing when payment card is already added. We should also change the message and title according to if the trail has ended or started.

We might also want to change messages in PreTrialBillingBanner when card is there.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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