[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 [email protected] 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): [email protected]
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)

[trjExpensify]

Thanks for volunteering, Sibtain! We'd love to get this PR up today if we can, @Krishna2323. Thanks!

[allroundexperts]

Proposal

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

Banner with add payment card shows up for users with a payment card already saved.

What is the root cause of that problem?

We're showing the banner regardless of the fact that if the user has added a card or not. This can be verified here.

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

We need to change the condition here to:

 else if (SubscriptionUtils.hasUserFreeTrialEnded() && !SubscriptionUtils.doesUserHavePaymentCardAdded()) {

For the case where the trial is still in progress and the card is added already, we can remove the subtitle here.

What alternative solutions did you explore? (Optional)

None

[aimane-chnaif]

@allroundexperts's proposal looks good.
🎀👀🎀 C+ reviewed

btw here link doesn't work in
> we can change the copy here

Edit: contributor fixed typo

[melvin-bot]

Triggered auto assignment to @marcaaron, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[trjExpensify]

I don't know why Melv added Marc, but Chirag is on this one already. 👍

[chiragsalian]

@allroundexperts proposal LGTM, feel free to create the PR.
For QA testing remember to mention to use onyx.merge to insert the necessary values so QA can test. For QA it'll only be testable on web and desktop for now.

[trjExpensify]

Nice work getting this to staging!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.9-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix-45503: update trial copy issues #45527

If no regressions arise, payment will be issued on 2024-07-26. 🎊

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests
• @aimane-chnaif requires payment through NewDot Manual Requests

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allroundexperts / @aimane-chnaif] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts / @aimane-chnaif] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allroundexperts / @aimane-chnaif] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allroundexperts / @aimane-chnaif] Determine if we should create a regression test for this bug.
• [@allroundexperts / @aimane-chnaif] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @allroundexperts owed $250 via NewDot
• Reviewer: @aimane-chnaif owed $250 via NewDot

BugZero Checklist (@trjExpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants//hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[trjExpensify]

👋 checklist time!

[aimane-chnaif]

I'd say this is a follow-up of new feature (free trial start, free trial end), not regression.
I don't think we need regression test for this specific issue. Maybe consider when creating comprehensive regression test for "Free trial" feature.

[melvin-bot]

@chiragsalian, @trjExpensify, @allroundexperts, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[trjExpensify]

Makes sense to me! Payment summary as follows:

• $250 to @allroundexperts for the fix
• $250 to @aimane-chnaif for the C+ review

Feel free to request. Closing!

[aimane-chnaif]

@trjExpensify I am still using upwork. Can you please reopen and sort payment? Thanks

[JmillsExpensify]

$250 approved for @allroundexperts

[trjExpensify]

Offer sent to @aimane-chnaif.

[trjExpensify]

Waiting on Aimane to accept the offer, Melvin.

[trjExpensify]

Paid Aimane, closing.