[No QA] [Better Expense Report View] Clean up remaining nested follow-ups & added code

.storybook/webpack.config.ts

@@ -8,6 +8,7 @@ import dotenv from 'dotenv';
 import path from 'path';
 import {DefinePlugin} from 'webpack';
 import type {Configuration, RuleSetRule} from 'webpack';
+import webpackMockPaths from './webpackMockPaths';
 
 type CustomWebpackConfig = {
     resolve: {
@@ -54,11 +55,7 @@ const webpackConfig = ({config}: {config: Configuration}) => {
     }
 
     config.resolve.alias = {
-        'react-native-config': 'react-web-config',
-        'react-native$': 'react-native-web',
-        '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
-        '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
-        '@libs/TransactionPreviewUtils': path.resolve(__dirname, '../src/libs/__mocks__/TransactionPreviewUtils.ts'),
+        ...webpackMockPaths,
         ...custom.resolve.alias,
     };
 

.storybook/webpackMockPaths.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+export default {
+    'react-native-config': 'react-web-config',
+    'react-native$': 'react-native-web',
+    '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
+    '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+    '@libs/TransactionPreviewUtils': path.resolve(__dirname, '../src/libs/__mocks__/TransactionPreviewUtils.ts'),
+};
+/* eslint-enable @typescript-eslint/naming-convention */

__mocks__/reportData/actions.ts

@@ -0,0 +1,89 @@
+import CONST from '@src/CONST';
+import type {OriginalMessageIOU, ReportAction} from '@src/types/onyx';
+
+const usersIDs = [15593135, 51760358, 26502375];
+const amount = 10402;
+const currency = CONST.CURRENCY.USD;
+
+const REPORT_R98765 = {
+    IOUReportID: 'IOU_REPORT_ID_R98765',
+    IOUTransactionID: 'TRANSACTION_ID_R98765',
+    reportActionID: 'REPORT_ACTION_ID_R98765',
+    childReportID: 'CHILD_REPORT_ID_R98765',
+};
+
+const REPORT_R14932 = {
+    IOUReportID: 'IOU_REPORT_ID_R14932',
+    IOUTransactionID: 'TRANSACTION_ID_R14932',
+    reportActionID: 'REPORT_ACTION_ID_R14932',
+    childReportID: 'CHILD_REPORT_ID_R14932',
+};
+
+const originalMessageR14932: OriginalMessageIOU = {
+    currency,
+    amount,
+    IOUReportID: REPORT_R14932.IOUReportID,
+    IOUTransactionID: REPORT_R14932.IOUTransactionID,
+    participantAccountIDs: usersIDs,
+    type: CONST.IOU.TYPE.CREATE,
+    lastModified: '2025-02-14 08:12:05.165',
+    comment: '',
+};
+
+const message = [
+    {
+        type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
+        html: '$0.01 expense',
+        text: '$0.01 expense',
+        isEdited: false,
+        whisperedTo: [],
+        isDeletedParentAction: false,
+        deleted: '',
+    },
+];
+
+const person = [
+    {
+        type: 'TEXT',
+        style: 'strong',
+        text: 'John Smith',
+    },
+];
+
+const actionR14932: ReportAction = {
+    person,
+    message,
+    reportActionID: REPORT_R14932.reportActionID,
+    childReportID: REPORT_R14932.childReportID,
+    originalMessage: originalMessageR14932,
+    actorAccountID: usersIDs.at(0),
+    actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
+    childType: CONST.REPORT.TYPE.CHAT,
+    childReportName: 'Expense #R14932',
+    created: '2025-02-14 08:12:05.165',
+};
+
+const originalMessageR98765: OriginalMessageIOU = {
+    amount,
+    currency,
+    IOUReportID: REPORT_R98765.IOUReportID,
+    IOUTransactionID: REPORT_R98765.IOUTransactionID,
+    participantAccountIDs: usersIDs,
+    type: CONST.IOU.TYPE.CREATE,
+    comment: '',
+    lastModified: '2025-02-20 08:10:05.165',
+};
+
+const actionR98765: ReportAction = {
+    message,
+    person,
+    reportActionID: REPORT_R98765.reportActionID,
+    childReportID: REPORT_R98765.childReportID,
+    originalMessage: originalMessageR98765,
+    actorAccountID: usersIDs.at(0),
+    childType: CONST.REPORT.TYPE.CHAT,
+    actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
+    created: '2025-02-14 08:12:05.165',
+};
+
+export {actionR14932, actionR98765};

__mocks__/reportData/personalDetails.ts

@@ -0,0 +1,68 @@
+import type {PersonalDetailsList} from '@src/types/onyx';
+
+const usersIDs = [15593135, 51760358, 26502375] as const;
+
+const personalDetails: PersonalDetailsList = {
+    [usersIDs[0]]: {
+        accountID: usersIDs[0],
+        avatar: '@assets/images/avatars/user/default-avatar_1.svg',
+        firstName: 'John',
+        lastName: 'Smith',
+        status: {
+            clearAfter: '',
+            emojiCode: '🚲',
+            text: '0% cycling in Canary islands',
+        },
+        displayName: 'John Smith',
+        login: 'johnsmith@mail.com',
+        pronouns: '__predefined_heHimHis',
+        timezone: {
+            automatic: true,
+            selected: 'Europe/Luxembourg',
+        },
+        phoneNumber: '11111111',
+        validated: true,
+    },
+    [usersIDs[1]]: {
+        accountID: usersIDs[1],
+        avatar: '@assets/images/avatars/user/default-avatar_2.svg',
+        firstName: 'Ted',
+        lastName: 'Kowalski',
+        status: {
+            clearAfter: '',
+            emojiCode: '🚲',
+            text: '0% cycling in Canary islands',
+        },
+        displayName: 'Ted Kowalski',
+        login: 'tedkowalski@mail.com',
+        pronouns: '__predefined_heHimHis',
+        timezone: {
+            automatic: true,
+            selected: 'Europe/Warsaw',
+        },
+        phoneNumber: '22222222',
+        validated: true,
+    },
+    [usersIDs[2]]: {
+        accountID: usersIDs[2],
+        avatar: '@assets/images/avatars/user/default-avatar_3.svg',
+        firstName: 'Jane',
+        lastName: 'Doe',
+        status: {
+            clearAfter: '',
+            emojiCode: '🚲',
+            text: '0% cycling in Canary islands',
+        },
+        displayName: 'Jane Doe',
+        login: 'janedoe@mail.com',
+        pronouns: '__predefined_sheHerHers',
+        timezone: {
+            automatic: true,
+            selected: 'Europe/London',
+        },
+        phoneNumber: '33333333',
+        validated: true,
+    },
+};
+
+export default personalDetails;

__mocks__/reportData/reports.ts

@@ -0,0 +1,104 @@
+import CONST from '@src/CONST';
+import type {Report} from '@src/types/onyx';
+
+const usersIDs = [15593135, 51760358, 26502375];
+const amount = 10402;
+const currency = CONST.CURRENCY.USD;
+
+const REPORT_ID_R14932 = 'REPORT_ID_R14932';
+const CHAT_REPORT_ID_R14932 = 'CHAT_REPORT_ID_R14932';
+const IOU_REPORT_ID_R14932 = 'IOU_REPORT_ID_R14932';
+const PARENT_REPORT_ACTION_ID_R14932 = 'PARENT_ACTION_ID_R14932';
+const PARENT_REPORT_ID_R14932 = 'PARENT_REPORT_ID_R14932';
+const LAST_MESSAGE_R14932 = 'LAST_MESSAGE_R14932';
+
+const participants = usersIDs.reduce((prev, userID) => {
+    return {
+        [userID]: {
+            notificationPreference: 'always',
+        },
+    };
+}, {});
+
+const iouReportR14932: Report = {
+    currency,
+    participants,
+    total: amount,
+    unheldTotal: amount,
+    chatReportID: CHAT_REPORT_ID_R14932,
+    lastMessageHtml: LAST_MESSAGE_R14932,
+    lastMessageText: LAST_MESSAGE_R14932,
+    parentReportActionID: PARENT_REPORT_ACTION_ID_R14932,
+    parentReportID: PARENT_REPORT_ID_R14932,
+    reportID: REPORT_ID_R14932,
+    lastActorAccountID: usersIDs.at(0),
+    ownerAccountID: usersIDs.at(0),
+    managerID: usersIDs.at(1),
+    permissions: [CONST.REPORT.PERMISSIONS.READ, CONST.REPORT.PERMISSIONS.WRITE],
+    policyID: CONST.POLICY.ID_FAKE,
+    reportName: CONST.REPORT.ACTIONS.TYPE.IOU,
+    stateNum: CONST.REPORT.STATE_NUM.APPROVED,
+    statusNum: CONST.REPORT.STATUS_NUM.OPEN,
+    type: CONST.REPORT.TYPE.EXPENSE,
+    writeCapability: CONST.REPORT.WRITE_CAPABILITIES.ALL,
+    lastActionType: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
+    chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
+    hasOutstandingChildRequest: false,
+    hasOutstandingChildTask: false,
+    hasParentAccess: true,
+    isCancelledIOU: false,
+    isOwnPolicyExpenseChat: false,
+    isPinned: false,
+    isWaitingOnBankAccount: false,
+    lastReadTime: '2025-03-07 07:23:39.335',
+    lastVisibleActionCreated: '2025-03-07 07:23:39.335',
+    lastVisibleActionLastModified: '2025-03-07 07:23:39.335',
+    lastReadSequenceNumber: 0,
+    unheldNonReimbursableTotal: 0,
+    nonReimbursableTotal: 0,
+    errorFields: {},
+    welcomeMessage: '',
+    description: '',
+    oldPolicyName: '',
+};
+
+const chatReportR14932: Report = {
+    currency,
+    participants,
+    lastMessageText: LAST_MESSAGE_R14932,
+    reportID: REPORT_ID_R14932,
+    iouReportID: IOU_REPORT_ID_R14932,
+    lastActorAccountID: usersIDs.at(0),
+    ownerAccountID: usersIDs.at(0),
+    managerID: usersIDs.at(1),
+    total: amount,
+    unheldTotal: amount,
+    chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
+    policyID: CONST.POLICY.ID_FAKE,
+    reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
+    lastActionType: CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT,
+    writeCapability: CONST.REPORT.WRITE_CAPABILITIES.ALL,
+    permissions: [CONST.REPORT.PERMISSIONS.READ, CONST.REPORT.PERMISSIONS.WRITE],
+    type: CONST.REPORT.TYPE.CHAT,
+    lastMessageHtml: `<mention-user accountID="${usersIDs.at(0)}"/> <mention-user accountID="${usersIDs.at(0)}"/>`,
+    lastReadTime: '2025-03-11 08:51:38.736',
+    lastVisibleActionCreated: '2025-03-11 08:47:56.654',
+    lastVisibleActionLastModified: '2025-03-11 08:47:56.654',
+    hasOutstandingChildRequest: false,
+    hasOutstandingChildTask: false,
+    isCancelledIOU: false,
+    isOwnPolicyExpenseChat: false,
+    isPinned: false,
+    isWaitingOnBankAccount: false,
+    lastReadSequenceNumber: 0,
+    unheldNonReimbursableTotal: 0,
+    stateNum: 0,
+    statusNum: 0,
+    nonReimbursableTotal: 0,
+    errorFields: {},
+    description: '',
+    oldPolicyName: '',
+    welcomeMessage: '',
+};
+
+export {chatReportR14932, iouReportR14932};

__mocks__/reportData/transactions.ts

@@ -0,0 +1,79 @@
+import CONST from '@src/CONST';
+import type {Transaction} from '@src/types/onyx';
+
+const amount = 10402;
+const currency = CONST.CURRENCY.USD;
+const REPORT_ID_R14932 = 'REPORT_ID_R14932';
+const TRANSACTION_ID_R14932 = 'TRANSACTION_ID_R14932';
+const REPORT_ID_R98765 = 'REPORT_ID_R98765';
+const TRANSACTION_ID_R98765 = 'TRANSACTION_ID_R98765';
+
+const receiptR14932 = {
+    state: CONST.IOU.RECEIPT_STATE.OPEN,
+    source: 'mockData/eReceiptBGs/eReceiptBG_pink.png',
+};
+
+const transactionR14932: Transaction = {
+    amount,
+    currency,
+    cardName: CONST.EXPENSE.TYPE.CASH_CARD_NAME,
+    transactionID: TRANSACTION_ID_R14932,
+    reportID: REPORT_ID_R14932,
+    status: CONST.TRANSACTION.STATUS.POSTED,
+    receipt: receiptR14932,
+    merchant: 'Acme',
+    filename: 'test.html',
+    created: '2025-02-14',
+    inserted: '2025-02-14 08:12:19',
+    billable: false,
+    managedCard: false,
+    reimbursable: true,
+    hasEReceipt: true,
+    cardID: 0,
+    modifiedAmount: 0,
+    originalAmount: 0,
+    comment: {},
+    bank: '',
+    cardNumber: '',
+    category: '',
+    modifiedCreated: '',
+    modifiedCurrency: '',
+    modifiedMerchant: '',
+    originalCurrency: '',
+    parentTransactionID: '',
+    posted: '',
+    tag: '',
+};
+
+const transactionR98765: Transaction = {
+    currency,
+    amount,
+    transactionID: TRANSACTION_ID_R98765,
+    reportID: REPORT_ID_R98765,
+    status: CONST.TRANSACTION.STATUS.POSTED,
+    cardName: CONST.EXPENSE.TYPE.CASH_CARD_NAME,
+    created: '2025-02-14',
+    inserted: '2025-02-14 08:12:19',
+    merchant: 'Acme',
+    reimbursable: true,
+    hasEReceipt: true,
+    managedCard: false,
+    billable: false,
+    modifiedAmount: 0,
+    cardID: 0,
+    originalAmount: 0,
+    comment: {},
+    bank: '',
+    cardNumber: '',
+    category: '',
+    filename: '',
+    modifiedCreated: '',
+    modifiedCurrency: '',
+    modifiedMerchant: '',
+    originalCurrency: '',
+    parentTransactionID: '',
+    posted: '',
+    tag: '',
+};
+
+export {transactionR14932, transactionR98765};