From b43282d9be24680d5de3448aaba122606651e451 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 13 Oct 2023 17:46:05 +0700
Subject: [PATCH 1/2] fix: 29543 Dot separator in the report preview component
 appears bottom aligned

---
 src/components/ReportActionItem/MoneyRequestPreview.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index c7ca93e87694..ec39941571e3 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -262,8 +262,8 @@ function MoneyRequestPreview(props) {
                     ) : (
                         <View style={styles.moneyRequestPreviewBoxText}>
                             <View style={[styles.flexRow]}>
-                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.mb1]}>
+                                    <Text style={[styles.textLabelSupporting, styles.lh20]}>{getPreviewHeaderText()}</Text>
                                     {isSettled && (
                                         <>
                                             <Icon
@@ -272,7 +272,7 @@ function MoneyRequestPreview(props) {
                                                 height={4}
                                                 additionalStyles={[styles.mr1, styles.ml1]}
                                             />
-                                            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
+                                            <Text style={[styles.textLabelSupporting, styles.lh20]}>{getSettledMessage()}</Text>
                                         </>
                                     )}
                                 </View>

From 9d04cf99a4dc291c9a97559f084f92d96e509a4f Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Fri, 13 Oct 2023 18:04:38 +0700
Subject: [PATCH 2/2] refactor code

---
 .../ReportActionItem/MoneyRequestPreview.js     | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index ec39941571e3..b57ba9c44220 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -175,7 +175,7 @@ function MoneyRequestPreview(props) {
     const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction.receipt.source, props.transaction.filename || '')] : [];
 
     const getSettledMessage = () => {
-        if (isExpensifyCardTransaction || isDistanceRequest) {
+        if (isExpensifyCardTransaction) {
             return props.translate('common.done');
         }
         switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
@@ -262,20 +262,7 @@ function MoneyRequestPreview(props) {
                     ) : (
                         <View style={styles.moneyRequestPreviewBoxText}>
                             <View style={[styles.flexRow]}>
-                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.mb1]}>
-                                    <Text style={[styles.textLabelSupporting, styles.lh20]}>{getPreviewHeaderText()}</Text>
-                                    {isSettled && (
-                                        <>
-                                            <Icon
-                                                src={Expensicons.DotIndicator}
-                                                width={4}
-                                                height={4}
-                                                additionalStyles={[styles.mr1, styles.ml1]}
-                                            />
-                                            <Text style={[styles.textLabelSupporting, styles.lh20]}>{getSettledMessage()}</Text>
-                                        </>
-                                    )}
-                                </View>
+                                <Text style={[styles.textLabelSupporting, styles.lh20, styles.mb1]}>{getPreviewHeaderText() + (isSettled ? ` • ${getSettledMessage()}` : '')}</Text>
                                 {hasFieldErrors && (
                                     <Icon
                                         src={Expensicons.DotIndicator}