From 95915b6afae4eaecc2592479ba619080cececc44 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 23 Dec 2023 18:15:02 +0100
Subject: [PATCH 01/18] Migrate 'ReportActionItemSingle.js' component to
 TypeScript

---
 ...emSingle.js => ReportActionItemSingle.tsx} | 137 +++++++++---------
 1 file changed, 66 insertions(+), 71 deletions(-)
 rename src/pages/home/report/{ReportActionItemSingle.js => ReportActionItemSingle.tsx} (66%)

diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.tsx
similarity index 66%
rename from src/pages/home/report/ReportActionItemSingle.js
rename to src/pages/home/report/ReportActionItemSingle.tsx
index 5737d876779f..4b5f87df745a 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -1,7 +1,6 @@
 import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
-import {View} from 'react-native';
+import {StyleProp, View, ViewStyle} from 'react-native';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import MultipleAvatars from '@components/MultipleAvatars';
@@ -12,7 +11,7 @@ import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -21,88 +20,86 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import reportPropTypes from '@pages/reportPropTypes';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import type {Report, ReportAction} from '@src/types/onyx';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 import ReportActionItemDate from './ReportActionItemDate';
 import ReportActionItemFragment from './ReportActionItemFragment';
-import reportActionPropTypes from './reportActionPropTypes';
 
-const propTypes = {
+type ReportActionItemSingleProps = {
     /** All the data of the action */
-    action: PropTypes.shape(reportActionPropTypes).isRequired,
+    action: ReportAction;
 
     /** Styles for the outermost View */
-    wrapperStyle: stylePropTypes,
+    wrapperStyle?: StyleProp<ViewStyle>;
 
     /** Children view component for this action item */
-    children: PropTypes.node.isRequired,
+    children: ChildrenProps;
 
     /** Report for this action */
-    report: reportPropTypes,
+    report: Report;
 
     /** IOU Report for this action, if any */
-    iouReport: reportPropTypes,
+    iouReport: Report;
 
     /** Show header for action */
-    showHeader: PropTypes.bool,
+    showHeader: boolean;
 
     /** Determines if the avatar is displayed as a subscript (positioned lower than normal) */
-    shouldShowSubscriptAvatar: PropTypes.bool,
+    shouldShowSubscriptAvatar: boolean;
 
     /** If the message has been flagged for moderation */
-    hasBeenFlagged: PropTypes.bool,
+    hasBeenFlagged: boolean;
 
     /** If the action is being hovered */
-    isHovered: PropTypes.bool,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    wrapperStyle: undefined,
-    showHeader: true,
-    shouldShowSubscriptAvatar: false,
-    hasBeenFlagged: false,
-    report: undefined,
-    iouReport: undefined,
-    isHovered: false,
+    isHovered: boolean;
 };
 
-const showUserDetails = (accountID) => {
+const showUserDetails = (accountID: string) => {
     Navigation.navigate(ROUTES.PROFILE.getRoute(accountID));
 };
 
-const showWorkspaceDetails = (reportID) => {
+const showWorkspaceDetails = (reportID: string) => {
     Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID));
 };
 
-function ReportActionItemSingle(props) {
+function ReportActionItemSingle({
+    action,
+    children,
+    wrapperStyle,
+    showHeader = true,
+    shouldShowSubscriptAvatar = false,
+    hasBeenFlagged = false,
+    report,
+    iouReport,
+    isHovered = false,
+}: ReportActionItemSingleProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
-    const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
+    const actorAccountID = action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport ? iouReport.managerID : action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
-    const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID] || {};
+    const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] || {};
     let actorHint = (login || displayName || '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
-    const displayAllActors = useMemo(() => props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport, [props.action.actionName, props.iouReport]);
-    const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(props.report) && (!actorAccountID || displayAllActors);
-    let avatarSource = UserUtils.getAvatar(avatar, actorAccountID);
+    const displayAllActors = useMemo(() => action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport, [action.actionName, iouReport]);
+    const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors);
+    let avatarSource = UserUtils.getAvatar(avatar ?? '', actorAccountID);
 
     if (isWorkspaceActor) {
-        displayName = ReportUtils.getPolicyName(props.report);
+        displayName = ReportUtils.getPolicyName(report);
         actorHint = displayName;
-        avatarSource = ReportUtils.getWorkspaceAvatar(props.report);
-    } else if (props.action.delegateAccountID && personalDetails[props.action.delegateAccountID]) {
+        avatarSource = ReportUtils.getWorkspaceAvatar(report);
+    } else if (action.delegateAccountID && personalDetails[action.delegateAccountID]) {
         // We replace the actor's email, name, and avatar with the Copilot manually for now. And only if we have their
         // details. This will be improved upon when the Copilot feature is implemented.
-        const delegateDetails = personalDetails[props.action.delegateAccountID];
-        const delegateDisplayName = delegateDetails.displayName;
-        actorHint = `${delegateDisplayName} (${props.translate('reportAction.asCopilot')} ${displayName})`;
+        const delegateDetails = personalDetails[action.delegateAccountID];
+        const delegateDisplayName = delegateDetails?.displayName;
+        actorHint = `${delegateDisplayName} (${translate('reportAction.asCopilot')} ${displayName})`;
         displayName = actorHint;
-        avatarSource = UserUtils.getAvatar(delegateDetails.avatar, props.action.delegateAccountID);
+        avatarSource = UserUtils.getAvatar(delegateDetails?.avatar ?? '', Number(action.delegateAccountID));
     }
 
     // If this is a report preview, display names and avatars of both people involved
@@ -110,38 +107,38 @@ function ReportActionItemSingle(props) {
     const primaryDisplayName = displayName;
     if (displayAllActors) {
         // The ownerAccountID and actorAccountID can be the same if the a user requests money back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice
-        const secondaryAccountId = props.iouReport.ownerAccountID === actorAccountID ? props.iouReport.managerID : props.iouReport.ownerAccountID;
-        const secondaryUserDetails = personalDetails[secondaryAccountId] || {};
+        const secondaryAccountId = iouReport.ownerAccountID === actorAccountID ? iouReport.managerID : iouReport.ownerAccountID;
+        const secondaryUserDetails = personalDetails[secondaryAccountId ?? -1] || {};
         const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId);
         displayName = `${primaryDisplayName} & ${secondaryDisplayName}`;
         secondaryAvatar = {
-            source: UserUtils.getAvatar(secondaryUserDetails.avatar, secondaryAccountId),
+            source: UserUtils.getAvatar(secondaryUserDetails.avatar ?? '', secondaryAccountId),
             type: CONST.ICON_TYPE_AVATAR,
             name: secondaryDisplayName,
             id: secondaryAccountId,
         };
     } else if (!isWorkspaceActor) {
-        const avatarIconIndex = props.report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(props.report) ? 0 : 1;
-        const reportIcons = ReportUtils.getIcons(props.report, {});
+        const avatarIconIndex = report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
+        const reportIcons = ReportUtils.getIcons(report, {});
 
         secondaryAvatar = reportIcons[avatarIconIndex];
     }
-    const icon = {source: avatarSource, type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, name: primaryDisplayName, id: isWorkspaceActor ? '' : actorAccountID};
+    const icon = {source: avatarSource, type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, name: primaryDisplayName ?? '', id: isWorkspaceActor ? '' : actorAccountID};
 
     // Since the display name for a report action message is delivered with the report history as an array of fragments
     // we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
     // we should stop referring to the report history items entirely for this information.
     const personArray = displayName
-        ? [
+        ?? [
               {
                   type: 'TEXT',
                   text: displayName,
               },
           ]
-        : props.action.person;
+        ?? action.person ?? {};
 
-    const reportID = props.report && props.report.reportID;
-    const iouReportID = props.iouReport && props.iouReport.reportID;
+    const reportID = report && report.reportID;
+    const iouReportID = iouReport && iouReport.reportID;
 
     const showActorDetails = useCallback(() => {
         if (isWorkspaceActor) {
@@ -152,15 +149,15 @@ function ReportActionItemSingle(props) {
                 Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID));
                 return;
             }
-            showUserDetails(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID);
+            showUserDetails(action.delegateAccountID ?? String(actorAccountID) ?? -1);
         }
-    }, [isWorkspaceActor, reportID, actorAccountID, props.action.delegateAccountID, iouReportID, displayAllActors]);
+    }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
         () =>
             actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS ||
-            (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID)),
-        [props.action, isWorkspaceActor, actorAccountID],
+            (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(Number(action.delegateAccountID ?? actorAccountID) ?? -1)),
+        [action, isWorkspaceActor, actorAccountID],
     );
 
     const getAvatar = () => {
@@ -170,17 +167,17 @@ function ReportActionItemSingle(props) {
                     icons={[icon, secondaryAvatar]}
                     isInReportAction
                     shouldShowTooltip
-                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]}
+                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.hoverComponentBG) : undefined]}
                 />
             );
         }
-        if (props.shouldShowSubscriptAvatar) {
+        if (shouldShowSubscriptAvatar) {
             return (
                 <SubscriptAvatar
                     mainAvatar={icon}
                     secondaryAvatar={secondaryAvatar}
                     mainTooltip={actorHint}
-                    secondaryTooltip={ReportUtils.getPolicyName(props.report)}
+                    secondaryTooltip={ReportUtils.getPolicyName(report)}
                     noMargin
                 />
             );
@@ -188,7 +185,7 @@ function ReportActionItemSingle(props) {
         return (
             <UserDetailsTooltip
                 accountID={actorAccountID}
-                delegateAccountID={props.action.delegateAccountID}
+                delegateAccountID={action.delegateAccountID}
                 icon={icon}
             >
                 <View>
@@ -209,7 +206,7 @@ function ReportActionItemSingle(props) {
     const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;
 
     return (
-        <View style={[styles.chatItem, props.wrapperStyle]}>
+        <View style={[styles.chatItem, wrapperStyle]}>
             <PressableWithoutFeedback
                 style={[styles.alignSelfStart, styles.mr3]}
                 onPressIn={ControlSelection.block}
@@ -222,7 +219,7 @@ function ReportActionItemSingle(props) {
                 <OfflineWithFeedback pendingAction={lodashGet(pendingFields, 'avatar', null)}>{getAvatar()}</OfflineWithFeedback>
             </PressableWithoutFeedback>
             <View style={[styles.chatItemRight]}>
-                {props.showHeader ? (
+                {showHeader ? (
                     <View style={[styles.chatItemMessageHeader]}>
                         <PressableWithoutFeedback
                             style={[styles.flexShrink1, styles.mr1]}
@@ -235,10 +232,10 @@ function ReportActionItemSingle(props) {
                         >
                             {_.map(personArray, (fragment, index) => (
                                 <ReportActionItemFragment
-                                    key={`person-${props.action.reportActionID}-${index}`}
+                                    key={`person-${action.reportActionID}-${index}`}
                                     accountID={actorAccountID}
                                     fragment={fragment}
-                                    delegateAccountID={props.action.delegateAccountID}
+                                    delegateAccountID={action.delegateAccountID}
                                     isSingleLine
                                     actorIcon={icon}
                                 />
@@ -249,20 +246,18 @@ function ReportActionItemSingle(props) {
                                 <Text
                                     style={styles.userReportStatusEmoji}
                                     numberOfLines={1}
-                                >{`${status.emojiCode}`}</Text>
+                                >{`${status?.emojiCode}`}</Text>
                             </Tooltip>
                         )}
-                        <ReportActionItemDate created={props.action.created} />
+                        <ReportActionItemDate created={action.created} />
                     </View>
                 ) : null}
-                <View style={props.hasBeenFlagged ? styles.blockquote : {}}>{props.children}</View>
+                <View style={hasBeenFlagged ? styles.blockquote : {}}>{children}</View>
             </View>
         </View>
     );
 }
 
-ReportActionItemSingle.propTypes = propTypes;
-ReportActionItemSingle.defaultProps = defaultProps;
 ReportActionItemSingle.displayName = 'ReportActionItemSingle';
 
-export default withLocalize(ReportActionItemSingle);
+export default ReportActionItemSingle;

From e1d5cbbe15da70378970a5a5a7d58e5fe984bb1c Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 24 Dec 2023 13:51:58 +0100
Subject: [PATCH 02/18] complete remainnig migration of
 'ReportActionItemSingle.js' component to TypeScript anf fixing lint errors

---
 src/components/OfflineWithFeedback.tsx        |  2 +-
 .../home/report/ReportActionItemSingle.tsx    | 74 ++++++++++++-------
 src/types/onyx/PersonalDetails.ts             | 13 +++-
 3 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 5fcf1fe7442b..33d2131acde8 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -18,7 +18,7 @@ import MessagesRow from './MessagesRow';
 
 type OfflineWithFeedbackProps = ChildrenProps & {
     /** The type of action that's pending  */
-    pendingAction: OnyxCommon.PendingAction;
+    pendingAction?: OnyxCommon.PendingAction | null;
 
     /** Determine whether to hide the component's children if deletion is pending */
     shouldHideOnDelete?: boolean;
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 4b5f87df745a..12fc915e5bb2 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -1,7 +1,5 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import MultipleAvatars from '@components/MultipleAvatars';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -23,7 +21,7 @@ import * as UserUtils from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Report, ReportAction} from '@src/types/onyx';
-import ChildrenProps from '@src/types/utils/ChildrenProps';
+import {AvatarType} from '@src/types/onyx/OnyxCommon';
 import ReportActionItemDate from './ReportActionItemDate';
 import ReportActionItemFragment from './ReportActionItemFragment';
 
@@ -35,7 +33,7 @@ type ReportActionItemSingleProps = {
     wrapperStyle?: StyleProp<ViewStyle>;
 
     /** Children view component for this action item */
-    children: ChildrenProps;
+    children: React.ReactNode;
 
     /** Report for this action */
     report: Report;
@@ -56,6 +54,23 @@ type ReportActionItemSingleProps = {
     isHovered: boolean;
 };
 
+type SubAvatar = {
+    /** Avatar source to display */
+    source: UserUtils.AvatarSource;
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type: AvatarType;
+
+    /** Owner of the avatar. If user, displayName. If workspace, policy name */
+    name: string;
+
+    /** Avatar id */
+    id?: number | string;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon?: UserUtils.AvatarSource;
+};
+
 const showUserDetails = (accountID: string) => {
     Navigation.navigate(ROUTES.PROFILE.getRoute(accountID));
 };
@@ -79,13 +94,13 @@ function ReportActionItemSingle({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
+    const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT;
     const actorAccountID = action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport ? iouReport.managerID : action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
-    const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] || {};
-    let actorHint = (login || displayName || '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
+    const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {};
+    let actorHint = (login ?? displayName ?? '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const displayAllActors = useMemo(() => action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport, [action.actionName, iouReport]);
-    const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors);
+    const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID ?? displayAllActors);
     let avatarSource = UserUtils.getAvatar(avatar ?? '', actorAccountID);
 
     if (isWorkspaceActor) {
@@ -103,42 +118,49 @@ function ReportActionItemSingle({
     }
 
     // If this is a report preview, display names and avatars of both people involved
-    let secondaryAvatar = {};
+    let secondaryAvatar: SubAvatar;
     const primaryDisplayName = displayName;
     if (displayAllActors) {
         // The ownerAccountID and actorAccountID can be the same if the a user requests money back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice
         const secondaryAccountId = iouReport.ownerAccountID === actorAccountID ? iouReport.managerID : iouReport.ownerAccountID;
-        const secondaryUserDetails = personalDetails[secondaryAccountId ?? -1] || {};
+        const secondaryUserAvatar = personalDetails?.[secondaryAccountId ?? -1]?.avatar ?? '';
         const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId);
         displayName = `${primaryDisplayName} & ${secondaryDisplayName}`;
         secondaryAvatar = {
-            source: UserUtils.getAvatar(secondaryUserDetails.avatar ?? '', secondaryAccountId),
+            source: UserUtils.getAvatar(secondaryUserAvatar ?? '', secondaryAccountId),
             type: CONST.ICON_TYPE_AVATAR,
-            name: secondaryDisplayName,
+            name: secondaryDisplayName ?? '',
             id: secondaryAccountId,
         };
     } else if (!isWorkspaceActor) {
-        const avatarIconIndex = report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
+        const avatarIconIndex = report.isOwnPolicyExpenseChat ?? ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
         const reportIcons = ReportUtils.getIcons(report, {});
 
         secondaryAvatar = reportIcons[avatarIconIndex];
+    } else {
+        secondaryAvatar = {name: '', source: '', type: 'avatar'};
     }
-    const icon = {source: avatarSource, type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR, name: primaryDisplayName ?? '', id: isWorkspaceActor ? '' : actorAccountID};
+    const icon = {
+        source: avatarSource,
+        type: isWorkspaceActor ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR,
+        name: primaryDisplayName ?? '',
+        id: isWorkspaceActor ? '' : actorAccountID,
+    };
 
     // Since the display name for a report action message is delivered with the report history as an array of fragments
     // we'll need to take the displayName from personal details and have it be in the same format for now. Eventually,
     // we should stop referring to the report history items entirely for this information.
     const personArray = displayName
-        ?? [
+        ? [
               {
                   type: 'TEXT',
                   text: displayName,
               },
           ]
-        ?? action.person ?? {};
+        : action.person;
 
-    const reportID = report && report.reportID;
-    const iouReportID = iouReport && iouReport.reportID;
+    const reportID = report?.reportID;
+    const iouReportID = iouReport?.reportID;
 
     const showActorDetails = useCallback(() => {
         if (isWorkspaceActor) {
@@ -154,9 +176,7 @@ function ReportActionItemSingle({
     }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
-        () =>
-            actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS ||
-            (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(Number(action.delegateAccountID ?? actorAccountID) ?? -1)),
+        () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS ?? (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(Number(action.delegateAccountID ?? actorAccountID) ?? -1)),
         [action, isWorkspaceActor, actorAccountID],
     );
 
@@ -176,8 +196,6 @@ function ReportActionItemSingle({
                 <SubscriptAvatar
                     mainAvatar={icon}
                     secondaryAvatar={secondaryAvatar}
-                    mainTooltip={actorHint}
-                    secondaryTooltip={ReportUtils.getPolicyName(report)}
                     noMargin
                 />
             );
@@ -200,9 +218,9 @@ function ReportActionItemSingle({
             </UserDetailsTooltip>
         );
     };
-    const hasEmojiStatus = !displayAllActors && status && status.emojiCode;
-    const formattedDate = DateUtils.getStatusUntilDate(lodashGet(status, 'clearAfter'));
-    const statusText = lodashGet(status, 'text', '');
+    const hasEmojiStatus = !displayAllActors && status?.emojiCode;
+    const formattedDate = DateUtils.getStatusUntilDate(status?.clearAfter ?? '');
+    const statusText = status?.text ?? '';
     const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;
 
     return (
@@ -216,7 +234,7 @@ function ReportActionItemSingle({
                 accessibilityLabel={actorHint}
                 role={CONST.ROLE.BUTTON}
             >
-                <OfflineWithFeedback pendingAction={lodashGet(pendingFields, 'avatar', null)}>{getAvatar()}</OfflineWithFeedback>
+                <OfflineWithFeedback pendingAction={pendingFields?.avatar}>{getAvatar()}</OfflineWithFeedback>
             </PressableWithoutFeedback>
             <View style={[styles.chatItemRight]}>
                 {showHeader ? (
@@ -230,7 +248,7 @@ function ReportActionItemSingle({
                             accessibilityLabel={actorHint}
                             role={CONST.ROLE.BUTTON}
                         >
-                            {_.map(personArray, (fragment, index) => (
+                            {personArray?.map((fragment, index) => (
                                 <ReportActionItemFragment
                                     key={`person-${action.reportActionID}-${index}`}
                                     accountID={actorAccountID}
diff --git a/src/types/onyx/PersonalDetails.ts b/src/types/onyx/PersonalDetails.ts
index 9f613cbf4f1e..80e542fd53c7 100644
--- a/src/types/onyx/PersonalDetails.ts
+++ b/src/types/onyx/PersonalDetails.ts
@@ -12,6 +12,17 @@ type Timezone = {
     automatic?: boolean;
 };
 
+type Status = {
+    /** The emoji code of the status */
+    emojiCode: string;
+
+    /** The text of the draft status */
+    text?: string;
+
+    /** The timestamp of when the status should be cleared */
+    clearAfter: string; // ISO 8601 format;
+};
+
 type PersonalDetails = {
     /** ID of the current user from their personal details */
     accountID: number;
@@ -70,7 +81,7 @@ type PersonalDetails = {
     fallbackIcon?: string;
 
     /** Status of the current user from their personal details */
-    status?: string;
+    status?: Status;
 };
 
 type PersonalDetailsList = Record<string, PersonalDetails | null>;

From 54d8b05b5f1c87d84618196b01a838de9de684ac Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 24 Dec 2023 14:00:58 +0100
Subject: [PATCH 03/18] fix lint errors

---
 src/libs/ReportUtils.ts                          | 3 ++-
 src/pages/home/report/ReportActionItemSingle.tsx | 1 +
 src/types/onyx/PersonalDetails.ts                | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 8e0ff19bf3dc..1c0452b6a0fd 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -16,6 +16,7 @@ import ROUTES from '@src/ROUTES';
 import {Beta, Login, PersonalDetails, PersonalDetailsList, Policy, Report, ReportAction, Session, Transaction} from '@src/types/onyx';
 import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {IOUMessage, OriginalMessageActionName, OriginalMessageCreated, ReimbursementDeQueuedMessage} from '@src/types/onyx/OriginalMessage';
+import {Status} from '@src/types/onyx/PersonalDetails';
 import {NotificationPreference} from '@src/types/onyx/Report';
 import {Message, ReportActionBase, ReportActions} from '@src/types/onyx/ReportAction';
 import {Receipt, WaypointCollection} from '@src/types/onyx/Transaction';
@@ -323,7 +324,7 @@ type OptionData = {
     subtitle?: string | null;
     login?: string | null;
     accountID?: number | null;
-    status?: string | null;
+    status?: Status | null;
     phoneNumber?: string | null;
     isUnread?: boolean | null;
     isUnreadWithMention?: boolean | null;
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 12fc915e5bb2..3a6dd3e60544 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -250,6 +250,7 @@ function ReportActionItemSingle({
                         >
                             {personArray?.map((fragment, index) => (
                                 <ReportActionItemFragment
+                                    // eslint-disable-next-line react/no-array-index-key
                                     key={`person-${action.reportActionID}-${index}`}
                                     accountID={actorAccountID}
                                     fragment={fragment}
diff --git a/src/types/onyx/PersonalDetails.ts b/src/types/onyx/PersonalDetails.ts
index 80e542fd53c7..03aa7e4ec928 100644
--- a/src/types/onyx/PersonalDetails.ts
+++ b/src/types/onyx/PersonalDetails.ts
@@ -88,4 +88,4 @@ type PersonalDetailsList = Record<string, PersonalDetails | null>;
 
 export default PersonalDetails;
 
-export type {Timezone, SelectedTimezone, PersonalDetailsList};
+export type {Timezone, Status, SelectedTimezone, PersonalDetailsList};

From cad00570a743be413cf5b42b181a5d3185119c69 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 24 Dec 2023 14:09:07 +0100
Subject: [PATCH 04/18] modify pendingAction type

---
 src/components/OfflineWithFeedback.tsx           | 2 +-
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 33d2131acde8..586b3cb30b6c 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -18,7 +18,7 @@ import MessagesRow from './MessagesRow';
 
 type OfflineWithFeedbackProps = ChildrenProps & {
     /** The type of action that's pending  */
-    pendingAction?: OnyxCommon.PendingAction | null;
+    pendingAction: OnyxCommon.PendingAction | null;
 
     /** Determine whether to hide the component's children if deletion is pending */
     shouldHideOnDelete?: boolean;
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 3a6dd3e60544..157868c829c7 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -234,7 +234,7 @@ function ReportActionItemSingle({
                 accessibilityLabel={actorHint}
                 role={CONST.ROLE.BUTTON}
             >
-                <OfflineWithFeedback pendingAction={pendingFields?.avatar}>{getAvatar()}</OfflineWithFeedback>
+                <OfflineWithFeedback pendingAction={pendingFields?.avatar ?? null}>{getAvatar()}</OfflineWithFeedback>
             </PressableWithoutFeedback>
             <View style={[styles.chatItemRight]}>
                 {showHeader ? (

From 8ea1a83e2e2b2523a1b3828e24f23c6207bc8954 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 24 Dec 2023 15:47:18 +0100
Subject: [PATCH 05/18] fix failing test

---
 src/pages/home/report/ReportActionItemSingle.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 157868c829c7..a3a6f84ce662 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -123,17 +123,17 @@ function ReportActionItemSingle({
     if (displayAllActors) {
         // The ownerAccountID and actorAccountID can be the same if the a user requests money back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice
         const secondaryAccountId = iouReport.ownerAccountID === actorAccountID ? iouReport.managerID : iouReport.ownerAccountID;
-        const secondaryUserAvatar = personalDetails?.[secondaryAccountId ?? -1]?.avatar ?? '';
+        const secondaryUserAvatar = secondaryAccountId ? personalDetails?.[secondaryAccountId]?.avatar ?? {} : {};
         const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId);
         displayName = `${primaryDisplayName} & ${secondaryDisplayName}`;
         secondaryAvatar = {
-            source: UserUtils.getAvatar(secondaryUserAvatar ?? '', secondaryAccountId),
+            source: UserUtils.getAvatar(secondaryUserAvatar, secondaryAccountId),
             type: CONST.ICON_TYPE_AVATAR,
             name: secondaryDisplayName ?? '',
             id: secondaryAccountId,
         };
     } else if (!isWorkspaceActor) {
-        const avatarIconIndex = report.isOwnPolicyExpenseChat ?? ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
+        const avatarIconIndex = report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
         const reportIcons = ReportUtils.getIcons(report, {});
 
         secondaryAvatar = reportIcons[avatarIconIndex];
@@ -176,7 +176,7 @@ function ReportActionItemSingle({
     }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
-        () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS ?? (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(Number(action.delegateAccountID ?? actorAccountID) ?? -1)),
+        () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS || (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(Number(action.delegateAccountID ?? actorAccountID) ?? -1)),
         [action, isWorkspaceActor, actorAccountID],
     );
 

From 192ff3a45b55b916c0ef0f1ba69e9961bcd0892d Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 24 Dec 2023 15:55:14 +0100
Subject: [PATCH 06/18] ignore lint warning

---
 src/pages/home/report/ReportActionItemSingle.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index a3a6f84ce662..7bb2eb46af0b 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -133,6 +133,7 @@ function ReportActionItemSingle({
             id: secondaryAccountId,
         };
     } else if (!isWorkspaceActor) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         const avatarIconIndex = report.isOwnPolicyExpenseChat || ReportUtils.isPolicyExpenseChat(report) ? 0 : 1;
         const reportIcons = ReportUtils.getIcons(report, {});
 

From c72d4b61acd8665317065c2b451f40e0eae0b78f Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 26 Dec 2023 22:58:19 +0100
Subject: [PATCH 07/18] edit comment

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>
---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 7bb2eb46af0b..912df6b634ad 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -58,7 +58,7 @@ type SubAvatar = {
     /** Avatar source to display */
     source: UserUtils.AvatarSource;
 
-    /** Denotes whether it is an avatar or a workspace avatar */
+    /** Denotes whether it is a user avatar or a workspace avatar */
     type: AvatarType;
 
     /** Owner of the avatar. If user, displayName. If workspace, policy name */

From fb0fb1fd1f73276b621c702d4404d72da2142f67 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 26 Dec 2023 22:58:38 +0100
Subject: [PATCH 08/18] edit comment

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>
---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 912df6b634ad..85705fe3c6d7 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -67,7 +67,7 @@ type SubAvatar = {
     /** Avatar id */
     id?: number | string;
 
-    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL */
     fallbackIcon?: UserUtils.AvatarSource;
 };
 

From 03dd713d22be9f7bc2540fb2931a8ade1e758f7e Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 17:50:37 +0100
Subject: [PATCH 09/18] make props optional

---
 src/pages/home/report/ReportActionItemSingle.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 23313841529b..5989278e7a20 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -39,19 +39,19 @@ type ReportActionItemSingleProps = {
     report: Report;
 
     /** IOU Report for this action, if any */
-    iouReport: Report;
+    iouReport?: Report;
 
     /** Show header for action */
-    showHeader: boolean;
+    showHeader?: boolean;
 
     /** Determines if the avatar is displayed as a subscript (positioned lower than normal) */
-    shouldShowSubscriptAvatar: boolean;
+    shouldShowSubscriptAvatar?: boolean;
 
     /** If the message has been flagged for moderation */
-    hasBeenFlagged: boolean;
+    hasBeenFlagged?: boolean;
 
     /** If the action is being hovered */
-    isHovered: boolean;
+    isHovered?: boolean;
 };
 
 type SubAvatar = {
@@ -122,7 +122,7 @@ function ReportActionItemSingle({
     const primaryDisplayName = displayName;
     if (displayAllActors) {
         // The ownerAccountID and actorAccountID can be the same if the a user requests money back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice
-        const secondaryAccountId = iouReport.ownerAccountID === actorAccountID ? iouReport.managerID : iouReport.ownerAccountID;
+        const secondaryAccountId = iouReport?.ownerAccountID === actorAccountID ? iouReport?.managerID : iouReport?.ownerAccountID;
         const secondaryUserAvatar = secondaryAccountId ? personalDetails?.[secondaryAccountId]?.avatar ?? {} : {};
         const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId);
         displayName = `${primaryDisplayName} & ${secondaryDisplayName}`;
@@ -168,7 +168,7 @@ function ReportActionItemSingle({
             showWorkspaceDetails(reportID);
         } else {
             // Show participants page IOU report preview
-            if (displayAllActors) {
+            if (iouReportID && displayAllActors) {
                 Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID));
                 return;
             }

From 1e8d47f091af858c3f84d96bbc2f62d25096854b Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 17:57:44 +0100
Subject: [PATCH 10/18] fix expression for when login is empty string

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 5989278e7a20..4d94936c7058 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -98,7 +98,7 @@ function ReportActionItemSingle({
     const actorAccountID = action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport ? iouReport.managerID : action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
     const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {};
-    let actorHint = (login ?? displayName ?? '').replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
+    let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const displayAllActors = useMemo(() => action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport, [action.actionName, iouReport]);
     const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID ?? displayAllActors);
     let avatarSource = UserUtils.getAvatar(avatar ?? '', actorAccountID);

From f21ecce1bb9d05e140ce8140d87ae5683dd3ad54 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 18:03:43 +0100
Subject: [PATCH 11/18] using || instead of ??

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 4d94936c7058..a1f6967f005e 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -100,7 +100,7 @@ function ReportActionItemSingle({
     const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {};
     let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const displayAllActors = useMemo(() => action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport, [action.actionName, iouReport]);
-    const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID ?? displayAllActors);
+    const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors);
     let avatarSource = UserUtils.getAvatar(avatar ?? '', actorAccountID);
 
     if (isWorkspaceActor) {

From e357d3d706c2b748f085029e28c1eea87190ec22 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 18:25:08 +0100
Subject: [PATCH 12/18] using undefined instead of null for default
 pendingAction

---
 src/components/OfflineWithFeedback.tsx           | 2 +-
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 586b3cb30b6c..4522595826af 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -18,7 +18,7 @@ import MessagesRow from './MessagesRow';
 
 type OfflineWithFeedbackProps = ChildrenProps & {
     /** The type of action that's pending  */
-    pendingAction: OnyxCommon.PendingAction | null;
+    pendingAction?: OnyxCommon.PendingAction;
 
     /** Determine whether to hide the component's children if deletion is pending */
     shouldHideOnDelete?: boolean;
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index a1f6967f005e..068c141bdda9 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -235,7 +235,7 @@ function ReportActionItemSingle({
                 accessibilityLabel={actorHint}
                 role={CONST.ROLE.BUTTON}
             >
-                <OfflineWithFeedback pendingAction={pendingFields?.avatar ?? null}>{getAvatar()}</OfflineWithFeedback>
+                <OfflineWithFeedback pendingAction={pendingFields?.avatar ?? undefined}>{getAvatar()}</OfflineWithFeedback>
             </PressableWithoutFeedback>
             <View style={[styles.chatItemRight]}>
                 {showHeader ? (

From a7eac8f885a081305add542addfe40c3c7009b80 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 18:41:02 +0100
Subject: [PATCH 13/18] fix secondaryUserAvatar statement

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 068c141bdda9..f54d0bfff6a5 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -123,7 +123,7 @@ function ReportActionItemSingle({
     if (displayAllActors) {
         // The ownerAccountID and actorAccountID can be the same if the a user requests money back from the IOU's original creator, in that case we need to use managerID to avoid displaying the same user twice
         const secondaryAccountId = iouReport?.ownerAccountID === actorAccountID ? iouReport?.managerID : iouReport?.ownerAccountID;
-        const secondaryUserAvatar = secondaryAccountId ? personalDetails?.[secondaryAccountId]?.avatar ?? {} : {};
+        const secondaryUserAvatar = personalDetails?.[secondaryAccountId ?? -1]?.avatar ?? '';
         const secondaryDisplayName = ReportUtils.getDisplayNameForParticipant(secondaryAccountId);
         displayName = `${primaryDisplayName} & ${secondaryDisplayName}`;
         secondaryAvatar = {

From ee3f3b3ed46dbb4f36cfba777df699a1a2363d54 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 18:51:33 +0100
Subject: [PATCH 14/18] fix for when delegateAccountID is empty string

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index f54d0bfff6a5..b38b0997878c 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -172,7 +172,7 @@ function ReportActionItemSingle({
                 Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(iouReportID));
                 return;
             }
-            showUserDetails(action.delegateAccountID ?? String(actorAccountID) ?? -1);
+            showUserDetails(action.delegateAccountID ? action.delegateAccountID : String(actorAccountID));
         }
     }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]);
 

From 4adc9cb5b882eacb07a5365cfc10acfe086b5db1 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 19:06:18 +0100
Subject: [PATCH 15/18] fix shouldDisableDetailPage statement

---
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index b38b0997878c..956b7ab0016c 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -177,7 +177,7 @@ function ReportActionItemSingle({
     }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
-        () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS || (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(Number(action.delegateAccountID ?? actorAccountID) ?? -1)),
+        () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS || (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(action.delegateAccountID ? Number(action.delegateAccountID) : actorAccountID ?? -1)),
         [action, isWorkspaceActor, actorAccountID],
     );
 

From a191972c35152d4e4cbfcbbb4331c5ba4e6e3e80 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 19:07:51 +0100
Subject: [PATCH 16/18] use null instead of undefined for pendingAction default

---
 src/components/OfflineWithFeedback.tsx           | 2 +-
 src/pages/home/report/ReportActionItemSingle.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 4522595826af..586b3cb30b6c 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -18,7 +18,7 @@ import MessagesRow from './MessagesRow';
 
 type OfflineWithFeedbackProps = ChildrenProps & {
     /** The type of action that's pending  */
-    pendingAction?: OnyxCommon.PendingAction;
+    pendingAction: OnyxCommon.PendingAction | null;
 
     /** Determine whether to hide the component's children if deletion is pending */
     shouldHideOnDelete?: boolean;
diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 956b7ab0016c..9106131db3c2 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -235,7 +235,7 @@ function ReportActionItemSingle({
                 accessibilityLabel={actorHint}
                 role={CONST.ROLE.BUTTON}
             >
-                <OfflineWithFeedback pendingAction={pendingFields?.avatar ?? undefined}>{getAvatar()}</OfflineWithFeedback>
+                <OfflineWithFeedback pendingAction={pendingFields?.avatar ?? null}>{getAvatar()}</OfflineWithFeedback>
             </PressableWithoutFeedback>
             <View style={[styles.chatItemRight]}>
                 {showHeader ? (

From 7238366adb278f80d033b0238a8a79d41d7cb43b Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 19:09:09 +0100
Subject: [PATCH 17/18] fix lint error

---
 src/pages/home/report/ReportActionItemSingle.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index 9106131db3c2..a7088d473ccc 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -98,6 +98,7 @@ function ReportActionItemSingle({
     const actorAccountID = action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport ? iouReport.managerID : action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
     const {avatar, login, pendingFields, status, fallbackIcon} = personalDetails[actorAccountID ?? -1] ?? {};
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     let actorHint = (login || (displayName ?? '')).replace(CONST.REGEX.MERGED_ACCOUNT_PREFIX, '');
     const displayAllActors = useMemo(() => action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && iouReport, [action.actionName, iouReport]);
     const isWorkspaceActor = ReportUtils.isPolicyExpenseChat(report) && (!actorAccountID || displayAllActors);

From 0733b12882116d3a83444ce21efd428a588a02d9 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 29 Dec 2023 19:16:11 +0100
Subject: [PATCH 18/18] run prettier

---
 src/pages/home/report/ReportActionItemSingle.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx
index a7088d473ccc..91dcab4df9ee 100644
--- a/src/pages/home/report/ReportActionItemSingle.tsx
+++ b/src/pages/home/report/ReportActionItemSingle.tsx
@@ -178,7 +178,9 @@ function ReportActionItemSingle({
     }, [isWorkspaceActor, reportID, actorAccountID, action.delegateAccountID, iouReportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
-        () => actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS || (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(action.delegateAccountID ? Number(action.delegateAccountID) : actorAccountID ?? -1)),
+        () =>
+            actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS ||
+            (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(action.delegateAccountID ? Number(action.delegateAccountID) : actorAccountID ?? -1)),
         [action, isWorkspaceActor, actorAccountID],
     );