change report action button bg color if there's held expenses

src/components/MoneyReportHeader.tsx

@@ -111,6 +111,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const isDraft = ReportUtils.isOpenExpenseReport(moneyRequestReport);
     const connectedIntegration = PolicyUtils.getConnectedIntegration(policy);
     const navigateBackToAfterDelete = useRef<Route>();
+    const hasHeldExpenses = ReportUtils.hasHeldExpenses(moneyRequestReport?.reportID);
     const hasScanningReceipt = ReportUtils.getTransactionsWithReceipts(moneyRequestReport?.reportID).some((t) => TransactionUtils.isReceiptBeingScanned(t));
     const hasOnlyPendingTransactions = allTransactions.length > 0 && allTransactions.every((t) => TransactionUtils.isExpensifyCardTransaction(t) && TransactionUtils.isPending(t));
     const transactionIDs = allTransactions.map((t) => t.transactionID);
@@ -361,6 +362,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                 {shouldShowSettlementButton && !shouldUseNarrowLayout && (
                     <View style={styles.pv2}>
                         <SettlementButton
+                            shouldUseSuccessStyle={!hasHeldExpenses}
                             onlyShowPayElsewhere={onlyShowPayElsewhere}
                             currency={moneyRequestReport?.currency}
                             confirmApproval={confirmApproval}
@@ -426,6 +428,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
                         )}
                         {shouldShowSettlementButton && shouldUseNarrowLayout && (
                             <SettlementButton
+                                shouldUseSuccessStyle={!hasHeldExpenses}
                                 wrapperStyle={[styles.flex1]}
                                 onlyShowPayElsewhere={onlyShowPayElsewhere}
                                 currency={moneyRequestReport?.currency}

src/components/ReportActionItem/ReportPreview.tsx

@@ -126,7 +126,6 @@ function ReportPreview({
     const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [requestType, setRequestType] = useState<ActionHandledType>();
-
     const [paymentType, setPaymentType] = useState<PaymentMethodType>();
 
     const getCanIOUBePaid = useCallback(
@@ -140,6 +139,7 @@ function ReportPreview({
 
     const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = ReportUtils.getNonHeldAndFullAmount(iouReport, shouldShowPayButton);
     const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(iouReport?.reportID ?? '');
+    const hasHeldExpenses = ReportUtils.hasHeldExpenses(iouReport?.reportID ?? '');
 
     const managerID = iouReport?.managerID ?? action.childManagerAccountID ?? 0;
     const {totalDisplaySpend, reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(iouReport);
@@ -534,6 +534,7 @@ function ReportPreview({
                                 </View>
                                 {shouldShowSettlementButton && (
                                     <AnimatedSettlementButton
+                                        shouldUseSuccessStyle={!hasHeldExpenses}
                                         onlyShowPayElsewhere={onlyShowPayElsewhere}
                                         isPaidAnimationRunning={isPaidAnimationRunning}
                                         onAnimationFinish={stopAnimation}

src/components/SelectionList/Search/ActionCell.tsx

@@ -25,6 +25,7 @@ const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> =
 
 type ActionCellProps = {
     action?: SearchTransactionAction;
+    shouldUseSuccessStyle?: boolean;
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
     goToItem: () => void;
@@ -35,6 +36,7 @@ type ActionCellProps = {
 
 function ActionCell({
     action = CONST.SEARCH.ACTION_TYPES.VIEW,
+    shouldUseSuccessStyle = true,
     isLargeScreenWidth = true,
     isSelected = false,
     goToItem,
@@ -99,7 +101,7 @@ function ActionCell({
             style={[styles.w100]}
             innerStyles={buttonInnerStyles}
             isLoading={isLoading}
-            success
+            success={shouldUseSuccessStyle}
             isDisabled={isOffline}
         />
     );

src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx

@@ -24,6 +24,7 @@ type ExpenseItemHeaderNarrowProps = {
     containerStyle?: StyleProp<ViewStyle>;
     onButtonPress: () => void;
     canSelectMultiple?: boolean;
+    shouldUseSuccessStyle?: boolean;
     isSelected?: boolean;
     isDisabled?: boolean | null;
     isDisabledCheckbox?: boolean;
@@ -41,6 +42,7 @@ function ExpenseItemHeaderNarrow({
     canSelectMultiple,
     containerStyle,
     isDisabledCheckbox,
+    shouldUseSuccessStyle = true,
     isSelected,
     isDisabled,
     handleCheckboxPress,
@@ -101,6 +103,7 @@ 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

@@ -109,6 +109,13 @@ function ReportListItem<TItem extends ListItem>({
         return null;
     }
 
+    const reportItemTotal = reportItem?.total ?? 0;
+    const reportItemUnheldTotal = reportItem?.unheldTotal ?? 0;
+    const isOnHold = reportItemTotal - reportItemUnheldTotal === 0;
+
+    const isApproveAction = reportItem.action === CONST.SEARCH.ACTION_TYPES.APPROVE;
+    const shouldUseSuccessStyle = isApproveAction ? !isOnHold : true;
+
     const participantFrom = reportItem.from;
     const participantTo = reportItem.to;
 
@@ -202,6 +209,7 @@ function ReportListItem<TItem extends ListItem>({
                         <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                             <ActionCell
                                 action={reportItem.action}
+                                shouldUseSuccessStyle={shouldUseSuccessStyle}
                                 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 from 'react';
+import React, {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Checkbox from '@components/Checkbox';
@@ -265,6 +265,11 @@ function TransactionListItemRow({
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
 
+    const isOnHold = useMemo(() => TransactionUtils.isOnHold(item), [item]);
+
+    const isApproveAction = item.action === CONST.SEARCH.ACTION_TYPES.APPROVE;
+    const shouldUseSuccessStyle = isApproveAction ? !isOnHold : true;
+
     if (!isLargeScreenWidth) {
         return (
             <View style={containerStyle}>
@@ -278,6 +283,7 @@ function TransactionListItemRow({
                         onButtonPress={onButtonPress}
                         canSelectMultiple={canSelectMultiple}
                         action={item.action}
+                        shouldUseSuccessStyle={shouldUseSuccessStyle}
                         isSelected={item.isSelected}
                         isDisabled={item.isDisabled}
                         isDisabledCheckbox={item.isDisabledCheckbox}
@@ -444,6 +450,7 @@ function TransactionListItemRow({
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         action={item.action}
+                        shouldUseSuccessStyle={shouldUseSuccessStyle}
                         isSelected={isButtonSelected}
                         isChildListItem={isChildListItem}
                         parentAction={parentAction}

src/components/SettlementButton/index.tsx

@@ -47,6 +47,7 @@ function SettlementButton({
     onPress,
     pressOnEnter = false,
     policyID = '-1',
+    shouldUseSuccessStyle = true,
     shouldHidePaymentOptions = false,
     shouldShowApproveButton = false,
     shouldDisableApproveButton = false,
@@ -234,6 +235,7 @@ function SettlementButton({
         >
             {(triggerKYCFlow, buttonRef) => (
                 <ButtonWithDropdownMenu<PaymentType>
+                    success={shouldUseSuccessStyle}
                     onOptionsMenuShow={onPaymentOptionsShow}
                     onOptionsMenuHide={onPaymentOptionsHide}
                     buttonRef={buttonRef}

src/components/SettlementButton/types.ts

@@ -34,6 +34,9 @@ type SettlementButtonProps = {
     /** The IOU/Expense report we are paying */
     iouReport?: OnyxEntry<Report>;
 
+    /** Whether to use the success style or not */
+    shouldUseSuccessStyle?: boolean;
+
     /** Should we show the payment options? */
     shouldHidePaymentOptions?: boolean;