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

[No QA] Fix/52558 fix card name and images #52735

Merged
merged 22 commits into from
Nov 25, 2024
Merged

[No QA] Fix/52558 fix card name and images #52735

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
ab54754
fix: display default card name as a fallback
koko57 Nov 15, 2024
15e2819
fix: show default name on card details page
koko57 Nov 15, 2024
5d3097a
fix: revert the changes for bank cards icons, add another param to sh…
koko57 Nov 19, 2024
483e63d
fix: eslint
koko57 Nov 19, 2024
205e64c
fix: resolve conflicts
koko57 Nov 20, 2024
6c7ff9a
fix: fix images sizes
koko57 Nov 20, 2024
02f7a72
fix: typecheck
koko57 Nov 20, 2024
1cfa86f
fix: unify card icon size across the app
koko57 Nov 20, 2024
2b2b512
fix: apply the same icon styles for all the cards
koko57 Nov 21, 2024
2b53f55
fix: minor change
koko57 Nov 21, 2024
0c869f1
Merge branch 'main' into fix/52558-fix-card-name-and-images
koko57 Nov 21, 2024
45b416c
fix: border for icons
koko57 Nov 21, 2024
bd21576
fix: display proper card icon in search
koko57 Nov 22, 2024
3512757
fix: resolve conflicts
koko57 Nov 22, 2024
d3f5ddd
fix: resolve conflicts
koko57 Nov 22, 2024
cc42bbb
fix: truncate the text when the name is too long
koko57 Nov 22, 2024
c959f0d
fix: resolve conflicts
koko57 Nov 25, 2024
fd6c86c
fix: show only last 4 digits for mobile/narrow screen
koko57 Nov 25, 2024
897dad7
fix: failing tests
koko57 Nov 25, 2024
b107f40
fix: failing tests
koko57 Nov 25, 2024
100cf3e
fix: show only 4 last PAN
koko57 Nov 25, 2024
69ab559
fix: lint
koko57 Nov 25, 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
6 changes: 3 additions & 3 deletions src/components/Icon/BankIcons/index.native.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon
bankIcon.iconSize = variables.iconSizeExtraLarge;
bankIcon.iconStyles = [styles.bankIconContainer];
} else {
bankIcon.iconHeight = variables.bankCardHeight;
bankIcon.iconWidth = variables.bankCardWidth;
bankIcon.iconStyles = [styles.assignedCardsIconContainer];
bankIcon.iconHeight = variables.cardIconHeight;
bankIcon.iconWidth = variables.cardIconWidth;
bankIcon.iconStyles = [styles.cardIcon];
}

return bankIcon;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Icon/BankIcons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ export default function getBankIcon({styles, bankName, isCard = false}: BankIcon
bankIcon.iconSize = variables.iconSizeExtraLarge;
bankIcon.iconStyles = [styles.bankIconContainer];
} else {
bankIcon.iconHeight = variables.bankCardHeight;
bankIcon.iconWidth = variables.bankCardWidth;
bankIcon.iconStyles = [styles.assignedCardsIconContainer];
bankIcon.iconHeight = variables.cardIconHeight;
bankIcon.iconWidth = variables.cardIconWidth;
bankIcon.iconStyles = [styles.cardIcon];
}

return bankIcon;
Expand Down
8 changes: 8 additions & 0 deletions src/libs/CardUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,13 @@ function getSelectedFeed(lastSelectedFeed: OnyxEntry<CompanyCardFeed>, cardFeeds
return lastSelectedFeed ?? defaultFeed;
}

function getDefaultCardName(cardholder?: string) {
if (!cardholder) {
return '';
}
return `${cardholder}'s card`;
Copy link
Contributor

Choose a reason for hiding this comment

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

noting that we internally agreed to keep the c as small

}

export {
isExpensifyCard,
isCorporateCard,
Expand All @@ -378,4 +385,5 @@ export {
getCorrectStepForSelectedBank,
getCustomOrFormattedFeedName,
removeExpensifyCardFromCompanyCards,
getDefaultCardName,
};
11 changes: 6 additions & 5 deletions src/pages/settings/Wallet/PaymentMethodList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,8 +250,9 @@ function PaymentMethodList({
? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
: undefined,
icon,
iconStyles: [styles.assignedCardsIconContainer],
iconSize: variables.iconSizeExtraLarge,
iconStyles: [styles.cardIcon],
iconWidth: variables.cardIconWidth,
iconHeight: variables.cardIconHeight,
});
return;
}
Expand Down Expand Up @@ -290,9 +291,9 @@ function PaymentMethodList({
? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR
: undefined,
icon,
iconStyles: [styles.assignedCardsIconContainer],
iconWidth: variables.bankCardWidth,
iconHeight: variables.bankCardHeight,
iconStyles: [styles.cardIcon],
iconWidth: variables.cardIconWidth,
iconHeight: variables.cardIconHeight,
});
});
return assignedCardsGrouped;
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 @@ -124,7 +124,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
>
<MenuItemWithTopDescription
description={translate('workspace.moreFeatures.companyCards.cardName')}
title={customCardNames?.[cardID] ?? ''}
title={customCardNames?.[cardID] ?? CardUtils.getDefaultCardName(cardholder?.firstName)}
shouldShowRightIcon
brickRoadIndicator={card?.nameValuePairs?.errorFields?.cardTitle ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
onPress={() => Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_NAME.getRoute(policyID, cardID, bank))}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/workspace/companyCards/WorkspaceCompanyCardFeedSelectorPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@ function WorkspaceCompanyCardFeedSelectorPage({route}: WorkspaceCompanyCardFeedS
leftElement: (
<Icon
src={CardUtils.getCardFeedIcon(feed)}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
height={variables.cardIconHeight}
width={variables.cardIconWidth}
additionalStyles={[styles.mr3, styles.cardIcon]}
/>
),
}));
Expand Down
2 changes: 1 addition & 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 @@ -61,7 +61,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
<WorkspaceCompanyCardsListRow
Copy link
Contributor

Choose a reason for hiding this comment

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

@Expensify/design @mountiny

When there is no display name present, we default the card name to users email, on small screen the card number is kicked out of the view:

Screenshot 2024-11-22 at 6 04 51 PM

What should we do in such case ?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should truncate for such a long names, not much else to do here

Copy link
Contributor

Choose a reason for hiding this comment

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

Just waiting for this discussion

Copy link
Contributor

Choose a reason for hiding this comment

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

Good catch!

cardholder={personalDetails?.[item.accountID ?? '-1']}
cardNumber={CardUtils.maskCardNumber(cardName, item.bank)}
name={customCardNames?.[item.cardID] ?? ''}
name={customCardNames?.[item.cardID] ?? CardUtils.getDefaultCardName(personalDetails?.[item.accountID ?? '-1']?.firstName)}
/>
</PressableWithFeedback>
</OfflineWithFeedback>
Expand Down
5 changes: 3 additions & 2 deletions src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed}: Worksp
>
<Icon
src={CardUtils.getCardFeedIcon(selectedFeed)}
width={variables.iconSizeExtraLarge}
height={variables.iconSizeExtraLarge}
height={variables.cardIconHeight}
width={variables.cardIconWidth}
additionalStyles={styles.cardIcon}
/>
<View>
<View style={[styles.flexRow, styles.gap1]}>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import useDebouncedState from '@hooks/useDebouncedState';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CardUtils from '@libs/CardUtils';
import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
Expand Down Expand Up @@ -61,7 +62,7 @@ function AssigneeStep({policy}: AssigneeStepProps) {
currentStep: isEditing ? CONST.COMPANY_CARD.STEP.CONFIRMATION : CONST.COMPANY_CARD.STEP.CARD,
data: {
email: selectedMember,
cardName: `${memberName}'s card`,
cardName: CardUtils.getDefaultCardName(memberName),
},
isEditing: false,
});
Expand Down
10 changes: 5 additions & 5 deletions src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
leftElement: (
<Icon
src={CardUtils.getCardFeedIcon(feed)}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
height={variables.cardIconHeight}
width={variables.cardIconWidth}
additionalStyles={[styles.mr3, styles.cardIcon]}
/>
),
}));
Expand Down Expand Up @@ -110,9 +110,9 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
leftElement: (
<Icon
src={CardUtils.getCardFeedIcon(feed)}
height={variables.iconSizeExtraLarge}
height={variables.cardIconHeight}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
additionalStyles={[styles.mr3, styles.cardIcon]}
/>
),
}));
Expand Down
3 changes: 2 additions & 1 deletion src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import TextInput from '@components/TextInput';
import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CardUtils from '@libs/CardUtils';
import * as ErrorUtils from '@libs/ErrorUtils';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
Expand All @@ -27,7 +28,7 @@ function CardNameStep() {
const data = issueNewCard?.data;

const userName = PersonalDetailsUtils.getUserNameByEmail(data?.assigneeEmail ?? '', 'firstName');
const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? `${userName}'s Card` : '';
const defaultCardTitle = data?.cardType !== CONST.EXPENSIFY_CARD.CARD_TYPE.VIRTUAL ? CardUtils.getDefaultCardName(userName) : '';

const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM> => {
const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.CARD_TITLE]);
Expand Down
5 changes: 2 additions & 3 deletions src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,9 +335,8 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)}
displayInDefaultIconColor
iconStyles={styles.cardIcon}
contentFit="contain"
iconWidth={variables.iconSizeExtraLarge}
iconHeight={variables.iconSizeExtraLarge}
iconWidth={variables.cardIconWidth}
iconHeight={variables.cardIconHeight}
onPress={() => navigateToDetails(memberCard)}
shouldRemoveHoverBackground={isCardDeleted}
disabled={isCardDeleted}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/workspace/members/WorkspaceMemberNewCardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,9 @@ function WorkspaceMemberNewCardPage({route, personalDetails}: WorkspaceMemberNew
leftElement: (
<Icon
src={CardUtils.getCardFeedIcon(key)}
height={variables.iconSizeExtraLarge}
width={variables.iconSizeExtraLarge}
additionalStyles={styles.mr3}
height={variables.cardIconHeight}
width={variables.cardIconWidth}
additionalStyles={[styles.mr3, styles.cardIcon]}
/>
),
}));
Expand Down
13 changes: 2 additions & 11 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4517,17 +4517,9 @@ const styles = (theme: ThemeColors) =>
position: 'absolute',
},

assignedCardsIconContainer: {
height: variables.bankCardHeight,
width: variables.bankCardWidth,
borderRadius: 4,
overflow: 'hidden',
alignSelf: 'center',
},

bankIconContainer: {
height: variables.bankCardWidth,
width: variables.bankCardWidth,
height: variables.cardIconWidth,
width: variables.cardIconWidth,
borderRadius: 8,
overflow: 'hidden',
alignSelf: 'center',
Expand Down Expand Up @@ -5191,7 +5183,6 @@ const styles = (theme: ThemeColors) =>
cardIcon: {
overflow: 'hidden',
borderRadius: variables.cardBorderRadius,
height: variables.cardIconHeight,
alignSelf: 'center',
},

Expand Down
2 changes: 0 additions & 2 deletions src/styles/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,8 +204,6 @@ export default {
reportActionImagesDoubleImageHeight: 138,
reportActionImagesMultipleImageHeight: 110,
reportActionItemImagesMoreCornerTriangleWidth: 40,
bankCardWidth: 40,
bankCardHeight: 26,
popoverzIndex: 10000,
workspaceTypeIconWidth: 34,
sectionMargin: 16,
Expand Down
Loading