[Better Expense Report View] Remove RBR logic from Preview & clean-up invoice, split, and self-DM previews

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -29,6 +29,7 @@ import ControlSelection from '@libs/ControlSelection';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {getConnectedIntegration} from '@libs/PolicyUtils';
+import {getOriginalMessage, isActionOfType} from '@libs/ReportActionsUtils';
 import {
     areAllRequestsBeingSmartScanned as areAllRequestsBeingSmartScannedReportUtils,
     canBeExported,
@@ -107,6 +108,7 @@ function MoneyRequestReportPreviewContent({
     renderItem,
     getCurrentWidth,
     reportPreviewStyles,
+    isInvoice,
 }: MoneyRequestReportPreviewContentProps) {
     const lastTransaction = transactions?.at(0);
     const transactionIDList = transactions?.map((reportTransaction) => reportTransaction.transactionID) ?? [];
@@ -426,6 +428,14 @@ function MoneyRequestReportPreviewContent({
         />
     );
 
+    const getPreviewName = () => {
+        if (isInvoice && isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW)) {
+            const originalMessage = getOriginalMessage(action);
+            return originalMessage && translate('iou.invoiceReportName', originalMessage);
+        }
+        return action.childReportName;
+    };
+
     return (
         transactions.length > 0 && (
             <OfflineWithFeedback
@@ -473,7 +483,7 @@ function MoneyRequestReportPreviewContent({
                                                             style={[styles.headerText]}
                                                             testID="MoneyRequestReportPreview-reportName"
                                                         >
-                                                            {action.childReportName}
+                                                            {getPreviewName()}
                                                         </Text>
                                                         {!doesReportNameOverflow && <>&nbsp;{approvedOrSettledicon}</>}
                                                     </Text>
@@ -522,17 +532,6 @@ function MoneyRequestReportPreviewContent({
                                                 </View>
                                             )}
                                         </View>
-                                        {shouldShowRBR && (
-                                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                                <Icon
-                                                    src={Expensicons.DotIndicator}
-                                                    fill={theme.danger}
-                                                />
-                                                <Text style={[styles.textDanger, styles.fontSizeLabel, styles.textLineHeightNormal, styles.ml2]}>
-                                                    {translate('violations.reviewRequired')}
-                                                </Text>
-                                            </View>
-                                        )}
                                     </View>
                                     <View style={[styles.flex1, styles.flexColumn, styles.overflowVisible, styles.mtn1]}>
                                         <FlatList

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -28,6 +28,7 @@ function MoneyRequestReportPreview({
     checkIfContextMenuActive = () => {},
     onPaymentOptionsShow,
     onPaymentOptionsHide,
+    isInvoice = false,
 }: MoneyRequestReportPreviewProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -65,7 +66,7 @@ function MoneyRequestReportPreview({
             isHovered={isHovered}
             iouReportID={iouReportID}
             onPreviewPressed={() => {}}
-            wrapperStyles={reportPreviewStyles.transactionPreviewStyle}
+            wrapperStyle={reportPreviewStyles.transactionPreviewStyle}
             containerStyles={[styles.h100, containerStyles]}
             transactionID={item.transactionID}
         />
@@ -98,6 +99,7 @@ function MoneyRequestReportPreview({
                 setCurrentWidth(e.nativeEvent.layout.width ?? 255);
             }}
             reportPreviewStyles={reportPreviewStyles}
+            isInvoice={isInvoice}
         />
     );
 }

src/components/ReportActionItem/MoneyRequestReportPreview/types.ts

@@ -4,11 +4,15 @@ import type {TransactionPreviewStyleType} from '@components/ReportActionItem/Tra
 import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
 
+type TransactionPreviewStyle = {
+    [key in keyof TransactionPreviewStyleType]: number;
+};
+
 type MoneyRequestReportPreviewStyleType = {
     flatListStyle: StyleProp<ViewStyle>;
     wrapperStyle: ViewStyle;
     contentContainerStyle: ViewStyle;
-    transactionPreviewStyle: TransactionPreviewStyleType;
+    transactionPreviewStyle: TransactionPreviewStyle;
     componentStyle: StyleProp<ViewStyle>;
 };
 
@@ -45,6 +49,9 @@ type MoneyRequestReportPreviewProps = {
 
     /** Whether the corresponding report action item is hovered */
     isHovered?: boolean;
+
+    /** Whether the report is an invoice preview */
+    isInvoice?: boolean;
 };
 
 type MoneyRequestReportPreviewContentOnyxProps = {

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -49,7 +49,7 @@ function TransactionPreviewContent({
     navigateToReviewFields,
     onPreviewPressed,
     containerStyles,
-    wrapperStyles,
+    wrapperStyle,
     isBillSplit,
     areThereDuplicates,
     sessionAccountID,
@@ -205,7 +205,7 @@ function TransactionPreviewContent({
                         />
                     )}
                     {shouldShowSkeleton ? (
-                        <TransactionPreviewSkeletonView transactionPreviewWidth={wrapperStyles.width} />
+                        <TransactionPreviewSkeletonView transactionPreviewWidth={wrapperStyle.width} />
                     ) : (
                         <View style={[styles.expenseAndReportPreviewBoxBody, styles.mtn1]}>
                             <View style={styles.gap3}>
@@ -370,7 +370,7 @@ function TransactionPreviewContent({
             accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)}
             style={[
                 styles.moneyRequestPreviewBox,
-                wrapperStyles,
+                wrapperStyle,
                 themeStyles,
                 shouldDisableOnPress && styles.cursorDefault,
                 (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -4,9 +4,10 @@ import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActio
 import type {PersonalDetailsList, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
+// string type union is here for percentage values
 type TransactionPreviewStyleType = {
-    width: number;
-    maxWidth?: number;
+    width: number | string;
+    maxWidth?: number | string;
 };
 
 type TransactionPreviewProps = {
@@ -20,7 +21,7 @@ type TransactionPreviewProps = {
     reportID: string | undefined;
 
     /** Callback for the preview pressed */
-    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
+    onPreviewPressed?: (event?: GestureResponderEvent | KeyboardEvent) => void;
 
     /** All the data of the action, used for showing context menu */
     action: OnyxEntry<ReportAction>;
@@ -35,7 +36,7 @@ type TransactionPreviewProps = {
     containerStyles?: StyleProp<ViewStyle>;
 
     /** Optional custom styles to be applied to wrapper component. */
-    wrapperStyles: TransactionPreviewStyleType;
+    wrapperStyle: TransactionPreviewStyleType;
 
     /** True if this IOU has a type of split */
     isBillSplit: boolean;
@@ -72,7 +73,7 @@ type TransactionPreviewContentProps = {
     navigateToReviewFields: () => void;
 
     /** General callback for handling presses on the preview component, can also handle keyboard events. */
-    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent | undefined) => void;
+    onPreviewPressed?: (event?: GestureResponderEvent | KeyboardEvent | undefined) => void;
 
     /** Whether the transaction is whisper. */
     isWhisper?: boolean;
@@ -84,7 +85,7 @@ type TransactionPreviewContentProps = {
     containerStyles?: StyleProp<ViewStyle>;
 
     /** Optional custom styles to be applied to wrapper component. */
-    wrapperStyles: TransactionPreviewStyleType;
+    wrapperStyle: TransactionPreviewStyleType;
 
     /** Records any errors related to wallet terms. */
     walletTermsErrors: Errors | undefined;

src/components/TransactionPreviewSkeletonView.tsx

@@ -1,57 +1,72 @@
 import React from 'react';
+import {View} from 'react-native';
 import {Rect} from 'react-native-svg';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 type TransactionPreviewSkeletonViewProps = {
-    transactionPreviewWidth: number;
+    transactionPreviewWidth: number | string;
 };
 
 function TransactionPreviewSkeletonView({transactionPreviewWidth}: TransactionPreviewSkeletonViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const isWidthANumber = typeof transactionPreviewWidth === 'number';
     const {width, height} = {
-        width: transactionPreviewWidth - styles.p4.padding * 2,
+        width: isWidthANumber ? transactionPreviewWidth - styles.p4.padding * 2 : transactionPreviewWidth,
         height: variables.transactionPreviewSkeletonHeight,
     };
 
     return (
-        <SkeletonViewContentLoader
-            testID={TransactionPreviewSkeletonView.displayName}
-            animate
-            width={width}
-            height={height}
-            backgroundColor={theme.skeletonLHNIn}
-            foregroundColor={theme.skeletonLHNOut}
-            style={[styles.p4, styles.mtn1]}
-        >
-            <Rect
-                x="0"
-                y="4"
-                width="64"
-                height="8"
-            />
-            <Rect
-                x="0"
-                y="24"
-                width="120"
-                height="20"
-            />
-            <Rect
-                x={width - 68}
-                y="24"
-                width="68"
-                height="20"
-            />
-            <Rect
-                x="0"
-                y="54.75"
-                width="80"
-                height="7"
-            />
-        </SkeletonViewContentLoader>
+        <View style={[styles.p4, styles.mtn1]}>
+            <SkeletonViewContentLoader
+                testID={TransactionPreviewSkeletonView.displayName}
+                animate
+                width={width}
+                height={height}
+                backgroundColor={theme.skeletonLHNIn}
+                foregroundColor={theme.skeletonLHNOut}
+            >
+                <Rect
+                    x="0"
+                    y="4"
+                    width="64"
+                    height="8"
+                />
+                <Rect
+                    x="0"
+                    y="24"
+                    width="120"
+                    height="20"
+                />
+                <Rect
+                    x="0"
+                    y="54.75"
+                    width="80"
+                    height="7"
+                />
+            </SkeletonViewContentLoader>
+            {/* This skeleton inverts the progress bar, which should be on the right,
+            so we don't need to know the width of the component to calculate it - works with percentages.
+           */}
+            <View style={[styles.r0, styles.b0, styles.p4, styles.mtn1, styles.pAbsolute, styles.mirror]}>
+                <SkeletonViewContentLoader
+                    width={width}
+                    height={height}
+                    foregroundColor={theme.skeletonLHNOut}
+                    backgroundColor={theme.skeletonLHNIn}
+                >
+                    <Rect
+                        x="0"
+                        y="24"
+                        width="68"
+                        height="20"
+                    />
+                </SkeletonViewContentLoader>
+            </View>
+        </View>
     );
 }
 

src/languages/en.ts

@@ -2,6 +2,7 @@ import {CONST as COMMON_CONST} from 'expensify-common';
 import startCase from 'lodash/startCase';
 import CONST from '@src/CONST';
 import type {Country} from '@src/CONST';
+import type OriginalMessage from '@src/types/onyx/OriginalMessage';
 import type {
     AccountOwnerParams,
     ActionsAreCurrentlyRestricted,
@@ -1047,6 +1048,7 @@ const translations = {
             `changed the ${translatedChangedField} to ${newMerchant} (previously ${oldMerchant}), which updated the amount to ${newAmountToDisplay} (previously ${oldAmountToDisplay})`,
         threadExpenseReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${formattedAmount} ${comment ? `for ${comment}` : 'expense'}`,
         threadTrackReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `Tracking ${formattedAmount} ${comment ? `for ${comment}` : ''}`,
+        invoiceReportName: ({linkedReportID}: OriginalMessage<typeof CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW>) => `Invoice Report #${linkedReportID}`,
         threadPaySomeoneReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} sent${comment ? ` for ${comment}` : ''}`,
         movedFromPersonalSpace: ({workspaceName, reportName}: MovedFromPersonalSpaceParams) => `moved expense from personal space to ${workspaceName ?? `chat with ${reportName}`}`,
         movedToPersonalSpace: 'moved expense to personal space',

src/languages/es.ts

@@ -1,5 +1,6 @@
 import {CONST as COMMON_CONST} from 'expensify-common';
 import CONST from '@src/CONST';
+import type OriginalMessage from '@src/types/onyx/OriginalMessage';
 import type en from './en';
 import type {
     AccountOwnerParams,
@@ -1045,6 +1046,7 @@ const translations = {
             `cambió la ${translatedChangedField} a ${newMerchant} (previamente ${oldMerchant}), lo que cambió el importe a ${newAmountToDisplay} (previamente ${oldAmountToDisplay})`,
         threadExpenseReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${comment ? `${formattedAmount} para ${comment}` : `Gasto de ${formattedAmount}`}`,
         threadTrackReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `Seguimiento ${formattedAmount} ${comment ? `para ${comment}` : ''}`,
+        invoiceReportName: ({linkedReportID}: OriginalMessage<typeof CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW>) => `Informe de facturación #${linkedReportID}`,
         threadPaySomeoneReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} enviado${comment ? ` para ${comment}` : ''}`,
         movedFromPersonalSpace: ({workspaceName, reportName}: MovedFromPersonalSpaceParams) => `movió el gasto desde su espacio personal a ${workspaceName ?? `un chat con ${reportName}`}`,
         movedToPersonalSpace: 'movió el gasto a su espacio personal',