change conditon for layout, add mark as cash to moneyReportHeader, ma…

…ke button appear only for open reports
yuriiz · May 20, 2024 · a19ce44 · a19ce44
1 parent 873ae52
commit a19ce44
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 26 deletions.
diff --git 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
@@ -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')}