From 02790a577f7ac9d7f54e77f29b74a304fd4945ed Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 25 Sep 2025 09:37:14 +0530 Subject: [PATCH 01/18] fix: Add the "Add expense" button to two areas of the product. Signed-off-by: krishna2323 --- src/components/MoneyReportHeader.tsx | 45 +----- .../MoneyRequestReportActionsList.tsx | 5 +- .../MoneyRequestReportTotalSpend.tsx | 20 +-- .../MoneyRequestReportTransactionList.tsx | 129 +++++++++++------- .../MoneyRequestReportPreviewContent.tsx | 37 +---- .../Search/TransactionGroupListItem.tsx | 22 ++- src/libs/ReportUtils.ts | 60 +++++++- src/styles/utils/sizing.ts | 4 + src/styles/utils/spacing.ts | 4 + 9 files changed, 175 insertions(+), 151 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index d69d23a15b36..cece81e768a5 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -23,16 +23,7 @@ import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViol import useTransactionViolations from '@hooks/useTransactionViolations'; import {setupMergeTransactionData} from '@libs/actions/MergeTransaction'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; -import { - createTransactionThreadReport, - deleteAppReport, - downloadReportPDF, - exportReportToCSV, - exportReportToPDF, - exportToIntegration, - markAsManuallyExported, - openUnreportedExpense, -} from '@libs/actions/Report'; +import {createTransactionThreadReport, deleteAppReport, downloadReportPDF, exportReportToCSV, exportReportToPDF, exportToIntegration, markAsManuallyExported} from '@libs/actions/Report'; import {getExportTemplates, queueExportSearchWithTemplate, search} from '@libs/actions/Search'; import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import getPlatform from '@libs/getPlatform'; @@ -50,6 +41,7 @@ import {getAllExpensesToHoldIfApplicable, getReportPrimaryAction, isMarkAsResolv import {getSecondaryExportReportActions, getSecondaryReportActions} from '@libs/ReportSecondaryActionUtils'; import { changeMoneyRequestHoldStatus, + getAddExpenseDropdownOptions, getIntegrationExportIcon, getIntegrationNameFromExportMessage as getIntegrationNameFromExportMessageUtils, getNextApproverAccountID, @@ -593,38 +585,7 @@ function MoneyReportHeader({ onlyShowPayElsewhere, }); - const addExpenseDropdownOptions: Array>> = useMemo( - () => [ - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, - text: translate('iou.createExpense'), - icon: Expensicons.Plus, - onSelected: () => { - if (!moneyRequestReport?.reportID) { - return; - } - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - startMoneyRequest(CONST.IOU.TYPE.SUBMIT, moneyRequestReport?.reportID); - }, - }, - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, - text: translate('iou.addUnreportedExpense'), - icon: Expensicons.ReceiptPlus, - onSelected: () => { - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - openUnreportedExpense(moneyRequestReport?.reportID); - }, - }, - ], - [moneyRequestReport?.reportID, policy, translate], - ); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(moneyRequestReport?.reportID, policy), [moneyRequestReport?.reportID, policy]); const exportSubmenuOptions: Record> = useMemo(() => { const options: Record> = { diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx index a9ca147df1b2..01c728160492 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx @@ -602,8 +602,6 @@ function MoneyRequestReportActionsList({ readNewestAction(report.reportID); }, [setIsFloatingMessageCounterVisible, hasNewestReportAction, reportScrollManager, report.reportID]); - const reportHasComments = visibleReportActions.length > 0; - const scrollToNewTransaction = useCallback( (pageY: number) => { wrapperViewRef.current?.measureInWindow((x, y, w, height) => { @@ -739,9 +737,8 @@ function MoneyRequestReportActionsList({ newTransactions={newTransactions} reportActions={reportActions} violations={violations} - hasComments={reportHasComments} - isLoadingInitialReportActions={showReportActionsLoadingState} scrollToNewTransaction={scrollToNewTransaction} + policy={policy} /> } diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index ddc1946fc0fb..1865147416ee 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -1,7 +1,5 @@ -import {useIsFocused} from '@react-navigation/native'; import React from 'react'; import {View} from 'react-native'; -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -13,12 +11,6 @@ type MoneyRequestReportTotalSpendProps = { /** Report for which the total spend is being displayed */ report: OnyxTypes.Report; - /** Whether the report has any comments */ - hasComments: boolean; - - /** Whether the report is loading report actions */ - isLoadingReportActions: boolean; - /** Whether the report has any transactions */ isEmptyTransactions: boolean; @@ -29,21 +21,13 @@ type MoneyRequestReportTotalSpendProps = { hasPendingAction: boolean; }; -function MoneyRequestReportTotalSpend({hasComments, isLoadingReportActions, isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) { +function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const isFocused = useIsFocused(); return ( - - - {hasComments || isLoadingReportActions ? translate('common.comments') : ''} - {' '} + {!isEmptyTransactions && ( {translate('common.total')} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 0e6ff716fcd6..ea801f01e8bc 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -2,11 +2,14 @@ import {useFocusEffect} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; import React, {memo, useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; +import type {OnyxEntry} from 'react-native-onyx'; import type {TupleToUnion} from 'type-fest'; +import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import Checkbox from '@components/Checkbox'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import Modal from '@components/Modal'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {usePersonalDetails, useSession} from '@components/OnyxListItemProvider'; import {useSearchContext} from '@components/Search/SearchContext'; import type {SearchColumnType, SortOrder} from '@components/Search/types'; @@ -14,6 +17,7 @@ import Text from '@components/Text'; import useCopySelectionHelper from '@hooks/useCopySelectionHelper'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; +import useReportIsArchived from '@hooks/useReportIsArchived'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -25,7 +29,7 @@ import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; import Parser from '@libs/Parser'; import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils'; -import {getMoneyRequestSpendBreakdown, isExpenseReport} from '@libs/ReportUtils'; +import {canAddTransaction, getAddExpenseDropdownOptions, getMoneyRequestSpendBreakdown, isCurrentUserSubmitter, isExpenseReport} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; import {getAmount, getCategory, getCreated, getMerchant, getTag, getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear'; @@ -48,6 +52,9 @@ import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyS type MoneyRequestReportTransactionListProps = { report: OnyxTypes.Report; + /** Policy that the report belongs to */ + policy: OnyxEntry; + /** List of transactions belonging to one report */ transactions: OnyxTypes.Transaction[]; @@ -60,12 +67,6 @@ type MoneyRequestReportTransactionListProps = { /** Violations indexed by transaction ID */ violations?: Record; - /** Whether the report that these transactions belong to has any chat comments */ - hasComments: boolean; - - /** Whether the report actions are being loaded, used to show 'Comments' during loading state */ - isLoadingInitialReportActions?: boolean; - /** scrollToNewTransaction callback used for scrolling to new transaction when it is created */ scrollToNewTransaction: (offset: number) => void; }; @@ -114,16 +115,7 @@ const getTransactionValue = (transaction: OnyxTypes.Transaction, key: SortableCo } }; -function MoneyRequestReportTransactionList({ - report, - transactions, - newTransactions, - reportActions, - violations, - hasComments, - isLoadingInitialReportActions: isLoadingReportActions, - scrollToNewTransaction, -}: MoneyRequestReportTransactionListProps) { +function MoneyRequestReportTransactionList({report, transactions, newTransactions, reportActions, violations, scrollToNewTransaction, policy}: MoneyRequestReportTransactionListProps) { useCopySelectionHelper(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -139,6 +131,9 @@ function MoneyRequestReportTransactionList({ const shouldShowBreakdown = !!nonReimbursableSpend && !!reimbursableSpend; const transactionsWithoutPendingDelete = useMemo(() => transactions.filter((t) => !isTransactionPendingDelete(t)), [transactions]); const session = useSession(); + const isReportArchived = useReportIsArchived(report?.reportID); + const shouldShowAddExpenseButton = canAddTransaction(report, isReportArchived) && isCurrentUserSubmitter(report); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(report?.reportID, policy), [report?.reportID, policy]); const hasPendingAction = useMemo(() => { return transactions.some(getTransactionPendingAction); @@ -275,8 +270,6 @@ function MoneyRequestReportTransactionList({ <> - {shouldShowBreakdown && ( - - {[ - {text: 'cardTransactions.outOfPocket', value: formattedOutOfPocketAmount}, - {text: 'cardTransactions.companySpend', value: formattedCompanySpendAmount}, - ].map(({text, value}) => ( - - - {translate(text as TranslationPaths)} - - - {value} - {' '} + + {shouldShowAddExpenseButton && ( + + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + success={false} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + /> + + )} + + {shouldShowBreakdown && ( + + {[ + {text: 'cardTransactions.outOfPocket', value: formattedOutOfPocketAmount}, + {text: 'cardTransactions.companySpend', value: formattedCompanySpendAmount}, + ].map(({text, value}) => ( + + + {translate(text as TranslationPaths)} + + + {value} + + + ))} - ))} + )} + + - )} - + [ - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, - text: translate('iou.createExpense'), - icon: Expensicons.Plus, - onSelected: () => { - if (!iouReport?.reportID) { - return; - } - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - startMoneyRequest(CONST.IOU.TYPE.SUBMIT, iouReport?.reportID, undefined, false, chatReportID); - }, - }, - { - value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, - text: translate('iou.addUnreportedExpense'), - icon: Expensicons.ReceiptPlus, - onSelected: () => { - if (policy && shouldRestrictUserBillableActions(policy.id)) { - Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); - return; - } - openUnreportedExpense(iouReport?.reportID, iouReport?.parentReportID); - }, - }, - ], - [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy, translate], + () => getAddExpenseDropdownOptions(iouReport?.reportID, policy, chatReportID, iouReport?.parentReportID), + [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy], ); const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 7d4dc6842608..a28c80d288b6 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -4,6 +4,7 @@ import ActivityIndicator from '@components/ActivityIndicator'; import AnimatedCollapsible from '@components/AnimatedCollapsible'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; +import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import {useSearchContext} from '@components/Search/SearchContext'; @@ -24,6 +25,7 @@ import TransactionItemRow from '@components/TransactionItemRow'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; @@ -33,6 +35,7 @@ import {search} from '@libs/actions/Search'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getReportAction} from '@libs/ReportActionsUtils'; +import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getSections} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import variables from '@styles/variables'; @@ -136,6 +139,9 @@ function TransactionGroupListItem({ const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0; const shouldDisplayLoadingIndicator = !isGroupByReports && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch; const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const policy = usePolicy(groupItem.policyID); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(groupItem.reportID, policy), [groupItem.reportID, policy]); + const canAddTransaction = canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); @@ -334,13 +340,27 @@ function TransactionGroupListItem({ expandButtonStyle={[styles.pv4Half]} > {shouldDisplayEmptyView ? ( - + {translate('search.moneyRequestReport.emptyStateTitle')} + {canAddTransaction && ( + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + /> + )} ) : ( <> diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index cc5e5495c411..58ba3527e949 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -13,7 +13,9 @@ import Onyx from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg'; import type {OriginalMessageChangePolicy, OriginalMessageExportIntegration, OriginalMessageModifiedExpense} from 'src/types/onyx/OriginalMessage'; import type {SetRequired, TupleToUnion, ValueOf} from 'type-fest'; +import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; import {FallbackAvatar, IntacctSquare, NetSuiteExport, NetSuiteSquare, QBDSquare, QBOExport, QBOSquare, SageIntacctExport, XeroExport, XeroSquare} from '@components/Icon/Expensicons'; +import * as Expensicons from '@components/Icon/Expensicons'; import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars'; import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars'; import type {LocaleContextProps} from '@components/LocaleContextProvider'; @@ -71,11 +73,20 @@ import type {SearchPolicy, SearchReport, SearchTransaction} from '@src/types/ony import type {Comment, TransactionChanges, WaypointCollection} from '@src/types/onyx/Transaction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type IconAsset from '@src/types/utils/IconAsset'; -import {canApproveIOU, canIOUBePaid, canSubmitReport, createDraftTransaction, getIOUReportActionToApproveOrPay, setMoneyRequestParticipants, unholdRequest} from './actions/IOU'; +import { + canApproveIOU, + canIOUBePaid, + canSubmitReport, + createDraftTransaction, + getIOUReportActionToApproveOrPay, + setMoneyRequestParticipants, + startMoneyRequest, + unholdRequest, +} from './actions/IOU'; import {isApprover as isApproverUtils} from './actions/Policy/Member'; import {createDraftWorkspace} from './actions/Policy/Policy'; import {hasCreditBankAccount} from './actions/ReimbursementAccount/store'; -import {handleReportChanged} from './actions/Report'; +import {handleReportChanged, openUnreportedExpense} from './actions/Report'; import type {GuidedSetupData, TaskForParameters} from './actions/Report'; import {isAnonymousUser as isAnonymousUserSession} from './actions/Session'; import {removeDraftTransactions} from './actions/TransactionEdit'; @@ -2593,6 +2604,50 @@ function hasOutstandingChildRequest(chatReport: Report, iouReportOrID: OnyxEntry }); } +/** + * Returns the dropdown options for the add expense button + * @param iouReport - The IOU report to add an expense to + * @param policy - The policy of the IOU report + * @param backToReport - The report to return to after adding an expense + * @returns The dropdown options for the add expense button + */ +function getAddExpenseDropdownOptions( + iouReportID: string | undefined, + policy: OnyxEntry, + iouRequestBackToReport?: string, + unreportedExpenseBackToReport?: string, +): Array>> { + return [ + { + value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, + text: translateLocal('iou.createExpense'), + icon: Expensicons.Plus, + onSelected: () => { + if (!iouReportID) { + return; + } + if (policy && shouldRestrictUserBillableActions(policy.id)) { + Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); + return; + } + startMoneyRequest(CONST.IOU.TYPE.SUBMIT, iouReportID, undefined, false, iouRequestBackToReport); + }, + }, + { + value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, + text: translateLocal('iou.addUnreportedExpense'), + icon: Expensicons.ReceiptPlus, + onSelected: () => { + if (policy && shouldRestrictUserBillableActions(policy.id)) { + Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); + return; + } + openUnreportedExpense(iouReportID, unreportedExpenseBackToReport); + }, + }, + ]; +} + /** * Checks whether the card transaction support deleting based on liability type */ @@ -11883,6 +11938,7 @@ export { getRootParentReport, getRouteFromLink, canDeleteCardTransactionByLiabilityType, + getAddExpenseDropdownOptions, getTaskAssigneeChatOnyxData, getTransactionDetails, getTransactionReportName, diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index e1863a04a7dc..7e1f51a81fcb 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -147,6 +147,10 @@ export default { maxWidth: '100%', }, + mwFitContent: { + maxWidth: 'fit-content', + }, + wAuto: { width: 'auto', }, diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index b885d33910b8..74d5bfad50b3 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -783,6 +783,10 @@ export default { minHeight: 20, }, + minHeight7: { + minHeight: 28, + }, + minHeight22: { minHeight: 88, }, From 84189d2cc23237318e928cdbd7761b1c1b63bc41 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 25 Sep 2025 11:19:33 +0530 Subject: [PATCH 02/18] wrap total spend info on small screen. Signed-off-by: krishna2323 --- .../MoneyRequestReportTotalSpend.tsx | 2 +- .../MoneyRequestReportTransactionList.tsx | 10 ++++++---- src/styles/utils/flex.ts | 4 ++++ 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index 1865147416ee..f7e744b0ff2e 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -29,7 +29,7 @@ function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, r return ( {!isEmptyTransactions && ( - + {translate('common.total')} {convertToDisplayString(totalDisplaySpend, report?.currency)} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index ea801f01e8bc..1a5da4b30a9b 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -347,17 +347,18 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction styles.dFlex, styles.flexRow, shouldShowAddExpenseButton ? styles.justifyContentBetween : styles.justifyContentEnd, - styles.gap2, + styles.gap6, listHorizontalPadding, styles.mb2, styles.alignItemsStart, styles.minHeight7, + styles.flexWrap, ]} > {shouldShowAddExpenseButton && ( {}} @@ -371,10 +372,11 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} + style={[styles.mwFitContent]} /> )} - + {shouldShowBreakdown && ( {[ @@ -383,7 +385,7 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction ].map(({text, value}) => ( Date: Sun, 28 Sep 2025 02:07:07 +0530 Subject: [PATCH 03/18] calculate flex wrap layout. Signed-off-by: krishna2323 --- .../MoneyRequestReportTotalSpend.tsx | 2 +- .../MoneyRequestReportTransactionList.tsx | 91 ++++++++++++++----- src/styles/utils/flex.ts | 4 +- 3 files changed, 73 insertions(+), 24 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index f7e744b0ff2e..0f2b2f4f66a7 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -29,7 +29,7 @@ function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, r return ( {!isEmptyTransactions && ( - + {translate('common.total')} {convertToDisplayString(totalDisplaySpend, report?.currency)} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 1a5da4b30a9b..9b0ab761bbe2 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; -import React, {memo, useCallback, useMemo, useState} from 'react'; +import React, {memo, useCallback, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import type {TupleToUnion} from 'type-fest'; @@ -21,6 +21,7 @@ import useReportIsArchived from '@hooks/useReportIsArchived'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import {setActiveTransactionThreadIDs} from '@libs/actions/TransactionThreadNavigation'; import {convertToDisplayString} from '@libs/CurrencyUtils'; @@ -265,6 +266,49 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction const transactionItemFSClass = FS.getChatFSClass(personalDetailsList, report); + const {windowWidth} = useWindowDimensions(); + const [wrappedToTwoRows, setWrappedToTwoRows] = React.useState(false); + + // Refs to the two containers we care about + const leftContainerRef = useRef(null); + const rightContainerRef = useRef(null); + + const measureTop = (ref: React.RefObject): Promise => + new Promise((resolve) => { + if (!ref.current) { + resolve(null); + return; + } + // x, y, width, height + ref.current.measureInWindow((_, y /* w, h */) => resolve(y)); + }); + + const computeWrap = useCallback(() => { + if (!shouldShowAddExpenseButton) { + setWrappedToTwoRows(false); + return; + } + + // Wait one frame so layout is settled, then measure both + requestAnimationFrame(() => { + Promise.all([measureTop(leftContainerRef), measureTop(rightContainerRef)]) + .then(([leftY, rightY]) => { + if (leftY == null || rightY == null) { + return; + } + setWrappedToTwoRows(Math.round(leftY) !== Math.round(rightY)); + }) + .catch(() => {}); + }); + }, [shouldShowAddExpenseButton]); + console.log('wrappedToTwoRows', wrappedToTwoRows); + + React.useEffect(() => { + // After a width change, wait a frame for layout to settle, then recompute + const id = requestAnimationFrame(() => computeWrap()); + return () => cancelAnimationFrame(id); + }, [windowWidth, computeWrap]); + if (isEmptyTransactions) { return ( <> @@ -356,27 +400,32 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction ]} > {shouldShowAddExpenseButton && ( - - {}} - shouldAlwaysShowDropdownMenu - customText={translate('iou.addExpense')} - options={addExpenseDropdownOptions} - isSplitButton={false} - buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} - success={false} - anchorAlignment={{ - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, - vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, - }} - style={[styles.mwFitContent]} - /> - + + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + success={false} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + style={[styles.mwFitContent]} + /> + + )} - + {shouldShowBreakdown && ( {[ @@ -385,7 +434,7 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction ].map(({text, value}) => ( Date: Sun, 28 Sep 2025 02:33:38 +0530 Subject: [PATCH 04/18] fix merge conflicts. Signed-off-by: krishna2323 --- .../SelectionList/Search/TransactionGroupListItem.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index a28c80d288b6..5fbaa4fb206a 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -4,7 +4,6 @@ import ActivityIndicator from '@components/ActivityIndicator'; import AnimatedCollapsible from '@components/AnimatedCollapsible'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; -import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import {useSearchContext} from '@components/Search/SearchContext'; @@ -25,7 +24,6 @@ import TransactionItemRow from '@components/TransactionItemRow'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; From ffe055ccf3fe22dfe7c2bd211e387758ebbf6197 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 28 Sep 2025 02:35:06 +0530 Subject: [PATCH 05/18] fix merge conflicts. Signed-off-by: krishna2323 --- .../Search/TransactionGroupListItem.tsx | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 5fbaa4fb206a..7d4dc6842608 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -33,7 +33,6 @@ import {search} from '@libs/actions/Search'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getReportAction} from '@libs/ReportActionsUtils'; -import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getSections} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import variables from '@styles/variables'; @@ -137,9 +136,6 @@ function TransactionGroupListItem({ const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0; const shouldDisplayLoadingIndicator = !isGroupByReports && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch; const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); - const policy = usePolicy(groupItem.policyID); - const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(groupItem.reportID, policy), [groupItem.reportID, policy]); - const canAddTransaction = canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); @@ -338,27 +334,13 @@ function TransactionGroupListItem({ expandButtonStyle={[styles.pv4Half]} > {shouldDisplayEmptyView ? ( - + {translate('search.moneyRequestReport.emptyStateTitle')} - {canAddTransaction && ( - {}} - shouldAlwaysShowDropdownMenu - customText={translate('iou.addExpense')} - options={addExpenseDropdownOptions} - isSplitButton={false} - buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} - anchorAlignment={{ - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, - vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, - }} - /> - )} ) : ( <> From b0fd66d7c85f90b2ad0fd41bf69cce3b7d41ff22 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 28 Sep 2025 02:38:56 +0530 Subject: [PATCH 06/18] add changes back to TransactionGroupListItem. Signed-off-by: krishna2323 --- .../Search/TransactionGroupListItem.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 68b804af5224..39dab5581b17 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -4,6 +4,7 @@ import ActivityIndicator from '@components/ActivityIndicator'; import AnimatedCollapsible from '@components/AnimatedCollapsible'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; +import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import {useSearchContext} from '@components/Search/SearchContext'; @@ -24,6 +25,7 @@ import TransactionItemRow from '@components/TransactionItemRow'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; @@ -33,6 +35,7 @@ import {search} from '@libs/actions/Search'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getReportAction} from '@libs/ReportActionsUtils'; +import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getSections} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import variables from '@styles/variables'; @@ -136,6 +139,9 @@ function TransactionGroupListItem({ const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0; const shouldDisplayLoadingIndicator = !isGroupByReports && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch; const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const policy = usePolicy(groupItem.policyID); + const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(groupItem.reportID, policy), [groupItem.reportID, policy]); + const canAddTransaction = canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); @@ -334,13 +340,27 @@ function TransactionGroupListItem({ expandButtonStyle={[styles.pv4Half]} > {shouldDisplayEmptyView ? ( - + {translate('search.moneyRequestReport.emptyStateTitle')} + {canAddTransaction && ( + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + /> + )} ) : ( <> From a37ac0b9a8b308ea70507096ac60f0f6b43ff8cb Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Sun, 28 Sep 2025 03:28:25 +0530 Subject: [PATCH 07/18] updated approach to calculate flex wrap. Signed-off-by: krishna2323 --- .../MoneyRequestReportTotalSpend.tsx | 8 ++- .../MoneyRequestReportTransactionList.tsx | 56 +++++-------------- 2 files changed, 19 insertions(+), 45 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index 0f2b2f4f66a7..46f48468b6db 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -19,9 +20,12 @@ type MoneyRequestReportTotalSpendProps = { /** Whether the report has any pending actions */ hasPendingAction: boolean; + + /** Style for the text container */ + textContainerStyle?: StyleProp; }; -function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, report, hasPendingAction}: MoneyRequestReportTotalSpendProps) { +function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, report, hasPendingAction, textContainerStyle}: MoneyRequestReportTotalSpendProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); @@ -29,7 +33,7 @@ function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, r return ( {!isEmptyTransactions && ( - + {translate('common.total')} {convertToDisplayString(totalDisplaySpend, report?.currency)} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 9b0ab761bbe2..b81a8fcf1b4b 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -1,6 +1,6 @@ import {useFocusEffect} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; -import React, {memo, useCallback, useMemo, useRef, useState} from 'react'; +import React, {memo, useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import type {TupleToUnion} from 'type-fest'; @@ -21,7 +21,6 @@ import useReportIsArchived from '@hooks/useReportIsArchived'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import {turnOnMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import {setActiveTransactionThreadIDs} from '@libs/actions/TransactionThreadNavigation'; import {convertToDisplayString} from '@libs/CurrencyUtils'; @@ -266,48 +265,17 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction const transactionItemFSClass = FS.getChatFSClass(personalDetailsList, report); - const {windowWidth} = useWindowDimensions(); - const [wrappedToTwoRows, setWrappedToTwoRows] = React.useState(false); + const [leftW, setLeftW] = useState(0); + const [rightW, setRightW] = useState(0); + const [parentW, setParentW] = useState(0); - // Refs to the two containers we care about - const leftContainerRef = useRef(null); - const rightContainerRef = useRef(null); - - const measureTop = (ref: React.RefObject): Promise => - new Promise((resolve) => { - if (!ref.current) { - resolve(null); - return; - } - // x, y, width, height - ref.current.measureInWindow((_, y /* w, h */) => resolve(y)); - }); - - const computeWrap = useCallback(() => { + const wrappedToTwoRows = useMemo(() => { if (!shouldShowAddExpenseButton) { - setWrappedToTwoRows(false); - return; + return false; } - - // Wait one frame so layout is settled, then measure both - requestAnimationFrame(() => { - Promise.all([measureTop(leftContainerRef), measureTop(rightContainerRef)]) - .then(([leftY, rightY]) => { - if (leftY == null || rightY == null) { - return; - } - setWrappedToTwoRows(Math.round(leftY) !== Math.round(rightY)); - }) - .catch(() => {}); - }); - }, [shouldShowAddExpenseButton]); - console.log('wrappedToTwoRows', wrappedToTwoRows); - - React.useEffect(() => { - // After a width change, wait a frame for layout to settle, then recompute - const id = requestAnimationFrame(() => computeWrap()); - return () => cancelAnimationFrame(id); - }, [windowWidth, computeWrap]); + const GAP = styles.gap6.gap; + return leftW + rightW + GAP > parentW; + }, [leftW, rightW, parentW, shouldShowAddExpenseButton, styles.gap6]); if (isEmptyTransactions) { return ( @@ -387,6 +355,7 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction })} setParentW(e.nativeEvent.layout.width)} style={[ styles.dFlex, styles.flexRow, @@ -401,7 +370,7 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction > {shouldShowAddExpenseButton && ( setLeftW(e.nativeEvent.layout.width)} style={[styles.flexGrow100]} > @@ -424,7 +393,7 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction )} setRightW(e.nativeEvent.layout.width)} > {shouldShowBreakdown && ( @@ -458,6 +427,7 @@ function MoneyRequestReportTransactionList({report, transactions, newTransaction totalDisplaySpend={totalDisplaySpend} report={report} hasPendingAction={hasPendingAction} + textContainerStyle={wrappedToTwoRows && [styles.justifyContentBetween, styles.w100]} /> From 446738e7df996425bd8a30722e9632cc2c630e8a Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 2 Oct 2025 03:14:09 +0530 Subject: [PATCH 08/18] fix ESLint and prettier. Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionList.tsx | 1 - src/libs/ReportUtils.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 354e4d3ab3e1..1e99ae713221 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -2,7 +2,6 @@ import {useFocusEffect} from '@react-navigation/native'; import isEmpty from 'lodash/isEmpty'; import React, {memo, useCallback, useMemo, useState} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; import type {TupleToUnion} from 'type-fest'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import Checkbox from '@components/Checkbox'; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 02444fb945ad..4feca6b64f5a 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -80,8 +80,8 @@ import { createDraftTransaction, getIOUReportActionToApproveOrPay, setMoneyRequestParticipants, - startMoneyRequest, setMoneyRequestParticipantsFromReport, + startMoneyRequest, unholdRequest, } from './actions/IOU'; import {isApprover as isApproverUtils} from './actions/Policy/Member'; From 77f0f8b14dac52a94756441c89dbcd5ef8713c75 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 2 Oct 2025 03:41:44 +0530 Subject: [PATCH 09/18] use window dimensions for column layout. Signed-off-by: krishna2323 --- .../MoneyRequestReportTotalSpend.tsx | 2 +- .../MoneyRequestReportTransactionList.tsx | 67 +++++++------------ 2 files changed, 27 insertions(+), 42 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index 46f48468b6db..f6343c7e5297 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -33,7 +33,7 @@ function MoneyRequestReportTotalSpend({isEmptyTransactions, totalDisplaySpend, r return ( {!isEmptyTransactions && ( - + {translate('common.total')} {convertToDisplayString(totalDisplaySpend, report?.currency)} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 1e99ae713221..f4c0e1fe5076 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -277,18 +277,6 @@ function MoneyRequestReportTransactionList({ const transactionItemFSClass = FS.getChatFSClass(personalDetailsList, report); - const [leftW, setLeftW] = useState(0); - const [rightW, setRightW] = useState(0); - const [parentW, setParentW] = useState(0); - - const wrappedToTwoRows = useMemo(() => { - if (!shouldShowAddExpenseButton) { - return false; - } - const GAP = styles.gap6.gap; - return leftW + rightW + GAP > parentW; - }, [leftW, rightW, parentW, shouldShowAddExpenseButton, styles.gap6]); - if (isEmptyTransactions) { return ( <> @@ -370,7 +358,6 @@ function MoneyRequestReportTransactionList({ })} setParentW(e.nativeEvent.layout.width)} style={[ styles.dFlex, styles.flexRow, @@ -380,36 +367,28 @@ function MoneyRequestReportTransactionList({ styles.mb2, styles.alignItemsStart, styles.minHeight7, - styles.flexWrap, + shouldUseNarrowLayout && styles.flexColumn, ]} > {shouldShowAddExpenseButton && ( - setLeftW(e.nativeEvent.layout.width)} - style={[styles.flexGrow100]} - > - - {}} - shouldAlwaysShowDropdownMenu - customText={translate('iou.addExpense')} - options={addExpenseDropdownOptions} - isSplitButton={false} - buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} - success={false} - anchorAlignment={{ - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, - vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, - }} - style={[styles.mwFitContent]} - /> - - + + {}} + shouldAlwaysShowDropdownMenu + customText={translate('iou.addExpense')} + options={addExpenseDropdownOptions} + isSplitButton={false} + buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} + success={false} + anchorAlignment={{ + horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, + vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, + }} + style={[styles.mwFitContent]} + /> + )} - setRightW(e.nativeEvent.layout.width)} - > + {shouldShowBreakdown && ( {[ @@ -418,7 +397,14 @@ function MoneyRequestReportTransactionList({ ].map(({text, value}) => ( From 3da0833e07ac5aea324684e618fca3d4890bd373 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 2 Oct 2025 15:02:55 +0530 Subject: [PATCH 10/18] minor fixes. Signed-off-by: krishna2323 --- .../Search/TransactionGroupListItem.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index 39dab5581b17..f1356aa2ffdb 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -35,7 +35,7 @@ import {search} from '@libs/actions/Search'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getReportAction} from '@libs/ReportActionsUtils'; -import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions} from '@libs/ReportUtils'; +import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions, isCurrentUserSubmitter} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getSections} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import variables from '@styles/variables'; @@ -132,6 +132,7 @@ function TransactionGroupListItem({ const isEmpty = transactions.length === 0; // Currently only the transaction report groups have transactions where the empty view makes sense + const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${groupItem.reportID}`, {canBeMissing: true}); const shouldDisplayEmptyView = isEmpty && isGroupByReports; const isDisabledOrEmpty = isEmpty || isDisabled; const shouldDisplayShowMoreButton = !isGroupByReports && !!transactionsSnapshotMetadata?.hasMoreResults; @@ -141,7 +142,7 @@ function TransactionGroupListItem({ const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const policy = usePolicy(groupItem.policyID); const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(groupItem.reportID, policy), [groupItem.reportID, policy]); - const canAddTransaction = canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); + const canAddTransaction = isCurrentUserSubmitter(iouReport) && canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); From 900e9c2a3f165c55bb5cebf7041e91c4e96111f0 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 2 Oct 2025 16:05:27 +0530 Subject: [PATCH 11/18] fix add button greyed out on new expense. Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionList.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index f4c0e1fe5076..c5c5d27ff72a 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -28,7 +28,14 @@ import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; import Parser from '@libs/Parser'; import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils'; -import {canAddTransaction, getAddExpenseDropdownOptions, getMoneyRequestSpendBreakdown, isCurrentUserSubmitter, isExpenseReport} from '@libs/ReportUtils'; +import { + canAddTransaction, + getAddExpenseDropdownOptions, + getMoneyRequestSpendBreakdown, + getReportOfflinePendingActionAndErrors, + isCurrentUserSubmitter, + isExpenseReport, +} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; import {getAmount, getCategory, getCreated, getMerchant, getTag, getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear'; @@ -136,6 +143,7 @@ function MoneyRequestReportTransactionList({ const {shouldUseNarrowLayout, isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); const [isModalVisible, setIsModalVisible] = useState(false); const [selectedTransactionID, setSelectedTransactionID] = useState(''); + const {reportPendingAction} = getReportOfflinePendingActionAndErrors(report); const {totalDisplaySpend, nonReimbursableSpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(report); const formattedOutOfPocketAmount = convertToDisplayString(reimbursableSpend, report?.currency); @@ -371,7 +379,7 @@ function MoneyRequestReportTransactionList({ ]} > {shouldShowAddExpenseButton && ( - + {}} shouldAlwaysShowDropdownMenu From 8458902001ed6e1a9a734fd09df171a21b7d1175 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 2 Oct 2025 16:23:50 +0530 Subject: [PATCH 12/18] fix crash on native devices. Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionList.tsx | 1 - src/styles/utils/sizing.ts | 4 ---- 2 files changed, 5 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index c5c5d27ff72a..5c294bfed049 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -392,7 +392,6 @@ function MoneyRequestReportTransactionList({ horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, }} - style={[styles.mwFitContent]} /> )} diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts index 7e1f51a81fcb..e1863a04a7dc 100644 --- a/src/styles/utils/sizing.ts +++ b/src/styles/utils/sizing.ts @@ -147,10 +147,6 @@ export default { maxWidth: '100%', }, - mwFitContent: { - maxWidth: 'fit-content', - }, - wAuto: { width: 'auto', }, From 43a17831a3eee7fde2a186f11c75aae54cb25c3e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 10 Oct 2025 03:13:11 +0530 Subject: [PATCH 13/18] fix merge conflicts. Signed-off-by: krishna2323 --- src/components/MoneyReportHeader.tsx | 5 ++++- .../MoneyRequestReportPreviewContent.tsx | 4 ++-- src/libs/ReportUtils.ts | 18 ++++++++++++++++++ 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index e1ea61d4318a..73b7fe10e6b6 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -597,7 +597,10 @@ function MoneyReportHeader({ onlyShowPayElsewhere, }); - const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(moneyRequestReport?.reportID, policy), [moneyRequestReport?.reportID, policy]); + const addExpenseDropdownOptions = useMemo( + () => getAddExpenseDropdownOptions(moneyRequestReport?.reportID, policy, undefined, undefined, lastDistanceExpenseType), + [moneyRequestReport?.reportID, policy, lastDistanceExpenseType], + ); const exportSubmenuOptions: Record> = useMemo(() => { const options: Record> = { diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index 3296fa0e7458..b2dde8ae4cf2 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -469,8 +469,8 @@ function MoneyRequestReportPreviewContent({ }, [isPaidAnimationRunning, isSubmittingAnimationRunning, violations, iouReport, policy, transactions, isIouReportArchived, invoiceReceiverPolicy, isChatReportArchived]); const addExpenseDropdownOptions = useMemo( - () => getAddExpenseDropdownOptions(iouReport?.reportID, policy, chatReportID, iouReport?.parentReportID), - [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy], + () => getAddExpenseDropdownOptions(iouReport?.reportID, policy, chatReportID, iouReport?.parentReportID, lastDistanceExpenseType), + [chatReportID, iouReport?.parentReportID, iouReport?.reportID, policy, lastDistanceExpenseType], ); const isReportDeleted = action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 49de8a0e9e89..f9f97781d3f3 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -79,8 +79,10 @@ import { canSubmitReport, createDraftTransaction, getIOUReportActionToApproveOrPay, + IOURequestType, setMoneyRequestParticipants, setMoneyRequestParticipantsFromReport, + startDistanceRequest, startMoneyRequest, unholdRequest, } from './actions/IOU'; @@ -2616,6 +2618,7 @@ function getAddExpenseDropdownOptions( policy: OnyxEntry, iouRequestBackToReport?: string, unreportedExpenseBackToReport?: string, + lastDistanceExpenseType?: IOURequestType, ): Array>> { return [ { @@ -2633,6 +2636,21 @@ function getAddExpenseDropdownOptions( startMoneyRequest(CONST.IOU.TYPE.SUBMIT, iouReportID, undefined, false, iouRequestBackToReport); }, }, + { + value: CONST.REPORT.ADD_EXPENSE_OPTIONS.TRACK_DISTANCE_EXPENSE, + text: translateLocal('iou.trackDistance'), + icon: Expensicons.Location, + onSelected: () => { + if (!iouReportID) { + return; + } + if (policy && shouldRestrictUserBillableActions(policy.id)) { + Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(policy.id)); + return; + } + startDistanceRequest(CONST.IOU.TYPE.SUBMIT, iouReportID, lastDistanceExpenseType, false, iouRequestBackToReport); + }, + }, { value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, text: translateLocal('iou.addUnreportedExpense'), From 1e4c1b2b4fae5dd495adc17c7562ca0c71f49f60 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 10 Oct 2025 03:17:43 +0530 Subject: [PATCH 14/18] fix lint errors. Signed-off-by: krishna2323 --- src/components/MoneyReportHeader.tsx | 1 - src/libs/ReportUtils.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 6aa93d57f5ba..81ec78b43b24 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -91,7 +91,6 @@ import { payMoneyRequest, reopenReport, retractReport, - startDistanceRequest, startMoneyRequest, submitReport, unapproveExpenseReport, diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 91a5b524d012..2c985b98432f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -80,13 +80,13 @@ import { canSubmitReport, createDraftTransaction, getIOUReportActionToApproveOrPay, - IOURequestType, setMoneyRequestParticipants, setMoneyRequestParticipantsFromReport, startDistanceRequest, startMoneyRequest, unholdRequest, } from './actions/IOU'; +import type {IOURequestType} from './actions/IOU'; import {isApprover as isApproverUtils} from './actions/Policy/Member'; import {createDraftWorkspace} from './actions/Policy/Policy'; import {hasCreditBankAccount} from './actions/ReimbursementAccount/store'; From 97e945fe68691f32d63f42c5ce3e47d7e25ca7fc Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 10 Oct 2025 03:30:44 +0530 Subject: [PATCH 15/18] remove add expense button from reports page. Signed-off-by: krishna2323 --- .../Search/TransactionGroupListItem.tsx | 23 +------------------ 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx index f81a5106bb72..9cec7328b606 100644 --- a/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx @@ -4,7 +4,6 @@ import ActivityIndicator from '@components/ActivityIndicator'; import AnimatedCollapsible from '@components/AnimatedCollapsible'; import Button from '@components/Button'; import {getButtonRole} from '@components/Button/utils'; -import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import {PressableWithFeedback} from '@components/Pressable'; import {useSearchContext} from '@components/Search/SearchContext'; @@ -26,7 +25,6 @@ import {WideRHPContext} from '@components/WideRHPContextProvider'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useSyncFocus from '@hooks/useSyncFocus'; @@ -36,7 +34,6 @@ import {search} from '@libs/actions/Search'; import {getReportIDForTransaction} from '@libs/MoneyRequestReportUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getReportAction} from '@libs/ReportActionsUtils'; -import {canAddTransaction as canAddTransactionUtil, getAddExpenseDropdownOptions, isCurrentUserSubmitter} from '@libs/ReportUtils'; import {createAndOpenSearchTransactionThread, getColumnsToShow, getSections} from '@libs/SearchUIUtils'; import {getTransactionViolations} from '@libs/TransactionUtils'; import variables from '@styles/variables'; @@ -134,7 +131,6 @@ function TransactionGroupListItem({ const isEmpty = transactions.length === 0; const {markReportIDAsExpense} = useContext(WideRHPContext); // Currently only the transaction report groups have transactions where the empty view makes sense - const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${groupItem.reportID}`, {canBeMissing: true}); const shouldDisplayEmptyView = isEmpty && isGroupByReports; const isDisabledOrEmpty = isEmpty || isDisabled; const shouldDisplayShowMoreButton = !isGroupByReports && !!transactionsSnapshotMetadata?.hasMoreResults; @@ -142,9 +138,6 @@ function TransactionGroupListItem({ const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0; const shouldDisplayLoadingIndicator = !isGroupByReports && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch; const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); - const policy = usePolicy(groupItem.policyID); - const addExpenseDropdownOptions = useMemo(() => getAddExpenseDropdownOptions(groupItem.reportID, policy), [groupItem.reportID, policy]); - const canAddTransaction = isCurrentUserSubmitter(iouReport) && canAddTransactionUtil(groupItem as TransactionReportGroupListItemType); const {amountColumnSize, dateColumnSize, taxAmountColumnSize} = useMemo(() => { const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); @@ -344,27 +337,13 @@ function TransactionGroupListItem({ expandButtonStyle={[styles.pv4Half]} > {shouldDisplayEmptyView ? ( - + {translate('search.moneyRequestReport.emptyStateTitle')} - {canAddTransaction && ( - {}} - shouldAlwaysShowDropdownMenu - customText={translate('iou.addExpense')} - options={addExpenseDropdownOptions} - isSplitButton={false} - buttonSize={CONST.DROPDOWN_BUTTON_SIZE.SMALL} - anchorAlignment={{ - horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, - vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, - }} - /> - )} ) : ( <> From 126385aa262c900163106c7eb0d7d0fd5ba03e71 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 17 Oct 2025 00:51:20 +0530 Subject: [PATCH 16/18] fix ESLint. Signed-off-by: krishna2323 --- .../MoneyRequestReportPreviewContent.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx index 69595877c1e4..0d178f189cc1 100644 --- a/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx +++ b/src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx @@ -69,7 +69,6 @@ import { isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils, } from '@libs/ReportUtils'; import shouldAdjustScroll from '@libs/shouldAdjustScroll'; -import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils'; import {hasPendingUI, isManagedCardTransaction, isPending} from '@libs/TransactionUtils'; import colors from '@styles/theme/colors'; import variables from '@styles/variables'; From 6d2f2deab429f3954d1fa4fb969d50ffef790e0e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 21 Oct 2025 16:02:37 +0530 Subject: [PATCH 17/18] add comment. Signed-off-by: krishna2323 --- .../MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx index f6343c7e5297..33f095247003 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTotalSpend.tsx @@ -21,7 +21,7 @@ type MoneyRequestReportTotalSpendProps = { /** Whether the report has any pending actions */ hasPendingAction: boolean; - /** Style for the text container */ + /** Style for the text container of the total spend */ textContainerStyle?: StyleProp; }; From 33e9d97d30f00712baeda7c501010263ade4326b Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 22 Oct 2025 16:16:20 +0530 Subject: [PATCH 18/18] fix ESlint. Signed-off-by: krishna2323 --- src/libs/ReportUtils.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 37421ec10ff5..f38019098b0f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2674,6 +2674,7 @@ function getAddExpenseDropdownOptions( return [ { value: CONST.REPORT.ADD_EXPENSE_OPTIONS.CREATE_NEW_EXPENSE, + // eslint-disable-next-line @typescript-eslint/no-deprecated text: translateLocal('iou.createExpense'), icon: Expensicons.Plus, onSelected: () => { @@ -2689,6 +2690,7 @@ function getAddExpenseDropdownOptions( }, { value: CONST.REPORT.ADD_EXPENSE_OPTIONS.TRACK_DISTANCE_EXPENSE, + // eslint-disable-next-line @typescript-eslint/no-deprecated text: translateLocal('iou.trackDistance'), icon: Expensicons.Location, onSelected: () => { @@ -2704,6 +2706,7 @@ function getAddExpenseDropdownOptions( }, { value: CONST.REPORT.ADD_EXPENSE_OPTIONS.ADD_UNREPORTED_EXPENSE, + // eslint-disable-next-line @typescript-eslint/no-deprecated text: translateLocal('iou.addUnreportedExpense'), icon: Expensicons.ReceiptPlus, onSelected: () => {