Add TransactionItemRowRBR (#211)

Author: JakubKorytko

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -32,7 +32,7 @@ function MoneyRequestReportTransactionList({report, transactions}: MoneyRequestR
             <View style={[styles.pv2, styles.ph5]}>
                 {transactions.map((transaction) => {
                     return (
-                        <View style={[styles.flex1, styles.mb2]}>
+                        <View style={[styles.mb2]}>
                             <TransactionItemRow
                                 transactionItem={transaction}
                                 isSelected={false}

src/components/TransactionItemRow/TransactionItemRowRBR.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {DotIndicator} from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import ViolationsUtils from '@libs/Violations/ViolationsUtils';
+import variables from '@styles/variables';
+import type Transaction from '@src/types/onyx/Transaction';
+
+function TransactionItemRowRBR({transaction}: {transaction: Transaction}) {
+    const styles = useThemeStyles();
+    const transactionViolations = useTransactionViolations(transaction?.transactionID);
+    const {translate} = useLocalize();
+    const theme = useTheme();
+
+    const RBRmessages = transactionViolations
+        .map((violation, index) => {
+            const translation = ViolationsUtils.getViolationTranslation(violation, translate);
+            return index > 0 ? translation.charAt(0).toLowerCase() + translation.slice(1) : translation;
+        })
+        .join(', ');
+
+    return (
+        transactionViolations.length > 0 && (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                <Icon
+                    src={DotIndicator}
+                    fill={theme.danger}
+                    height={variables.iconSizeExtraSmall}
+                    width={variables.iconSizeExtraSmall}
+                />
+                <Text
+                    numberOfLines={1}
+                    style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1, {color: theme.danger}]}
+                >
+                    {RBRmessages}
+                </Text>
+            </View>
+        )
+    );
+}
+
+export default TransactionItemRowRBR;

src/components/TransactionItemRow/index.tsx

@@ -13,6 +13,7 @@ import ReceiptCell from './DataCells/ReceiptCell';
 import TagCell from './DataCells/TagCell';
 import TotalCell from './DataCells/TotalCell';
 import TypeCell from './DataCells/TypeCell';
+import TransactionItemRowRBR from './TransactionItemRowRBR';
 
 function TransactionItemRow({
     transactionItem,
@@ -83,13 +84,14 @@ function TransactionItemRow({
                                     shouldUseNarrowLayout={shouldUseNarrowLayout}
                                 />
                             </View>
+                            <TransactionItemRowRBR transaction={transactionItem} />
                         </View>
                     )}
                 </Hoverable>
             ) : (
                 <Hoverable>
                     {(hovered) => (
-                        <View style={[hovered ? styles.hoveredComponentBG : backgroundColor, styles.p2, styles.expenseWidgetRadius]}>
+                        <View style={[hovered ? styles.hoveredComponentBG : backgroundColor, styles.p2, styles.expenseWidgetRadius, styles.gap2]}>
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                                 <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.RECEIPT)]}>
                                     <ReceiptCell
@@ -140,6 +142,7 @@ function TransactionItemRow({
                                     />
                                 </View>
                             </View>
+                            <TransactionItemRowRBR transaction={transactionItem} />
                         </View>
                     )}
                 </Hoverable>

src/pages/Search/SearchMoneyRequestReportPage.tsx

@@ -82,6 +82,7 @@ function SearchMoneyRequestReportPage({route}: SearchPageProps) {
                         Navigation.goBack();
                     }}
                 />
+                <MoneyRequestReportView report={report} />
             </ScreenWrapper>
         );
     }