Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Workspace Feed - update details cardName to use full name instead of 4 digits #52151

Merged
merged 7 commits into from
Nov 10, 2024
Merged

Workspace Feed - update details cardName to use full name instead of 4 digits #52151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5e626cf
update details cardName to use full name not 4 digits
waterim Nov 6, 2024
2578535
update card mask view
waterim Nov 7, 2024
8c0e0d8
Merge remote-tracking branch 'upstream/main' into feat/51912
waterim Nov 7, 2024
d04196d
update function name
waterim Nov 7, 2024
e854f83
update mask function
waterim Nov 8, 2024
6ba20e3
fix eslint
waterim Nov 8, 2024
20cbbee
Update cardName
waterim Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/libs/CardUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,21 @@ function maskCard(lastFour = ''): string {
return maskedString.replace(/(.{4})/g, '$1 ').trim();
}

/**
* Returns a masked credit card string.
* Converts given 'X' to '•' for the entire card string.
*
* @param cardName - card name with XXXX in the middle.
* @returns - The masked card string.
*/
function maskCardNumber(cardName: string): string {
if (!cardName || cardName === '') {
return '';
}
const maskedString = cardName.replace(/X/g, '•');
waterim marked this conversation as resolved.
Show resolved Hide resolved
return maskedString.replace(/(.{4})/g, '$1 ').trim();
}

/**
* Finds physical card in a list of cards
*
Expand Down Expand Up @@ -313,6 +328,7 @@ export {
getMonthFromExpirationDateString,
getYearFromExpirationDateString,
maskCard,
maskCardNumber,
getCardDescription,
findPhysicalCard,
hasDetectedFraud,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
/>
<MenuItemWithTopDescription
description={translate('workspace.moreFeatures.companyCards.cardNumber')}
title={CardUtils.maskCard(card?.lastFourPAN)}
title={CardUtils.maskCardNumber(card?.cardName ?? '')}
interactive={false}
titleStyle={styles.walletCardNumber}
/>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
const renderItem = useCallback(
({item, index}: ListRenderItemInfo<Card>) => {
const cardID = Object.keys(cardsList ?? {}).find((id) => cardsList?.[id].cardID === item.cardID);
const cardName = CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN);
return (
<OfflineWithFeedback
key={`${item.nameValuePairs?.cardTitle}_${index}`}
Expand All @@ -56,7 +57,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
>
<WorkspaceCompanyCardsListRow
cardholder={personalDetails?.[item.accountID ?? '-1']}
cardNumber={CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN)}
cardNumber={CardUtils.maskCardNumber(cardName)}
name={customCardNames?.[item.cardID] ?? ''}
/>
</PressableWithFeedback>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
const cardListOptions = Object.entries(filteredCardList).map(([cardNumber, encryptedCardNumber]) => ({
keyForList: encryptedCardNumber,
value: encryptedCardNumber,
text: cardNumber,
text: CardUtils.maskCardNumber(cardNumber),
isSelected: cardSelected === encryptedCardNumber,
leftElement: (
<Icon
Expand Down
3 changes: 2 additions & 1 deletion src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CardUtils from '@libs/CardUtils';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import Navigation from '@navigation/Navigation';
import * as CompanyCards from '@userActions/CompanyCards';
Expand Down Expand Up @@ -75,7 +76,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
/>
<MenuItemWithTopDescription
description={translate('workspace.companyCards.card')}
title={data?.cardNumber}
title={CardUtils.maskCardNumber(data?.cardNumber ?? '')}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this update makes the direct feed card look a little weird on the confirmation screen:
image
It should be CREDIT CARD...6607
Maybe in the main card list it looks weird as well.
@waterim @mountiny

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This problem is known before and we will handle it separately

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for raising, @waterim can you handle it in your next PR please?

shouldShowRightIcon
onPress={() => editStep(CONST.COMPANY_CARD.STEP.CARD)}
/>
Expand Down
Loading