Merge pull request #54732 from mananjadhav/mj-revert-held-expense-gre…

…y-approve

fix: revert approver button gray color for held expenses

src/components/ButtonWithDropdownMenu/index.tsx

@@ -59,6 +59,7 @@ function ButtonWithDropdownMenu<IValueType>({
     // eslint-disable-next-line react-compiler/react-compiler
     const dropdownButtonRef = isSplitButton ? buttonRef : mergeRefs(buttonRef, dropdownAnchor);
     const selectedItem = options.at(selectedItemIndex) ?? options.at(0);
+    const areAllOptionsDisabled = options.every((option) => option.disabled);
     const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(buttonSize);
     const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
     const nullCheckRef = (ref: MutableRefObject<View | null>) => ref ?? null;
@@ -130,7 +131,7 @@ function ButtonWithDropdownMenu<IValueType>({
                         ref={dropdownButtonRef}
                         onPress={handlePress}
                         text={customText ?? selectedItem?.text ?? ''}
-                        isDisabled={isDisabled || !!selectedItem?.disabled}
+                        isDisabled={isDisabled || areAllOptionsDisabled}
                         isLoading={isLoading}
                         shouldRemoveRightBorderRadius
                         style={isSplitButton ? [styles.flex1, styles.pr0] : {}}

src/components/MoneyReportHeader.tsx

@@ -146,7 +146,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const policyType = policy?.type;
     const connectedIntegration = getConnectedIntegration(policy);
     const navigateBackToAfterDelete = useRef<Route>();
-    const hasHeldExpenses = hasHeldExpensesReportUtils(moneyRequestReport?.reportID);
     const hasScanningReceipt = getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => isReceiptBeingScanned(t));
     const hasOnlyPendingTransactions = useMemo(() => {
         return !!transactions && transactions.length > 0 && transactions.every((t) => isExpensifyCardTransaction(t) && isPending(t));
@@ -377,7 +376,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 {shouldShowSettlementButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>
                         <SettlementButton
-                            shouldUseSuccessStyle={!hasHeldExpenses}
                             onlyShowPayElsewhere={onlyShowPayElsewhere}
                             currency={moneyRequestReport?.currency}
                             confirmApproval={confirmApproval}
@@ -443,7 +441,6 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                         )}
                         {shouldShowSettlementButton && shouldUseNarrowLayout && (
                             <SettlementButton
-                                shouldUseSuccessStyle={!hasHeldExpenses}
                                 wrapperStyle={[styles.flex1]}
                                 onlyShowPayElsewhere={onlyShowPayElsewhere}
                                 currency={moneyRequestReport?.currency}

src/components/ReportActionItem/ReportPreview.tsx

@@ -194,7 +194,6 @@ function ReportPreview({
 
     const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = getNonHeldAndFullAmount(iouReport, shouldShowPayButton);
     const hasOnlyHeldExpenses = hasOnlyHeldExpensesReportUtils(iouReport?.reportID);
-    const hasHeldExpenses = hasHeldExpensesReportUtils(iouReport?.reportID);
 
     const managerID = iouReport?.managerID ?? action.childManagerAccountID ?? CONST.DEFAULT_NUMBER_ID;
     const {totalDisplaySpend, reimbursableSpend} = getMoneyRequestSpendBreakdown(iouReport);
@@ -622,7 +621,6 @@ function ReportPreview({
                                 </View>
                                 {shouldShowSettlementButton && (
                                     <AnimatedSettlementButton
-                                        shouldUseSuccessStyle={!hasHeldExpenses}
                                         onlyShowPayElsewhere={onlyShowPayElsewhere}
                                         isPaidAnimationRunning={isPaidAnimationRunning}
                                         isApprovedAnimationRunning={isApprovedAnimationRunning}

src/components/SelectionList/Search/ActionCell.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
@@ -25,7 +25,6 @@ const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> =
 
 type ActionCellProps = {
     action?: SearchTransactionAction;
-    shouldUseSuccessStyle?: boolean;
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
     goToItem: () => void;
@@ -36,7 +35,6 @@ type ActionCellProps = {
 
 function ActionCell({
     action = CONST.SEARCH.ACTION_TYPES.VIEW,
-    shouldUseSuccessStyle: shouldUseSuccessStyleProp = true,
     isLargeScreenWidth = true,
     isSelected = false,
     goToItem,
@@ -51,17 +49,6 @@ function ActionCell({
     const {isOffline} = useNetwork();
 
     const text = isChildListItem ? translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW]) : translate(actionTranslationsMap[action]);
-
-    const getButtonInnerStyles = useCallback(
-        (shouldUseSuccessStyle: boolean) => {
-            if (!isSelected) {
-                return {};
-            }
-            return shouldUseSuccessStyle ? styles.buttonSuccessHovered : styles.buttonDefaultHovered;
-        },
-        [isSelected, styles],
-    );
-
     const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID);
 
     if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE) {
@@ -88,13 +75,15 @@ function ActionCell({
     }
 
     if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW || shouldUseViewAction) {
+        const buttonInnerStyles = isSelected ? styles.buttonDefaultSelected : {};
+
         return isLargeScreenWidth ? (
             <Button
                 text={text}
                 onPress={goToItem}
                 small
                 style={[styles.w100]}
-                innerStyles={getButtonInnerStyles(false)}
+                innerStyles={buttonInnerStyles}
                 link={isChildListItem}
                 shouldUseDefaultHover={!isChildListItem}
                 icon={!isChildListItem && action === CONST.SEARCH.ACTION_TYPES.REVIEW ? Expensicons.DotIndicator : undefined}
@@ -110,9 +99,8 @@ function ActionCell({
             onPress={goToItem}
             small
             style={[styles.w100]}
-            innerStyles={getButtonInnerStyles(shouldUseSuccessStyleProp)}
             isLoading={isLoading}
-            success={shouldUseSuccessStyleProp}
+            success
             isDisabled={isOffline}
         />
     );

src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx

@@ -24,7 +24,6 @@ type ExpenseItemHeaderNarrowProps = {
     containerStyle?: StyleProp<ViewStyle>;
     onButtonPress: () => void;
     canSelectMultiple?: boolean;
-    shouldUseSuccessStyle?: boolean;
     isSelected?: boolean;
     isDisabled?: boolean | null;
     isDisabledCheckbox?: boolean;
@@ -42,7 +41,6 @@ function ExpenseItemHeaderNarrow({
     canSelectMultiple,
     containerStyle,
     isDisabledCheckbox,
-    shouldUseSuccessStyle = true,
     isSelected,
     isDisabled,
     handleCheckboxPress,
@@ -103,7 +101,6 @@ function ExpenseItemHeaderNarrow({
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell
                     action={action}
-                    shouldUseSuccessStyle={shouldUseSuccessStyle}
                     goToItem={onButtonPress}
                     isLargeScreenWidth={false}
                     isSelected={isSelected}

src/components/SelectionList/Search/ReportListItem.tsx

@@ -12,9 +12,8 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {handleActionButtonPress} from '@libs/actions/Search';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -47,7 +46,7 @@ function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProp
     return (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={CurrencyUtils.convertToDisplayString(total, reportItem?.currency)}
+            text={convertToDisplayString(total, reportItem?.currency)}
             style={[styles.optionDisplayName, styles.textNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
         />
     );
@@ -109,8 +108,6 @@ function ReportListItem<TItem extends ListItem>({
         return null;
     }
 
-    const hasHeldExpenses = ReportUtils.hasHeldExpenses('', reportItem.transactions);
-
     const participantFrom = reportItem.from;
     const participantTo = reportItem.to;
 
@@ -169,7 +166,6 @@ function ReportListItem<TItem extends ListItem>({
                         onButtonPress={handleOnButtonPress}
                         containerStyle={[styles.ph3, styles.pt1half, styles.mb1half]}
                         isLoading={reportItem.isActionLoading}
-                        shouldUseSuccessStyle={!hasHeldExpenses}
                     />
                 )}
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, styles.ph3, styles.pv1half]}>
@@ -202,7 +198,6 @@ function ReportListItem<TItem extends ListItem>({
                         <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                             <ActionCell
                                 action={reportItem.action}
-                                shouldUseSuccessStyle={!hasHeldExpenses}
                                 goToItem={handleOnButtonPress}
                                 isSelected={item.isSelected}
                                 isLoading={reportItem.isActionLoading}

src/components/SelectionList/Search/TransactionListItemRow.tsx

@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import React, {useMemo} from 'react';
+import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Checkbox from '@components/Checkbox';
@@ -14,13 +14,21 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
 import {getFileName} from '@libs/fileDownload/FileUtils';
 import Parser from '@libs/Parser';
 import {getThumbnailAndImageURIs} from '@libs/ReceiptUtils';
 import StringUtils from '@libs/StringUtils';
-import * as TransactionUtils from '@libs/TransactionUtils';
+import {
+    getTagForDisplay,
+    getTaxAmount,
+    getCreated as getTransactionCreated,
+    getCurrency as getTransactionCurrency,
+    getDescription as getTransactionDescription,
+    hasReceipt,
+    isReceiptBeingScanned,
+} from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -118,7 +126,7 @@ function ReceiptCell({transactionItem}: TransactionCellProps) {
 function DateCell({transactionItem, showTooltip, isLargeScreenWidth}: TransactionCellProps) {
     const styles = useThemeStyles();
 
-    const created = TransactionUtils.getCreated(transactionItem);
+    const created = getTransactionCreated(transactionItem);
     const date = DateUtils.formatWithUTCTimeZone(created, DateUtils.doesDateBelongToAPastYear(created) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT);
 
     return (
@@ -133,14 +141,14 @@ function DateCell({transactionItem, showTooltip, isLargeScreenWidth}: Transactio
 function MerchantCell({transactionItem, showTooltip, isLargeScreenWidth}: TransactionCellProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const description = TransactionUtils.getDescription(transactionItem);
+    const description = getTransactionDescription(transactionItem);
     let merchantOrDescriptionToDisplay = transactionItem.formattedMerchant;
     if (!merchantOrDescriptionToDisplay && !isLargeScreenWidth) {
         merchantOrDescriptionToDisplay = Parser.htmlToText(Parser.replace(description));
     }
     let merchant = transactionItem.shouldShowMerchant ? merchantOrDescriptionToDisplay : Parser.htmlToText(Parser.replace(description));
 
-    if (TransactionUtils.hasReceipt(transactionItem) && TransactionUtils.isReceiptBeingScanned(transactionItem) && transactionItem.shouldShowMerchant) {
+    if (hasReceipt(transactionItem) && isReceiptBeingScanned(transactionItem) && transactionItem.shouldShowMerchant) {
         merchant = translate('iou.receiptStatusTitle');
     }
     const merchantToDisplay = StringUtils.getFirstLine(merchant);
@@ -156,10 +164,10 @@ function MerchantCell({transactionItem, showTooltip, isLargeScreenWidth}: Transa
 function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: TotalCellProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const currency = TransactionUtils.getCurrency(transactionItem);
-    let amount = CurrencyUtils.convertToDisplayString(transactionItem.formattedTotal, currency);
+    const currency = getTransactionCurrency(transactionItem);
+    let amount = convertToDisplayString(transactionItem.formattedTotal, currency);
 
-    if (TransactionUtils.hasReceipt(transactionItem) && TransactionUtils.isReceiptBeingScanned(transactionItem)) {
+    if (hasReceipt(transactionItem) && isReceiptBeingScanned(transactionItem)) {
         amount = translate('iou.receiptStatusTitle');
     }
 
@@ -216,14 +224,14 @@ function TagCell({isLargeScreenWidth, showTooltip, transactionItem}: Transaction
     return isLargeScreenWidth ? (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={TransactionUtils.getTagForDisplay(transactionItem)}
+            text={getTagForDisplay(transactionItem)}
             style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]}
         />
     ) : (
         <TextWithIconCell
             icon={Expensicons.Tag}
             showTooltip={showTooltip}
-            text={TransactionUtils.getTagForDisplay(transactionItem)}
+            text={getTagForDisplay(transactionItem)}
             textStyle={[styles.textMicro, styles.mnh0]}
         />
     );
@@ -233,13 +241,13 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
     const styles = useThemeStyles();
 
     const isFromExpenseReport = transactionItem.reportType === CONST.REPORT.TYPE.EXPENSE;
-    const taxAmount = TransactionUtils.getTaxAmount(transactionItem, isFromExpenseReport);
-    const currency = TransactionUtils.getCurrency(transactionItem);
+    const taxAmount = getTaxAmount(transactionItem, isFromExpenseReport);
+    const currency = getTransactionCurrency(transactionItem);
 
     return (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={CurrencyUtils.convertToDisplayString(taxAmount, currency)}
+            text={convertToDisplayString(taxAmount, currency)}
             style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
         />
     );
@@ -265,8 +273,6 @@ function TransactionListItemRow({
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
 
-    const isOnHold = useMemo(() => TransactionUtils.isOnHold(item), [item]);
-
     if (!isLargeScreenWidth) {
         return (
             <View style={containerStyle}>
@@ -280,7 +286,6 @@ function TransactionListItemRow({
                         onButtonPress={onButtonPress}
                         canSelectMultiple={canSelectMultiple}
                         action={item.action}
-                        shouldUseSuccessStyle={!isOnHold}
                         isSelected={item.isSelected}
                         isDisabled={item.isDisabled}
                         isDisabledCheckbox={item.isDisabledCheckbox}
@@ -447,7 +452,6 @@ function TransactionListItemRow({
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         action={item.action}
-                        shouldUseSuccessStyle={!isOnHold}
                         isSelected={isButtonSelected}
                         isChildListItem={isChildListItem}
                         parentAction={parentAction}