Skip to content

Update the policy expensify card table to the new style #94860

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

Merged
luacmartins merged 4 commits into from
Jun 29, 2026
Merged

Update the policy expensify card table to the new style #94860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e51d7e6
Revert "[CP Staging] Revert "Update the policy expensify card table t…
luacmartins Jun 29, 2026
49b3836
Fix frozen card message overlapping table cells
luacmartins Jun 29, 2026
23e1171
Merge branch 'main' into revert-94807-revert-93861-cmartins-ecardTable
luacmartins Jun 29, 2026
2a208d1
Move frozenByAdminPrefix translate call inside frozen guard
luacmartins Jun 29, 2026
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
1 change: 1 addition & 0 deletions src/CONST/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8364,6 +8364,7 @@ const CONST = {
BULK_ACTIONS_DROPDOWN: 'WorkspaceRules-BulkActionsDropdown',
},
EXPENSIFY_CARD: {
ROW: 'WorkspaceExpensifyCard-Row',
ISSUE_CARD_BUTTON: 'WorkspaceExpensifyCard-IssueCardButton',
MORE_DROPDOWN: 'WorkspaceExpensifyCard-MoreDropdown',
CHOOSE_SPEND_RULE: 'WorkspaceExpensifyCard-ChooseSpendRule',
Expand Down
14 changes: 12 additions & 2 deletions src/components/Table/TableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {FlashList} from '@shopify/flash-list';
import React from 'react';
import {View} from 'react-native';
import {StyleSheet, View} from 'react-native';
import type {StyleProp, ViewProps, ViewStyle} from 'react-native';
import Text from '@components/Text';
import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
Expand Down Expand Up @@ -66,6 +66,8 @@ function TableBody<DataType extends TableData>({contentContainerStyle, style, ..
addOfflineIndicatorBottomSafeAreaPadding: true,
style: shouldUseNarrowTableLayout ? styles.pb20 : styles.pb4,
});
const {minHeight: contentMinHeight} = StyleSheet.flatten(contentContainerStyle) ?? {};
const {paddingBottom: tableBodyBottomPadding} = StyleSheet.flatten(tableBodyContentContainerStyle) ?? {};

// Determine the message based on what caused the empty result
const getEmptyMessage = () => {
Expand Down Expand Up @@ -105,7 +107,15 @@ function TableBody<DataType extends TableData>({contentContainerStyle, style, ..
showsVerticalScrollIndicator={false}
maintainVisibleContentPosition={{disabled: true}}
ListEmptyComponent={isEmptyResult ? EmptyResultComponent : ListEmptyComponent}
contentContainerStyle={[filteredAndSortedData.length === 0 && styles.flexGrow1, listContentContainerStyle, tableBodyContentContainerStyle, contentContainerStyle]}
contentContainerStyle={[
filteredAndSortedData.length === 0 && styles.flexGrow1,
listContentContainerStyle,
tableBodyContentContainerStyle,
contentContainerStyle,
shouldUseNarrowTableLayout &&
typeof contentMinHeight === 'number' &&
typeof tableBodyBottomPadding === 'number' && {minHeight: contentMinHeight + tableBodyBottomPadding},
]}
keyboardShouldPersistTaps="handled"
{...restListProps}
/>
Expand Down
6 changes: 6 additions & 0 deletions src/components/Table/TableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {

/** Custom element to render in place of the selection checkbox (e.g. a lock icon for non-selectable rows) */
checkboxReplacementElement?: React.ReactNode;

/** Optional content rendered below the row grid */
Comment thread
luacmartins marked this conversation as resolved.
rowFooter?: React.ReactNode;
};

export default function TableRow({
Expand All @@ -62,6 +65,7 @@ export default function TableRow({
onPress,
offlineWithFeedback,
checkboxReplacementElement,
rowFooter,
...props
}: TableRowProps) {
useSkeletonSpan('TableRowSkeleton', skeletonReasonAttributes);
Expand Down Expand Up @@ -249,6 +253,8 @@ export default function TableRow({
</View>
)}

{rowFooter}

{!!offlineWithFeedback?.errors && (
<ErrorMessageRow
errors={offlineWithFeedback.errors}
Expand Down
189 changes: 189 additions & 0 deletions src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
import React from 'react';
import {View} from 'react-native';
import Avatar from '@components/Avatar';
import Icon from '@components/Icon';
import {useSession} from '@components/OnyxListItemProvider';
import Table from '@components/Table';
import Text from '@components/Text';
import TextWithTooltip from '@components/TextWithTooltip';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import {getTranslationKeyForLimitType} from '@libs/CardUtils';
import {convertToShortDisplayString} from '@libs/CurrencyUtils';
import DateUtils from '@libs/DateUtils';
import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type {WorkspaceExpensifyCardTableRowData} from '.';

type WorkspaceExpensifyCardsTableRowProps = {
/** Data about the Expensify card */
item: WorkspaceExpensifyCardTableRowData;

/** The index of the row relative to all other rows */
rowIndex: number;

/** Whether to use narrow table row layout */
shouldUseNarrowTableLayout: boolean;
};

export default function WorkspaceExpensifyCardsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: WorkspaceExpensifyCardsTableRowProps) {
const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'FallbackAvatar', 'FreezeCard']);
const styles = useThemeStyles();
const {translate} = useLocalize();
const theme = useTheme();
const session = useSession();

const cardholderName = getDisplayNameOrDefault(item.cardholder);
const cardType = item.isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical');
const limitTypeLabel = translate(getTranslationKeyForLimitType(item.limitType));
const formattedLimit = convertToShortDisplayString(item.limit, item.currency);
const formattedFrozenDate = item.frozenDate ? DateUtils.formatWithUTCTimeZone(item.frozenDate, CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT) : '';
let frozenByText: string | undefined;
if (formattedFrozenDate) {
if (item.frozenByAccountID === session?.accountID) {
frozenByText = translate('cardPage.youFroze', {date: formattedFrozenDate});
} else {
const frozenByAdminPrefix = translate('cardPage.frozenByAdminPrefix', {date: formattedFrozenDate});
frozenByText = `${frozenByAdminPrefix}${item.frozenByDisplayName ?? translate('common.someone')}`;
}
}

const accessibilityLabel = [cardholderName, item.name, cardType, limitTypeLabel, item.lastFourPAN, formattedLimit, frozenByText].filter(Boolean).join(', ');

const frozenByRowFooter = !!frozenByText && (
<View style={[styles.flexRow, styles.alignItemsCenter, styles.mt1]}>
<Icon
src={icons.FreezeCard}
fill={theme.icon}
small
/>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={[styles.textLabelSupporting, styles.colorMuted, styles.ml2, styles.flexShrink1, shouldUseNarrowTableLayout ? styles.lh16 : styles.textMicro]}
>
{frozenByText}
</Text>
</View>
);

return (
<Table.Row
interactive
rowIndex={rowIndex}
accessibilityLabel={accessibilityLabel}
skeletonReasonAttributes={{context: 'workspaceExpensifyCardsTableRow'}}
sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.EXPENSIFY_CARD.ROW}
offlineWithFeedback={{
errors: item.errors,
pendingAction: item.pendingAction,
shouldHideOnDelete: false,
onClose: item.onClose,
}}
rowFooter={frozenByRowFooter}
onPress={item.action}
>
{({hovered}) => (
<>
<View style={[styles.flex1, styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
<Avatar
source={item.cardholder?.avatar ?? icons.FallbackAvatar}
avatarID={item.cardholder?.accountID}
type={CONST.ICON_TYPE_AVATAR}
size={CONST.AVATAR_SIZE.DEFAULT}
/>
<View style={[styles.flex1, shouldUseNarrowTableLayout && styles.gap1]}>
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={cardholderName}
style={[styles.optionDisplayName, styles.textStrong, styles.pre]}
/>
{shouldUseNarrowTableLayout ? (
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={item.lastFourPAN}
style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
/>
) : (
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={item.name}
style={styles.textLabelSupporting}
/>
)}
</View>
</View>

{!shouldUseNarrowTableLayout && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={cardType}
/>
</View>
)}

{!shouldUseNarrowTableLayout && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={limitTypeLabel}
/>
</View>
)}

{!shouldUseNarrowTableLayout && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={item.lastFourPAN}
/>
</View>
)}

<View
style={[
shouldUseNarrowTableLayout ? styles.flexColumn : styles.flexRow,
shouldUseNarrowTableLayout ? styles.alignItemsEnd : styles.flex1,
shouldUseNarrowTableLayout ? styles.justifyContentStart : styles.alignItemsCenter,
shouldUseNarrowTableLayout ? undefined : styles.justifyContentEnd,
]}
>
<TextWithTooltip
shouldShowTooltip
numberOfLines={1}
text={formattedLimit}
/>
{shouldUseNarrowTableLayout && (
<Text
numberOfLines={1}
style={styles.textLabelSupporting}
>
{cardType}
</Text>
)}
</View>

<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd, styles.gap3]}>
<Icon
src={icons.ArrowRight}
fill={theme.icon}
additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
width={variables.iconSizeNormal}
height={variables.iconSizeNormal}
/>
</View>
</>
)}
</Table.Row>
);
}
Loading
Loading