Merge pull request #44677 from dominictb/fix/44563

fix: Design updates to Search rows on mobile
Expensify · Jul 8, 2024 · 8540bcf · 8540bcf
2 parents 2bf0359 + f8df4cf
commit 8540bcf
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 37 deletions.
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
@@ -22,6 +22,9 @@ function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isL
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
+    if (!isLargeScreenWidth) {
+        return null;
+    }
 
     if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
         const buttonTextKey = action === CONST.SEARCH.ACTION_TYPES.PAID ? 'iou.settledExpensify' : 'common.done';

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -14,6 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
+import StringUtils from '@libs/StringUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import variables from '@styles/variables';
@@ -114,16 +115,20 @@ function MerchantCell({transactionItem, showTooltip, isLargeScreenWidth}: Transa
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const description = TransactionUtils.getDescription(transactionItem);
-    let merchant = transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description;
+    let merchantOrDescriptionToDisplay = transactionItem.formattedMerchant;
+    if (!merchantOrDescriptionToDisplay && !isLargeScreenWidth) {
+        merchantOrDescriptionToDisplay = description;
+    }
+    let merchant = transactionItem.shouldShowMerchant ? merchantOrDescriptionToDisplay : description;
 
     if (TransactionUtils.hasReceipt(transactionItem) && TransactionUtils.isReceiptBeingScanned(transactionItem) && transactionItem.shouldShowMerchant) {
         merchant = translate('iou.receiptStatusTitle');
     }
-
+    const merchantToDisplay = StringUtils.getFirstLine(merchant);
     return (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
-            text={merchant}
+            text={merchantToDisplay}
             style={[isLargeScreenWidth ? styles.lineHeightLarge : styles.lh20, styles.pre, styles.justifyContentCenter]}
         />
     );
@@ -164,18 +169,25 @@ function TypeCell({transactionItem, isLargeScreenWidth}: TransactionCellProps) {
 
 function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) {
     const styles = useThemeStyles();
-    return isLargeScreenWidth ? (
+    return (
         <TextWithTooltip
             shouldShowTooltip={showTooltip}
             text={transactionItem?.category}
-            style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]}
-        />
-    ) : (
-        <TextWithIconCell
-            icon={Expensicons.Folder}
-            showTooltip={showTooltip}
-            text={transactionItem?.category}
-            textStyle={[styles.textMicro, styles.mnh0]}
+            style={
+                isLargeScreenWidth
+                    ? [styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]
+                    : [
+                          styles.optionDisplayName,
+                          styles.label,
+                          styles.pre,
+                          styles.justifyContentCenter,
+                          styles.textMicro,
+                          styles.textSupporting,
+                          styles.flexShrink1,
+                          styles.textMicro,
+                          styles.mnh0,
+                      ]
+            }
         />
     );
 }
@@ -250,42 +262,39 @@ function TransactionListItemRow({
                         isLargeScreenWidth={false}
                         showTooltip={false}
                     />
-                    <View style={[styles.flex2, styles.gap1]}>
+                    <View style={[styles.flex2, !item.category && styles.justifyContentCenter, styles.gap1]}>
                         <MerchantCell
                             transactionItem={item}
                             showTooltip={showTooltip}
                             isLargeScreenWidth={false}
                         />
-                        <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd, styles.gap3]}>
-                            <CategoryCell
-                                isLargeScreenWidth={isLargeScreenWidth}
-                                showTooltip={showTooltip}
-                                transactionItem={item}
-                            />
-                            <TagCell
-                                showTooltip={showTooltip}
-                                transactionItem={item}
-                                isLargeScreenWidth={isLargeScreenWidth}
-                            />
-                        </View>
+                        {item.category && (
+                            <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd]}>
+                                <CategoryCell
+                                    isLargeScreenWidth={false}
+                                    showTooltip={showTooltip}
+                                    transactionItem={item}
+                                />
+                            </View>
+                        )}
                     </View>
                     <View style={[styles.alignItemsEnd, styles.flex1, styles.gap1, styles.justifyContentBetween]}>
                         <TotalCell
                             showTooltip={showTooltip}
                             transactionItem={item}
-                            isLargeScreenWidth={isLargeScreenWidth}
+                            isLargeScreenWidth={false}
                             isChildListItem={isChildListItem}
                         />
                         <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter, styles.alignItemsCenter]}>
                             <TypeCell
                                 transactionItem={item}
-                                isLargeScreenWidth={isLargeScreenWidth}
+                                isLargeScreenWidth={false}
                                 showTooltip={false}
                             />
                             <DateCell
                                 transactionItem={item}
                                 showTooltip={showTooltip}
-                                isLargeScreenWidth={isLargeScreenWidth}
+                                isLargeScreenWidth={false}
                             />
                         </View>
                     </View>
@@ -309,22 +318,22 @@ function TransactionListItemRow({
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.RECEIPT)]}>
                     <ReceiptCell
                         transactionItem={item}
-                        isLargeScreenWidth={false}
+                        isLargeScreenWidth
                         showTooltip={false}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
                     <DateCell
                         transactionItem={item}
                         showTooltip={showTooltip}
-                        isLargeScreenWidth={isLargeScreenWidth}
+                        isLargeScreenWidth
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.MERCHANT)]}>
                     <MerchantCell
                         transactionItem={item}
                         showTooltip={showTooltip}
-                        isLargeScreenWidth={false}
+                        isLargeScreenWidth
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
@@ -342,7 +351,7 @@ function TransactionListItemRow({
                 {item.shouldShowCategory && (
                     <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.CATEGORY)]}>
                         <CategoryCell
-                            isLargeScreenWidth={isLargeScreenWidth}
+                            isLargeScreenWidth
                             showTooltip={showTooltip}
                             transactionItem={item}
                         />
@@ -351,7 +360,7 @@ function TransactionListItemRow({
                 {item.shouldShowTag && (
                     <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAG)]}>
                         <TagCell
-                            isLargeScreenWidth={isLargeScreenWidth}
+                            isLargeScreenWidth
                             showTooltip={showTooltip}
                             transactionItem={item}
                         />
@@ -361,7 +370,7 @@ function TransactionListItemRow({
                     <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT)]}>
                         <TaxCell
                             transactionItem={item}
-                            isLargeScreenWidth={isLargeScreenWidth}
+                            isLargeScreenWidth
                             showTooltip={showTooltip}
                         />
                     </View>
@@ -371,14 +380,14 @@ function TransactionListItemRow({
                     <TotalCell
                         showTooltip={showTooltip}
                         transactionItem={item}
-                        isLargeScreenWidth={isLargeScreenWidth}
+                        isLargeScreenWidth
                         isChildListItem={isChildListItem}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
                     <TypeCell
                         transactionItem={item}
-                        isLargeScreenWidth={isLargeScreenWidth}
+                        isLargeScreenWidth
                         showTooltip={false}
                     />
                 </View>

diff --git a/src/libs/StringUtils.ts b/src/libs/StringUtils.ts
@@ -105,4 +105,13 @@ function lineBreaksToSpaces(text = '') {
     return text.replace(CONST.REGEX.LINE_BREAK, ' ');
 }
 
-export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeAccents, normalizeCRLF, getAcronym, lineBreaksToSpaces};
+/**
+ * Get the first line of the string
+ */
+function getFirstLine(text = '') {
+    // Split the input string by newline characters and return the first element of the resulting array
+    const lines = text.split('\n');
+    return lines[0];
+}
+
+export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeAccents, normalizeCRLF, getAcronym, lineBreaksToSpaces, getFirstLine};