From d1add2b1fd619ecb967d8426c2d6ca7dbb281589 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Mon, 9 Oct 2023 21:22:59 +0500
Subject: [PATCH 1/5] fix: money request report scroll fix

---
 .../ReportActionItem/MoneyReportView.js       |  65 +++---
 .../ReportActionItem/MoneyRequestView.js      | 201 +++++++++---------
 2 files changed, 132 insertions(+), 134 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index bfdcc59bf89f..3d1c68283630 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -7,7 +7,6 @@ import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
-import CONST from '../../CONST';
 import Text from '../Text';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -33,40 +32,40 @@ function MoneyReportView(props) {
     const {translate} = useLocalize();
 
     return (
-        <View>
-            <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
-                <AnimatedEmptyStateBackground />
-            </View>
-            <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
-                <View style={[styles.flex1, styles.justifyContentCenter]}>
-                    <Text
-                        style={[styles.textLabelSupporting, StyleUtils.getFontSizeStyle(variables.fontSizeNormal)]}
-                        numberOfLines={1}
-                    >
-                        {translate('common.total')}
-                    </Text>
-                </View>
-                <View style={[styles.flexRow, styles.justifyContentCenter]}>
-                    {isSettled && (
-                        <View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
-                            <Icon
-                                src={Expensicons.Checkmark}
-                                fill={themeColors.success}
-                            />
-                        </View>
-                    )}
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
-                    >
-                        {formattedAmount}
-                    </Text>
+        <View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
+            <AnimatedEmptyStateBackground />
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
+                <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
+                    <View style={[styles.flex1, styles.justifyContentCenter]}>
+                        <Text
+                            style={[styles.textLabelSupporting, StyleUtils.getFontSizeStyle(variables.fontSizeNormal)]}
+                            numberOfLines={1}
+                        >
+                            {translate('common.total')}
+                        </Text>
+                    </View>
+                    <View style={[styles.flexRow, styles.justifyContentCenter]}>
+                        {isSettled && (
+                            <View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
+                                <Icon
+                                    src={Expensicons.Checkmark}
+                                    fill={themeColors.success}
+                                />
+                            </View>
+                        )}
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
+                        >
+                            {formattedAmount}
+                        </Text>
+                    </View>
                 </View>
+                <SpacerView
+                    shouldShow={props.shouldShowHorizontalRule}
+                    style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+                />
             </View>
-            <SpacerView
-                shouldShow={props.shouldShowHorizontalRule}
-                style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
-            />
         </View>
     );
 }
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 079bc64d96bf..837fc5be5b46 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -135,124 +135,123 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
     const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;
 
     return (
-        <View>
-            <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
-                <AnimatedEmptyStateBackground />
-            </View>
-
-            {hasReceipt && (
-                <OfflineWithFeedback pendingAction={pendingAction}>
-                    <View style={styles.moneyRequestViewImage}>
-                        <ReportActionItemImage
-                            thumbnail={receiptURIs.thumbnail}
-                            image={receiptURIs.image}
-                            enablePreviewModal
-                        />
-                    </View>
-                </OfflineWithFeedback>
-            )}
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
-                <MenuItemWithTopDescription
-                    title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
-                    shouldShowTitleIcon={isSettled}
-                    titleIcon={Expensicons.Checkmark}
-                    description={description}
-                    titleStyle={styles.newKansasLarge}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
-                    brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                    error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
-                />
-            </OfflineWithFeedback>
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.comment')}>
-                <MenuItemWithTopDescription
-                    description={translate('common.description')}
-                    shouldParseTitle
-                    title={transactionDescription}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    titleStyle={styles.flex1}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
-                    wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
-                    numberOfLinesTitle={0}
-                />
-            </OfflineWithFeedback>
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.created')}>
-                <MenuItemWithTopDescription
-                    description={translate('common.date')}
-                    title={transactionDate}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    titleStyle={styles.flex1}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
-                    brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                    error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
-                />
-            </OfflineWithFeedback>
-            {isDistanceRequest ? (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
-                    <MenuItemWithTopDescription
-                        description={translate('common.distance')}
-                        title={transactionMerchant}
-                        interactive={canEdit}
-                        shouldShowRightIcon={canEdit}
-                        titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
-                    />
-                </OfflineWithFeedback>
-            ) : (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
+        <View style={StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)}>
+            <AnimatedEmptyStateBackground />
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
+                {hasReceipt && (
+                    <OfflineWithFeedback pendingAction={pendingAction}>
+                        <View style={styles.moneyRequestViewImage}>
+                            <ReportActionItemImage
+                                thumbnail={receiptURIs.thumbnail}
+                                image={receiptURIs.image}
+                                enablePreviewModal
+                            />
+                        </View>
+                    </OfflineWithFeedback>
+                )}
+                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
                     <MenuItemWithTopDescription
-                        description={translate('common.merchant')}
-                        title={transactionMerchant}
+                        title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
+                        shouldShowTitleIcon={isSettled}
+                        titleIcon={Expensicons.Checkmark}
+                        description={description}
+                        titleStyle={styles.newKansasLarge}
                         interactive={canEdit}
                         shouldShowRightIcon={canEdit}
-                        titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
-                        brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                        error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
+                        brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                        error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
                     />
                 </OfflineWithFeedback>
-            )}
-            {shouldShowCategory && (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
+                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.comment')}>
                     <MenuItemWithTopDescription
-                        description={translate('common.category')}
-                        title={transactionCategory}
+                        description={translate('common.description')}
+                        shouldParseTitle
+                        title={transactionDescription}
                         interactive={canEdit}
                         shouldShowRightIcon={canEdit}
                         titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
+                        wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
+                        numberOfLinesTitle={0}
                     />
                 </OfflineWithFeedback>
-            )}
-            {shouldShowTag && (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
+                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.created')}>
                     <MenuItemWithTopDescription
-                        description={lodashGet(policyTag, 'name', translate('common.tag'))}
-                        title={transactionTag}
+                        description={translate('common.date')}
+                        title={transactionDate}
                         interactive={canEdit}
                         shouldShowRightIcon={canEdit}
                         titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
+                        brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                        error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
                     />
                 </OfflineWithFeedback>
-            )}
-            {shouldShowBillable && (
-                <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
-                    <Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
-                    <Switch
-                        accessibilityLabel={translate('common.billable')}
-                        isOn={transactionBillable}
-                        onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
-                    />
-                </View>
-            )}
-            <SpacerView
-                shouldShow={shouldShowHorizontalRule}
-                style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
-            />
+                {isDistanceRequest ? (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={translate('common.distance')}
+                            title={transactionMerchant}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
+                        />
+                    </OfflineWithFeedback>
+                ) : (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={translate('common.merchant')}
+                            title={transactionMerchant}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
+                            brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                            error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
+                        />
+                    </OfflineWithFeedback>
+                )}
+                {shouldShowCategory && (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={translate('common.category')}
+                            title={transactionCategory}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
+                        />
+                    </OfflineWithFeedback>
+                )}
+                {shouldShowTag && (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={lodashGet(policyTag, 'name', translate('common.tag'))}
+                            title={transactionTag}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
+                        />
+                    </OfflineWithFeedback>
+                )}
+                {shouldShowBillable && (
+                    <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+                        <Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
+                        <Switch
+                            accessibilityLabel={translate('common.billable')}
+                            isOn={transactionBillable}
+                            onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
+                        />
+                    </View>
+                )}
+                <SpacerView
+                    shouldShow={shouldShowHorizontalRule}
+                    style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+                />
+            </View>
         </View>
     );
 }

From 7459557bf022eaef81b903a63b68d5c491114b9b Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Sun, 15 Oct 2023 21:45:49 +0500
Subject: [PATCH 2/5] fix: difference in money report screen

---
 .../ReportActionItem/MoneyReportView.js       |   6 +-
 .../ReportActionItem/MoneyRequestView.js      | 221 +++++++++---------
 .../report/AnimatedEmptyStateBackground.js    |   1 -
 3 files changed, 115 insertions(+), 113 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 3d1c68283630..2d54764e72aa 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -7,6 +7,7 @@ import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
+import CONST from '../../CONST';
 import Text from '../Text';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -32,7 +33,10 @@ function MoneyReportView(props) {
     const {translate} = useLocalize();
 
     return (
-        <View style={StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)}>
+        <View style={[
+            StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth),
+            StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT),
+        ]}>
             <AnimatedEmptyStateBackground />
             <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
                 <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 289cd70c3332..2cc93912e2da 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -159,134 +159,133 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
     const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;
 
     return (
-        <View>
-            <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
-                <AnimatedEmptyStateBackground />
-            </View>
-
-            {hasReceipt && (
-                <OfflineWithFeedback pendingAction={pendingAction}>
-                    <View style={styles.moneyRequestViewImage}>
-                        <ReportActionItemImage
-                            thumbnail={receiptURIs.thumbnail}
-                            image={receiptURIs.image}
-                            enablePreviewModal
-                        />
-                    </View>
-                </OfflineWithFeedback>
-            )}
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
-                <MenuItemWithTopDescription
-                    title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
-                    shouldShowTitleIcon={isSettled}
-                    titleIcon={Expensicons.Checkmark}
-                    description={amountDescription}
-                    titleStyle={styles.newKansasLarge}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
-                    brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                    error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
-                />
-            </OfflineWithFeedback>
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.comment')}>
-                <MenuItemWithTopDescription
-                    description={translate('common.description')}
-                    shouldParseTitle
-                    title={transactionDescription}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    titleStyle={styles.flex1}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
-                    wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
-                    numberOfLinesTitle={0}
-                />
-            </OfflineWithFeedback>
-            {isDistanceRequest ? (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
+        <View style={StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)}>
+            <AnimatedEmptyStateBackground />
+            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
+                {hasReceipt && (
+                    <OfflineWithFeedback pendingAction={pendingAction}>
+                        <View style={styles.moneyRequestViewImage}>
+                            <ReportActionItemImage
+                                thumbnail={receiptURIs.thumbnail}
+                                image={receiptURIs.image}
+                                enablePreviewModal
+                            />
+                        </View>
+                    </OfflineWithFeedback>
+                )}
+                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.amount')}>
                     <MenuItemWithTopDescription
-                        description={translate('common.distance')}
-                        title={transactionMerchant}
+                        title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
+                        shouldShowTitleIcon={isSettled}
+                        titleIcon={Expensicons.Checkmark}
+                        description={amountDescription}
+                        titleStyle={styles.newKansasLarge}
                         interactive={canEdit}
                         shouldShowRightIcon={canEdit}
-                        titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
+                        brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                        error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
                     />
                 </OfflineWithFeedback>
-            ) : (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
-                    <MenuItemWithTopDescription
-                        description={translate('common.merchant')}
-                        title={transactionMerchant}
-                        interactive={canEdit}
-                        shouldShowRightIcon={canEdit}
-                        titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
-                        brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                        error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
-                    />
-                </OfflineWithFeedback>
-            )}
-            <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.created')}>
-                <MenuItemWithTopDescription
-                    description={translate('common.date')}
-                    title={transactionDate}
-                    interactive={canEdit}
-                    shouldShowRightIcon={canEdit}
-                    titleStyle={styles.flex1}
-                    onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
-                    brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
-                    error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
-                />
-            </OfflineWithFeedback>
-            {shouldShowCategory && (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
+                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.comment')}>
                     <MenuItemWithTopDescription
-                        description={translate('common.category')}
-                        title={transactionCategory}
+                        description={translate('common.description')}
+                        shouldParseTitle
+                        title={transactionDescription}
                         interactive={canEdit}
                         shouldShowRightIcon={canEdit}
                         titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
+                        wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]}
+                        numberOfLinesTitle={0}
                     />
                 </OfflineWithFeedback>
-            )}
-            {shouldShowTag && (
-                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
+                {isDistanceRequest ? (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.waypoints') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={translate('common.distance')}
+                            title={transactionMerchant}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DISTANCE))}
+                        />
+                    </OfflineWithFeedback>
+                ) : (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={translate('common.merchant')}
+                            title={transactionMerchant}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.MERCHANT))}
+                            brickRoadIndicator={hasErrors && isEmptyMerchant ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                            error={hasErrors && isEmptyMerchant ? translate('common.error.enterMerchant') : ''}
+                        />
+                    </OfflineWithFeedback>
+                )}
+                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.created')}>
                     <MenuItemWithTopDescription
-                        description={lodashGet(policyTag, 'name', translate('common.tag'))}
-                        title={transactionTag}
+                        description={translate('common.date')}
+                        title={transactionDate}
                         interactive={canEdit}
                         shouldShowRightIcon={canEdit}
                         titleStyle={styles.flex1}
-                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
-                    />
-                </OfflineWithFeedback>
-            )}
-            {isExpensifyCardTransaction ? (
-                <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
-                    <MenuItemWithTopDescription
-                        description={translate('iou.card')}
-                        title={cardProgramName}
-                        titleStyle={styles.flex1}
-                        interactive={canEdit}
+                        onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
+                        brickRoadIndicator={hasErrors && transactionDate === '' ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
+                        error={hasErrors && transactionDate === '' ? translate('common.error.enterDate') : ''}
                     />
                 </OfflineWithFeedback>
-            ) : null}
-            {shouldShowBillable && (
-                <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
-                    <Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
-                    <Switch
-                        accessibilityLabel={translate('common.billable')}
-                        isOn={transactionBillable}
-                        onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
-                    />
-                </View>
-            )}
-            <SpacerView
-                shouldShow={shouldShowHorizontalRule}
-                style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
-            />
+                {shouldShowCategory && (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={translate('common.category')}
+                            title={transactionCategory}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
+                        />
+                    </OfflineWithFeedback>
+                )}
+                {shouldShowTag && (
+                    <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.tag') || lodashGet(transaction, 'pendingAction')}>
+                        <MenuItemWithTopDescription
+                            description={lodashGet(policyTag, 'name', translate('common.tag'))}
+                            title={transactionTag}
+                            interactive={canEdit}
+                            shouldShowRightIcon={canEdit}
+                            titleStyle={styles.flex1}
+                            onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.TAG))}
+                        />
+                    </OfflineWithFeedback>
+                )}
+                {isExpensifyCardTransaction ? (
+                    <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
+                        <MenuItemWithTopDescription
+                            description={translate('iou.card')}
+                            title={cardProgramName}
+                            titleStyle={styles.flex1}
+                            interactive={canEdit}
+                        />
+                    </OfflineWithFeedback>
+                ) : null}
+                {shouldShowBillable && (
+                    <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
+                        <Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
+                        <Switch
+                            accessibilityLabel={translate('common.billable')}
+                            isOn={transactionBillable}
+                            onToggle={(value) => IOU.editMoneyRequest(transaction.transactionID, report.reportID, {billable: value})}
+                        />
+                    </View>
+                )}
+                <SpacerView
+                    shouldShow={shouldShowHorizontalRule}
+                    style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+                />
+            </View>
         </View>
     );
 }
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 67d9a9584b39..6d85e4d7fc85 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -41,7 +41,6 @@ function AnimatedEmptyStateBackground() {
 
     return (
         <Animated.Image
-            pointerEvents="none"
             source={EmptyStateBackgroundImage}
             style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
             resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}

From 8f79ffa939951e3afe2710825b8ef85f9ff259f8 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Sun, 15 Oct 2023 21:52:20 +0500
Subject: [PATCH 3/5] fix: lint issues

---
 src/components/ReportActionItem/MoneyReportView.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 2d54764e72aa..c2a30c3d44b6 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -33,10 +33,7 @@ function MoneyReportView(props) {
     const {translate} = useLocalize();
 
     return (
-        <View style={[
-            StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth),
-            StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT),
-        ]}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
             <AnimatedEmptyStateBackground />
             <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
                 <View style={[styles.flexRow, styles.menuItemTextContainer, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>

From 17cae03e39926b9904fab34ac6a4800f4d876285 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 19 Oct 2023 18:07:23 +0500
Subject: [PATCH 4/5] fix: resolve conflicts

---
 .../ReportActionItem/MoneyReportView.js       | 52 +++++++++----------
 .../ReportActionItem/MoneyRequestView.js      | 11 ++--
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index 0b391d8e3fa9..9bc7a35f9fba 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -44,34 +44,32 @@ function MoneyReportView(props) {
         <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
             <AnimatedEmptyStateBackground />
             <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
-                <View style={[styles.flex1, styles.justifyContentCenter]}>
-                    <Text
-                        style={[styles.textLabelSupporting]}
-                        numberOfLines={1}
-                    >
-                        {translate('common.total')}
-                    </Text>
-                </View>
-                <View style={[styles.flexRow, styles.justifyContentCenter]}>
-                    {isSettled && (
-                        <View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
-                            <Icon
-                                src={Expensicons.Checkmark}
-                                fill={themeColors.success}
-                            />
-                        </View>
-                    )}
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
-                    >
-                        {formattedTotalAmount}
-                    </Text>
+                <View style={[styles.flexRow, styles.pointerEventsNone, styles.containerWithSpaceBetween, styles.ph5, styles.pv2]}>
+                    <View style={[styles.flex1, styles.justifyContentCenter]}>
+                        <Text
+                            style={[styles.textLabelSupporting]}
+                            numberOfLines={1}
+                        >
+                            {translate('common.total')}
+                        </Text>
+                    </View>
+                    <View style={[styles.flexRow, styles.justifyContentCenter]}>
+                        {isSettled && (
+                            <View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
+                                <Icon
+                                    src={Expensicons.Checkmark}
+                                    fill={themeColors.success}
+                                />
+                            </View>
+                        )}
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.taskTitleMenuItem, styles.alignSelfCenter]}
+                        >
+                            {formattedTotalAmount}
+                        </Text>
+                    </View>
                 </View>
-                <SpacerView
-                    shouldShow={props.shouldShowHorizontalRule}
-                    style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
-                />
             </View>
             {shouldShowBreakdown ? (
                 <>
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 1c8171dfc775..0d66379c455e 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -159,7 +159,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
     const getPendingFieldAction = (fieldPath) => lodashGet(transaction, fieldPath) || pendingAction;
 
     return (
-        <View style={StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
             <AnimatedEmptyStateBackground />
             <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
                 {hasReceipt && (
@@ -168,6 +168,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                             <ReportActionItemImage
                                 thumbnail={receiptURIs.thumbnail}
                                 image={receiptURIs.image}
+                                transaction={transaction}
                                 enablePreviewModal
                             />
                         </View>
@@ -281,11 +282,11 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                         />
                     </View>
                 )}
-                <SpacerView
-                    shouldShow={shouldShowHorizontalRule}
-                    style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
-                />
             </View>
+            <SpacerView
+                shouldShow={shouldShowHorizontalRule}
+                style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+            />
         </View>
     );
 }

From 87055a840a9bd76b627f433518886193fe9db8a4 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 20 Oct 2023 02:18:29 +0500
Subject: [PATCH 5/5] fix: use && instead of ternary

---
 src/components/ReportActionItem/MoneyRequestView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 0d66379c455e..ab95fb749ac1 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -262,7 +262,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                         />
                     </OfflineWithFeedback>
                 )}
-                {isExpensifyCardTransaction ? (
+                {isExpensifyCardTransaction && (
                     <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
                         <MenuItemWithTopDescription
                             description={translate('iou.card')}
@@ -271,7 +271,7 @@ function MoneyRequestView({report, betas, parentReport, policyCategories, should
                             interactive={canEdit}
                         />
                     </OfflineWithFeedback>
-                ) : null}
+                )}
                 {shouldShowBillable && (
                     <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
                         <Text color={!transactionBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>