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 4 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
13 changes: 13 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,18 @@ 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.
waterim marked this conversation as resolved.
Show resolved Hide resolved
* @returns - The masked card string.
*/
function maskCardNumber(cardName = ''): string {
waterim marked this conversation as resolved.
Show resolved Hide resolved
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 +325,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)}
shouldShowRightIcon
onPress={() => editStep(CONST.COMPANY_CARD.STEP.CARD)}
/>
Expand Down
Loading