[HOLD for payment 2024-08-01] [$125] [Payment card / Subscription] Make payment card only display last four digits

[blimpich]

Problem

Right now when you add a payment card to the new subscription page, it shows the 16 characters instead of just four:

It should show just the last four:

Solution

Lets fix this by only showing the last four digits in the subscription page.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a9042029c460e7a0
• Upwork Job ID: 1811455490190961117
• Last Price Increase: 2024-07-11

Issue Owner

Current Issue Owner: @CortneyOfstad / @isabelastisser

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[blimpich]

Lowering price because this is pretty straightforward string manipulation.

[blimpich]

Anyone who tests this should be able to simulate adding a test card by populating the fundList onyx key based off the types we define in the frontend, or you can add a real credit card, though know that we currently don't have a way of deleting credit cards added to the app.

[Krishna2323]

Proposal

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

[Payment card / Subscription] Make payment card only display last four digits

What is the root cause of that problem?

Value is not sliced.

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

Line 116 in c53bd5c

<Text style={styles.textStrong}>{translate('subscription.cardSection.cardEnding', {cardNumber: defaultCard?.accountData?.cardNumber})}</Text>

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

Slice the value to obtain last four digits. defaultCard?.accountData?.cardNumber.slice(-4)

fundlist can be populated for testing by using object below.

{
Card: {accountData: {addressName: 'Max', cardYear: 2029, cardMonth: 9, currency: 'USD', cardNumber: '1234567887654321', additionalData: {isBillingCard: true}}},
}

What alternative solutions did you explore? (Optional)

Result

[kabeer95]

Feature Request: Mask Payment Card Numbers on Expensify

Summary:

To enhance security and compliance, we propose masking payment card numbers on Expensify, displaying only the last four digits. This feature will provide an additional layer of protection for sensitive payment information.

Current State:

Currently, Expensify displays the full payment card number, which may pose a security risk if unauthorized access is gained.

Proposed Solution:

Implement a feature to mask payment card numbers, displaying only the last four digits. For example:

Original card number: 424242XXXXXX4242
Masked card number: ************4242
Benefits:

Enhanced Security: Masking payment card numbers reduces the risk of unauthorized access to sensitive information.
Compliance: This feature aligns with industry standards for payment card security, such as PCI-DSS.
User Trust: By protecting payment information, Expensify demonstrates a commitment to user security and trust.
Implementation:

To implement this feature, we recommend the following:

Update the payment card number display to show only the last four digits.
Store the full payment card number securely, using industry-standard encryption and access controls.
Ensure that the masked card number is displayed consistently throughout the Expensify platform.
Estimated Development Time:

We estimate 20 hours to implement this feature and mask payment card numbers on Expensify.

Priority:

We consider this feature a high priority, as it directly impacts the security and trust of Expensify users.

Please let us know if you would like to discuss this feature further or proceed with implementation

[tienifr]

Proposal

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

• Make payment card only display last four digits

What is the root cause of that problem?

• In CardSection, we display the card number with its fully 16 digits in two components like the image below:

In card title:

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

Line 116 in 7255ab5

<Text style={styles.textStrong}>{translate('subscription.cardSection.cardEnding', {cardNumber: defaultCard?.accountData?.cardNumber})}</Text>

In card billing status:

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

Lines 84 to 192 in 7255ab5

	<SubscriptionBillingBanner
	title={billingStatus.title}
	subtitle={billingStatus.subtitle}
	isError={billingStatus.isError}
	icon={billingStatus.icon}
	rightIcon={billingStatus.rightIcon}
	onRightIconPress={handleBillingBannerClose}
	rightIconAccessibilityLabel={translate('common.close')}
	/>
	);
	}
	return (
	<>
	<Section
	title={translate('subscription.cardSection.title')}
	subtitle={sectionSubtitle}
	isCentralPane
	titleStyles={styles.textStrong}
	subtitleMuted
	banner={BillingBanner}
	>
	<View style={[styles.mt8, styles.mb3, styles.flexRow]}>
	{!isEmptyObject(defaultCard?.accountData) && (
	<View style={[styles.flexRow, styles.flex1, styles.gap3]}>
	<Icon
	src={Expensicons.CreditCard}
	additionalStyles={styles.subscriptionAddedCardIcon}
	fill={theme.icon}
	medium
	/>
	<View style={styles.flex1}>
	<Text style={styles.textStrong}>{translate('subscription.cardSection.cardEnding', {cardNumber: defaultCard?.accountData?.cardNumber})}</Text>
	<Text style={styles.mutedNormalTextLabel}>
	{translate('subscription.cardSection.cardInfo', {
	name: defaultCard?.accountData?.addressName,
	expiration: `${cardMonth} ${defaultCard?.accountData?.cardYear}`,
	currency: defaultCard?.accountData?.currency,
	})}
	</Text>
	</View>
	<CardSectionActions />
	</View>
	)}
	</View>
	{isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}
	{billingStatus?.isRetryAvailable !== undefined && (
	<Button
	text={translate('subscription.cardSection.retryPaymentButton')}
	isDisabled={isOffline || !billingStatus?.isRetryAvailable}
	isLoading={subscriptionRetryBillingStatusPending}
	onPress={handleRetryPayment}
	style={[styles.w100, styles.mt5]}
	large
	/>
	)}
	{!!account?.hasPurchases && (
	<MenuItem
	shouldShowRightIcon
	icon={Expensicons.History}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	title={translate('subscription.cardSection.viewPaymentHistory')}
	titleStyle={styles.textStrong}
	style={styles.mt5}
	onPress={() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL))}
	hoverAndPressStyle={styles.hoveredComponentBG}
	/>
	)}
	{!!(subscriptionPlan && account?.isEligibleForRefund) && (
	<MenuItem
	shouldShowRightIcon
	icon={Expensicons.Bill}
	wrapperStyle={styles.sectionMenuItemTopDescription}
	title={translate('subscription.cardSection.requestRefund')}
	titleStyle={styles.textStrong}
	disabled={isOffline}
	onPress={() => setIsRequestRefundModalVisible(true)}
	/>
	)}
	</Section>
	{account?.isEligibleForRefund && (
	<ConfirmModal
	title={translate('subscription.cardSection.requestRefund')}
	isVisible={isRequestRefundModalVisible}
	onConfirm={requestRefund}
	onCancel={() => setIsRequestRefundModalVisible(false)}
	prompt={
	<>
	<Text style={styles.mb4}>{translate('subscription.cardSection.requestRefundModal.phrase1')}</Text>
	<Text>{translate('subscription.cardSection.requestRefundModal.phrase2')}</Text>
	</>
	}
	confirmText={translate('subscription.cardSection.requestRefundModal.confirm')}
	cancelText={translate('common.cancel')}
	danger
	/>
	)}
	</>
	);
	}
	CardSection.displayName = 'CardSection';
	export default CardSection;

with the subtitle is from:

App/src/pages/settings/Subscription/CardSection/utils.ts

Line 74 in 7255ab5

subtitle: translate('subscription.billingBanner.billingDisputePending.subtitle', {amountOwed, cardEnding}),

App/src/pages/settings/Subscription/CardSection/utils.ts

Line 82 in 7255ab5

subtitle: translate('subscription.billingBanner.cardAuthenticationRequired.subtitle', {cardEnding}),

with cardEnding is from:

App/src/pages/settings/Subscription/CardSection/utils.ts

Line 27 in 7255ab5

const cardEnding = accountData?.cardNumber ?? '';

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

• We should update:
  

  App/src/pages/settings/Subscription/CardSection/utils.ts

  Line 27 in 7255ab5

  const cardEnding = accountData?.cardNumber ?? '';

  
  to:

    const cardEnding = (accountData?.cardNumber ?? '')?.slice(-4);

and

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

Line 116 in 7255ab5

<Text style={styles.textStrong}>{translate('subscription.cardSection.cardEnding', {cardNumber: defaultCard?.accountData?.cardNumber})}</Text>

to:

                                <Text style={styles.textStrong}>{getPaymentMethodDescription(defaultCard?.accountType, defaultCard?.accountData)}</Text>

What alternative solutions did you explore? (Optional)

Result:

[sobitneupane]

Thanks for the proposal everyone.

Proposal from @tienifr looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @blimpich is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[tienifr]

@blimpich Based on comment, to test this issue, I just need to:

simulate adding a test card by populating the fundList onyx key based off the types we define in the frontend

without:

add a real credit card

right?

[blimpich]

Yes that should be fine 👍

[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.11-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: only display last 4 digits #45598

If no regressions arise, payment will be issued on 2024-08-01. 🎊

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

• @sobitneupane requires payment through NewDot Manual Requests
• @tienifr 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:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
• [@sobitneupane] 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:
• [@sobitneupane] 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:
• [@sobitneupane] Determine if we should create a regression test for this bug.
• [@sobitneupane] 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.
• [@CortneyOfstad / @isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[isabelastisser]

I'm back and taking this back. Thanks, @CortneyOfstad !

[isabelastisser]

Not overdue.

[isabelastisser]

Hey @sobitneupane, please complete the BZ list above. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @sobitneupane owed $250 via NewDot
• Reviewer: @tienifr owed $250 via NewDot

BugZero Checklist (@isabelastisser)

• 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/1811455490190961117/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[sobitneupane]

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:

• [@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#44072

• [@sobitneupane] 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:

#44072 (comment)

• [@sobitneupane] 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:

Not required.

• [@sobitneupane] Determine if we should create a regression test for this bug.

Yes.

• [@sobitneupane] 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.

#45309 (comment)

[sobitneupane]

Regression Test Proposal:

• Go to /settings/subscription.
• Add a new card if there is no.
• Verify card title displays only last four digits of your card.

Do we agree 👍 or 👎

[isabelastisser]

@blimpich, can you please review the regression test above? Thanks!

[isabelastisser]

Payment summary:

C+ review @sobitneupane owed $250 via NewDot
Contributor @tienifr owed $250 via NewDot

[isabelastisser]

All set.

[garrettmknight]

$250 approved for @sobitneupane based on this summary.

[garrettmknight]

$250 approved for @tienifr