[No QA] [BYOC] [Bulk Card Assignments] Release 1+2: Minor fixes

src/ROUTES.ts

@@ -16,13 +16,14 @@ import type {ReimbursementAccountStepToOpen} from './libs/ReimbursementAccountUt
 import {getUrlWithParams} from './libs/Url';
 import SCREENS from './SCREENS';
 import type {Screen} from './SCREENS';
+import type {CompanyCardFeedWithDomainID} from './types/onyx';
 import type {ConnectionName, SageIntacctMappingName} from './types/onyx/Policy';
 import type {CustomFieldType} from './types/onyx/PolicyEmployee';
 import type AssertTypesNotEqual from './types/utils/AssertTypesNotEqual';
 
 type WorkspaceCompanyCardsAssignCardParams = {
     policyID: string;
-    feed: string;
+    feed: CompanyCardFeedWithDomainID;
     cardID: string;
 };
 
@@ -2167,14 +2168,14 @@ const ROUTES = {
         },
     },
     WORKSPACE_COMPANY_CARDS_BANK_CONNECTION: {
-        route: 'workspaces/:policyID/company-cards/:bankName/bank-connection',
-        getRoute: (policyID: string | undefined, bankName: string, backTo: string) => {
+        route: 'workspaces/:policyID/company-cards/:feed/bank-connection',
+        getRoute: (policyID: string | undefined, feed: CompanyCardFeedWithDomainID, backTo?: string) => {
             if (!policyID) {
                 Log.warn('Invalid policyID is used to build the WORKSPACE_COMPANY_CARDS_BANK_CONNECTION route');
             }
 
             // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            return getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${bankName}/bank-connection`, backTo);
+            return getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${feed}/bank-connection`, backTo);
         },
     },
     WORKSPACE_COMPANY_CARDS_ADD_NEW: {
@@ -2187,12 +2188,9 @@ const ROUTES = {
         route: 'workspaces/:policyID/company-cards/select-feed',
         getRoute: (policyID: string) => `workspaces/${policyID}/company-cards/select-feed` as const,
     },
-    WORKSPACE_COMPANY_CARDS_ASSIGN_CARD: {
-        route: 'workspaces/:policyID/company-cards/:feed/assign-card/:cardID',
-
-        getRoute: (params: WorkspaceCompanyCardsAssignCardParams, backTo?: string) =>
-            // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-            getUrlWithBackToParam(`workspaces/${params.policyID}/company-cards/${encodeURIComponent(params.feed)}/assign-card/${params.cardID}`, backTo),
+    WORKSPACE_COMPANY_CARDS_BROKEN_CARD_FEED_CONNECTION: {
+        route: 'workspaces/:policyID/company-cards/:feed/broken-card-feed-connection',
+        getRoute: (policyID: string, feed: CompanyCardFeedWithDomainID) => `workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/broken-card-feed-connection` as const,
     },
     WORKSPACE_COMPANY_CARDS_ASSIGN_CARD_ASSIGNEE: {
         route: 'workspaces/:policyID/company-cards/:feed/assign-card/:cardID/assignee',
@@ -2227,10 +2225,11 @@ const ROUTES = {
             `workspaces/${params.policyID}/company-cards/${encodeURIComponent(params.feed)}/assign-card/${encodeURIComponent(params.cardID)}/invite-new-member` as const,
     },
     WORKSPACE_COMPANY_CARD_DETAILS: {
-        route: 'workspaces/:policyID/company-cards/:bank/:cardID',
+        route: 'workspaces/:policyID/company-cards/:feed/:cardID',
 
-        // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
-        getRoute: (policyID: string, cardID: string, bank: string, backTo?: string) => getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${bank}/${cardID}`, backTo),
+        getRoute: (policyID: string, cardID: string, feed: CompanyCardFeedWithDomainID, backTo?: string) =>
+            // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
+            getUrlWithBackToParam(`workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/${encodeURIComponent(cardID)}`, backTo),
     },
     WORKSPACE_COMPANY_CARD_NAME: {
         route: 'workspaces/:policyID/company-cards/:bank/:cardID/edit/name',

src/SCREENS.ts

@@ -579,8 +579,10 @@ const SCREENS = {
         INITIAL: 'Workspace_Initial',
         PROFILE: 'Workspace_Overview',
         COMPANY_CARDS: 'Workspace_CompanyCards',
-        COMPANY_CARDS_ASSIGN_CARD: 'Workspace_CompanyCards_AssignCard',
+        COMPANY_CARDS_BROKEN_CARD_FEED_CONNECTION: 'Workspace_CompanyCards_BrokenCardFeedConnection',
         COMPANY_CARDS_ASSIGN_CARD_ASSIGNEE: 'Workspace_CompanyCards_AssignCard_Assignee',
+        COMPANY_CARDS_ASSIGN_CARD_BANK_CONNECTION: 'Workspace_CompanyCards_AssignCard_Bank_Connection',
+        COMPANY_CARDS_ASSIGN_CARD_PLAID_CONNECTION: 'Workspace_CompanyCards_AssignCard_Plaid_Connection',
         COMPANY_CARDS_ASSIGN_CARD_CARD_SELECTION: 'Workspace_CompanyCards_AssignCard_Card_Selection',
         COMPANY_CARDS_ASSIGN_CARD_TRANSACTION_START_DATE: 'Workspace_CompanyCards_AssignCard_Transaction_Start_Date',
         COMPANY_CARDS_ASSIGN_CARD_CARD_NAME: 'Workspace_CompanyCards_AssignCard_Card_Name',

src/components/CardFeedIcon.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons';
+import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
+import {getCardFeedIcon, getPlaidInstitutionIconUrl, getPlaidInstitutionId} from '@libs/CardUtils';
+import type {CompanyCardFeed, CompanyCardFeedWithDomainID} from '@src/types/onyx';
+import type {IconProps} from './Icon';
+import Icon from './Icon';
+import PlaidCardFeedIcon from './PlaidCardFeedIcon';
+
+type CardFeedIconProps = {
+    isExpensifyCardFeed?: boolean;
+    selectedFeed?: CompanyCardFeedWithDomainID | undefined;
+    iconProps?: Partial<IconProps>;
+};
+
+function CardFeedIcon({iconProps, selectedFeed, isExpensifyCardFeed = false}: CardFeedIconProps) {
+    const {src, ...restIconProps} = iconProps ?? {};
+
+    const illustrations = useThemeIllustrations();
+    const companyCardFeedIcons = useCompanyCardFeedIcons();
+
+    const isPlaidCardFeed = !!getPlaidInstitutionId(selectedFeed);
+
+    if (isExpensifyCardFeed) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <ExpensifyCardFeedIcon {...iconProps} />;
+    }
+
+    if (isPlaidCardFeed) {
+        return (
+            <PlaidCardFeedIcon
+                plaidUrl={getPlaidInstitutionIconUrl(selectedFeed)}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...restIconProps}
+            />
+        );
+    }
+
+    if (!selectedFeed) {
+        return null;
+    }
+
+    return (
+        <Icon
+            src={src ?? getCardFeedIcon(selectedFeed as CompanyCardFeed, illustrations, companyCardFeedIcons)}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restIconProps}
+        />
+    );
+}
+
+function ExpensifyCardFeedIcon(iconProps: Partial<IconProps>) {
+    const {src, ...restIconProps} = iconProps ?? {};
+
+    const memoizedIllustrations = useMemoizedLazyIllustrations(['ExpensifyCardImage']);
+
+    return (
+        <Icon
+            src={memoizedIllustrations.ExpensifyCardImage}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restIconProps}
+        />
+    );
+}
+
+export default CardFeedIcon;

src/components/FeedSelector.tsx

@@ -3,11 +3,8 @@ import {View} from 'react-native';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
-import type IconAsset from '@src/types/utils/IconAsset';
 import CaretWrapper from './CaretWrapper';
 import Icon from './Icon';
-import PlaidCardFeedIcon from './PlaidCardFeedIcon';
 import {PressableWithFeedback} from './Pressable';
 import Text from './Text';
 
@@ -16,7 +13,7 @@ type Props = {
     onFeedSelect: () => void;
 
     /** Icon for the card */
-    cardIcon: IconAsset;
+    CardFeedIcon: React.ReactNode;
 
     /** Feed name */
     feedName?: string;
@@ -26,32 +23,22 @@ type Props = {
 
     /** Whether the RBR indicator should be shown */
     shouldShowRBR?: boolean;
-
-    /** Image url for plaid bank account */
-    plaidUrl?: string | null;
 };
 
-function FeedSelector({onFeedSelect, cardIcon, feedName, supportingText, shouldShowRBR = false, plaidUrl = null}: Props) {
+function FeedSelector({onFeedSelect, CardFeedIcon, feedName, supportingText, shouldShowRBR = false}: Props) {
     const styles = useThemeStyles();
     const theme = useTheme();
-    const Expensicons = useMemoizedLazyExpensifyIcons(['DotIndicator'] as const);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['DotIndicator'] as const);
+
     return (
         <PressableWithFeedback
             onPress={onFeedSelect}
             wrapperStyle={styles.flexShrink1}
             style={[styles.flexRow, styles.alignItemsCenter, styles.gap3]}
             accessibilityLabel={feedName ?? ''}
         >
-            {plaidUrl ? (
-                <PlaidCardFeedIcon plaidUrl={plaidUrl} />
-            ) : (
-                <Icon
-                    src={cardIcon}
-                    height={variables.cardIconHeight}
-                    width={variables.cardIconWidth}
-                    additionalStyles={styles.cardIcon}
-                />
-            )}
+            {CardFeedIcon}
+
             <View style={styles.flex1}>
                 <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
                     <CaretWrapper style={styles.flex1}>
@@ -64,7 +51,7 @@ function FeedSelector({onFeedSelect, cardIcon, feedName, supportingText, shouldS
                     </CaretWrapper>
                     {shouldShowRBR && (
                         <Icon
-                            src={Expensicons.DotIndicator}
+                            src={expensifyIcons.DotIndicator}
                             fill={theme.danger}
                         />
                     )}

src/components/Icon/index.tsx

@@ -188,3 +188,4 @@ function Icon({
 }
 
 export default Icon;
+export type {IconProps};

src/components/Search/FilterDropdowns/DropdownButton.tsx

@@ -44,8 +44,8 @@ type DropdownButtonProps = {
     /** Button label style */
     labelStyle?: StyleProp<TextStyle>;
 
-    /** Carret wrapper style */
-    carretWrapperStyle?: StyleProp<ViewStyle>;
+    /** Caret wrapper style */
+    caretWrapperStyle?: StyleProp<ViewStyle>;
 
     /** Wrapper style for the outer view */
     wrapperStyle?: StyleProp<ViewStyle>;
@@ -58,7 +58,7 @@ const ANCHOR_ORIGIN = {
     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
 };
 
-function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medium = false, labelStyle, innerStyles, carretWrapperStyle, wrapperStyle}: DropdownButtonProps) {
+function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medium = false, labelStyle, innerStyles, caretWrapperStyle, wrapperStyle}: DropdownButtonProps) {
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHL and narrow layout
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -138,7 +138,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
                 {...(medium ? {medium: true} : {small: true})}
             >
                 <CaretWrapper
-                    style={[styles.flex1, styles.mw100, carretWrapperStyle]}
+                    style={[styles.flex1, styles.mw100, caretWrapperStyle]}
                     caretWidth={variables.iconSizeSmall}
                     caretHeight={variables.iconSizeSmall}
                 >

src/components/Search/FilterDropdowns/SingleSelectPopup.tsx

@@ -18,7 +18,7 @@ type SingleSelectItem<T> = {
 
 type SingleSelectPopupProps<T> = {
     /** The label to show when in an overlay on mobile */
-    label: string;
+    label?: string;
 
     /** The list of all items to show up in the list */
     items: Array<SingleSelectItem<T>>;
@@ -107,9 +107,11 @@ function SingleSelectPopup<T extends string>({label, value, items, closeOverlay,
         [searchTerm, isSearchable, searchPlaceholder, translate, setSearchTerm, noResultsFound],
     );
 
+    const shouldShowLabel = isSmallScreenWidth && !!label;
+
     return (
         <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+            {shouldShowLabel && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
 
             <View style={[styles.getSelectionListPopoverHeight(options.length || 1, windowHeight, isSearchable ?? false)]}>
                 <SelectionList

src/components/Table/TableBody.tsx

@@ -83,7 +83,8 @@ function TableBody<T>({contentContainerStyle, ...props}: TableBodyProps) {
     return (
         <View
             style={styles.flex1}
-            {...props} // eslint-disable-line react/jsx-props-no-spreading
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
         >
             <FlashList<T>
                 data={filteredAndSortedData}

src/components/Table/TableFilterButtons/buildFilterItems.tsx

@@ -191,7 +191,7 @@ function createSingleSelectPopover<FilterKey extends string = string>({filterKey
 
         return (
             <SingleSelectPopup
-                label={filterKey}
+                label={filterConfig.showLabel ? filterKey : undefined}
                 items={filterConfig.options.map((option) => ({
                     text: option.label,
                     value: option.value,

src/components/Table/TableFilterButtons/index.tsx

@@ -124,7 +124,7 @@ function FilterItemRenderer({item}: FilterItemRendererProps) {
             innerStyles={[styles.gap2, shouldShowResponsiveLayout && styles.mw100]}
             wrapperStyle={shouldShowResponsiveLayout && styles.w100}
             labelStyle={styles.fontSizeLabel}
-            carretWrapperStyle={styles.gap2}
+            caretWrapperStyle={styles.gap2}
             medium
         />
     );

src/components/Table/TableHeader.tsx

@@ -120,7 +120,7 @@ function TableHeaderColumn<T, ColumnKey extends string = string>({column}: {colu
             accessible
             accessibilityLabel={column.label}
             accessibilityRole="button"
-            style={[column.styling?.labelStyles, styles.flexRow, styles.alignItemsCenter, column.styling?.flex ? {flex: column.styling.flex} : styles.flex1, column.styling?.containerStyles]}
+            style={[styles.flexRow, styles.alignItemsCenter, column.styling?.flex ? {flex: column.styling.flex} : styles.flex1, column.styling?.containerStyles]}
             onPress={() => toggleSorting(column.key)}
         >
             <Text
@@ -129,6 +129,7 @@ function TableHeaderColumn<T, ColumnKey extends string = string>({column}: {colu
                 style={[
                     styles.lh16,
                     isSortingByColumn ? styles.textMicroBoldSupporting : [styles.textMicroSupporting, styles.pr1, {marginRight: variables.iconSizeExtraSmall, marginBottom: 1, marginTop: 1}],
+                    column.styling?.labelStyles,
                 ]}
             >
                 {column.label}

src/components/Table/middlewares/filtering.ts

@@ -7,6 +7,7 @@ import type {Middleware, MiddlewareHookResult} from './types';
  * @template FilterKey - The type of filter keys.
  */
 type FilterConfigEntry = {
+    showLabel?: boolean;
     filterType?: 'multi-select' | 'single-select';
     options: Array<{label: string; value: string}>;
     default?: string;