[Home Page] Fix: Your spend section does not update after updating expense offline

src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx

@@ -36,6 +36,7 @@ import useSearchShouldCalculateTotals from '@hooks/useSearchShouldCalculateTotal
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {generateDefaultWorkspaceName} from '@libs/actions/Policy/Policy';
 import {search} from '@libs/actions/Search';
@@ -167,6 +168,7 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo
     const {currentSearchQueryJSON, currentSearchKey} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
     const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const isInvoiceReport = isInvoiceReportUtil(moneyRequestReport);
     const isAnyTransactionOnHold = hasHeldExpensesReportUtils(allTransactions);
@@ -238,6 +240,7 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo
                 amountOwed,
                 ownerBillingGracePeriodEnd,
                 methodID: type === CONST.IOU.PAYMENT_TYPE.VBBA ? methodID : undefined,
+                yourSpendPatchData,
                 onPaid: () => {
                     startAnimation();
                 },
@@ -450,6 +453,7 @@ function MoneyReportHeaderSecondaryActionsInner({reportID, primaryAction, isRepo
             ownerBillingGracePeriodEnd,
             delegateEmail,
             isTrackIntentUser,
+            yourSpendPatchData,
             ownerLogin: submitterLogin,
         });
     };

src/components/MoneyReportHeaderPrimaryAction/PayPrimaryAction.tsx

@@ -16,6 +16,7 @@ import usePayChatReportActions from '@hooks/usePayChatReportActions';
 import usePolicy from '@hooks/usePolicy';
 import useSearchShouldCalculateTotals from '@hooks/useSearchShouldCalculateTotals';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {generateDefaultWorkspaceName} from '@libs/actions/Policy/Policy';
 import {search} from '@libs/actions/Search';
@@ -120,6 +121,7 @@ function PayPrimaryAction({reportID, chatReportID}: PayPrimaryActionProps) {
     const {currentSearchQueryJSON, currentSearchKey} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
     const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const {openHoldMenu} = useMoneyReportHeaderModals();
 
@@ -179,6 +181,7 @@ function PayPrimaryAction({reportID, chatReportID}: PayPrimaryActionProps) {
                 amountOwed,
                 ownerBillingGracePeriodEnd,
                 methodID: type === CONST.IOU.PAYMENT_TYPE.VBBA ? methodID : undefined,
+                yourSpendPatchData,
                 onPaid: startAnimation,
                 chatReportActions: getChatReportActions(false),
                 isTrackIntentUser,

src/components/MoneyReportHeaderPrimaryAction/SubmitPrimaryAction.tsx

@@ -14,6 +14,7 @@ import usePermissions from '@hooks/usePermissions';
 import useSearchShouldCalculateTotals from '@hooks/useSearchShouldCalculateTotals';
 import useStrictPolicyRules from '@hooks/useStrictPolicyRules';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {search} from '@libs/actions/Search';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
@@ -111,6 +112,7 @@ function SubmitPrimaryActionContent({reportID}: SubmitPrimaryActionProps) {
     const {currentSearchQueryJSON, currentSearchKey} = useSearchQueryContext();
     const {currentSearchResults} = useSearchResultsContext();
     const shouldCalculateTotals = useSearchShouldCalculateTotals(currentSearchKey, currentSearchQueryJSON?.hash, true);
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const handleSubmit = () => {
         if (!moneyRequestReport || shouldBlockSubmit) {
@@ -138,6 +140,7 @@ function SubmitPrimaryActionContent({reportID}: SubmitPrimaryActionProps) {
                 expenseReportCurrentNextStepDeprecated: nextStep,
                 userBillingGracePeriodEnds,
                 amountOwed,
+                yourSpendPatchData,
                 onSubmitted: startSubmittingAnimation,
                 ownerBillingGracePeriodEnd,
                 delegateEmail,

src/components/MoneyReportHeaderPrimaryAction/useConfirmApproval.ts

@@ -5,6 +5,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isSubmitPolicy} from '@libs/PolicyUtils';
@@ -38,6 +39,7 @@ function useConfirmApproval(reportID: string | undefined, startApprovedAnimation
     const [ownerLogin] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: personalDetailsLoginSelector(moneyRequestReport?.ownerAccountID)});
     const {transactions: reportTransactions} = useTransactionsAndViolationsForReport(moneyRequestReport?.reportID);
     const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const isASAPSubmitBetaEnabled = isBetaEnabled(CONST.BETAS.ASAP_SUBMIT);
     const hasViolations = hasViolationsReportUtils(moneyRequestReport?.reportID, allTransactionViolations, accountID, email ?? '');
@@ -69,6 +71,7 @@ function useConfirmApproval(reportID: string | undefined, startApprovedAnimation
                 ownerBillingGracePeriodEnd,
                 ownerLogin,
                 full: true,
+                yourSpendPatchData,
                 onApproved: startApprovedAnimation,
                 delegateEmail,
                 isTrackIntentUser,

src/components/MoneyRequestHeaderSecondaryActions.tsx

@@ -25,6 +25,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useTransactionViolations from '@hooks/useTransactionViolations';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {duplicateExpenseTransaction as duplicateTransactionAction} from '@libs/actions/IOU/Duplicate';
 import {deleteTrackExpense} from '@libs/actions/IOU/TrackExpense';
@@ -114,6 +115,7 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
     const {login: currentUserLogin, accountID, localCurrencyCode} = useCurrentUserPersonalDetails();
     const delegateAccountID = useDelegateAccountID();
     const personalDetails = usePersonalDetails();
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const expensifyIcons = useMemoizedLazyExpensifyIcons([
         'ArrowCollapse',
@@ -489,6 +491,7 @@ function MoneyRequestHeaderSecondaryActions({reportID, onBackButtonPress}: Money
                             currentUserAccountID: accountID,
                             currentUserEmail: currentUserLogin ?? '',
                             policy: iouPolicy,
+                            yourSpendPatchData,
                         });
                     } else {
                         if (shouldOpenSplitExpenseEditFlowOnDelete([transaction.transactionID])) {

src/components/ReportActionItem/MoneyRequestReportPreview/ApproveActionButton.tsx

@@ -7,6 +7,7 @@ import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import useReportTransactionViolations from '@hooks/useReportTransactionViolations';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {hasHeldExpensesFromTransactions as hasHeldExpensesReportUtils, hasViolations as hasViolationsReportUtils} from '@libs/ReportUtils';
 
@@ -47,6 +48,8 @@ function ApproveActionButton() {
     const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
 
     const {transactions: reportTransactions} = useTransactionsAndViolationsForReport(iouReport?.reportID);
+    const yourSpendPatchData = useYourSpendPatchData();
+
     const allTransactionValues = Object.values(reportTransactions);
     const transactions = allTransactionValues;
 
@@ -75,6 +78,7 @@ function ApproveActionButton() {
                 ownerBillingGracePeriodEnd,
                 ownerLogin,
                 full: true,
+                yourSpendPatchData,
                 onApproved: startApprovedAnimation,
                 delegateEmail,
                 isTrackIntentUser,

src/components/ReportActionItem/MoneyRequestReportPreview/PayActionButton.tsx

@@ -14,6 +14,7 @@ import usePermissions from '@hooks/usePermissions';
 import usePolicy from '@hooks/usePolicy';
 import useReportTransactionsCollection from '@hooks/useReportTransactionsCollection';
 import useReportTransactionViolations from '@hooks/useReportTransactionViolations';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {generateDefaultWorkspaceName} from '@libs/actions/Policy/Policy';
 import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
@@ -75,6 +76,7 @@ function PayActionButton() {
     const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector});
     const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
 
+    const yourSpendPatchData = useYourSpendPatchData();
     const reportTransactionsCollection = useReportTransactionsCollection(iouReportID);
     const transactions = Object.values(reportTransactionsCollection ?? {}).filter(
         (t): t is Transaction => !!t && (isOffline || t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
@@ -114,6 +116,7 @@ function PayActionButton() {
                 ownerBillingGracePeriodEnd,
                 ownerLogin,
                 full: true,
+                yourSpendPatchData,
                 onApproved: startApprovedAnimation,
                 delegateEmail,
                 isTrackIntentUser,
@@ -171,6 +174,7 @@ function PayActionButton() {
                     amountOwed,
                     ownerBillingGracePeriodEnd,
                     methodID: type === CONST.IOU.PAYMENT_TYPE.VBBA ? methodID : undefined,
+                    yourSpendPatchData,
                     onPaid: startAnimation,
                     chatReportActions: getChatReportActions(false),
                     isTrackIntentUser,

src/components/ReportActionItem/MoneyRequestReportPreview/SubmitActionButton.tsx

@@ -10,6 +10,7 @@ import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import useReportTransactionsCollection from '@hooks/useReportTransactionsCollection';
 import useReportTransactionViolations from '@hooks/useReportTransactionViolations';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {hasDynamicExternalWorkflow, isSubmitPolicy} from '@libs/PolicyUtils';
 import {hasViolations as hasViolationsReportUtils, shouldShowMarkAsDone} from '@libs/ReportUtils';
@@ -72,6 +73,7 @@ function SubmitActionButtonContent() {
     const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
     const [delegateEmail] = useOnyx(ONYXKEYS.ACCOUNT, {selector: delegateEmailSelector});
     const {isOffline} = useNetwork();
+    const yourSpendPatchData = useYourSpendPatchData();
     const reportTransactionsCollection = useReportTransactionsCollection(iouReportID);
     const transactions = Object.values(reportTransactionsCollection ?? {}).filter(
         (t): t is Transaction => !!t && (isOffline || t.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE),
@@ -120,6 +122,7 @@ function SubmitActionButtonContent() {
                 expenseReportCurrentNextStepDeprecated: iouReportNextStep,
                 userBillingGracePeriodEnds,
                 amountOwed,
+                yourSpendPatchData,
                 onSubmitted: startSubmittingAnimation,
                 ownerBillingGracePeriodEnd,
                 delegateEmail,

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -43,6 +43,7 @@
 import useTransactionViolations from '@hooks/useTransactionViolations';
 import type {ViolationField} from '@hooks/useViolations';
 import useViolations from '@hooks/useViolations';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {updateMoneyRequestBillable, updateMoneyRequestCategory, updateMoneyRequestReimbursable, updateMoneyRequestTag, updateMoneyRequestTaxRate} from '@libs/actions/IOU/UpdateMoneyRequest';
 import {openExternalLink} from '@libs/actions/Link';
@@ -221,7 +222,7 @@
     let [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`);
     parentReport = parentReport ?? currentSearchResults?.data[`${ONYXKEYS.COLLECTION.REPORT}${parentReportID}`];
     const [parentReportNextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${getNonEmptyStringOnyxID(parentReport?.reportID)}`);
     const [reportPolicyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${getNonEmptyStringOnyxID(parentReport?.policyID)}`);
 
     const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID}`);
     const parentReportAction = transactionThreadReport?.parentReportActionID ? parentReportActions?.[transactionThreadReport.parentReportActionID] : undefined;
@@ -280,6 +281,7 @@
     const personalDetailsList = usePersonalDetails();
     const currentUserAccountIDParam = currentUserPersonalDetails.accountID;
     const currentUserEmailParam = currentUserPersonalDetails.login ?? '';
+    const yourSpendPatchData = useYourSpendPatchData();
     const {isBetaEnabled} = usePermissions();
     const isASAPSubmitBetaEnabled = isBetaEnabled(CONST.BETAS.ASAP_SUBMIT);
     const isP2PDistanceRequest = isCustomUnitRateIDForP2P(transaction);
@@ -699,6 +701,7 @@
             isOffline,
             delegateAccountID,
             isTrackIntentUser,
+            yourSpendPatchData,
         });
     };
 
@@ -878,7 +881,7 @@
         });
     };
 
     const [reportPolicyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${getNonEmptyStringOnyxID(parentReport?.policyID)}`);
 
     const showTagDisabledAlert = (tagListIndex: number) => {
         const transactionID = transaction?.transactionID;

src/components/Search/SearchList/ListItem/ActionCell/PayActionCell.tsx

@@ -11,6 +11,7 @@ import {useReportPaymentContext} from '@hooks/usePaymentContext';
 import usePolicy from '@hooks/usePolicy';
 import useReportWithTransactionsAndViolations from '@hooks/useReportWithTransactionsAndViolations';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {payInvoice, payMoneyRequest} from '@libs/actions/IOU/PayMoneyRequest';
 import {canIOUBePaid} from '@libs/actions/IOU/ReportWorkflow';
@@ -45,6 +46,7 @@ function PayActionCell({isLoading, policyID, reportID, hash, amount, shouldDisab
     const {isDelegateAccessRestricted} = useDelegateNoAccessState();
     const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
     const [iouReport, transactions] = useReportWithTransactionsAndViolations(reportID);
+    const yourSpendPatchData = useYourSpendPatchData();
     const policy = usePolicy(policyID);
     const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
@@ -151,6 +153,7 @@ function PayActionCell({isLoading, policyID, reportID, hash, amount, shouldDisab
             ownerBillingGracePeriodEnd,
             methodID: type === CONST.IOU.PAYMENT_TYPE.VBBA ? methodID : undefined,
             additionalOnyxData,
+            yourSpendPatchData,
             chatReportActions: allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(chatReport?.reportID)}`],
             isTrackIntentUser,
         });

src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx

@@ -26,6 +26,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {handleActionButtonPress} from '@libs/actions/Search';
 import {syncMissingAttendeesViolation} from '@libs/AttendeeUtils';
@@ -218,6 +219,7 @@ function ExpenseReportListItemInner<TItem extends ListItem>({
     const openReportSubmitToPopover = useOpenReportSubmitToPopover();
     const {shouldDisableSearchSubmitPress, consumeIgnoreNextSearchSubmitPress} = useSearchSubmitPopoverGuard();
     const {transactions: reportTransactions, violations: reportViolations} = useTransactionsAndViolationsForReport(reportItem.reportID);
+    const yourSpendPatchData = useYourSpendPatchData();
     const liveReportTransactions = useMemo(() => Object.values(reportTransactions), [reportTransactions]);
 
     // Recompute the violations badge from live data at the row, replacing the screen-level
@@ -297,6 +299,7 @@ function ExpenseReportListItemInner<TItem extends ListItem>({
             chatReportActions,
             delegateEmail,
             isTrackIntentUser,
+            yourSpendPatchData,
         });
     }, [
         currentSearchHash,
@@ -336,6 +339,7 @@ function ExpenseReportListItemInner<TItem extends ListItem>({
         chatReportActions,
         delegateEmail,
         isTrackIntentUser,
+        yourSpendPatchData,
     ]);
 
     const handleSelectionButtonPress = useCallback(() => {

src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx

@@ -22,6 +22,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import type {ModifiedMouseEvent} from '@libs/Navigation/helpers/openInternalRouteInNewTab';
@@ -295,6 +296,7 @@ function ReportListItemHeaderInner<TItem extends ListItem>({
 
     const openReportSubmitToPopover = useOpenReportSubmitToPopover();
     const {shouldDisableSearchSubmitPress, consumeIgnoreNextSearchSubmitPress} = useSearchSubmitPopoverGuard();
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const handleOnButtonPress = (event?: ModifiedMouseEvent) => {
         handleActionButtonPress({
@@ -330,6 +332,7 @@ function ReportListItemHeaderInner<TItem extends ListItem>({
             chatReportActions,
             delegateEmail,
             isTrackIntentUser,
+            yourSpendPatchData,
         });
     };
     return !isLargeScreenWidth ? (

src/components/Search/SearchList/ListItem/TransactionListItem/index.tsx

@@ -17,6 +17,7 @@ import useOnyx from '@hooks/useOnyx';
 import {useReportPaymentContext} from '@hooks/usePaymentContext';
 import usePolicyForMovingExpenses from '@hooks/usePolicyForMovingExpenses';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import type {TransactionPreviewData} from '@libs/actions/Search';
 import {handleActionButtonPress as handleActionButtonPressUtil} from '@libs/actions/Search';
@@ -197,6 +198,7 @@ function TransactionListItemInner<TItem extends ListItem>({
     const {showConfirmModal} = useConfirmModal();
     const openReportSubmitToPopover = useOpenReportSubmitToPopover();
     const {shouldDisableSearchSubmitPress, consumeIgnoreNextSearchSubmitPress} = useSearchSubmitPopoverGuard();
+    const yourSpendPatchData = useYourSpendPatchData();
 
     const handleActionButtonPress = (event?: Parameters<typeof onSelectRow>[2]) => {
         handleActionButtonPressUtil({
@@ -233,6 +235,7 @@ function TransactionListItemInner<TItem extends ListItem>({
             chatReportActions,
             delegateEmail,
             isTrackIntentUser,
+            yourSpendPatchData,
         });
     };
 

src/components/SettlementButton/index.tsx

@@ -20,6 +20,7 @@ import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useYourSpendPatchData from '@hooks/useYourSpendPatchData';
 
 import {createWorkspace, generateDefaultWorkspaceName, isCurrencySupportedForDirectReimbursement, isCurrencySupportedForGlobalReimbursement} from '@libs/actions/Policy/Policy';
 import {navigateToBankAccountRoute} from '@libs/actions/ReimbursementAccount';
@@ -120,6 +121,7 @@ function SettlementButton({
     const expenseReportPolicy = usePolicy(iouReport?.policyID);
     const {accountID, email = ''} = useCurrentUserPersonalDetails();
     const lastWorkspaceNumber = useLastWorkspaceNumber();
+    const yourSpendPatchData = useYourSpendPatchData();
 
     // The app would crash due to subscribing to the entire report collection if chatReportID is an empty string. So we should have a fallback ID here.
     // eslint-disable-next-line rulesdir/no-default-id-values
@@ -529,6 +531,7 @@ function SettlementButton({
                     ownerBillingGracePeriodEnd,
                     ownerLogin,
                     full: false,
+                    yourSpendPatchData,
                     delegateEmail,
                     isTrackIntentUser,
                 });