Add bulk update start date for Company Card

src/CONST/index.ts

@@ -4838,17 +4838,17 @@ const CONST = {
         SUCCESS: 'success',
         ERROR: 'error',
         WARNING: 'warning',
+        POSITION: {
+            TOP: 'top',
+            BOTTOM_RIGHT: 'bottomRight',
+        },
         DURATION: 2000,
         DURATION_LONG: 3500,
         // Longer duration for growls with an actionable button (e.g. "View"), giving the user enough time to tap it.
         DURATION_WITH_ACTION: 6000,
         // Pixel distance used to park the growl fully offscreen before it slides in. It only needs to
         // exceed the growl's height + margins; the exact value isn't tied to a measured dimension.
         OFFSCREEN_OFFSET: 255,
-        POSITION: {
-            TOP: 'top',
-            BOTTOM_RIGHT: 'bottomRight',
-        },
     },
 
     LOCALES,

src/ROUTES.ts

@@ -4025,6 +4025,13 @@ const ROUTES = {
         getRoute: (policyID: string, cardID: string, feed: CompanyCardFeedWithDomainID) =>
             `workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/${encodeURIComponent(cardID)}/edit/transaction-start-date` as const,
     },
+    WORKSPACE_COMPANY_CARDS_BULK_EDIT_TRANSACTION_START_DATE: {
+        route: 'workspaces/:policyID/company-cards/:feed/bulk-edit/transaction-start-date',
+        getRoute: (policyID: string, feed: CompanyCardFeedWithDomainID, cardIDs?: string[]) => {
+            const cardIDsQuery = cardIDs?.length ? `?cardIDs=${encodeURIComponent(cardIDs.join(','))}` : '';
+            return `workspaces/${policyID}/company-cards/${encodeURIComponent(feed)}/bulk-edit/transaction-start-date${cardIDsQuery}` as const;
+        },
+    },
     WORKSPACE_EXPENSIFY_CARD: {
         route: 'workspaces/:policyID/expensify-card',
         getRoute: (policyID: string | undefined) => {

src/SCREENS.ts

@@ -831,6 +831,7 @@ const SCREENS = {
         COMPANY_CARD_ADD_WORK_EMAIL: 'Workspace_CompanyCard_Add_Work_Email',
         COMPANY_CARD_VERIFY_WORK_EMAIL: 'Workspace_CompanyCard_Verify_Work_Email',
         COMPANY_CARD_EDIT_TRANSACTION_START_DATE: 'Workspace_CompanyCard_Edit_Transaction_Start_Date',
+        COMPANY_CARDS_BULK_EDIT_TRANSACTION_START_DATE: 'Workspace_CompanyCards_Bulk_Edit_Transaction_Start_Date',
         DYNAMIC_COMPANY_CARD_EXPORT: 'Dynamic_Workspace_CompanyCard_Export',
         EXPENSIFY_CARD: 'Workspace_ExpensifyCard',
         DYNAMIC_EXPENSIFY_CARD_DETAILS: 'Dynamic_Workspace_ExpensifyCard_Details',

src/components/Avatar/connected/AccountAvatarWithCardFeed.tsx

@@ -1,7 +1,7 @@
 import SubscriptCardFeedAvatar from '@components/Avatar/layouts/SubscriptCardFeedAvatar';
 
 import CONST from '@src/CONST';
-import type {CardFeed} from '@src/types/onyx/CardFeeds';
+import type {CardFeedWithNumber} from '@src/types/onyx/CardFeeds';
 
 import type {ColorValue, StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -15,7 +15,7 @@ type AccountAvatarWithCardFeedProps = {
     accountID: number;
 
     /** Card feed to display as the subscript */
-    cardFeed: CardFeed;
+    cardFeed: CardFeedWithNumber;
 
     /** Size of the subscript card feed icon */
     cardFeedIconSize?: {width: number; height: number};

src/components/Avatar/layouts/SubscriptCardFeedAvatar.tsx

@@ -12,7 +12,7 @@ import {getCardFeedIcon} from '@libs/CardUtils';
 
 import variables from '@styles/variables';
 
-import type {CardFeed} from '@src/types/onyx/CardFeeds';
+import type {CardFeedWithNumber} from '@src/types/onyx/CardFeeds';
 import type {Icon as IconType} from '@src/types/onyx/OnyxCommon';
 
 import type {StyleProp, ViewStyle} from 'react-native';
@@ -28,7 +28,7 @@ type SubscriptCardFeedAvatarProps = BaseAvatarProps & {
     primaryAvatar: IconType;
 
     /** Card feed to display as the subscript */
-    cardFeed: CardFeed;
+    cardFeed: CardFeedWithNumber;
 
     cardFeedIconSize?: {width: number; height: number};
 

src/components/GrowlNotification/GrowlNotificationContainer/index.tsx

@@ -14,7 +14,11 @@ function GrowlNotificationContainer({children, progress, inactiveY, useBottomPos
     const animatedStyles = useAnimatedStyle(() => ({transform: [{translateY: inactiveY * (1 - progress.get())}]}), [inactiveY]);
 
     if (useBottomPosition) {
-        return <Animated.View style={[styles.growlNotificationContainerBottomRight, animatedStyles]}>{children}</Animated.View>;
+        return (
+            <Animated.View style={[styles.growlNotificationContainerBottomRight, shouldUseNarrowLayout && styles.pAbsolute, shouldUseNarrowLayout && styles.mwn, animatedStyles]}>
+                {children}
+            </Animated.View>
+        );
     }
 
     return (

src/components/GrowlNotification/GrowlNotificationContainer/types.ts

@@ -9,7 +9,7 @@ type GrowlNotificationContainerProps = ChildrenProps & {
     /** Pixel offset that corresponds to the current "offscreen" position for the active anchor. */
     inactiveY: number;
 
-    /** When true, anchor the growl to the bottom-right on wide screens. */
+    /** When true, position the growl at the bottom-right. */
     useBottomPosition?: boolean;
 };
 

src/components/GrowlNotification/GrowlNotificationContent.tsx

@@ -23,6 +23,7 @@ import {scheduleOnRN} from 'react-native-worklets';
 
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 import GrowlNotificationPortal from './GrowlNotificationPortal';
+import shouldUseExplicitBottomPosition from './shouldUseExplicitBottomPosition';
 
 const INACTIVE_OFFSET = CONST.GROWL.OFFSCREEN_OFFSET;
 const INACTIVE_POSITION_Y = -INACTIVE_OFFSET;
@@ -35,7 +36,7 @@ type GrowlNotificationContentProps = {
     duration: number;
     action?: GrowlAction;
 
-    /** Wide-screen anchor. Omit to keep the top anchor unless this growl has an action. */
+    /** Position where the growl is anchored */
     position?: GrowlPosition;
 
     /** Identifies this growl instance; passed back through onDismissed so the parent can ignore stale dismissals. */
@@ -67,8 +68,7 @@ function GrowlNotificationContent({bodyText, type, duration, action, position, n
     const icons = useMemoizedLazyExpensifyIcons(['Exclamation', 'Checkmark']);
 
     // Derived live so that resizing the window flips position + slide direction during display.
-    // Narrow layouts stay at the top. The bottom-right anchor is a toast the width of the sidebar on wide screens.
-    const useBottomPosition = !shouldUseNarrowLayout && (!!action || position === CONST.GROWL.POSITION.BOTTOM_RIGHT);
+    const useBottomPosition = shouldUseExplicitBottomPosition(position) || (!!action && !shouldUseNarrowLayout);
     const inactiveY = useBottomPosition ? INACTIVE_OFFSET : INACTIVE_POSITION_Y;
 
     const types: GrowlIconTypes = {

src/components/GrowlNotification/index.tsx

@@ -12,6 +12,8 @@ type GrowlContent = {
     type: GrowlType;
     duration: number;
     action?: GrowlAction;
+
+    /** Position where the growl is anchored */
     position?: GrowlPosition;
 
     /** Bumped on every show() call so identical-args re-shows still remount and re-trigger the growl. */
@@ -30,8 +32,8 @@ type GrowlNotificationProps = {
 function GrowlNotification({ref}: GrowlNotificationProps) {
     const [content, setContent] = useState<GrowlContent | null>(null);
 
-    const show = (text: string, growlType: GrowlType, duration: number, action?: GrowlAction, position?: GrowlPosition) => {
-        setContent((prev) => ({bodyText: text, type: growlType, duration, action, position, nonce: (prev?.nonce ?? 0) + 1}));
+    const show: NonNullable<GrowlRef['show']> = ({bodyText, type, duration, action, position}) => {
+        setContent((prev) => ({bodyText, type, duration, action, position, nonce: (prev?.nonce ?? 0) + 1}));
     };
 
     useImperativeHandle(ref, () => ({show}), [show]);

src/components/GrowlNotification/shouldUseExplicitBottomPosition/index.native.ts

@@ -0,0 +1,5 @@
+import type {GrowlPosition} from '@libs/Growl';
+
+const shouldUseExplicitBottomPosition: (position?: GrowlPosition) => boolean = () => false;
+
+export default shouldUseExplicitBottomPosition;

src/components/GrowlNotification/shouldUseExplicitBottomPosition/index.ts

@@ -0,0 +1,12 @@
+import type {GrowlPosition} from '@libs/Growl';
+
+import CONST from '@src/CONST';
+
+// This file is used to determine if we should use an explicit bottom position for the growl notification.
+// This is necessary for certain layouts where the growl notification may be obscured by other UI elements, such as a bottom tab bar or a floating action button.
+// By using an explicit bottom position, we can ensure that the growl notification is always visible to the user.
+function shouldUseExplicitBottomPosition(position?: GrowlPosition) {
+    return position === CONST.GROWL.POSITION.BOTTOM_RIGHT;
+}
+
+export default shouldUseExplicitBottomPosition;

src/components/SupportTicketResolvedFooter.tsx

@@ -41,7 +41,7 @@ function SupportTicketResolvedFooter({reportID, isOffline, shouldShowReopenButto
                     return;
                 }
 
-                Growl.error(translate('supportTicket.noSupportRepAvailable'));
+                Growl.error({bodyText: translate('supportTicket.noSupportRepAvailable')});
                 Navigation.goBack(undefined, {afterTransition: () => openConciergeAnywhere({forceConcierge: true})});
             })
             .catch((error: unknown) => Log.hmmm('[SupportTicketResolvedFooter] Failed to reopen support ticket', {reportID, error}))

src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableControls.tsx

@@ -17,21 +17,24 @@ import navigateToCardTransactions from '@libs/CardNavigationUtils';
 import {formatMaskedCardName} from '@libs/CardUtils';
 import escapeCsvField from '@libs/escapeCsvField';
 import localFileDownload from '@libs/localFileDownload';
+import Navigation from '@libs/Navigation/Navigation';
 
 import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
 
 import {format, parseISO} from 'date-fns';
 import React from 'react';
 import {View} from 'react-native';
 
 import type {WorkspaceCompanyCardTableItemData} from './WorkspaceCompanyCardsTableRow';
 
-type WorkspaceCompanyCardBulkActionType = 'unassign' | 'viewTransactions' | 'exportCSV';
+type WorkspaceCompanyCardBulkActionType = 'editTransactionStartDate' | 'unassign' | 'viewTransactions' | 'exportCSV';
 
 type WorkspaceCompanyCardsTableControlsProps = {
     policyID: string;
     domainOrWorkspaceAccountID: number;
     bankName: UseCompanyCardsResult['bankName'];
+    feedName: UseCompanyCardsResult['feedName'];
 
     /** Whether the current member can edit company cards */
     canWriteCompanyCards: boolean;
@@ -47,6 +50,7 @@ function WorkspaceCompanyCardsTableControls({
     policyID,
     domainOrWorkspaceAccountID,
     bankName,
+    feedName,
     canWriteCompanyCards,
     clearCardSelection,
     isSelectionModeEnabled,
@@ -55,7 +59,7 @@ function WorkspaceCompanyCardsTableControls({
     const {pageGutter} = useLayoutSpacing();
     const {translate, getLocalDateFromDatetime} = useLocalize();
     const {showConfirmModal} = useConfirmModal();
-    const icons = useMemoizedLazyExpensifyIcons(['Export', 'MoneySearch', 'RemoveMembers']);
+    const icons = useMemoizedLazyExpensifyIcons(['CalendarSolid', 'Export', 'MoneySearch', 'RemoveMembers']);
     const {processedData, shouldUseNarrowTableLayout} = useTableContext<WorkspaceCompanyCardTableItemData>();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
@@ -139,6 +143,23 @@ function WorkspaceCompanyCardsTableControls({
         clearCardSelection();
     };
 
+    const editSelectedCardTransactionStartDates = () => {
+        if (!feedName) {
+            return;
+        }
+
+        const selectedCardIDs = selectedAssignedCards
+            .map((card) => card.assignedCard?.cardID)
+            .filter((cardID): cardID is number => cardID !== undefined)
+            .map(String);
+        const [selectedCardID] = selectedCardIDs;
+        if (!selectedCardID) {
+            return;
+        }
+
+        Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARDS_BULK_EDIT_TRANSACTION_START_DATE.getRoute(policyID, feedName, selectedCardIDs));
+    };
+
     const getBulkActionOptions = (): Array<DropdownOption<WorkspaceCompanyCardBulkActionType>> => {
         const options: Array<DropdownOption<WorkspaceCompanyCardBulkActionType>> = [];
 
@@ -152,13 +173,20 @@ function WorkspaceCompanyCardsTableControls({
                     onSelected: confirmBulkUnassign,
                 });
             }
-
             options.push({
                 icon: icons.MoneySearch,
                 text: translate('workspace.common.viewTransactions'),
                 value: 'viewTransactions',
                 onSelected: viewSelectedCardTransactions,
             });
+            if (canWriteCompanyCards) {
+                options.push({
+                    icon: icons.CalendarSolid,
+                    text: translate('workspace.moreFeatures.companyCards.bulkUpdateTransactionStartDate'),
+                    value: 'editTransactionStartDate',
+                    onSelected: editSelectedCardTransactionStartDates,
+                });
+            }
         }
 
         options.push({

src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx

@@ -12,15 +12,15 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-import {formatMaskedCardName} from '@libs/CardUtils';
+import {formatMaskedCardName, getCompanyCardFeed} from '@libs/CardUtils';
 import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
 
 import variables from '@styles/variables';
 
 import CONST from '@src/CONST';
 import {DYNAMIC_ROUTES} from '@src/ROUTES';
-import type {Card, CompanyCardFeed, CompanyCardFeedWithDomainID} from '@src/types/onyx';
+import type {Card, CompanyCardFeedWithDomainID} from '@src/types/onyx';
 import type {CardAssignmentData} from '@src/types/onyx/Card';
 
 import {Str} from 'expensify-common';
@@ -86,7 +86,6 @@ function WorkspaceCompanyCardTableRow({
     const isTableSemanticsEnabled = shouldUseTableSemantics(shouldUseNarrowTableLayout);
 
     const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, isCardDeleted, onDismissError} = item;
-
     const formattedCustomCardName = customCardName ?? '';
     const formattedCardDetails = formatMaskedCardName(cardName);
     const formattedCustomCardNameSuffix = formattedCustomCardName ? ` • ${formattedCustomCardName}` : '';
@@ -147,7 +146,7 @@ function WorkspaceCompanyCardTableRow({
                         {isAssigned ? (
                             <AccountAvatarWithCardFeed
                                 accountID={cardholder?.accountID ?? CONST.DEFAULT_NUMBER_ID}
-                                cardFeed={assignedCard?.bank as CompanyCardFeed}
+                                cardFeed={getCompanyCardFeed(assignedCard?.bank)}
                                 cardFeedIconSize={subscriptCardFeedIconSize}
                                 borderColor={hovered ? theme.hoverComponentBG : theme.highlightBG}
                                 containerStyle={styles.mr0}

src/components/Tables/WorkspaceCompanyCardsTable/index.tsx

@@ -19,9 +19,10 @@ import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-import {resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards';
+import {clearCompanyCardErrorField, resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards';
 import {renameCompanyCardInline} from '@libs/actions/Policy/InlineEdit';
 import {formatMaskedCardName, getCompanyCardCustomName, getDefaultCardName} from '@libs/CardUtils';
+import {getLatestErrorField} from '@libs/ErrorUtils';
 import {getConnectedIntegration} from '@libs/PolicyUtils';
 import showInlineEditError from '@libs/showInlineEditError';
 import tokenizedSearch from '@libs/tokenizedSearch';
@@ -36,6 +37,7 @@ import variables from '@styles/variables';
 
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 import type {ListRenderItemInfo} from '@shopify/flash-list';
@@ -287,6 +289,13 @@ function WorkspaceCompanyCardsTable({
                   const storedCardName = getCompanyCardCustomName(cardID, sharedCardCustomNames, customCardNames);
                   const customCardName = storedCardName ?? getDefaultCardName(cardholder?.displayName ?? '');
                   const canEditName = canWriteCompanyCards && !!bankName && isAssigned && cardID !== undefined && !isCardDeleted && !isSelectionModeActive;
+                  const transactionStartDateErrors = getLatestErrorField(assignedCard ?? {}, 'scrapeMinDate');
+                  const hasTransactionStartDateErrors = !isEmptyObject(transactionStartDateErrors);
+                  // The feed-level prompt owns connection errors, but a failed start-date edit is a separate user action
+                  // and must remain visible and dismissible on the affected row.
+                  const cardErrors = isFeedConnectionBroken || assignedCard?.pendingFields?.lastScrape ? undefined : assignedCard?.errors;
+                  const hasVisibleCardErrors = !isEmptyObject(cardErrors ?? {});
+                  const rowErrors = hasTransactionStartDateErrors ? {...cardErrors, ...transactionStartDateErrors} : cardErrors;
 
                   return {
                       cardName,
@@ -300,16 +309,23 @@ function WorkspaceCompanyCardsTable({
                       cardholder,
                       // Unassigned cards have no details page and so no Accounting section to match, hence no title.
                       exportAccountTitle: shouldShowExportAccountColumn && assignedCard ? getCardExportAccountTitle(cardExportSettings, assignedCard) : undefined,
-                      errors: isFeedConnectionBroken || assignedCard?.pendingFields?.lastScrape ? undefined : assignedCard?.errors,
-                      pendingAction: assignedCard?.pendingAction,
+                      errors: rowErrors,
+                      pendingAction: assignedCard?.pendingAction ?? assignedCard?.pendingFields?.scrapeMinDate,
                       canEditName,
                       onRenameName: (newName: string) => {
                           if (!bankName || cardID === undefined) {
                               return;
                           }
                           showInlineEditError(renameCompanyCardInline(translate, domainOrWorkspaceAccountID, String(cardID), newName, bankName, customCardName, storedCardName));
                       },
-                      onDismissError: () => resetFailedWorkspaceCompanyCardUnassignment(domainOrWorkspaceAccountID, bankName, assignedCard?.cardID),
+                      onDismissError: () => {
+                          if (hasTransactionStartDateErrors && bankName && cardID !== undefined) {
+                              clearCompanyCardErrorField(domainOrWorkspaceAccountID, String(cardID), bankName, 'scrapeMinDate', true);
+                          }
+                          if (hasVisibleCardErrors) {
+                              resetFailedWorkspaceCompanyCardUnassignment(domainOrWorkspaceAccountID, bankName, assignedCard?.cardID);
+                          }
+                      },
                   };
               })
               .filter((item) => isOffline || item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
@@ -483,6 +499,7 @@ function WorkspaceCompanyCardsTable({
             policyID={policyID}
             domainOrWorkspaceAccountID={domainOrWorkspaceAccountID}
             bankName={bankName}
+            feedName={feedName}
             canWriteCompanyCards={canWriteCompanyCards}
             clearCardSelection={clearCardSelection}
             isSelectionModeEnabled={isSelectionModeEnabled}