From 00b7a544ba3d3f27a6df4f87437e9ea5f8cd228b Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 8 May 2024 08:57:59 +0200
Subject: [PATCH 1/9] add mark as cash button

---
 src/components/MoneyReportHeader.tsx  | 12 ++++++------
 src/components/MoneyRequestHeader.tsx | 13 +++++++++++++
 src/languages/en.ts                   |  1 +
 src/languages/es.ts                   |  1 +
 src/libs/TransactionUtils.ts          |  4 ++--
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index 68fb0f12733b..11c8ff361537 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -105,7 +105,7 @@ function MoneyReportHeader({
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
 
     const transactionIDs = TransactionUtils.getAllReportTransactions(moneyRequestReport?.reportID).map((transaction) => transaction.transactionID);
-    const haveAllPendingRTERViolation = TransactionUtils.haveAllPendingRTERViolation(transactionIDs);
+    const hasAllPendingRTERViolations = TransactionUtils.hasAllPendingRTERViolations(transactionIDs);
 
     const cancelPayment = useCallback(() => {
         if (!chatReport) {
@@ -121,13 +121,13 @@ function MoneyReportHeader({
 
     const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(moneyRequestReport);
 
-    const shouldShowSettlementButton = !ReportUtils.isInvoiceReport(moneyRequestReport) && (shouldShowPayButton || shouldShowApproveButton) && !haveAllPendingRTERViolation;
+    const shouldShowSettlementButton = !ReportUtils.isInvoiceReport(moneyRequestReport) && (shouldShowPayButton || shouldShowApproveButton) && !hasAllPendingRTERViolations;
 
-    const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !haveAllPendingRTERViolation;
+    const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !hasAllPendingRTERViolations;
     const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowNextStep = !ReportUtils.isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length;
-    const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep;
+    const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || hasAllPendingRTERViolations;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport.currency);
     const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy);
@@ -212,7 +212,7 @@ function MoneyReportHeader({
                 shouldShowBackButton={shouldUseNarrowLayout}
                 onBackButtonPress={onBackButtonPress}
                 // Shows border if no buttons or next steps are showing below the header
-                shouldShowBorderBottom={!(shouldShowAnyButton && shouldUseNarrowLayout) && !(shouldShowNextStep && !shouldUseNarrowLayout) && !haveAllPendingRTERViolation}
+                shouldShowBorderBottom={!(shouldShowAnyButton && shouldUseNarrowLayout) && !(shouldShowNextStep && !shouldUseNarrowLayout) && !hasAllPendingRTERViolations}
                 shouldShowThreeDotsButton
                 threeDotsMenuItems={threeDotsMenuItems}
                 threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
@@ -250,7 +250,7 @@ function MoneyReportHeader({
                     </View>
                 )}
             </HeaderWithBackButton>
-            {haveAllPendingRTERViolation && (
+            {hasAllPendingRTERViolations && (
                 <MoneyRequestHeaderStatusBar
                     title={
                         <Icon
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index bbcf8de69fb2..2cb18c3036e0 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -18,6 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Policy, Report, ReportAction, ReportActions, Session, Transaction, TransactionViolations} from '@src/types/onyx';
 import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
+import Button from './Button';
 import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import Icon from './Icon';
@@ -90,6 +91,7 @@ function MoneyRequestHeader({
     const isActionOwner = typeof parentReportAction?.actorAccountID === 'number' && typeof session?.accountID === 'number' && parentReportAction.actorAccountID === session?.accountID;
     const isPolicyAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
     const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && moneyRequestReport?.managerID !== null && session?.accountID === moneyRequestReport?.managerID;
+    const hasAllPendingRTERViolations = TransactionUtils.hasAllPendingRTERViolations([transaction?.transactionID ?? '']);
 
     const deleteTransaction = useCallback(() => {
         if (parentReportAction) {
@@ -244,6 +246,17 @@ function MoneyRequestHeader({
                         danger
                     />
                 )}
+                {hasAllPendingRTERViolations && (
+                    <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
+                        <Button
+                            medium
+                            success
+                            text={translate('iou.markAsCash')}
+                            style={[styles.w100, styles.pr0]}
+                            onPress={() => {}}
+                        />
+                    </View>
+                )}
             </View>
             <ConfirmModal
                 title={translate('iou.deleteExpense')}
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 52ae1a304287..6b5be87c5c2e 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -647,6 +647,7 @@ export default {
         deleteReceipt: 'Delete receipt',
         pendingMatchWithCreditCard: 'Receipt pending match with credit card.',
         pendingMatchWithCreditCardDescription: 'Receipt pending match with credit card. Marks as cash to ignore and request payment.',
+        markAsCash: 'Mark as cash',
         routePending: 'Route pending...',
         receiptScanning: 'Receipt scanning…',
         receiptScanInProgress: 'Receipt scan in progress.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 15c1e9a6ae7b..62580a3e004e 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -640,6 +640,7 @@ export default {
         deleteReceipt: 'Eliminar recibo',
         pendingMatchWithCreditCard: 'Recibo pendiente de conciliar con la tarjeta de crédito.',
         pendingMatchWithCreditCardDescription: 'Recibo pendiente de conciliar con tarjeta de crédito. Marcar como efectivo para ignorar y solicitar pago.',
+        markAsCash: 'Marcar como efectivo',
         routePending: 'Ruta pendiente...',
         receiptIssuesFound: (count: number) => `${count === 1 ? 'Problema encontrado' : 'Problemas encontrados'}`,
         fieldPending: 'Pendiente...',
diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
index dba6ae5178dd..cf77b4f50df9 100644
--- a/src/libs/TransactionUtils.ts
+++ b/src/libs/TransactionUtils.ts
@@ -524,7 +524,7 @@ function hasPendingRTERViolation(transactionViolations?: TransactionViolations |
 /**
  * Check if there is pending rter violation in transactionViolations.
  */
-function haveAllPendingRTERViolation(transactionIds: string[]): boolean {
+function hasAllPendingRTERViolations(transactionIds: string[]): boolean {
     const transactionsWithRTERViolations = transactionIds.map((transactionId) => hasPendingRTERViolation(getTransactionViolations(transactionId, allTransactionViolations)));
     return transactionsWithRTERViolations.length !== 0 && transactionsWithRTERViolations.every((value) => value === true);
 }
@@ -750,7 +750,7 @@ export {
     areRequiredFieldsEmpty,
     hasMissingSmartscanFields,
     hasPendingRTERViolation,
-    haveAllPendingRTERViolation,
+    hasAllPendingRTERViolations,
     hasPendingUI,
     getWaypointIndex,
     waypointHasValidAddress,

From f4b356c089b0eee004e14bc8403dcc2e66e07eac Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 8 May 2024 12:43:15 +0200
Subject: [PATCH 2/9] fix button border

---
 src/components/MoneyRequestHeader.tsx       | 2 +-
 src/pages/home/report/ReportActionsList.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 2cb18c3036e0..b44ef0389af1 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -234,7 +234,7 @@ function MoneyRequestHeader({
                             )
                         }
                         description={pendingDescription}
-                        shouldShowBorderBottom={!isOnHold}
+                        shouldShowBorderBottom={!isOnHold && !hasAllPendingRTERViolations}
                         additionalViewStyle={[styles.mr2]}
                     />
                 )}
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index c2f18e04c52e..96575ba1e384 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -192,9 +192,9 @@ function ReportActionsList({
     const lastReadTimeRef = useRef(report.lastReadTime);
     // Single MoneyRequest
     // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}6196867412357270168`, {cardID: 1, merchant: 'single MoneyRequest test'});
+    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}2827781559349986119`, {cardID: 1, merchant: 'single MoneyRequest test'});
     // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}6196867412357270168`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
+    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}2827781559349986119`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
     // Multiple MoneyRequests test
     // eslint-disable-next-line rulesdir/prefer-actions-set-data
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}1304796714991934480`, {cardID: 1, merchant: 'multiple MoneyRequests test 1'});

From ef73856692af3e8dff7e180a0ce7cc9005cc40ae Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 8 May 2024 13:27:51 +0200
Subject: [PATCH 3/9] wire up action

---
 src/components/MoneyRequestHeader.tsx       |  5 ++++-
 src/libs/actions/Transaction.ts             | 14 ++++++++----
 src/pages/home/report/ReportActionsList.tsx | 24 ---------------------
 3 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index b44ef0389af1..92508ede51e7 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -13,6 +13,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import * as IOU from '@userActions/IOU';
+import * as TransactionActions from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -253,7 +254,9 @@ function MoneyRequestHeader({
                             success
                             text={translate('iou.markAsCash')}
                             style={[styles.w100, styles.pr0]}
-                            onPress={() => {}}
+                            onPress={() => {
+                                TransactionActions.markAsCash(transaction?.transactionID ?? '', report.parentReportID ?? '');
+                            }}
                         />
                     </View>
                 )}
diff --git a/src/libs/actions/Transaction.ts b/src/libs/actions/Transaction.ts
index f403ed5a86bc..a9caba0ecb94 100644
--- a/src/libs/actions/Transaction.ts
+++ b/src/libs/actions/Transaction.ts
@@ -11,7 +11,7 @@ import {buildOptimisticDismissedViolationReportAction} from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {RecentWaypoint, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
+import type {RecentWaypoint, ReportActions, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
 import type {OnyxData} from '@src/types/onyx/Request';
 import type {WaypointCollection} from '@src/types/onyx/Transaction';
 
@@ -33,6 +33,12 @@ Onyx.connect({
     },
 });
 
+let allTransactionViolations: TransactionViolations = [];
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
+    callback: (val) => (allTransactionViolations = val ?? []),
+});
+
 function createInitialWaypoints(transactionID: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {
         comment: {
@@ -265,7 +271,7 @@ function clearError(transactionID: string) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {errors: null});
 }
 
-function markAsCash(transactionID: string, transactionThreadReportID: string, existingViolations: TransactionViolation[]) {
+function markAsCash(transactionID: string, transactionThreadReportID: string) {
     const optimisticReportAction = buildOptimisticDismissedViolationReportAction({
         reason: 'manual',
         violationName: CONST.VIOLATIONS.RTER,
@@ -279,7 +285,7 @@ function markAsCash(transactionID: string, transactionThreadReportID: string, ex
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`,
-                value: existingViolations.filter((violation: TransactionViolation) => violation.name !== CONST.VIOLATIONS.RTER),
+                value: allTransactionViolations.filter((violation: TransactionViolation) => violation.name !== CONST.VIOLATIONS.RTER),
             },
             // Optimistically adding the system message indicating we dismissed the violation
             {
@@ -293,7 +299,7 @@ function markAsCash(transactionID: string, transactionThreadReportID: string, ex
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transactionID}`,
-                value: existingViolations,
+                value: allTransactionViolations,
             },
             {
                 onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx
index 96575ba1e384..b5dfefd18e69 100644
--- a/src/pages/home/report/ReportActionsList.tsx
+++ b/src/pages/home/report/ReportActionsList.tsx
@@ -6,7 +6,6 @@ import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 're
 import {DeviceEventEmitter, InteractionManager} from 'react-native';
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import Onyx from 'react-native-onyx';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import InvertedFlatList from '@components/InvertedFlatList';
 import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
@@ -27,7 +26,6 @@ import type {CentralPaneNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -191,28 +189,6 @@ function ReportActionsList({
     const lastVisibleActionCreatedRef = useRef(report.lastVisibleActionCreated);
     const lastReadTimeRef = useRef(report.lastReadTime);
     // Single MoneyRequest
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}2827781559349986119`, {cardID: 1, merchant: 'single MoneyRequest test'});
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}2827781559349986119`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
-    // Multiple MoneyRequests test
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}1304796714991934480`, {cardID: 1, merchant: 'multiple MoneyRequests test 1'});
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}1304796714991934480`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}6286508495235425496`, {cardID: 1, merchant: 'multiple MoneyRequests test 2'});
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}6286508495235425496`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}2150079702326626524`, {cardID: 1, merchant: 'multiple MoneyRequests test 3'});
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}2150079702326626524`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
-    // One-Expense Chat test
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION}2438117170083649063`, {cardID: 1, merchant: 'One-Expense Chat test'});
-    // eslint-disable-next-line rulesdir/prefer-actions-set-data
-    Onyx.merge(`${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}2438117170083649063`, [{type: 'test', name: CONST.VIOLATIONS.RTER, data: {pendingPattern: true}}]);
 
     const sortedVisibleReportActions = useMemo(
         () =>

From c8cb397ba00790b9a00772a72b5d7b44fd202f34 Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 8 May 2024 13:36:54 +0200
Subject: [PATCH 4/9] fix report id

---
 src/components/MoneyRequestHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 92508ede51e7..8fe20ec13074 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -255,7 +255,7 @@ function MoneyRequestHeader({
                             text={translate('iou.markAsCash')}
                             style={[styles.w100, styles.pr0]}
                             onPress={() => {
-                                TransactionActions.markAsCash(transaction?.transactionID ?? '', report.parentReportID ?? '');
+                                TransactionActions.markAsCash(transaction?.transactionID ?? '', transaction?.reportID ?? '');
                             }}
                         />
                     </View>

From 13e83354ac6260d197f1bf9bb087d3d79bfd63c1 Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Fri, 17 May 2024 10:08:19 +0200
Subject: [PATCH 5/9] handle button ui for the web breakpoints

---
 src/components/MoneyRequestHeader.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index a2c95f597bff..05b906852dc8 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -89,13 +89,14 @@ function MoneyRequestHeader({
     const isSettled = ReportUtils.isSettled(moneyRequestReport?.reportID);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
     const isOnHold = TransactionUtils.isOnHold(transaction);
-    const {windowWidth} = useWindowDimensions();
+    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
 
     // Only the requestor can take delete the expense, admins can only edit it.
     const isActionOwner = typeof parentReportAction?.actorAccountID === 'number' && typeof session?.accountID === 'number' && parentReportAction.actorAccountID === session?.accountID;
     const isPolicyAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
     const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && moneyRequestReport?.managerID !== null && session?.accountID === moneyRequestReport?.managerID;
     const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '']);
+    const showFullWidthMarkAsCashButton = isSmallScreenWidth && hasAllPendingRTERViolations;
 
     const deleteTransaction = useCallback(() => {
         if (parentReportAction) {
@@ -150,7 +151,11 @@ function MoneyRequestHeader({
             return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription'), shouldShowBorderBottom: true};
         }
         if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '', transactionViolations))) {
-            return {title: getStatusIcon(Expensicons.Hourglass), description: translate('iou.pendingMatchWithCreditCardDescription'), shouldShowBorderBottom: !hasAllPendingRTERViolations};
+            return {
+                title: getStatusIcon(Expensicons.Hourglass),
+                description: translate('iou.pendingMatchWithCreditCardDescription'),
+                shouldShowBorderBottom: !showFullWidthMarkAsCashButton,
+            };
         }
     };
 
@@ -234,7 +239,19 @@ function MoneyRequestHeader({
                     policy={policy}
                     shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={onBackButtonPress}
-                />
+                >
+                    {!isSmallScreenWidth && hasAllPendingRTERViolations && (
+                        <Button
+                            success
+                            medium
+                            text={translate('iou.markAsCash')}
+                            style={[styles.p0]}
+                            onPress={() => {
+                                TransactionActions.markAsCash(transaction?.transactionID ?? '', transaction?.reportID ?? '');
+                            }}
+                        />
+                    )}
+                </HeaderWithBackButton>
                 {statusBarProps && (
                     <MoneyRequestHeaderStatusBar
                         title={statusBarProps.title}
@@ -243,7 +260,7 @@ function MoneyRequestHeader({
                         shouldShowBorderBottom={statusBarProps.shouldShowBorderBottom}
                     />
                 )}
-                {hasAllPendingRTERViolations && (
+                {showFullWidthMarkAsCashButton && (
                     <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
                         <Button
                             medium

From a19ce4400f632e2ff89ee9ce1a08cb8f59ff514e Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Mon, 20 May 2024 11:06:14 +0200
Subject: [PATCH 6/9] change conditon for layout, add mark as cash to
 moneyReportHeader, make button appear only for open reports

---
 src/components/MoneyReportHeader.tsx  | 60 +++++++++++++++++++++------
 src/components/MoneyRequestHeader.tsx | 29 ++++++-------
 2 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
index dbdb65b88cf1..c9e73a125fee 100644
--- a/src/components/MoneyReportHeader.tsx
+++ b/src/components/MoneyReportHeader.tsx
@@ -13,6 +13,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import * as IOU from '@userActions/IOU';
+import * as TransactionActions from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -125,6 +126,7 @@ function MoneyReportHeader({
 
     const shouldShowSubmitButton = isDraft && reimbursableSpend !== 0 && !allHavePendingRTERViolation;
     const shouldDisableSubmitButton = shouldShowSubmitButton && !ReportUtils.isAllowedToSubmitDraftExpenseReport(moneyRequestReport);
+    const shouldShowMarkAsCashButton = isDraft && allHavePendingRTERViolation;
     const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
     const shouldShowNextStep = !ReportUtils.isClosedExpenseReportWithNoExpenses(moneyRequestReport) && isFromPaidPolicy && !!nextStep?.message?.length && !allHavePendingRTERViolation;
     const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextStep || allHavePendingRTERViolation;
@@ -169,6 +171,16 @@ function MoneyReportHeader({
         setIsDeleteRequestModalVisible(false);
     }, [moneyRequestReport?.reportID, requestParentReportAction, setIsDeleteRequestModalVisible]);
 
+    const markAsCash = useCallback(() => {
+        if (!requestParentReportAction) {
+            return;
+        }
+        const iouTransactionID = requestParentReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? requestParentReportAction.originalMessage?.IOUTransactionID ?? '' : '';
+        const reportID = transactionThreadReport?.reportID ?? '';
+
+        TransactionActions.markAsCash(iouTransactionID, reportID);
+    }, [requestParentReportAction, transactionThreadReport?.reportID]);
+
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
     const isWaitingForSubmissionFromCurrentUser = useMemo(
         () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
@@ -249,20 +261,44 @@ function MoneyReportHeader({
                         />
                     </View>
                 )}
+                {shouldShowMarkAsCashButton && !shouldUseNarrowLayout && (
+                    <View style={[styles.pv2]}>
+                        <Button
+                            medium
+                            success
+                            text={translate('iou.markAsCash')}
+                            style={[styles.pv2, styles.pr0]}
+                            onPress={markAsCash}
+                        />
+                    </View>
+                )}
             </HeaderWithBackButton>
             {allHavePendingRTERViolation && (
-                <MoneyRequestHeaderStatusBar
-                    title={
-                        <Icon
-                            src={Expensicons.Hourglass}
-                            height={variables.iconSizeSmall}
-                            width={variables.iconSizeSmall}
-                            fill={theme.icon}
-                        />
-                    }
-                    description={translate('iou.pendingMatchWithCreditCardDescription')}
-                    shouldShowBorderBottom
-                />
+                <View>
+                    {shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
+                        <View style={[styles.ph5, styles.pb3]}>
+                            <Button
+                                medium
+                                success
+                                text={translate('iou.markAsCash')}
+                                style={[styles.w100, styles.pr0]}
+                                onPress={markAsCash}
+                            />
+                        </View>
+                    )}
+                    <MoneyRequestHeaderStatusBar
+                        title={
+                            <Icon
+                                src={Expensicons.Hourglass}
+                                height={variables.iconSizeSmall}
+                                width={variables.iconSizeSmall}
+                                fill={theme.icon}
+                            />
+                        }
+                        description={translate('iou.pendingMatchWithCreditCardDescription')}
+                        shouldShowBorderBottom
+                    />
+                </View>
             )}
             <View style={isMoreContentShown ? [styles.dFlex, styles.flexColumn, styles.borderBottom] : []}>
                 {shouldShowSettlementButton && shouldUseNarrowLayout && (
diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 05b906852dc8..2fd7cd6467b5 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -88,15 +88,16 @@ function MoneyRequestHeader({
     const moneyRequestReport = parentReport;
     const isSettled = ReportUtils.isSettled(moneyRequestReport?.reportID);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
+    const isDraft = ReportUtils.isOpenExpenseReport(moneyRequestReport);
     const isOnHold = TransactionUtils.isOnHold(transaction);
-    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const {windowWidth} = useWindowDimensions();
 
     // Only the requestor can take delete the expense, admins can only edit it.
     const isActionOwner = typeof parentReportAction?.actorAccountID === 'number' && typeof session?.accountID === 'number' && parentReportAction.actorAccountID === session?.accountID;
     const isPolicyAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
     const isApprover = ReportUtils.isMoneyRequestReport(moneyRequestReport) && moneyRequestReport?.managerID !== null && session?.accountID === moneyRequestReport?.managerID;
     const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '']);
-    const showFullWidthMarkAsCashButton = isSmallScreenWidth && hasAllPendingRTERViolations;
+    const shouldShowMarkAsCashButton = isDraft && hasAllPendingRTERViolations;
 
     const deleteTransaction = useCallback(() => {
         if (parentReportAction) {
@@ -154,7 +155,7 @@ function MoneyRequestHeader({
             return {
                 title: getStatusIcon(Expensicons.Hourglass),
                 description: translate('iou.pendingMatchWithCreditCardDescription'),
-                shouldShowBorderBottom: !showFullWidthMarkAsCashButton,
+                shouldShowBorderBottom: true,
             };
         }
     };
@@ -240,7 +241,7 @@ function MoneyRequestHeader({
                     shouldShowBackButton={shouldUseNarrowLayout}
                     onBackButtonPress={onBackButtonPress}
                 >
-                    {!isSmallScreenWidth && hasAllPendingRTERViolations && (
+                    {shouldShowMarkAsCashButton && !shouldUseNarrowLayout && (
                         <Button
                             success
                             medium
@@ -252,16 +253,8 @@ function MoneyRequestHeader({
                         />
                     )}
                 </HeaderWithBackButton>
-                {statusBarProps && (
-                    <MoneyRequestHeaderStatusBar
-                        title={statusBarProps.title}
-                        description={statusBarProps.description}
-                        danger={statusBarProps.danger}
-                        shouldShowBorderBottom={statusBarProps.shouldShowBorderBottom}
-                    />
-                )}
-                {showFullWidthMarkAsCashButton && (
-                    <View style={[styles.ph5, styles.pb3, styles.borderBottom]}>
+                {shouldShowMarkAsCashButton && shouldUseNarrowLayout && (
+                    <View style={[styles.ph5, styles.pb3]}>
                         <Button
                             medium
                             success
@@ -273,6 +266,14 @@ function MoneyRequestHeader({
                         />
                     </View>
                 )}
+                {statusBarProps && (
+                    <MoneyRequestHeaderStatusBar
+                        title={statusBarProps.title}
+                        description={statusBarProps.description}
+                        danger={statusBarProps.danger}
+                        shouldShowBorderBottom={statusBarProps.shouldShowBorderBottom}
+                    />
+                )}
             </View>
             <ConfirmModal
                 title={translate('iou.deleteExpense')}

From bd9efb1e273a8d4eb910503d262ac7bb668700ed Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 22 May 2024 01:10:48 +0200
Subject: [PATCH 7/9] add threadId to the action

---
 src/components/MoneyRequestHeader.tsx |  6 +++++-
 src/pages/home/ReportScreen.tsx       | 11 ++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 2fd7cd6467b5..5063009b415e 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -66,6 +66,9 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
 
     /** Method to trigger when pressing close button of the header */
     onBackButtonPress: () => void;
+
+    /** The reportID of the transaction thread report associated with this current report, if any */
+    transactionThreadReportID?: string | null;
 };
 
 function MoneyRequestHeader({
@@ -79,6 +82,7 @@ function MoneyRequestHeader({
     policy,
     shouldUseNarrowLayout = false,
     onBackButtonPress,
+    transactionThreadReportID,
 }: MoneyRequestHeaderProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -248,7 +252,7 @@ function MoneyRequestHeader({
                             text={translate('iou.markAsCash')}
                             style={[styles.p0]}
                             onPress={() => {
-                                TransactionActions.markAsCash(transaction?.transactionID ?? '', transaction?.reportID ?? '');
+                                TransactionActions.markAsCash(transaction?.transactionID ?? '', transactionThreadReportID ?? '');
                             }}
                         />
                     )}
diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index 8620d8d4866e..7bfe2b704b5e 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -344,6 +344,11 @@ function ReportScreen({
         />
     );
 
+    const transactionThreadReportID = useMemo(
+        () => ReportActionsUtils.getOneTransactionThreadReportID(report.reportID, reportActions ?? [], false, isOffline),
+        [report.reportID, reportActions, isOffline],
+    );
+
     if (isSingleTransactionView) {
         headerView = (
             <MoneyRequestHeader
@@ -352,15 +357,11 @@ function ReportScreen({
                 parentReportAction={parentReportAction}
                 shouldUseNarrowLayout={shouldUseNarrowLayout}
                 onBackButtonPress={onBackButtonPress}
+                transactionThreadReportID={transactionThreadReportID}
             />
         );
     }
 
-    const transactionThreadReportID = useMemo(
-        () => ReportActionsUtils.getOneTransactionThreadReportID(report.reportID, reportActions ?? [], false, isOffline),
-        [report.reportID, reportActions, isOffline],
-    );
-
     useEffect(() => {
         if (!transactionThreadReportID || !route.params.reportActionID) {
             return;

From 3c619d0214477076c2fd0b52df6b0554933711bc Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 22 May 2024 15:10:02 +0200
Subject: [PATCH 8/9] extract mark as cash

---
 src/components/MoneyRequestHeader.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 5063009b415e..40c40f2203ff 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -116,6 +116,10 @@ function MoneyRequestHeader({
         setIsDeleteModalVisible(false);
     }, [parentReport?.reportID, parentReportAction, setIsDeleteModalVisible]);
 
+    const markAsCash = useCallback(() => {
+        TransactionActions.markAsCash(transaction?.transactionID ?? '', transactionThreadReportID ?? '');
+    }, [transaction?.transactionID, transactionThreadReportID]);
+
     const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
 
     const isDeletedParentAction = ReportActionsUtils.isDeletedAction(parentReportAction);
@@ -152,9 +156,6 @@ function MoneyRequestHeader({
         if (TransactionUtils.isExpensifyCardTransaction(transaction) && TransactionUtils.isPending(transaction)) {
             return {title: getStatusIcon(Expensicons.CreditCardHourglass), description: translate('iou.transactionPendingDescription'), shouldShowBorderBottom: true};
         }
-        if (isScanning) {
-            return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription'), shouldShowBorderBottom: true};
-        }
         if (TransactionUtils.hasPendingRTERViolation(TransactionUtils.getTransactionViolations(transaction?.transactionID ?? '', transactionViolations))) {
             return {
                 title: getStatusIcon(Expensicons.Hourglass),
@@ -162,6 +163,9 @@ function MoneyRequestHeader({
                 shouldShowBorderBottom: true,
             };
         }
+        if (isScanning) {
+            return {title: getStatusIcon(Expensicons.ReceiptScan), description: translate('iou.receiptScanInProgressDescription'), shouldShowBorderBottom: true};
+        }
     };
 
     const statusBarProps = getStatusBarProps();
@@ -251,9 +255,7 @@ function MoneyRequestHeader({
                             medium
                             text={translate('iou.markAsCash')}
                             style={[styles.p0]}
-                            onPress={() => {
-                                TransactionActions.markAsCash(transaction?.transactionID ?? '', transactionThreadReportID ?? '');
-                            }}
+                            onPress={markAsCash}
                         />
                     )}
                 </HeaderWithBackButton>
@@ -264,9 +266,7 @@ function MoneyRequestHeader({
                             success
                             text={translate('iou.markAsCash')}
                             style={[styles.w100, styles.pr0]}
-                            onPress={() => {
-                                TransactionActions.markAsCash(transaction?.transactionID ?? '', transaction?.reportID ?? '');
-                            }}
+                            onPress={markAsCash}
                         />
                     </View>
                 )}

From 44c1473db7ac6e49d1568a952e9f9b289876cd6f Mon Sep 17 00:00:00 2001
From: BrtqKr <bartlomiej.krason@swmansion.com>
Date: Wed, 22 May 2024 15:16:29 +0200
Subject: [PATCH 9/9] cleanup

---
 src/components/MoneyRequestHeader.tsx | 8 ++------
 src/pages/home/ReportScreen.tsx       | 1 -
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx
index 40c40f2203ff..13e8eb7be432 100644
--- a/src/components/MoneyRequestHeader.tsx
+++ b/src/components/MoneyRequestHeader.tsx
@@ -66,9 +66,6 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
 
     /** Method to trigger when pressing close button of the header */
     onBackButtonPress: () => void;
-
-    /** The reportID of the transaction thread report associated with this current report, if any */
-    transactionThreadReportID?: string | null;
 };
 
 function MoneyRequestHeader({
@@ -82,7 +79,6 @@ function MoneyRequestHeader({
     policy,
     shouldUseNarrowLayout = false,
     onBackButtonPress,
-    transactionThreadReportID,
 }: MoneyRequestHeaderProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -117,8 +113,8 @@ function MoneyRequestHeader({
     }, [parentReport?.reportID, parentReportAction, setIsDeleteModalVisible]);
 
     const markAsCash = useCallback(() => {
-        TransactionActions.markAsCash(transaction?.transactionID ?? '', transactionThreadReportID ?? '');
-    }, [transaction?.transactionID, transactionThreadReportID]);
+        TransactionActions.markAsCash(transaction?.transactionID ?? '', report.reportID);
+    }, [report.reportID, transaction?.transactionID]);
 
     const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
 
diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index 7bfe2b704b5e..f1a5bbe10231 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -357,7 +357,6 @@ function ReportScreen({
                 parentReportAction={parentReportAction}
                 shouldUseNarrowLayout={shouldUseNarrowLayout}
                 onBackButtonPress={onBackButtonPress}
-                transactionThreadReportID={transactionThreadReportID}
             />
         );
     }