From 97807c245cb9fd7a45dd2258847019339f04fa8a Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 10 Aug 2023 10:48:11 +0700
Subject: [PATCH 001/123] Create is leaving client pusher event

---
 src/ONYXKEYS.js                |   1 +
 src/libs/Pusher/EventType.js   |   1 +
 src/libs/actions/Report.js     | 101 +++++++++++++++++++++++++++++++++
 src/pages/home/ReportScreen.js |  49 ++++++++++++++++
 4 files changed, 152 insertions(+)

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 89e6aa9be419..75e22dbbf0d9 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -127,6 +127,7 @@ export default {
         REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_',
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
+        REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
 
diff --git a/src/libs/Pusher/EventType.js b/src/libs/Pusher/EventType.js
index 639e10020fc7..85ccc5e17242 100644
--- a/src/libs/Pusher/EventType.js
+++ b/src/libs/Pusher/EventType.js
@@ -5,6 +5,7 @@
 export default {
     REPORT_COMMENT: 'reportComment',
     ONYX_API_UPDATE: 'onyxApiUpdate',
+    USER_IS_LEAVING_ROOM: 'client-userIsLeavingRoom',
     USER_IS_TYPING: 'client-userIsTyping',
     MULTIPLE_EVENTS: 'multipleEvents',
     MULTIPLE_EVENT_TYPE: {
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 2ac014e22a13..f241c3b5a657 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -79,6 +79,7 @@ Onyx.connect({
 const allReports = {};
 let conciergeChatReportID;
 const typingWatchTimers = {};
+const leavingWatchTimers = {};
 
 /**
  * Get the private pusher channel name for a Report.
@@ -111,6 +112,28 @@ function getNormalizedTypingStatus(typingStatus) {
     return normalizedTypingStatus;
 }
 
+/**
+ * There are 2 possibilities that we can receive via pusher for a user's leaving status:
+ * 1. The "new" way from New Expensify is passed as {[login]: Boolean} (e.g. {yuwen@expensify.com: true}), where the value
+ * is whether the user with that login is leaving on the report or not.
+ * 2. The "old" way from e.com which is passed as {userLogin: login} (e.g. {userLogin: bstites@expensify.com})
+ *
+ * This method makes sure that no matter which we get, we return the "new" format
+ *
+ * @param {Object} leavingStatus
+ * @returns {Object}
+ */
+function getNormalizedLeavingStatus(leavingStatus) {
+    let normalizedLeavingStatus = leavingStatus;
+
+    if (_.first(_.keys(leavingStatus)) === 'userLogin') {
+        normalizedLeavingStatus = {[leavingStatus.userLogin]: true};
+    }
+
+    return normalizedLeavingStatus;
+}
+
+
 /**
  * Initialize our pusher subscriptions to listen for someone typing in a report.
  *
@@ -158,6 +181,53 @@ function subscribeToReportTypingEvents(reportID) {
     });
 }
 
+/**
+ * Initialize our pusher subscriptions to listen for someone typing in a report.
+ *
+ * @param {String} reportID
+ */
+function subscribeToReportLeavingEvents(reportID) {
+    if (!reportID) {
+        return;
+    }
+
+    // Make sure we have a clean Leaving indicator before subscribing to leaving events
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, {});
+
+    const pusherChannelName = getReportChannelName(reportID);
+    Pusher.subscribe(pusherChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM, (leavingStatus) => {
+        // If the pusher message comes from OldDot, we expect the leaving status to be keyed by user
+        // login OR by 'Concierge'. If the pusher message comes from NewDot, it is keyed by accountID
+        // since personal details are keyed by accountID.
+        const normalizedLeavingStatus = getNormalizedLeavingStatus(leavingStatus);
+        const accountIDOrLogin = _.first(_.keys(normalizedLeavingStatus));
+
+        if (!accountIDOrLogin) {
+            return;
+        }
+
+        // Don't show the leaving indicator if the user is leaving on another platform
+        if (Number(accountIDOrLogin) === currentUserAccountID) {
+            return;
+        }
+
+        // Use a combo of the reportID and the accountID or login as a key for holding our timers.
+        const reportUserIdentifier = `${reportID}-${accountIDOrLogin}`;
+        clearTimeout(leavingWatchTimers[reportUserIdentifier]);
+        Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, normalizedLeavingStatus);
+
+        // Wait for 1.5s of no additional leaving events before setting the status back to false.
+        leavingWatchTimers[reportUserIdentifier] = setTimeout(() => {
+            const leavingStoppedStatus = {};
+            leavingStoppedStatus[accountIDOrLogin] = false;
+            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, leavingStoppedStatus);
+            delete leavingWatchTimers[reportUserIdentifier];
+        }, 1500);
+    }).catch((error) => {
+        Log.hmmm('[Report] Failed to initially subscribe to Pusher channel', false, {errorType: error.type, pusherChannelName});
+    });
+}
+
 /**
  * Remove our pusher subscriptions to listen for someone typing in a report.
  *
@@ -173,6 +243,22 @@ function unsubscribeFromReportChannel(reportID) {
     Pusher.unsubscribe(pusherChannelName, Pusher.TYPE.USER_IS_TYPING);
 }
 
+/**
+ * Remove our pusher subscriptions to listen for someone typing in a report.
+ *
+ * @param {String} reportID
+ */
+function unsubscribeFromLeavingRoomReportChannel(reportID) {
+    if (!reportID) {
+        return;
+    }
+
+    const pusherChannelName = getReportChannelName(reportID);
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, {});
+    Pusher.unsubscribe(pusherChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM);
+}
+
+
 // New action subscriber array for report pages
 let newActionSubscribers = [];
 
@@ -838,6 +924,17 @@ function broadcastUserIsTyping(reportID) {
     typingStatus[currentUserAccountID] = true;
     Pusher.sendEvent(privateReportChannelName, Pusher.TYPE.USER_IS_TYPING, typingStatus);
 }
+/**
+ * Broadcasts whether or not a user is typing on a report over the report's private pusher channel.
+ *
+ * @param {String} reportID
+ */
+function broadcastUserIsLeavingRoom(reportID) {
+    const privateReportChannelName = getReportChannelName(reportID);
+    const leavingStatus = {};
+    leavingStatus[currentUserAccountID] = true;
+    Pusher.sendEvent(privateReportChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM, leavingStatus);
+}
 
 /**
  * When a report changes in Onyx, this fetches the report from the API if the report doesn't have a name
@@ -1763,6 +1860,7 @@ function leaveRoom(reportID) {
             ],
         },
     );
+    broadcastUserIsLeavingRoom()
     navigateToConciergeChat();
 }
 
@@ -1878,10 +1976,13 @@ export {
     updateWriteCapabilityAndNavigate,
     updateNotificationPreferenceAndNavigate,
     subscribeToReportTypingEvents,
+    subscribeToReportLeavingEvents,
     unsubscribeFromReportChannel,
+    unsubscribeFromLeavingRoomReportChannel,
     saveReportComment,
     saveReportCommentNumberOfLines,
     broadcastUserIsTyping,
+    broadcastUserIsLeavingRoom,
     togglePinnedState,
     editReportComment,
     handleUserDeletedLinksInHtml,
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index c859bc6b8f05..c4d5a61bfbe7 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -83,6 +83,8 @@ const propTypes = {
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
+    userLeavingStatuses: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
     ...viewportOffsetTopPropTypes,
 };
@@ -98,6 +100,7 @@ const defaultProps = {
     betas: [],
     policies: {},
     accountManagerReportID: null,
+    userLeavingStatuses: false,
     personalDetails: {},
 };
 
@@ -125,6 +128,7 @@ class ReportScreen extends React.Component {
         this.onSubmitComment = this.onSubmitComment.bind(this);
         this.chatWithAccountManager = this.chatWithAccountManager.bind(this);
         this.dismissBanner = this.dismissBanner.bind(this);
+        this.checkAndSubscribe = this.checkAndSubscribe.bind(this);
 
         this.state = {
             skeletonViewContainerHeight: reportActionsListViewHeight,
@@ -135,6 +139,8 @@ class ReportScreen extends React.Component {
 
         this.flatListRef = React.createRef();
         this.reactionListRef = React.createRef();
+
+        this.didSubscribeToReportLeavingEvents = React.createRef();
     }
 
     componentDidMount() {
@@ -152,14 +158,39 @@ class ReportScreen extends React.Component {
 
         this.fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
+        this.checkAndSubscribe();
     }
 
     componentDidUpdate(prevProps) {
+
+        console.log('[debug] userLeavingStatuses', this.props.userLeavingStatuses)
         // If composer should be hidden, hide emoji picker as well
         if (ReportUtils.shouldHideComposer(this.props.report)) {
             EmojiPickerAction.hideEmojiPicker(true);
         }
 
+        // const onyxReportID = this.props.report.reportID;
+        // const prevOnyxReportID = prevProps.report.reportID;
+        // const routeReportID = getReportID(this.props.route);
+
+        // // navigate to concierge when the room removed from another device (e.g. user leaving a room)
+        // // the report will not really null when removed, it will have defaultProps properties and values
+        // if (
+        //     prevOnyxReportID &&
+        //     prevOnyxReportID === routeReportID &&
+        //     !onyxReportID &&
+        //     // non-optimistic case
+        //     (_.isEqual(this.props.report, defaultProps.report) ||
+        //         // optimistic case
+        //         (prevProps.report.statusNum === CONST.REPORT.STATUS.OPEN && this.props.report.statusNum === CONST.REPORT.STATUS.CLOSED))
+        // ) {
+        //     // Navigation.goBack();
+        //     // Report.navigateToConciergeChat();
+        //     // // isReportRemoved will prevent <FullPageNotFoundView> showing when navigating
+        //     // this.setState({isReportRemoved: true});
+        //     return;
+        // }
+
         // If you already have a report open and are deeplinking to a new report on native,
         // the ReportScreen never actually unmounts and the reportID in the route also doesn't change.
         // Therefore, we need to compare if the existing reportID is the same as the one in the route
@@ -172,9 +203,13 @@ class ReportScreen extends React.Component {
 
         this.fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
+        this.checkAndSubscribe();
     }
 
     componentWillUnmount() {
+        if(this.didSubscribeToReportLeavingEvents){
+            Report.unsubscribeFromLeavingRoomReportChannel(this.props.report.reportID);
+        }
         if (!this.unsubscribeVisibilityListener) {
             return;
         }
@@ -228,6 +263,17 @@ class ReportScreen extends React.Component {
         Navigation.navigate(ROUTES.getReportRoute(this.props.accountManagerReportID));
     }
 
+    checkAndSubscribe() {
+        const { report, reportID } = this.props;
+
+        const didCreateReportSuccessfully = !report.pendingFields || (!report.pendingFields.addWorkspaceRoom && !report.pendingFields.createChat);
+
+        if (!this.didSubscribeToReportLeavingEvents.current && didCreateReportSuccessfully) {
+            Report.subscribeToReportLeavingEvents(reportID);
+            this.didSubscribeToReportLeavingEvents.current = true;
+        }
+    }
+
     render() {
         const reportID = getReportID(this.props.route);
         const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(this.props.report);
@@ -426,5 +472,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        userLeavingStatuses: {
+            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`,
+        },
     }),
 )(ReportScreen);

From b769dc838a9e04eac975955c1bd69704c70f5e22 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 10 Aug 2023 14:07:10 +0700
Subject: [PATCH 002/123] implement subscribeToReportLeavingEvents

---
 src/libs/Pusher/pusher.js      | 13 +++++++
 src/libs/actions/Report.js     | 37 +++++++++++---------
 src/pages/home/ReportScreen.js | 63 +++++++++++++++++-----------------
 3 files changed, 66 insertions(+), 47 deletions(-)

diff --git a/src/libs/Pusher/pusher.js b/src/libs/Pusher/pusher.js
index 60587a68e173..5921d8448f51 100644
--- a/src/libs/Pusher/pusher.js
+++ b/src/libs/Pusher/pusher.js
@@ -195,8 +195,12 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) {
  */
 function subscribe(channelName, eventName, eventCallback = () => {}, onResubscribe = () => {}) {
     return new Promise((resolve, reject) => {
+        console.log('[debug] jiasjdawd', channelName)
+
         // We cannot call subscribe() before init(). Prevent any attempt to do this on dev.
         if (!socket) {
+            console.log('[debug] ohjaihwa', channelName)
+
             throw new Error(`[Pusher] instance not found. Pusher.subscribe()
             most likely has been called before Pusher.init()`);
         }
@@ -205,11 +209,17 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
         let channel = getChannel(channelName);
 
         if (!channel || !channel.subscribed) {
+            console.log('[debug] noahdwawwad', channelName)
+
             channel = socket.subscribe(channelName);
             let isBound = false;
             channel.bind('pusher:subscription_succeeded', () => {
+            console.log('[debug] ahusyodiasd', channelName)
+
                 // Check so that we do not bind another event with each reconnect attempt
                 if (!isBound) {
+            console.log('[debug] pjaisdh08q', channelName)
+
                     bindEventToChannel(channel, eventName, eventCallback);
                     resolve();
                     isBound = true;
@@ -224,6 +234,8 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
             });
 
             channel.bind('pusher:subscription_error', (data = {}) => {
+            console.log('[debug] jh98c20chc0asc', channelName)
+
                 const {type, error, status} = data;
                 Log.hmmm('[Pusher] Issue authenticating with Pusher during subscribe attempt.', {
                     channelName,
@@ -234,6 +246,7 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
                 reject(error);
             });
         } else {
+            console.log('[debug] jouahsdiasd', channelName)
             bindEventToChannel(channel, eventName, eventCallback);
             resolve();
         }
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index f241c3b5a657..4cc5ed0eba50 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -187,42 +187,47 @@ function subscribeToReportTypingEvents(reportID) {
  * @param {String} reportID
  */
 function subscribeToReportLeavingEvents(reportID) {
+    console.log('[debug]  subscribeToReportLeavingEvents(reportID)',  reportID)
     if (!reportID) {
         return;
     }
 
     // Make sure we have a clean Leaving indicator before subscribing to leaving events
-    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, {});
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, false);
 
     const pusherChannelName = getReportChannelName(reportID);
     Pusher.subscribe(pusherChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM, (leavingStatus) => {
+        console.log('[debug] leavingStatus', leavingStatus)
         // If the pusher message comes from OldDot, we expect the leaving status to be keyed by user
         // login OR by 'Concierge'. If the pusher message comes from NewDot, it is keyed by accountID
         // since personal details are keyed by accountID.
         const normalizedLeavingStatus = getNormalizedLeavingStatus(leavingStatus);
         const accountIDOrLogin = _.first(_.keys(normalizedLeavingStatus));
+        console.log('[debug] normalizedLeavingStatus', normalizedLeavingStatus)
+        console.log('[debug] accountIDOrLogin', accountIDOrLogin)
 
         if (!accountIDOrLogin) {
             return;
         }
 
-        // Don't show the leaving indicator if the user is leaving on another platform
-        if (Number(accountIDOrLogin) === currentUserAccountID) {
+        if (Number(accountIDOrLogin) !== currentUserAccountID) {
             return;
         }
 
         // Use a combo of the reportID and the accountID or login as a key for holding our timers.
-        const reportUserIdentifier = `${reportID}-${accountIDOrLogin}`;
-        clearTimeout(leavingWatchTimers[reportUserIdentifier]);
-        Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, normalizedLeavingStatus);
-
-        // Wait for 1.5s of no additional leaving events before setting the status back to false.
-        leavingWatchTimers[reportUserIdentifier] = setTimeout(() => {
-            const leavingStoppedStatus = {};
-            leavingStoppedStatus[accountIDOrLogin] = false;
-            Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, leavingStoppedStatus);
-            delete leavingWatchTimers[reportUserIdentifier];
-        }, 1500);
+        // const reportUserIdentifier = `${reportID}-${accountIDOrLogin}`;
+        // clearTimeout(leavingWatchTimers[reportUserIdentifier]);
+        console.log('[debug] Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, true)');
+        Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, true);
+        // // Wait for 1.5s of no additional leaving events before setting the status back to false.
+        // leavingWatchTimers[reportUserIdentifier] = setTimeout(() => {
+        //     const leavingStoppedStatus = {};
+        //     leavingStoppedStatus[accountIDOrLogin] = false;
+        // console.log('[debug] leavingStoppedStatus', leavingStoppedStatus)
+
+        //     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, leavingStoppedStatus);
+        //     delete leavingWatchTimers[reportUserIdentifier];
+        // }, 1500);
     }).catch((error) => {
         Log.hmmm('[Report] Failed to initially subscribe to Pusher channel', false, {errorType: error.type, pusherChannelName});
     });
@@ -254,7 +259,7 @@ function unsubscribeFromLeavingRoomReportChannel(reportID) {
     }
 
     const pusherChannelName = getReportChannelName(reportID);
-    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, {});
+    Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, false);
     Pusher.unsubscribe(pusherChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM);
 }
 
@@ -1860,7 +1865,7 @@ function leaveRoom(reportID) {
             ],
         },
     );
-    broadcastUserIsLeavingRoom()
+    broadcastUserIsLeavingRoom(reportID)
     navigateToConciergeChat();
 }
 
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index c4d5a61bfbe7..e86df04d54f0 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -37,6 +37,7 @@ import * as ComposerActions from '../../libs/actions/Composer';
 import ReportScreenContext from './ReportScreenContext';
 import TaskHeaderActionButton from '../../components/TaskHeaderActionButton';
 import DragAndDropProvider from '../../components/DragAndDrop/Provider';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -83,7 +84,7 @@ const propTypes = {
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
-    userLeavingStatuses: PropTypes.bool,
+    userLeavingStatus: PropTypes.bool,
 
     ...windowDimensionsPropTypes,
     ...viewportOffsetTopPropTypes,
@@ -100,7 +101,7 @@ const defaultProps = {
     betas: [],
     policies: {},
     accountManagerReportID: null,
-    userLeavingStatuses: false,
+    userLeavingStatus: false,
     personalDetails: {},
 };
 
@@ -163,40 +164,39 @@ class ReportScreen extends React.Component {
 
     componentDidUpdate(prevProps) {
 
-        console.log('[debug] userLeavingStatuses', this.props.userLeavingStatuses)
         // If composer should be hidden, hide emoji picker as well
         if (ReportUtils.shouldHideComposer(this.props.report)) {
             EmojiPickerAction.hideEmojiPicker(true);
         }
 
-        // const onyxReportID = this.props.report.reportID;
-        // const prevOnyxReportID = prevProps.report.reportID;
-        // const routeReportID = getReportID(this.props.route);
-
-        // // navigate to concierge when the room removed from another device (e.g. user leaving a room)
-        // // the report will not really null when removed, it will have defaultProps properties and values
-        // if (
-        //     prevOnyxReportID &&
-        //     prevOnyxReportID === routeReportID &&
-        //     !onyxReportID &&
-        //     // non-optimistic case
-        //     (_.isEqual(this.props.report, defaultProps.report) ||
-        //         // optimistic case
-        //         (prevProps.report.statusNum === CONST.REPORT.STATUS.OPEN && this.props.report.statusNum === CONST.REPORT.STATUS.CLOSED))
-        // ) {
-        //     // Navigation.goBack();
-        //     // Report.navigateToConciergeChat();
-        //     // // isReportRemoved will prevent <FullPageNotFoundView> showing when navigating
-        //     // this.setState({isReportRemoved: true});
-        //     return;
-        // }
+        const onyxReportID = this.props.report.reportID;
+        const prevOnyxReportID = prevProps.report.reportID;
+        const routeReportID = getReportID(this.props.route);
+
+        console.log('[debug] userLeavingStatus', this.props.userLeavingStatus)
+        console.log('[debug] prevOnyxReportID', prevOnyxReportID)
+        console.log('[debug] routeReportID', routeReportID)
+        console.log('[debug] onyxReportID', onyxReportID)
+      
+        // navigate to concierge when the room removed from another device (e.g. user leaving a room)
+        if (
+            // non-optimistic case
+            (!prevProps.userLeavingStatus && this.props.userLeavingStatus) ||
+            // optimistic case
+            (prevOnyxReportID &&
+                prevOnyxReportID === routeReportID &&
+                !onyxReportID &&
+                (prevProps.report.statusNum === CONST.REPORT.STATUS.OPEN && this.props.report.statusNum === CONST.REPORT.STATUS.CLOSED))
+        ) {
+            Navigation.goBack();
+            Report.navigateToConciergeChat();
+            return;
+        }
 
         // If you already have a report open and are deeplinking to a new report on native,
         // the ReportScreen never actually unmounts and the reportID in the route also doesn't change.
         // Therefore, we need to compare if the existing reportID is the same as the one in the route
         // before deciding that we shouldn't call OpenReport.
-        const onyxReportID = this.props.report.reportID;
-        const routeReportID = getReportID(this.props.route);
         if (onyxReportID === prevProps.report.reportID && (!onyxReportID || onyxReportID === routeReportID)) {
             return;
         }
@@ -264,12 +264,13 @@ class ReportScreen extends React.Component {
     }
 
     checkAndSubscribe() {
-        const { report, reportID } = this.props;
+        const {report} = this.props;
 
         const didCreateReportSuccessfully = !report.pendingFields || (!report.pendingFields.addWorkspaceRoom && !report.pendingFields.createChat);
 
         if (!this.didSubscribeToReportLeavingEvents.current && didCreateReportSuccessfully) {
-            Report.subscribeToReportLeavingEvents(reportID);
+            console.log('[debug] Report.subscribeToReportLeavingEvents(reportID);')
+            Report.subscribeToReportLeavingEvents(report.reportID);
             this.didSubscribeToReportLeavingEvents.current = true;
         }
     }
@@ -340,7 +341,7 @@ class ReportScreen extends React.Component {
                     shouldEnableKeyboardAvoidingView={isTopMostReportId}
                 >
                     <FullPageNotFoundView
-                        shouldShow={(!this.props.report.reportID && !this.props.report.isLoadingReportActions && !isLoading) || shouldHideReport}
+                        shouldShow={(!this.props.report.reportID && !this.props.report.isLoadingReportActions && !isLoading && !this.props.userLeavingStatus) || shouldHideReport}
                         subtitleKey="notFound.noAccess"
                         shouldShowCloseButton={false}
                         shouldShowBackButton={this.props.isSmallScreenWidth}
@@ -472,8 +473,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
-        userLeavingStatuses: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`,
+        userLeavingStatus: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${getReportID(route)}`,
         },
     }),
 )(ReportScreen);

From c87ceb934bd0f4b2f5610ac137f1421ba3df7216 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 10 Aug 2023 14:29:09 +0700
Subject: [PATCH 003/123] Remove unnecessary code, run prettier

---
 src/libs/Pusher/pusher.js      | 13 -------------
 src/libs/actions/Report.js     | 21 +--------------------
 src/pages/home/ReportScreen.js | 14 +++-----------
 3 files changed, 4 insertions(+), 44 deletions(-)

diff --git a/src/libs/Pusher/pusher.js b/src/libs/Pusher/pusher.js
index 5921d8448f51..60587a68e173 100644
--- a/src/libs/Pusher/pusher.js
+++ b/src/libs/Pusher/pusher.js
@@ -195,12 +195,8 @@ function bindEventToChannel(channel, eventName, eventCallback = () => {}) {
  */
 function subscribe(channelName, eventName, eventCallback = () => {}, onResubscribe = () => {}) {
     return new Promise((resolve, reject) => {
-        console.log('[debug] jiasjdawd', channelName)
-
         // We cannot call subscribe() before init(). Prevent any attempt to do this on dev.
         if (!socket) {
-            console.log('[debug] ohjaihwa', channelName)
-
             throw new Error(`[Pusher] instance not found. Pusher.subscribe()
             most likely has been called before Pusher.init()`);
         }
@@ -209,17 +205,11 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
         let channel = getChannel(channelName);
 
         if (!channel || !channel.subscribed) {
-            console.log('[debug] noahdwawwad', channelName)
-
             channel = socket.subscribe(channelName);
             let isBound = false;
             channel.bind('pusher:subscription_succeeded', () => {
-            console.log('[debug] ahusyodiasd', channelName)
-
                 // Check so that we do not bind another event with each reconnect attempt
                 if (!isBound) {
-            console.log('[debug] pjaisdh08q', channelName)
-
                     bindEventToChannel(channel, eventName, eventCallback);
                     resolve();
                     isBound = true;
@@ -234,8 +224,6 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
             });
 
             channel.bind('pusher:subscription_error', (data = {}) => {
-            console.log('[debug] jh98c20chc0asc', channelName)
-
                 const {type, error, status} = data;
                 Log.hmmm('[Pusher] Issue authenticating with Pusher during subscribe attempt.', {
                     channelName,
@@ -246,7 +234,6 @@ function subscribe(channelName, eventName, eventCallback = () => {}, onResubscri
                 reject(error);
             });
         } else {
-            console.log('[debug] jouahsdiasd', channelName)
             bindEventToChannel(channel, eventName, eventCallback);
             resolve();
         }
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 4cc5ed0eba50..a3a77667bf43 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -133,7 +133,6 @@ function getNormalizedLeavingStatus(leavingStatus) {
     return normalizedLeavingStatus;
 }
 
-
 /**
  * Initialize our pusher subscriptions to listen for someone typing in a report.
  *
@@ -187,7 +186,6 @@ function subscribeToReportTypingEvents(reportID) {
  * @param {String} reportID
  */
 function subscribeToReportLeavingEvents(reportID) {
-    console.log('[debug]  subscribeToReportLeavingEvents(reportID)',  reportID)
     if (!reportID) {
         return;
     }
@@ -197,14 +195,11 @@ function subscribeToReportLeavingEvents(reportID) {
 
     const pusherChannelName = getReportChannelName(reportID);
     Pusher.subscribe(pusherChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM, (leavingStatus) => {
-        console.log('[debug] leavingStatus', leavingStatus)
         // If the pusher message comes from OldDot, we expect the leaving status to be keyed by user
         // login OR by 'Concierge'. If the pusher message comes from NewDot, it is keyed by accountID
         // since personal details are keyed by accountID.
         const normalizedLeavingStatus = getNormalizedLeavingStatus(leavingStatus);
         const accountIDOrLogin = _.first(_.keys(normalizedLeavingStatus));
-        console.log('[debug] normalizedLeavingStatus', normalizedLeavingStatus)
-        console.log('[debug] accountIDOrLogin', accountIDOrLogin)
 
         if (!accountIDOrLogin) {
             return;
@@ -214,20 +209,7 @@ function subscribeToReportLeavingEvents(reportID) {
             return;
         }
 
-        // Use a combo of the reportID and the accountID or login as a key for holding our timers.
-        // const reportUserIdentifier = `${reportID}-${accountIDOrLogin}`;
-        // clearTimeout(leavingWatchTimers[reportUserIdentifier]);
-        console.log('[debug] Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, true)');
         Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, true);
-        // // Wait for 1.5s of no additional leaving events before setting the status back to false.
-        // leavingWatchTimers[reportUserIdentifier] = setTimeout(() => {
-        //     const leavingStoppedStatus = {};
-        //     leavingStoppedStatus[accountIDOrLogin] = false;
-        // console.log('[debug] leavingStoppedStatus', leavingStoppedStatus)
-
-        //     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportID}`, leavingStoppedStatus);
-        //     delete leavingWatchTimers[reportUserIdentifier];
-        // }, 1500);
     }).catch((error) => {
         Log.hmmm('[Report] Failed to initially subscribe to Pusher channel', false, {errorType: error.type, pusherChannelName});
     });
@@ -263,7 +245,6 @@ function unsubscribeFromLeavingRoomReportChannel(reportID) {
     Pusher.unsubscribe(pusherChannelName, Pusher.TYPE.USER_IS_LEAVING_ROOM);
 }
 
-
 // New action subscriber array for report pages
 let newActionSubscribers = [];
 
@@ -1865,7 +1846,7 @@ function leaveRoom(reportID) {
             ],
         },
     );
-    broadcastUserIsLeavingRoom(reportID)
+    broadcastUserIsLeavingRoom(reportID);
     navigateToConciergeChat();
 }
 
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index e86df04d54f0..7d817af71524 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -163,7 +163,6 @@ class ReportScreen extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-
         // If composer should be hidden, hide emoji picker as well
         if (ReportUtils.shouldHideComposer(this.props.report)) {
             EmojiPickerAction.hideEmojiPicker(true);
@@ -173,11 +172,6 @@ class ReportScreen extends React.Component {
         const prevOnyxReportID = prevProps.report.reportID;
         const routeReportID = getReportID(this.props.route);
 
-        console.log('[debug] userLeavingStatus', this.props.userLeavingStatus)
-        console.log('[debug] prevOnyxReportID', prevOnyxReportID)
-        console.log('[debug] routeReportID', routeReportID)
-        console.log('[debug] onyxReportID', onyxReportID)
-      
         // navigate to concierge when the room removed from another device (e.g. user leaving a room)
         if (
             // non-optimistic case
@@ -186,7 +180,8 @@ class ReportScreen extends React.Component {
             (prevOnyxReportID &&
                 prevOnyxReportID === routeReportID &&
                 !onyxReportID &&
-                (prevProps.report.statusNum === CONST.REPORT.STATUS.OPEN && this.props.report.statusNum === CONST.REPORT.STATUS.CLOSED))
+                prevProps.report.statusNum === CONST.REPORT.STATUS.OPEN &&
+                this.props.report.statusNum === CONST.REPORT.STATUS.CLOSED)
         ) {
             Navigation.goBack();
             Report.navigateToConciergeChat();
@@ -207,7 +202,7 @@ class ReportScreen extends React.Component {
     }
 
     componentWillUnmount() {
-        if(this.didSubscribeToReportLeavingEvents){
+        if (this.didSubscribeToReportLeavingEvents) {
             Report.unsubscribeFromLeavingRoomReportChannel(this.props.report.reportID);
         }
         if (!this.unsubscribeVisibilityListener) {
@@ -265,11 +260,8 @@ class ReportScreen extends React.Component {
 
     checkAndSubscribe() {
         const {report} = this.props;
-
         const didCreateReportSuccessfully = !report.pendingFields || (!report.pendingFields.addWorkspaceRoom && !report.pendingFields.createChat);
-
         if (!this.didSubscribeToReportLeavingEvents.current && didCreateReportSuccessfully) {
-            console.log('[debug] Report.subscribeToReportLeavingEvents(reportID);')
             Report.subscribeToReportLeavingEvents(report.reportID);
             this.didSubscribeToReportLeavingEvents.current = true;
         }

From b57b046624adb8dac585064e016af2956d41cfe3 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 10 Aug 2023 14:42:01 +0700
Subject: [PATCH 004/123] refine comment, remove leavingWatchTimers variable,
 refine checkAndSubscribe naming

---
 src/libs/actions/Report.js     | 5 ++---
 src/pages/home/ReportScreen.js | 9 +++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index a3a77667bf43..de1fe0eb4213 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -79,7 +79,6 @@ Onyx.connect({
 const allReports = {};
 let conciergeChatReportID;
 const typingWatchTimers = {};
-const leavingWatchTimers = {};
 
 /**
  * Get the private pusher channel name for a Report.
@@ -231,7 +230,7 @@ function unsubscribeFromReportChannel(reportID) {
 }
 
 /**
- * Remove our pusher subscriptions to listen for someone typing in a report.
+ * Remove our pusher subscriptions to listen for someone leaving a report.
  *
  * @param {String} reportID
  */
@@ -911,7 +910,7 @@ function broadcastUserIsTyping(reportID) {
     Pusher.sendEvent(privateReportChannelName, Pusher.TYPE.USER_IS_TYPING, typingStatus);
 }
 /**
- * Broadcasts whether or not a user is typing on a report over the report's private pusher channel.
+ * Broadcasts whether or not a user is leaving on a report over the report's private pusher channel.
  *
  * @param {String} reportID
  */
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 7d817af71524..dca4a74daf8a 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -84,6 +84,7 @@ const propTypes = {
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
+    /** Whether user leaving current report that listen to another device leaveRoom trigger */
     userLeavingStatus: PropTypes.bool,
 
     ...windowDimensionsPropTypes,
@@ -129,7 +130,7 @@ class ReportScreen extends React.Component {
         this.onSubmitComment = this.onSubmitComment.bind(this);
         this.chatWithAccountManager = this.chatWithAccountManager.bind(this);
         this.dismissBanner = this.dismissBanner.bind(this);
-        this.checkAndSubscribe = this.checkAndSubscribe.bind(this);
+        this.checkAndSubscribeReportLeavingEvents = this.checkAndSubscribeReportLeavingEvents.bind(this);
 
         this.state = {
             skeletonViewContainerHeight: reportActionsListViewHeight,
@@ -159,7 +160,7 @@ class ReportScreen extends React.Component {
 
         this.fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
-        this.checkAndSubscribe();
+        this.checkAndSubscribeReportLeavingEvents();
     }
 
     componentDidUpdate(prevProps) {
@@ -198,7 +199,7 @@ class ReportScreen extends React.Component {
 
         this.fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
-        this.checkAndSubscribe();
+        this.checkAndSubscribeReportLeavingEvents();
     }
 
     componentWillUnmount() {
@@ -258,7 +259,7 @@ class ReportScreen extends React.Component {
         Navigation.navigate(ROUTES.getReportRoute(this.props.accountManagerReportID));
     }
 
-    checkAndSubscribe() {
+    checkAndSubscribeReportLeavingEvents() {
         const {report} = this.props;
         const didCreateReportSuccessfully = !report.pendingFields || (!report.pendingFields.addWorkspaceRoom && !report.pendingFields.createChat);
         if (!this.didSubscribeToReportLeavingEvents.current && didCreateReportSuccessfully) {

From 6baddfe4f3ec43f9e97fe3ff934828c310dcf1b4 Mon Sep 17 00:00:00 2001
From: Edu <gedu07@gmail.com>
Date: Wed, 16 Aug 2023 10:19:45 -0300
Subject: [PATCH 005/123] adding script to find unused keys

---
 package.json                |  3 +-
 scripts/find-unused-keys.sh | 91 +++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100755 scripts/find-unused-keys.sh

diff --git a/package.json b/package.json
index 00d8c2f027fe..9454f8e982aa 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "analyze-packages": "ANALYZE_BUNDLE=true webpack --config config/webpack/webpack.common.js --env envFile=.env.production",
     "symbolicate:android": "npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map",
     "symbolicate:ios": "npx metro-symbolicate main.jsbundle.map",
-    "test:e2e": "node tests/e2e/testRunner.js --development"
+    "test:e2e": "node tests/e2e/testRunner.js --development",
+    "find-missing-keys": "scripts/find-unused-keys.sh"
   },
   "dependencies": {
     "@expensify/react-native-web": "0.18.15",
diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
new file mode 100755
index 000000000000..acfd9be1a191
--- /dev/null
+++ b/scripts/find-unused-keys.sh
@@ -0,0 +1,91 @@
+#!/bin/bash
+
+# Configurations
+SRC_DIR="src"
+STYLES_FILE="src/styles/styles.js"
+TRANSLATION_FILES=("src/languages/es.js" "src/languages/en.js")
+KEYS_LIST_FILE="keys_list.txt"
+
+# Function to find and store keys from a file
+find_and_store_keys() {
+  local file="$1"
+  local file_keys=($(grep -Eo "([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:" "$file" | sed -E "s/[:]//g"))
+  
+  for key in "${file_keys[@]}"; do
+    local line_numbers=($(grep -n "$key" "$file" | cut -d':' -f1))
+    for line_number in "${line_numbers[@]}"; do
+      echo "$key:$file:$line_number"
+    done
+  done
+}
+
+# Function to remove keys from the list
+remove_keys() {
+  local file="$1"
+  local list_file="$2"
+  
+  while IFS= read -r key_info; do
+    local key=$(echo "$key_info" | cut -d':' -f1)
+    local key_file=$(echo "$key_info" | cut -d':' -f2)
+    if [[ "$key_file" != "$file" ]]; then
+      echo "$key_info"
+    fi
+  done < "$list_file"
+}
+
+# Function to find unused keys in a file
+find_unused_keys_in_file() {
+  local file="$1"
+  local list_file="$2"
+  local unused_keys=()
+  
+  while IFS= read -r key_info; do
+    local key=$(echo "$key_info" | cut -d':' -f1)
+    local key_file=$(echo "$key_info" | cut -d':' -f2)
+    local line_number=$(echo "$key_info" | cut -d':' -f3)
+    if [[ "$key_file" != "$file" ]]; then
+      continue
+    fi
+    
+    if ! grep -q "$key" "$file"; then
+      # Check if the line number contains a numeric value
+      if [[ "$line_number" =~ ^[0-9]+$ ]]; then
+        unused_keys+=("$key_info")
+      fi
+    fi
+  done < "$list_file"
+  
+  for unused_key_info in "${unused_keys[@]}"; do
+    echo "Error: Unused key '$(echo "$unused_key_info" | cut -d':' -f1)' found in '$file' at line: $(echo "$unused_key_info" | cut -d':' -f3)"
+  done
+}
+
+# Find and store keys from styles.js (only top-level keys)
+grep -Eo "^[[:space:]]*[a-zA-Z0-9_-]+:" "$STYLES_FILE" | sed -E "s/[:]//g" | while IFS= read -r key; do
+  echo "$key:$STYLES_FILE:0"
+done > "$KEYS_LIST_FILE"
+
+# Find and store keys from translation files
+for translation_file in "${TRANSLATION_FILES[@]}"; do
+  find_and_store_keys "$translation_file" >> "$KEYS_LIST_FILE"
+done
+
+# Find and remove used keys from the list
+while IFS= read -r file; do
+  remove_keys "$file" "$KEYS_LIST_FILE" > keys_list_temp.txt
+  mv keys_list_temp.txt "$KEYS_LIST_FILE"
+done < <(find "$SRC_DIR" -type f)
+
+# Find unused keys in all files
+unused_keys_found=false
+while IFS= read -r file; do
+  unused_keys_in_file=$(find_unused_keys_in_file "$file" "$KEYS_LIST_FILE")
+  if [[ -n "$unused_keys_in_file" ]]; then
+    unused_keys_found=true
+    echo "$unused_keys_in_file"
+  fi
+done < <(find "$SRC_DIR" -type f)
+
+if [[ "$unused_keys_found" = false ]]; then
+  echo "No unused keys found."
+fi
\ No newline at end of file

From 990932d49607b97105ea7873674d57f5032b1e1f Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Thu, 17 Aug 2023 21:37:38 +0800
Subject: [PATCH 006/123] sort group member avatar icons correctly

---
 src/libs/ReportUtils.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 1baf6eacb9da..a2663c0cf30d 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -874,8 +874,14 @@ function getIconsForParticipants(participants, personalDetails) {
         ]);
     }
 
-    // Sort all logins by first name (which is the second element in the array)
-    const sortedParticipantDetails = participantDetails.sort((a, b) => a[2] - b[2]);
+    // Sort all logins by first name (position 2 element in array)
+    // if multiple participants have the same first name, sub-sort them by login/displayName (position 1 element in array)
+    // if that still clashes, sub-sort by accountID (position 0 element in array)
+    const sortedParticipantDetails = _.chain(participantDetails)
+        .sortBy((detail) => detail[0])
+        .sortBy((detail) => detail[1])
+        .sortBy((detail) => detail[2])
+        .value();
 
     // Now that things are sorted, gather only the avatars (third element in the array) and return those
     const avatars = [];

From d798ea6a0a53eb548469a1b6d4a568136de2a6a6 Mon Sep 17 00:00:00 2001
From: Edu <gedu07@gmail.com>
Date: Fri, 18 Aug 2023 17:31:12 -0300
Subject: [PATCH 007/123] Separated into 2 functions to find and parse the
 object names styles and en/es files

---
 scripts/find-unused-keys.sh | 143 ++++++++++++++++++++----------------
 1 file changed, 78 insertions(+), 65 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index acfd9be1a191..de13dccba812 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -4,88 +4,101 @@
 SRC_DIR="src"
 STYLES_FILE="src/styles/styles.js"
 TRANSLATION_FILES=("src/languages/es.js" "src/languages/en.js")
-KEYS_LIST_FILE="keys_list.txt"
+STYLES_KEYS_FILE="src/languages/style_keys_list_temp.txt"
+TRANSLATION_KEYS_FILE="src/languages/translations_keys_list_temp.txt"
 
 # Function to find and store keys from a file
-find_and_store_keys() {
+find_styles_and_store_keys() {
   local file="$1"
-  local file_keys=($(grep -Eo "([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:" "$file" | sed -E "s/[:]//g"))
-  
-  for key in "${file_keys[@]}"; do
-    local line_numbers=($(grep -n "$key" "$file" | cut -d':' -f1))
-    for line_number in "${line_numbers[@]}"; do
-      echo "$key:$file:$line_number"
-    done
-  done
-}
+  local parent_keys=()
+  local root_key=""
+  local line_number=0  # Initialize the line number
 
-# Function to remove keys from the list
-remove_keys() {
-  local file="$1"
-  local list_file="$2"
-  
-  while IFS= read -r key_info; do
-    local key=$(echo "$key_info" | cut -d':' -f1)
-    local key_file=$(echo "$key_info" | cut -d':' -f2)
-    if [[ "$key_file" != "$file" ]]; then
-      echo "$key_info"
+  while IFS= read -r line; do
+    ((line_number++))  # Increment the line number
+
+  # Skip lines that are not key-related
+    if [[ ! "$line" =~ ^[[:space:]]*const[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then
+      continue
     fi
-  done < "$list_file"
+
+    if [[ "$line" =~ ^[[:space:]]*const[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
+      root_key=$(echo "${BASH_REMATCH[1]}" | sed -E "s/[:[:space:]]*\{.*//")
+    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{ ]]; then
+      local key=$(echo "$line" | sed -E "s/[:[:space:]]*\{.*//")
+      # local line_number=$(echo "$line" | grep -n "$key:" | cut -d':' -f1)
+      
+      if [[ ${#parent_keys[@]} -gt 0 ]]; then
+        parent_key_trimmed="${parent_keys[${#parent_keys[@]}-1]// /}"  # Trim spaces
+        key_trimmed="${key// /}"  # Trim spaces
+        key="$parent_key_trimmed.$key_trimmed"
+      elif [[ -n "$root_key" ]]; then
+        parent_key_trimmed="${root_key// /}"  # Trim spaces
+        key_trimmed="${key// /}"  # Trim spaces
+        key="$parent_key_trimmed.$key_trimmed"
+      fi
+    
+      echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+      parent_keys+=("$key")
+    elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
+      # unset "parent_keys[${#parent_keys[@]}-1]"
+      parent_keys=("${parent_keys[@]:0:${#parent_keys[@]}-1}")
+    fi
+  # done < <(grep -E "^[[:space:]]*const[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\}" "$file")
+  done < "$file"
 }
 
-# Function to find unused keys in a file
-find_unused_keys_in_file() {
+find_translations_and_store_keys() {
   local file="$1"
-  local list_file="$2"
-  local unused_keys=()
-  
-  while IFS= read -r key_info; do
-    local key=$(echo "$key_info" | cut -d':' -f1)
-    local key_file=$(echo "$key_info" | cut -d':' -f2)
-    local line_number=$(echo "$key_info" | cut -d':' -f3)
-    if [[ "$key_file" != "$file" ]]; then
+  local parent_key=()
+  local current_key=""
+  local line_number=0  # Initialize the line number
+
+  while IFS= read -r line; do
+    ((line_number++))  # Increment the line number
+
+  # Skip lines that are not key-related
+    if [[ ! "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*(\'[^\']*\'|\{)|^[[:space:]]*\} ]]; then
       continue
     fi
+
     
-    if ! grep -q "$key" "$file"; then
-      # Check if the line number contains a numeric value
-      if [[ "$line_number" =~ ^[0-9]+$ ]]; then
-        unused_keys+=("$key_info")
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*\{ ]]; then
+      local key="${BASH_REMATCH[1]}"
+      current_key="$key"
+
+      if [[ ${#parent_keys[@]} -gt 0 ]]; then
+        local parent_key="${parent_keys[*]}"
+        current_key="$parent_key.$key"
+      fi
+
+      parent_keys=("${parent_keys[@]}" "$current_key")
+    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*(\'[^\']*\'|\{) ]]; then
+      local key="${BASH_REMATCH[1]}"
+      # local line_number=$(echo "$line" | grep -n "${BASH_REMATCH[1]}" | cut -d':' -f1)
+      
+      if [[ ${#parent_keys[@]} -gt 0 ]]; then
+        local lastItem="${#parent_keys[@]}-1"
+        local parent_key="${parent_keys[$lastItem]}"
+
+        echo "${parent_key}.${key}:${file}:${line_number}" >> "$TRANSLATION_KEYS_FILE"
+      else
+        echo "$key:${file}:${line_number}" >> "$TRANSLATION_KEYS_FILE"
       fi
+    elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
+      parent_keys=("${parent_keys[@]:0:${#parent_keys[@]}-1}")
+      current_key="${parent_keys[*]}"
     fi
-  done < "$list_file"
-  
-  for unused_key_info in "${unused_keys[@]}"; do
-    echo "Error: Unused key '$(echo "$unused_key_info" | cut -d':' -f1)' found in '$file' at line: $(echo "$unused_key_info" | cut -d':' -f3)"
-  done
+  # done < <(grep -E "^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*(\'[^\']*\'|\{)|^[[:space:]]*\}" "$file")
+  done < "$file"
 }
 
-# Find and store keys from styles.js (only top-level keys)
-grep -Eo "^[[:space:]]*[a-zA-Z0-9_-]+:" "$STYLES_FILE" | sed -E "s/[:]//g" | while IFS= read -r key; do
-  echo "$key:$STYLES_FILE:0"
-done > "$KEYS_LIST_FILE"
+# Find and store keys from styles.js
+find_styles_and_store_keys "$STYLES_FILE"
 
 # Find and store keys from translation files
 for translation_file in "${TRANSLATION_FILES[@]}"; do
-  find_and_store_keys "$translation_file" >> "$KEYS_LIST_FILE"
+  find_translations_and_store_keys "$translation_file"
 done
 
-# Find and remove used keys from the list
-while IFS= read -r file; do
-  remove_keys "$file" "$KEYS_LIST_FILE" > keys_list_temp.txt
-  mv keys_list_temp.txt "$KEYS_LIST_FILE"
-done < <(find "$SRC_DIR" -type f)
-
-# Find unused keys in all files
-unused_keys_found=false
-while IFS= read -r file; do
-  unused_keys_in_file=$(find_unused_keys_in_file "$file" "$KEYS_LIST_FILE")
-  if [[ -n "$unused_keys_in_file" ]]; then
-    unused_keys_found=true
-    echo "$unused_keys_in_file"
-  fi
-done < <(find "$SRC_DIR" -type f)
-
-if [[ "$unused_keys_found" = false ]]; then
-  echo "No unused keys found."
-fi
\ No newline at end of file
+echo "Keys saved to $KEYS_FILE"
\ No newline at end of file

From ea6c6fe36cc6138485c1ebb6b1297aba7b7b23db Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 23 Aug 2023 09:13:36 +0700
Subject: [PATCH 008/123] Move REPORT_USER_IS_LEAVING_ROOM to ONYXKEYS.ts

---
 src/ONYXKEYS.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 3c0b3ee9a6d6..686d2546bf59 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -233,6 +233,7 @@ const ONYXKEYS = {
         REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_',
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
+        REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
 
@@ -361,6 +362,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES]: number;
     [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean;
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: boolean;
+    [ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM]: boolean;
     [ONYXKEYS.COLLECTION.SECURITY_GROUP]: OnyxTypes.SecurityGroup;
     [ONYXKEYS.COLLECTION.TRANSACTION]: OnyxTypes.Transaction;
 

From fd1f6595d9032c8d506d7958195548b8472e5842 Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Wed, 23 Aug 2023 23:18:47 +0800
Subject: [PATCH 009/123] sort avatar icons by user displayName/login followed
 by accountID efficiently

add unit tests
---
 src/libs/ReportUtils.js       | 27 ++++++-------
 tests/unit/ReportUtilsTest.js | 72 +++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index f64221f74e6b..028d88d4260c 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -884,21 +884,22 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < participantsList.length; i++) {
         const accountID = participantsList[i];
         const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
-        participantDetails.push([
-            accountID,
-            lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''),
-            lodashGet(personalDetails, [accountID, 'firstName'], ''),
-            avatarSource,
-        ]);
+        participantDetails.push([accountID, lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''), avatarSource]);
     }
 
-    // Sort all logins by first name (position 2 element in array)
-    // if multiple participants have the same first name, sub-sort them by login/displayName (position 1 element in array)
-    // if that still clashes, sub-sort by accountID (position 0 element in array)
     const sortedParticipantDetails = _.chain(participantDetails)
-        .sortBy((detail) => detail[0])
-        .sortBy((detail) => detail[1])
-        .sortBy((detail) => detail[2])
+        .sort((first, second) => {
+            // First sort by displayName/login
+            const displayNameLoginOrder = first[1].localeCompare(second[1]);
+            if (displayNameLoginOrder !== 0) {
+                return displayNameLoginOrder;
+            }
+
+            // Then fallback on accountID as the final sorting criteria.
+            // This will ensure that the order of avatars with same login/displayName
+            // stay consistent across all users and devices
+            return first[0] > second[0];
+        })
         .value();
 
     // Now that things are sorted, gather only the avatars (third element in the array) and return those
@@ -906,7 +907,7 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < sortedParticipantDetails.length; i++) {
         const userIcon = {
             id: sortedParticipantDetails[i][0],
-            source: sortedParticipantDetails[i][3],
+            source: sortedParticipantDetails[i][2],
             type: CONST.ICON_TYPE_AVATAR,
             name: sortedParticipantDetails[i][1],
         };
diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
index e97e9147c328..015121a203a0 100644
--- a/tests/unit/ReportUtilsTest.js
+++ b/tests/unit/ReportUtilsTest.js
@@ -35,6 +35,13 @@ const participantsPersonalDetails = {
         login: '+18332403627@expensify.sms',
         displayName: '(833) 240-3627',
     },
+    5: {
+        accountID: 5,
+        displayName: 'Lagertha Lothbrok',
+        firstName: 'Lagertha',
+        login: 'lagertha2@vikings.net',
+        pronouns: 'She/her',
+    },
 };
 const policy = {
     policyID: 1,
@@ -55,6 +62,53 @@ describe('ReportUtils', () => {
     });
     beforeEach(() => Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.DEFAULT).then(waitForPromisesToResolve));
 
+    describe('getIconsForParticipants', () => {
+        it('returns sorted avatar source by name, then accountID', () => {
+            expect(ReportUtils.getIconsForParticipants([1, 2, 3, 4, 5], participantsPersonalDetails)).toEqual([
+                {
+                    id: 4,
+                    name: '(833) 240-3627',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_5.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 2,
+                    name: 'floki@vikings.net',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_3.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 3,
+                    name: 'Lagertha Lothbrok',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_4.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 5,
+                    name: 'Lagertha Lothbrok',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_6.svg',
+                    },
+                    type: 'avatar',
+                },
+                {
+                    id: 1,
+                    name: 'Ragnar Lothbrok',
+                    source: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_2.svg',
+                    },
+                    type: 'avatar',
+                },
+            ]);
+        });
+    });
+
     describe('getDisplayNamesWithTooltips', () => {
         test('withSingleParticipantReport', () => {
             expect(ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false)).toStrictEqual([
@@ -94,6 +148,15 @@ describe('ReportUtils', () => {
                     accountID: 4,
                     pronouns: undefined,
                 },
+                {
+                    displayName: 'Lagertha Lothbrok',
+                    avatar: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_6.svg',
+                    },
+                    login: 'lagertha2@vikings.net',
+                    accountID: 5,
+                    pronouns: 'She/her',
+                },
             ]);
         });
 
@@ -135,6 +198,15 @@ describe('ReportUtils', () => {
                     accountID: 4,
                     pronouns: undefined,
                 },
+                {
+                    displayName: 'Lagertha',
+                    avatar: {
+                        testUri: '../../../assets/images/avatars/user/default-avatar_6.svg',
+                    },
+                    login: 'lagertha2@vikings.net',
+                    accountID: 5,
+                    pronouns: 'She/her',
+                },
             ]);
         });
     });

From e70c1e9d723ec348bf86dcbd2b99dbd25bb8629b Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Wed, 23 Aug 2023 23:29:10 +0800
Subject: [PATCH 010/123] update comment

---
 src/libs/ReportUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 028d88d4260c..53a0b69b54f2 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -902,7 +902,7 @@ function getIconsForParticipants(participants, personalDetails) {
         })
         .value();
 
-    // Now that things are sorted, gather only the avatars (third element in the array) and return those
+    // Now that things are sorted, gather only the avatars (second element in the array) and return those
     const avatars = [];
     for (let i = 0; i < sortedParticipantDetails.length; i++) {
         const userIcon = {

From e4d1363e973158876dc1c7c5d9c758ad8a5e6882 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 25 Aug 2023 14:35:39 +0700
Subject: [PATCH 011/123] Remove unnecessary code

---
 src/pages/home/ReportScreen.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 598d13ab9f58..d42886aeeb2b 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -163,10 +163,6 @@ class ReportScreen extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (ReportUtils.shouldDisableWriteActions(this.props.report)) {
-            EmojiPickerAction.hideEmojiPicker(true);
-        }
-
         const onyxReportID = this.props.report.reportID;
         const prevOnyxReportID = prevProps.report.reportID;
         const routeReportID = getReportID(this.props.route);

From 4ff465faced849a23da24f9929793602dc9226b2 Mon Sep 17 00:00:00 2001
From: Edu <gedu07@gmail.com>
Date: Mon, 28 Aug 2023 17:12:07 +0200
Subject: [PATCH 012/123] Going through the codebase and get keys from the
 files

---
 scripts/find-unused-keys.sh | 50 ++++++++++++++++++++++++++++++++-----
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index de13dccba812..f8515ff3e17f 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -4,8 +4,34 @@
 SRC_DIR="src"
 STYLES_FILE="src/styles/styles.js"
 TRANSLATION_FILES=("src/languages/es.js" "src/languages/en.js")
-STYLES_KEYS_FILE="src/languages/style_keys_list_temp.txt"
-TRANSLATION_KEYS_FILE="src/languages/translations_keys_list_temp.txt"
+STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
+TRANSLATION_KEYS_FILE="scripts/translations_keys_list_temp.txt"
+REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
+  # Create an empty temp file if it doesn't exist
+  if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
+      touch "$REMOVAL_KEYS_FILE"
+  fi
+# Function to remove a keyword from the temp file
+remove_keyword() {
+
+  keyword="$1"
+  # echo "Removing $keyword"
+  grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
+  mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
+}
+
+lookfor_unused_keywords() {
+  # Loop through all files in the src folder
+  find src -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+      # echo "Checking $file"
+      # Search for keywords starting with "styles"
+       grep -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | while IFS= read -r keyword; do
+        # Remove any [ ] characters from the keyword
+        clean_keyword="${keyword//[\[\]]/}"
+        remove_keyword "$clean_keyword"
+    done
+  done
+}
 
 # Function to find and store keys from a file
 find_styles_and_store_keys() {
@@ -97,8 +123,20 @@ find_translations_and_store_keys() {
 find_styles_and_store_keys "$STYLES_FILE"
 
 # Find and store keys from translation files
-for translation_file in "${TRANSLATION_FILES[@]}"; do
-  find_translations_and_store_keys "$translation_file"
-done
+# for translation_file in "${TRANSLATION_FILES[@]}"; do
+#   find_translations_and_store_keys "$translation_file"
+# done
+
+echo "Keys saved to $KEYS_FILE"
+echo "Now go through the list and remove the keys that are used."
+
+line_count=$(wc -l < $STYLES_KEYS_FILE)
+echo "Number of lines in the file: $line_count"
+
+lookfor_unused_keywords
+
+echo "Unused keys are into to $STYLES_KEYS_FILE"
 
-echo "Keys saved to $KEYS_FILE"
\ No newline at end of file
+line_count2=$(wc -l < $STYLES_KEYS_FILE)
+echo "Number of lines in the file: $line_count2"
+# cat "$STYLES_KEYS_FILE"
\ No newline at end of file

From fd39606656ba36778e293292ecbfd49a5feaa893 Mon Sep 17 00:00:00 2001
From: Edu <gedu07@gmail.com>
Date: Tue, 29 Aug 2023 16:30:12 +0200
Subject: [PATCH 013/123] showing unused style keys

---
 scripts/find-unused-keys.sh | 51 +++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index f8515ff3e17f..38ec0c8b6ed6 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -11,24 +11,58 @@ REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
   if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
       touch "$REMOVAL_KEYS_FILE"
   fi
+
+# Read the style file with unused keys
+show_unused_style_keywords() {
+  while IFS=: read -r key file line_number; do
+    line_count=$(wc -l < $STYLES_KEYS_FILE)
+    echo "Unused keys: $line_count"
+    echo "File: $file"
+    
+    # Get lines before and after the error line
+    lines_before=$((line_number - 3))
+    lines_after=$((line_number + 3))
+    
+    # Print context of the error line
+    echo "Context around line $line_number:"
+    sed -n "$lines_before,$lines_after p" "$file" | awk -v key="$key" '{gsub(key, "\033[1;31m"key"\033[0m"); print}'
+    
+    echo "Unused key: $key"
+    echo "--------------------------------"
+  done < "$STYLES_KEYS_FILE"
+}
+
 # Function to remove a keyword from the temp file
 remove_keyword() {
 
   keyword="$1"
   # echo "Removing $keyword"
   grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
+  line_count=$(wc -l < $REMOVAL_KEYS_FILE)
+  # echo "$REMOVAL_KEYS_FILE lines in the file: $line_count"
   mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
+  # echo "$STYLES_KEYS_FILE UPDATED lines in the file: $line_count"
 }
 
 lookfor_unused_keywords() {
   # Loop through all files in the src folder
-  find src -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+  find 'src' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
       # echo "Checking $file"
       # Search for keywords starting with "styles"
-       grep -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | while IFS= read -r keyword; do
+      #  grep -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | while IFS= read -r keyword; do
+      grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
+
         # Remove any [ ] characters from the keyword
+        # echo "File: $file"
         clean_keyword="${keyword//[\[\]]/}"
-        remove_keyword "$clean_keyword"
+        # skip styles. keyword that might be used in comments
+        if [[ "$clean_keyword" == "styles." ]]; then
+          continue
+        fi
+          # echo "Found $clean_keyword"
+          # Remove the keyword from the temp file
+          remove_keyword "$clean_keyword"
+        
     done
   done
 }
@@ -64,7 +98,12 @@ find_styles_and_store_keys() {
         key="$parent_key_trimmed.$key_trimmed"
       fi
     
-      echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+      # echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+      if [[ "$key" == "styles."* ]]; then
+        echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+      else
+        echo "styles.$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+      fi
       parent_keys+=("$key")
     elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
       # unset "parent_keys[${#parent_keys[@]}-1]"
@@ -139,4 +178,6 @@ echo "Unused keys are into to $STYLES_KEYS_FILE"
 
 line_count2=$(wc -l < $STYLES_KEYS_FILE)
 echo "Number of lines in the file: $line_count2"
-# cat "$STYLES_KEYS_FILE"
\ No newline at end of file
+# cat "$STYLES_KEYS_FILE"
+
+show_unused_style_keywords
\ No newline at end of file

From 96d1c4509e023f117974390bf10277cff7a0cfca Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 30 Aug 2023 06:24:53 +0700
Subject: [PATCH 014/123] Add  prevReport.statusNum to dependency

---
 src/pages/home/ReportScreen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index ac96ed39bf4f..a1c280a498dd 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -308,7 +308,7 @@ function ReportScreen({
 
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
-    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, userLeavingStatus]);
+    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, userLeavingStatus, prevReport.statusNum]);
 
     useEffect(() => {
         // Ensures subscription event succeeds when the report/workspace room is created optimistically.

From d779eecd92326ab69a08bcaee194536412ba7b90 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Fri, 1 Sep 2023 08:05:43 +0200
Subject: [PATCH 015/123] removed translation code

---
 scripts/find-unused-keys.sh | 84 +++++++------------------------------
 1 file changed, 16 insertions(+), 68 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index 38ec0c8b6ed6..b99e28d3fe8a 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -3,14 +3,14 @@
 # Configurations
 SRC_DIR="src"
 STYLES_FILE="src/styles/styles.js"
-TRANSLATION_FILES=("src/languages/es.js" "src/languages/en.js")
 STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
 TRANSLATION_KEYS_FILE="scripts/translations_keys_list_temp.txt"
 REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
-  # Create an empty temp file if it doesn't exist
-  if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
-      touch "$REMOVAL_KEYS_FILE"
-  fi
+  
+# Create an empty temp file if it doesn't exist
+if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
+    touch "$REMOVAL_KEYS_FILE"
+fi
 
 # Read the style file with unused keys
 show_unused_style_keywords() {
@@ -34,35 +34,28 @@ show_unused_style_keywords() {
 
 # Function to remove a keyword from the temp file
 remove_keyword() {
-
   keyword="$1"
-  # echo "Removing $keyword"
+  
   grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
   line_count=$(wc -l < $REMOVAL_KEYS_FILE)
-  # echo "$REMOVAL_KEYS_FILE lines in the file: $line_count"
   mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
-  # echo "$STYLES_KEYS_FILE UPDATED lines in the file: $line_count"
 }
 
 lookfor_unused_keywords() {
   # Loop through all files in the src folder
   find 'src' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
-      # echo "Checking $file"
+
       # Search for keywords starting with "styles"
-      #  grep -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | while IFS= read -r keyword; do
       grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
 
         # Remove any [ ] characters from the keyword
-        # echo "File: $file"
         clean_keyword="${keyword//[\[\]]/}"
         # skip styles. keyword that might be used in comments
         if [[ "$clean_keyword" == "styles." ]]; then
           continue
         fi
-          # echo "Found $clean_keyword"
-          # Remove the keyword from the temp file
-          remove_keyword "$clean_keyword"
         
+        remove_keyword "$clean_keyword"
     done
   done
 }
@@ -87,6 +80,12 @@ find_styles_and_store_keys() {
     elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{ ]]; then
       local key=$(echo "$line" | sed -E "s/[:[:space:]]*\{.*//")
       # local line_number=$(echo "$line" | grep -n "$key:" | cut -d':' -f1)
+      echo "line $line"
+      # Handle keys defined in functions within objects
+       function_key_pattern="[a-zA-Z0-9_-]+:[[:space:]]*\\(.*\\)[[:space:]]*=>[[:space:]]*\\{"
+      if [[ "$line" =~ $function_key_pattern ]]; then
+        key="${BASH_REMATCH[0]%%:*}"
+      fi
       
       if [[ ${#parent_keys[@]} -gt 0 ]]; then
         parent_key_trimmed="${parent_keys[${#parent_keys[@]}-1]// /}"  # Trim spaces
@@ -113,71 +112,20 @@ find_styles_and_store_keys() {
   done < "$file"
 }
 
-find_translations_and_store_keys() {
-  local file="$1"
-  local parent_key=()
-  local current_key=""
-  local line_number=0  # Initialize the line number
-
-  while IFS= read -r line; do
-    ((line_number++))  # Increment the line number
-
-  # Skip lines that are not key-related
-    if [[ ! "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*(\'[^\']*\'|\{)|^[[:space:]]*\} ]]; then
-      continue
-    fi
-
-    
-    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*\{ ]]; then
-      local key="${BASH_REMATCH[1]}"
-      current_key="$key"
-
-      if [[ ${#parent_keys[@]} -gt 0 ]]; then
-        local parent_key="${parent_keys[*]}"
-        current_key="$parent_key.$key"
-      fi
-
-      parent_keys=("${parent_keys[@]}" "$current_key")
-    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*(\'[^\']*\'|\{) ]]; then
-      local key="${BASH_REMATCH[1]}"
-      # local line_number=$(echo "$line" | grep -n "${BASH_REMATCH[1]}" | cut -d':' -f1)
-      
-      if [[ ${#parent_keys[@]} -gt 0 ]]; then
-        local lastItem="${#parent_keys[@]}-1"
-        local parent_key="${parent_keys[$lastItem]}"
-
-        echo "${parent_key}.${key}:${file}:${line_number}" >> "$TRANSLATION_KEYS_FILE"
-      else
-        echo "$key:${file}:${line_number}" >> "$TRANSLATION_KEYS_FILE"
-      fi
-    elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
-      parent_keys=("${parent_keys[@]:0:${#parent_keys[@]}-1}")
-      current_key="${parent_keys[*]}"
-    fi
-  # done < <(grep -E "^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+)[[:space:]]*:[[:space:]]*(\'[^\']*\'|\{)|^[[:space:]]*\}" "$file")
-  done < "$file"
-}
-
 # Find and store keys from styles.js
 find_styles_and_store_keys "$STYLES_FILE"
 
-# Find and store keys from translation files
-# for translation_file in "${TRANSLATION_FILES[@]}"; do
-#   find_translations_and_store_keys "$translation_file"
-# done
-
 echo "Keys saved to $KEYS_FILE"
 echo "Now go through the list and remove the keys that are used."
 
 line_count=$(wc -l < $STYLES_KEYS_FILE)
 echo "Number of lines in the file: $line_count"
 
-lookfor_unused_keywords
+# lookfor_unused_keywords
 
 echo "Unused keys are into to $STYLES_KEYS_FILE"
 
 line_count2=$(wc -l < $STYLES_KEYS_FILE)
 echo "Number of lines in the file: $line_count2"
-# cat "$STYLES_KEYS_FILE"
 
-show_unused_style_keywords
\ No newline at end of file
+# show_unused_style_keywords
\ No newline at end of file

From c04114bf72a44cc795e6b537f9d4b2035c8572e7 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Wed, 6 Sep 2023 17:28:19 +0200
Subject: [PATCH 016/123] getting keys from utilities folder to find unused
 styles

---
 scripts/find-unused-keys.sh | 131 +++++++++++++++++++++++++++---------
 1 file changed, 99 insertions(+), 32 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index b99e28d3fe8a..8e00c19dbeef 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -3,8 +3,9 @@
 # Configurations
 SRC_DIR="src"
 STYLES_FILE="src/styles/styles.js"
+UTILITIES_STYLES_FILE="src/styles/utilities"
 STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
-TRANSLATION_KEYS_FILE="scripts/translations_keys_list_temp.txt"
+UTILITY_STYLES_KEYS_FILE="scripts/utility_keys_list_temp.txt"
 REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
   
 # Create an empty temp file if it doesn't exist
@@ -35,19 +36,22 @@ show_unused_style_keywords() {
 # Function to remove a keyword from the temp file
 remove_keyword() {
   keyword="$1"
-  
-  grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
-  line_count=$(wc -l < $REMOVAL_KEYS_FILE)
-  mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
+  if grep -q "$keyword" "$STYLES_KEYS_FILE"; then
+    grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
+    mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
+    return 0 # Keyword was removed
+  else
+    return 1 # Keyword was not found
+  fi
 }
 
 lookfor_unused_keywords() {
   # Loop through all files in the src folder
   find 'src' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
 
-      # Search for keywords starting with "styles"
-      grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
-
+    # Search for keywords starting with "styles"
+    grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
+        
         # Remove any [ ] characters from the keyword
         clean_keyword="${keyword//[\[\]]/}"
         # skip styles. keyword that might be used in comments
@@ -55,8 +59,17 @@ lookfor_unused_keywords() {
           continue
         fi
         
-        remove_keyword "$clean_keyword"
+        if ! remove_keyword "$clean_keyword" ; then
+          # In case of a leaf of the styles object is being used, it meas the parent objects is being used
+          # we need to mark it as used.
+          if [[ "$clean_keyword" =~ ^styles\.[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$ ]]; then
+            # Keyword has more than two words, remove words after the second word
+            keyword_prefix="$(echo "$clean_keyword" | sed -E 's/(styles\.[a-zA-Z0-9_-]+)\..*/\1/')"
+            remove_keyword "$keyword_prefix"
+          fi        
+        fi
     done
+
   done
 }
 
@@ -70,34 +83,30 @@ find_styles_and_store_keys() {
   while IFS= read -r line; do
     ((line_number++))  # Increment the line number
 
-  # Skip lines that are not key-related
-    if [[ ! "$line" =~ ^[[:space:]]*const[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then
+    # Skip lines that are not key-related
+    if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} && ! "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
       continue
     fi
-
-    if [[ "$line" =~ ^[[:space:]]*const[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
-      root_key=$(echo "${BASH_REMATCH[1]}" | sed -E "s/[:[:space:]]*\{.*//")
-    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{ ]]; then
+    # Handle keys defined in functions within objects
+    function_key_pattern="^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
+    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
+      root_key=$(echo "${BASH_REMATCH[2]}" | sed -E "s/[:[:space:]]*\{.*//")
+    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{ || "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
       local key=$(echo "$line" | sed -E "s/[:[:space:]]*\{.*//")
-      # local line_number=$(echo "$line" | grep -n "$key:" | cut -d':' -f1)
-      echo "line $line"
-      # Handle keys defined in functions within objects
-       function_key_pattern="[a-zA-Z0-9_-]+:[[:space:]]*\\(.*\\)[[:space:]]*=>[[:space:]]*\\{"
-      if [[ "$line" =~ $function_key_pattern ]]; then
+      
+      if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{  ]]; then
         key="${BASH_REMATCH[0]%%:*}"
       fi
       
+      key="${key// /}"  # Trim spaces
       if [[ ${#parent_keys[@]} -gt 0 ]]; then
         parent_key_trimmed="${parent_keys[${#parent_keys[@]}-1]// /}"  # Trim spaces
-        key_trimmed="${key// /}"  # Trim spaces
-        key="$parent_key_trimmed.$key_trimmed"
+        key="$parent_key_trimmed.$key"
       elif [[ -n "$root_key" ]]; then
         parent_key_trimmed="${root_key// /}"  # Trim spaces
-        key_trimmed="${key// /}"  # Trim spaces
-        key="$parent_key_trimmed.$key_trimmed"
+        key="$parent_key_trimmed.$key"
       fi
     
-      # echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
       if [[ "$key" == "styles."* ]]; then
         echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
       else
@@ -105,27 +114,85 @@ find_styles_and_store_keys() {
       fi
       parent_keys+=("$key")
     elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
-      # unset "parent_keys[${#parent_keys[@]}-1]"
       parent_keys=("${parent_keys[@]:0:${#parent_keys[@]}-1}")
     fi
-  # done < <(grep -E "^[[:space:]]*const[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\}" "$file")
   done < "$file"
 }
 
+find_utility_styles_store_prefix() {
+  # Loop through all files in the src folder
+  find 'src/styles' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+
+    # Search for keywords starting with "styles"
+    grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
+        variable=$(echo "$keyword" | sed 's/.*\///')
+        variable_trimmed="${variable// /}"  # Trim spaces
+          
+        echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
+    done
+  done
+
+  # Sort and remove duplicates from the temporary file
+  sort -u -o "$UTILITY_STYLES_KEYS_FILE" "$UTILITY_STYLES_KEYS_FILE"
+}
+
+find_utility_usage_as_styles() {
+  find $UTILITIES_STYLES_FILE -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+    if [ -d "$path" ]; then
+      # Use the folder name as the root key
+      root_key=$(basename "$path")
+      echo "styles.$root_key:$path:0" >> "$STYLES_KEYS_FILE"
+      continue
+    fi
+    find_styles_and_store_keys $file
+  done
+}
+
+lookfor_unused_utilities() {
+  # Read each utility keyword from the file
+  while read -r keyword; do
+    # Creating a copy so later the replacement can reference it  
+    original_keyword="$keyword"
+
+    # Iterate through all files in "src/styles"
+    find 'src/styles' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+      # Find all words that match "$keyword.[a-zA-Z0-9_-]+"
+      grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r match; do
+        # Replace the utility prefix with "styles"
+        variable=$(echo "$match" | sed "s/^$original_keyword/styles/")
+
+        # Call the remove_keyword function with the variable
+        remove_keyword "$variable"
+      done
+    done
+  done < "$UTILITY_STYLES_KEYS_FILE"
+}
+
+# Find and store the name of the utility files as keys
+find_utility_styles_store_prefix
+
 # Find and store keys from styles.js
 find_styles_and_store_keys "$STYLES_FILE"
 
+find_utility_usage_as_styles
+
+# Look for usages of utilities into src/styles
+lookfor_unused_utilities
+
 echo "Keys saved to $KEYS_FILE"
-echo "Now go through the list and remove the keys that are used."
+echo "Now going through the list and removing the keys that are being used."
 
 line_count=$(wc -l < $STYLES_KEYS_FILE)
-echo "Number of lines in the file: $line_count"
+echo "Number of styles found: $line_count"
 
-# lookfor_unused_keywords
+lookfor_unused_keywords
 
 echo "Unused keys are into to $STYLES_KEYS_FILE"
 
 line_count2=$(wc -l < $STYLES_KEYS_FILE)
-echo "Number of lines in the file: $line_count2"
+echo "Number of styles not being used: $line_count2"
+
+show_unused_style_keywords
 
-# show_unused_style_keywords
\ No newline at end of file
+# Delete all files containing a specific pattern in their name
+find /scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
\ No newline at end of file

From c2ea419b30a93e0a1fa28442dcb6717ed1816744 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Wed, 6 Sep 2023 18:29:24 +0200
Subject: [PATCH 017/123] Code clean up + improvements to the output

---
 scripts/find-unused-keys.sh | 42 ++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index 8e00c19dbeef..0f713a312197 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -7,30 +7,43 @@ UTILITIES_STYLES_FILE="src/styles/utilities"
 STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
 UTILITY_STYLES_KEYS_FILE="scripts/utility_keys_list_temp.txt"
 REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
+
+# FILE_EXTENSIONS="-name '*.js' -o -name '*.jsx' -o -name '*.ts' -o -name '*.tsx'"
+FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts' '-o' '-name' '*.tsx')
+
+# trap ctrl-c and call ctrl_c()
+trap ctrl_c INT
+
+function ctrl_c() {
+  find scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
+  exit 1
+}
   
+source scripts/shellUtils.sh
+
 # Create an empty temp file if it doesn't exist
-if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
-    touch "$REMOVAL_KEYS_FILE"
-fi
+# if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
+#     touch "$REMOVAL_KEYS_FILE"
+# fi
 
 # Read the style file with unused keys
 show_unused_style_keywords() {
   while IFS=: read -r key file line_number; do
-    line_count=$(wc -l < $STYLES_KEYS_FILE)
-    echo "Unused keys: $line_count"
-    echo "File: $file"
+    title "File: $file:$line_number"
     
     # Get lines before and after the error line
     lines_before=$((line_number - 3))
     lines_after=$((line_number + 3))
     
     # Print context of the error line
-    echo "Context around line $line_number:"
     sed -n "$lines_before,$lines_after p" "$file" | awk -v key="$key" '{gsub(key, "\033[1;31m"key"\033[0m"); print}'
     
-    echo "Unused key: $key"
+    error "Unused key: $key"
     echo "--------------------------------"
   done < "$STYLES_KEYS_FILE"
+
+  line_count=$(wc -l < $STYLES_KEYS_FILE)
+  error "Unused keys: $line_count"
 }
 
 # Function to remove a keyword from the temp file
@@ -39,6 +52,7 @@ remove_keyword() {
   if grep -q "$keyword" "$STYLES_KEYS_FILE"; then
     grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
     mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
+
     return 0 # Keyword was removed
   else
     return 1 # Keyword was not found
@@ -47,7 +61,7 @@ remove_keyword() {
 
 lookfor_unused_keywords() {
   # Loop through all files in the src folder
-  find 'src' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+  find 'src' -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
 
     # Search for keywords starting with "styles"
     grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
@@ -121,7 +135,7 @@ find_styles_and_store_keys() {
 
 find_utility_styles_store_prefix() {
   # Loop through all files in the src folder
-  find 'src/styles' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+  find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
 
     # Search for keywords starting with "styles"
     grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
@@ -137,7 +151,7 @@ find_utility_styles_store_prefix() {
 }
 
 find_utility_usage_as_styles() {
-  find $UTILITIES_STYLES_FILE -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+  find $UTILITIES_STYLES_FILE -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
     if [ -d "$path" ]; then
       # Use the folder name as the root key
       root_key=$(basename "$path")
@@ -155,7 +169,7 @@ lookfor_unused_utilities() {
     original_keyword="$keyword"
 
     # Iterate through all files in "src/styles"
-    find 'src/styles' -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | while read -r file; do
+    find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
       # Find all words that match "$keyword.[a-zA-Z0-9_-]+"
       grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r match; do
         # Replace the utility prefix with "styles"
@@ -194,5 +208,5 @@ echo "Number of styles not being used: $line_count2"
 
 show_unused_style_keywords
 
-# Delete all files containing a specific pattern in their name
-find /scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
\ No newline at end of file
+# Delete all temo files
+find scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
\ No newline at end of file

From 3042c9abe0fa3f3bab4bb0fb97a1c8c039f748c7 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Thu, 7 Sep 2023 16:15:53 +0200
Subject: [PATCH 018/123] Clean up, used builtins and improved code readability

---
 scripts/find-unused-keys.sh | 165 +++++++++++++++++++-----------------
 1 file changed, 88 insertions(+), 77 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index 0f713a312197..b24b4c1150e2 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -1,30 +1,41 @@
 #!/bin/bash
 
 # Configurations
-SRC_DIR="src"
-STYLES_FILE="src/styles/styles.js"
-UTILITIES_STYLES_FILE="src/styles/utilities"
-STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
-UTILITY_STYLES_KEYS_FILE="scripts/utility_keys_list_temp.txt"
-REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
+readonly SRC_DIR="src"
+readonly STYLES_FILE="src/styles/styles.js"
+readonly UTILITIES_STYLES_FILE="src/styles/utilities"
+readonly STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
+readonly UTILITY_STYLES_KEYS_FILE="scripts/utility_keys_list_temp.txt"
+readonly REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
+readonly AMOUNT_LINES_TO_SHOW=3
+
+readonly FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts' '-o' '-name' '*.tsx')
+
+# Regex
+readonly OBJ_PROP_DECLARATION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\}"
+readonly OBJ_PROP_FUNC_DEFINITION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} && ! [[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
+readonly OBJ_DEFINITION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{"
+readonly CAPTURE_ARROW_FUNC_REGEX='^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{'
+readonly CAPTURE_OBJ_ARROW_FUNC_REGEX='^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{'
 
-# FILE_EXTENSIONS="-name '*.js' -o -name '*.jsx' -o -name '*.ts' -o -name '*.tsx'"
-FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts' '-o' '-name' '*.tsx')
+source scripts/shellUtils.sh
 
 # trap ctrl-c and call ctrl_c()
 trap ctrl_c INT
 
-function ctrl_c() {
+delete_temp_files() {
   find scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
+}
+
+ctrl_c() {
+  delete_temp_files
   exit 1
 }
   
-source scripts/shellUtils.sh
-
-# Create an empty temp file if it doesn't exist
-# if [ ! -f "$REMOVAL_KEYS_FILE" ]; then
-#     touch "$REMOVAL_KEYS_FILE"
-# fi
+count_lines() {
+  local file=$1
+  wc -l < $file
+}
 
 # Read the style file with unused keys
 show_unused_style_keywords() {
@@ -32,23 +43,29 @@ show_unused_style_keywords() {
     title "File: $file:$line_number"
     
     # Get lines before and after the error line
-    lines_before=$((line_number - 3))
-    lines_after=$((line_number + 3))
-    
-    # Print context of the error line
-    sed -n "$lines_before,$lines_after p" "$file" | awk -v key="$key" '{gsub(key, "\033[1;31m"key"\033[0m"); print}'
+    local lines_before=$((line_number - AMOUNT_LINES_TO_SHOW))
+    local lines_after=$((line_number + AMOUNT_LINES_TO_SHOW))
     
+    # Read the lines into an array
+    local lines=()
+    while IFS= read -r line; do
+      lines+=("$line")
+    done < "$file"
+
+    # Loop through the lines
+    for ((i = lines_before; i <= lines_after; i++)); do
+      local line="${lines[i]}"
+      # Print context of the error line
+      echo "$line"
+    done
     error "Unused key: $key"
     echo "--------------------------------"
   done < "$STYLES_KEYS_FILE"
-
-  line_count=$(wc -l < $STYLES_KEYS_FILE)
-  error "Unused keys: $line_count"
 }
 
 # Function to remove a keyword from the temp file
 remove_keyword() {
-  keyword="$1"
+  local keyword="$1"
   if grep -q "$keyword" "$STYLES_KEYS_FILE"; then
     grep -v "$keyword" "$STYLES_KEYS_FILE" > "$REMOVAL_KEYS_FILE"
     mv "$REMOVAL_KEYS_FILE" "$STYLES_KEYS_FILE"
@@ -61,13 +78,13 @@ remove_keyword() {
 
 lookfor_unused_keywords() {
   # Loop through all files in the src folder
-  find 'src' -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
+  while read -r file; do
 
     # Search for keywords starting with "styles"
-    grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
+    while IFS= read -r keyword; do
         
         # Remove any [ ] characters from the keyword
-        clean_keyword="${keyword//[\[\]]/}"
+        local clean_keyword="${keyword//[\[\]]/}"
         # skip styles. keyword that might be used in comments
         if [[ "$clean_keyword" == "styles." ]]; then
           continue
@@ -78,46 +95,41 @@ lookfor_unused_keywords() {
           # we need to mark it as used.
           if [[ "$clean_keyword" =~ ^styles\.[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$ ]]; then
             # Keyword has more than two words, remove words after the second word
-            keyword_prefix="$(echo "$clean_keyword" | sed -E 's/(styles\.[a-zA-Z0-9_-]+)\..*/\1/')"
+            local keyword_prefix="${clean_keyword%.*}"
             remove_keyword "$keyword_prefix"
           fi        
         fi
-    done
-
-  done
+    done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
+  done < <(find 'src' -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
+
 # Function to find and store keys from a file
 find_styles_and_store_keys() {
   local file="$1"
   local parent_keys=()
   local root_key=""
-  local line_number=0  # Initialize the line number
+  local line_number=0
 
   while IFS= read -r line; do
-    ((line_number++))  # Increment the line number
+    ((line_number++))
 
     # Skip lines that are not key-related
-    if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} && ! "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
+    if [[ ! "$line" =~ $OBJ_PROP_DECLARATION_REGEX && ! "$line" =~ $CAPTURE_ARROW_FUNC_REGEX ]]; then
       continue
     fi
-    # Handle keys defined in functions within objects
-    function_key_pattern="^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
-    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
-      root_key=$(echo "${BASH_REMATCH[2]}" | sed -E "s/[:[:space:]]*\{.*//")
-    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{ || "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
-      local key=$(echo "$line" | sed -E "s/[:[:space:]]*\{.*//")
-      
-      if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{  ]]; then
-        key="${BASH_REMATCH[0]%%:*}"
-      fi
-      
+    
+    if [[ "$line" =~ $OBJ_DEFINITION_REGEX ]]; then
+      root_key="${BASH_REMATCH[2]%%:*{*)}"
+    elif [[ "$line" =~ $CAPTURE_OBJ_ARROW_FUNC_REGEX ]]; then
+      # Removing all the extra lines after the ":"
+      local key="${line%%:*}"
       key="${key// /}"  # Trim spaces
       if [[ ${#parent_keys[@]} -gt 0 ]]; then
-        parent_key_trimmed="${parent_keys[${#parent_keys[@]}-1]// /}"  # Trim spaces
+        local parent_key_trimmed="${parent_keys[${#parent_keys[@]}-1]// /}"  # Trim spaces
         key="$parent_key_trimmed.$key"
       elif [[ -n "$root_key" ]]; then
-        parent_key_trimmed="${root_key// /}"  # Trim spaces
+        local parent_key_trimmed="${root_key// /}"  # Trim spaces
         key="$parent_key_trimmed.$key"
       fi
     
@@ -135,50 +147,49 @@ find_styles_and_store_keys() {
 
 find_utility_styles_store_prefix() {
   # Loop through all files in the src folder
-  find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
-
+  while read -r file; do
     # Search for keywords starting with "styles"
-    grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r keyword; do
-        variable=$(echo "$keyword" | sed 's/.*\///')
-        variable_trimmed="${variable// /}"  # Trim spaces
+    while IFS= read -r keyword; do
+        local variable="${keyword##*/}"
+        local variable_trimmed="${variable// /}"  # Trim spaces
           
         echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
-    done
-  done
+    done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
+  done < <(find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
   sort -u -o "$UTILITY_STYLES_KEYS_FILE" "$UTILITY_STYLES_KEYS_FILE"
 }
 
 find_utility_usage_as_styles() {
-  find $UTILITIES_STYLES_FILE -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
+  while read -r file; do
     if [ -d "$path" ]; then
       # Use the folder name as the root key
-      root_key=$(basename "$path")
+      local root_key=$(basename "$path")
       echo "styles.$root_key:$path:0" >> "$STYLES_KEYS_FILE"
       continue
     fi
     find_styles_and_store_keys $file
-  done
+  done < <(find $UTILITIES_STYLES_FILE -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
 lookfor_unused_utilities() {
   # Read each utility keyword from the file
   while read -r keyword; do
     # Creating a copy so later the replacement can reference it  
-    original_keyword="$keyword"
+    local original_keyword="$keyword"
 
     # Iterate through all files in "src/styles"
-    find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \) | while read -r file; do
+    while read -r file; do
       # Find all words that match "$keyword.[a-zA-Z0-9_-]+"
-      grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/' | while IFS= read -r match; do
+      while IFS= read -r match; do
         # Replace the utility prefix with "styles"
-        variable=$(echo "$match" | sed "s/^$original_keyword/styles/")
+        local variable="${match/#$original_keyword/styles}"
 
         # Call the remove_keyword function with the variable
         remove_keyword "$variable"
-      done
-    done
+      done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
+    done < <(find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \))
   done < "$UTILITY_STYLES_KEYS_FILE"
 }
 
@@ -193,20 +204,20 @@ find_utility_usage_as_styles
 # Look for usages of utilities into src/styles
 lookfor_unused_utilities
 
-echo "Keys saved to $KEYS_FILE"
-echo "Now going through the list and removing the keys that are being used."
-
-line_count=$(wc -l < $STYLES_KEYS_FILE)
-echo "Number of styles found: $line_count"
+echo "⏱️ Now going through the list and looking for unused keys."
 
 lookfor_unused_keywords
 
-echo "Unused keys are into to $STYLES_KEYS_FILE"
-
-line_count2=$(wc -l < $STYLES_KEYS_FILE)
-echo "Number of styles not being used: $line_count2"
-
-show_unused_style_keywords
-
-# Delete all temo files
-find scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
\ No newline at end of file
+final_styles_line_count=$(count_lines "$STYLES_KEYS_FILE")
+
+if [[ $final_styles_line_count -eq 0 ]]; then
+  # Exit successfully (status code 0)
+  delete_temp_files
+  success "Styles are in a good shape"
+  exit 0
+else
+  show_unused_style_keywords
+  delete_temp_files
+  error "Unused keys: $final_styles_line_count"
+  exit 1
+fi
\ No newline at end of file

From 6fa51d0bbbfe9b244a7c7732b8b9ac3f1c8d835e Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Thu, 7 Sep 2023 18:09:34 +0200
Subject: [PATCH 019/123] Fixed lint issues

---
 scripts/find-unused-keys.sh | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index b24b4c1150e2..568e3f7045d2 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -13,10 +13,9 @@ readonly FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts
 
 # Regex
 readonly OBJ_PROP_DECLARATION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\}"
-readonly OBJ_PROP_FUNC_DEFINITION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} && ! [[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
 readonly OBJ_DEFINITION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{"
-readonly CAPTURE_ARROW_FUNC_REGEX='^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{'
-readonly CAPTURE_OBJ_ARROW_FUNC_REGEX='^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{'
+readonly CAPTURE_ARROW_FUNC_REGEX="^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
+readonly CAPTURE_OBJ_ARROW_FUNC_REGEX="^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
 
 source scripts/shellUtils.sh
 
@@ -27,6 +26,7 @@ delete_temp_files() {
   find scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
 }
 
+# shellcheck disable=SC2317  # Don't warn about unreachable commands in this function
 ctrl_c() {
   delete_temp_files
   exit 1
@@ -34,7 +34,7 @@ ctrl_c() {
   
 count_lines() {
   local file=$1
-  wc -l < $file
+  wc -l < "$file"
 }
 
 # Read the style file with unused keys
@@ -100,7 +100,7 @@ lookfor_unused_keywords() {
           fi        
         fi
     done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
-  done < <(find 'src' -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find $SRC_DIR -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
 
@@ -163,13 +163,13 @@ find_utility_styles_store_prefix() {
 
 find_utility_usage_as_styles() {
   while read -r file; do
-    if [ -d "$path" ]; then
+    if [ -d "$file" ]; then
       # Use the folder name as the root key
-      local root_key=$(basename "$path")
+      local root_key=$(basename "$file")
       echo "styles.$root_key:$path:0" >> "$STYLES_KEYS_FILE"
       continue
     fi
-    find_styles_and_store_keys $file
+    find_styles_and_store_keys "$file"
   done < <(find $UTILITIES_STYLES_FILE -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 

From 3424140f511f65020540ce5d7ca88b5ca49ce50f Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Thu, 7 Sep 2023 18:12:11 +0200
Subject: [PATCH 020/123] typo fixed

---
 scripts/find-unused-keys.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index 568e3f7045d2..f492f43a5233 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -91,7 +91,7 @@ lookfor_unused_keywords() {
         fi
         
         if ! remove_keyword "$clean_keyword" ; then
-          # In case of a leaf of the styles object is being used, it meas the parent objects is being used
+          # In case of a leaf of the styles object is being used, it means the parent objects is being used
           # we need to mark it as used.
           if [[ "$clean_keyword" =~ ^styles\.[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$ ]]; then
             # Keyword has more than two words, remove words after the second word

From 656beff46a4b2f42bd8b2cf88603f6fbd9156aac Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 7 Sep 2023 12:32:13 -0700
Subject: [PATCH 021/123] update policy type definitions

---
 src/types/onyx/Policy.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
index cacbb5d15199..87382090f294 100644
--- a/src/types/onyx/Policy.ts
+++ b/src/types/onyx/Policy.ts
@@ -32,6 +32,10 @@ type Policy = {
     isFromFullPolicy?: boolean;
     lastModified?: string;
     customUnits?: Record<string, unknown>;
+
+    areChatRoomsEnabled?: boolean;
+
+    isPolicyExpenseChatEnabled?: boolean;
 };
 
 export default Policy;

From b43deaf73b193d3c57cc92c76698eda54821567a Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Thu, 7 Sep 2023 12:43:02 -0700
Subject: [PATCH 022/123] add and use areChatRoomsEnabled

---
 src/libs/PolicyUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/PolicyUtils.js b/src/libs/PolicyUtils.js
index 164f284a4ef5..743dfba34382 100644
--- a/src/libs/PolicyUtils.js
+++ b/src/libs/PolicyUtils.js
@@ -10,7 +10,7 @@ import ONYXKEYS from '../ONYXKEYS';
  * @returns {Array}
  */
 function getActivePolicies(policies) {
-    return _.filter(policies, (policy) => policy && policy.isPolicyExpenseChatEnabled && policy.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
+    return _.filter(policies, (policy) => policy && (policy.isPolicyExpenseChatEnabled || policy.areChatRoomsEnabled) && policy.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
 }
 
 /**

From ac8aea27d87efac1766ac5fc552d9c798736942a Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Fri, 8 Sep 2023 11:59:01 +0200
Subject: [PATCH 023/123] fixed some lint errors + clean ups

---
 scripts/find-unused-keys.sh | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index f492f43a5233..2bb0c8200aa0 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -107,6 +107,7 @@ lookfor_unused_keywords() {
 # Function to find and store keys from a file
 find_styles_and_store_keys() {
   local file="$1"
+  local base_name="${2:-styles}" # Set styles as default
   local parent_keys=()
   local root_key=""
   local line_number=0
@@ -134,9 +135,9 @@ find_styles_and_store_keys() {
       fi
     
       if [[ "$key" == "styles."* ]]; then
-        echo "$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+        echo "${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
       else
-        echo "styles.$key:$file:$line_number" >> "$STYLES_KEYS_FILE"
+        echo "styles.${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
       fi
       parent_keys+=("$key")
     elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
@@ -158,18 +159,24 @@ find_utility_styles_store_prefix() {
   done < <(find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
-  sort -u -o "$UTILITY_STYLES_KEYS_FILE" "$UTILITY_STYLES_KEYS_FILE"
+  sort -u -o "${UTILITY_STYLES_KEYS_FILE}" "${UTILITY_STYLES_KEYS_FILE}"
 }
 
 find_utility_usage_as_styles() {
   while read -r file; do
-    if [ -d "$file" ]; then
-      # Use the folder name as the root key
-      local root_key=$(basename "$file")
-      echo "styles.$root_key:$path:0" >> "$STYLES_KEYS_FILE"
+    local folder_name
+    local root_key
+    local parent_dir
+
+    # Get the folder name, given this utility files are index.js
+    parent_dir=$(dirname "$file")
+    root_key=$(basename "${parent_dir}")
+
+    if [[ "${root_key}" == "utilities" ]]; then
       continue
     fi
-    find_styles_and_store_keys "$file"
+
+    find_styles_and_store_keys "${file}" "${root_key}"
   done < <(find $UTILITIES_STYLES_FILE -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
@@ -177,7 +184,7 @@ lookfor_unused_utilities() {
   # Read each utility keyword from the file
   while read -r keyword; do
     # Creating a copy so later the replacement can reference it  
-    local original_keyword="$keyword"
+    local original_keyword="${keyword}"
 
     # Iterate through all files in "src/styles"
     while read -r file; do
@@ -185,9 +192,9 @@ lookfor_unused_utilities() {
       while IFS= read -r match; do
         # Replace the utility prefix with "styles"
         local variable="${match/#$original_keyword/styles}"
-
         # Call the remove_keyword function with the variable
-        remove_keyword "$variable"
+        remove_keyword "${variable}"
+        remove_keyword "${match}"
       done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
     done < <(find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \))
   done < "$UTILITY_STYLES_KEYS_FILE"

From ff2174b06790a1f974d14b1037b35005403152d0 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Fri, 8 Sep 2023 15:25:29 +0200
Subject: [PATCH 024/123] removed unused variable

---
 scripts/find-unused-keys.sh | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/find-unused-keys.sh b/scripts/find-unused-keys.sh
index 2bb0c8200aa0..5dff65571d54 100755
--- a/scripts/find-unused-keys.sh
+++ b/scripts/find-unused-keys.sh
@@ -164,7 +164,6 @@ find_utility_styles_store_prefix() {
 
 find_utility_usage_as_styles() {
   while read -r file; do
-    local folder_name
     local root_key
     local parent_dir
 

From 261adb0db8db5ea80b67f78b060738380b72d5eb Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Mon, 11 Sep 2023 16:18:36 +0200
Subject: [PATCH 025/123] moved unused style script into workflow actions

---
 .../scripts/findUnusedKeys.sh                 | 22 +++++++++++--------
 .github/workflows/findUnusedStyles.yml        | 22 +++++++++++++++++++
 package.json                                  |  2 +-
 3 files changed, 36 insertions(+), 10 deletions(-)
 rename scripts/find-unused-keys.sh => .github/scripts/findUnusedKeys.sh (90%)
 create mode 100644 .github/workflows/findUnusedStyles.yml

diff --git a/scripts/find-unused-keys.sh b/.github/scripts/findUnusedKeys.sh
similarity index 90%
rename from scripts/find-unused-keys.sh
rename to .github/scripts/findUnusedKeys.sh
index 5dff65571d54..1ab00662dfe7 100755
--- a/scripts/find-unused-keys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -1,12 +1,16 @@
 #!/bin/bash
 
 # Configurations
-readonly SRC_DIR="src"
-readonly STYLES_FILE="src/styles/styles.js"
-readonly UTILITIES_STYLES_FILE="src/styles/utilities"
-readonly STYLES_KEYS_FILE="scripts/style_keys_list_temp.txt"
-readonly UTILITY_STYLES_KEYS_FILE="scripts/utility_keys_list_temp.txt"
-readonly REMOVAL_KEYS_FILE="scripts/removal_keys_list_temp.txt"
+declare LIB_PATH
+LIB_PATH="$(cd "$(dirname "${BASH_SOURCE[0]}")" && cd ../../ && pwd)"
+
+readonly SRC_DIR="${LIB_PATH}/src"
+readonly STYLES_DIR="${LIB_PATH}/src/styles"
+readonly STYLES_FILE="${LIB_PATH}/src/styles/styles.js"
+readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities"
+readonly STYLES_KEYS_FILE="${LIB_PATH}/scripts/style_keys_list_temp.txt"
+readonly UTILITY_STYLES_KEYS_FILE="${LIB_PATH}/scripts/utility_keys_list_temp.txt"
+readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
 readonly AMOUNT_LINES_TO_SHOW=3
 
 readonly FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts' '-o' '-name' '*.tsx')
@@ -23,7 +27,7 @@ source scripts/shellUtils.sh
 trap ctrl_c INT
 
 delete_temp_files() {
-  find scripts -name "*keys_list_temp*" -type f -exec rm -f {} \;
+  find "${LIB_PATH}/scripts" -name "*keys_list_temp*" -type f -exec rm -f {} \;
 }
 
 # shellcheck disable=SC2317  # Don't warn about unreachable commands in this function
@@ -156,7 +160,7 @@ find_utility_styles_store_prefix() {
           
         echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
     done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
-  done < <(find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find $STYLES_DIR -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
   sort -u -o "${UTILITY_STYLES_KEYS_FILE}" "${UTILITY_STYLES_KEYS_FILE}"
@@ -195,7 +199,7 @@ lookfor_unused_utilities() {
         remove_keyword "${variable}"
         remove_keyword "${match}"
       done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
-    done < <(find 'src/styles' -type f \( "${FILE_EXTENSIONS[@]}" \))
+    done < <(find $STYLES_DIR -type f \( "${FILE_EXTENSIONS[@]}" \))
   done < "$UTILITY_STYLES_KEYS_FILE"
 }
 
diff --git a/.github/workflows/findUnusedStyles.yml b/.github/workflows/findUnusedStyles.yml
new file mode 100644
index 000000000000..b832084dcc7e
--- /dev/null
+++ b/.github/workflows/findUnusedStyles.yml
@@ -0,0 +1,22 @@
+name: Find Unused styles
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    branches-ignore: [staging, production]
+
+jobs:
+  perf-tests:
+    if: ${{ github.actor != 'OSBotify' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup NodeJS
+        uses: Expensify/App/.github/actions/composite/setupNode@main
+
+      - name: Run unused style searcher
+        shell: bash
+        run: ./.github/scripts/findUnusedKeys.sh
+
diff --git a/package.json b/package.json
index 9baff5b8f0b1..391e32f40029 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "symbolicate:android": "npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map",
     "symbolicate:ios": "npx metro-symbolicate main.jsbundle.map",
     "test:e2e": "node tests/e2e/testRunner.js --development",
-    "find-missing-keys": "scripts/find-unused-keys.sh"
+    "gh-actions-unused-styles": "./.github/scripts/findUnusedKeys.sh"
   },
   "dependencies": {
     "@expensify/react-native-web": "0.18.15",

From 82cf6262896e84c37ee761e47e25b94c6632373a Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Mon, 11 Sep 2023 16:30:37 +0200
Subject: [PATCH 026/123] added find unused styles into lint.yml workflow

---
 .github/workflows/findUnusedStyles.yml | 22 ----------------------
 .github/workflows/lint.yml             |  4 ++++
 2 files changed, 4 insertions(+), 22 deletions(-)
 delete mode 100644 .github/workflows/findUnusedStyles.yml

diff --git a/.github/workflows/findUnusedStyles.yml b/.github/workflows/findUnusedStyles.yml
deleted file mode 100644
index b832084dcc7e..000000000000
--- a/.github/workflows/findUnusedStyles.yml
+++ /dev/null
@@ -1,22 +0,0 @@
-name: Find Unused styles
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-    branches-ignore: [staging, production]
-
-jobs:
-  perf-tests:
-    if: ${{ github.actor != 'OSBotify' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup NodeJS
-        uses: Expensify/App/.github/actions/composite/setupNode@main
-
-      - name: Run unused style searcher
-        shell: bash
-        run: ./.github/scripts/findUnusedKeys.sh
-
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 795271cab60a..7158d4f67e7b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -31,3 +31,7 @@ jobs:
             echo 'Error: Prettier diff detected! Please run `npm run prettier` and commit the changes.'
             exit 1
           fi
+
+      - name: Run unused style searcher
+        shell: bash
+        run: ./.github/scripts/findUnusedKeys.sh

From d47feeee66e09807971ccd055333bb97e0de19ea Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Mon, 11 Sep 2023 16:39:04 +0200
Subject: [PATCH 027/123] fixed some lint issues

---
 .github/scripts/findUnusedKeys.sh | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index 1ab00662dfe7..0dbd5c033d5f 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -104,7 +104,7 @@ lookfor_unused_keywords() {
           fi        
         fi
     done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
-  done < <(find $SRC_DIR -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${SRC_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
 
@@ -160,7 +160,7 @@ find_utility_styles_store_prefix() {
           
         echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
     done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
-  done < <(find $STYLES_DIR -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 
   # Sort and remove duplicates from the temporary file
   sort -u -o "${UTILITY_STYLES_KEYS_FILE}" "${UTILITY_STYLES_KEYS_FILE}"
@@ -180,7 +180,7 @@ find_utility_usage_as_styles() {
     fi
 
     find_styles_and_store_keys "${file}" "${root_key}"
-  done < <(find $UTILITIES_STYLES_FILE -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
 lookfor_unused_utilities() {
@@ -199,7 +199,7 @@ lookfor_unused_utilities() {
         remove_keyword "${variable}"
         remove_keyword "${match}"
       done < <(grep -E -o "$original_keyword\.[a-zA-Z0-9_-]+" "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
-    done < <(find $STYLES_DIR -type f \( "${FILE_EXTENSIONS[@]}" \))
+    done < <(find "${STYLES_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
   done < "$UTILITY_STYLES_KEYS_FILE"
 }
 

From 3af3896cf768f7919a4bdf59bca46875a9396d53 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Mon, 11 Sep 2023 11:25:17 -0700
Subject: [PATCH 028/123] update type definitions

---
 src/types/onyx/Policy.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
index 87382090f294..4df45e9d1146 100644
--- a/src/types/onyx/Policy.ts
+++ b/src/types/onyx/Policy.ts
@@ -4,22 +4,22 @@ import * as OnyxCommon from './OnyxCommon';
 
 type Policy = {
     /** The ID of the policy */
-    id?: string;
+    id: string;
 
     /** The name of the policy */
-    name?: string;
+    name: string;
 
     /** The current user's role in the policy */
-    role?: ValueOf<typeof CONST.POLICY.ROLE>;
+    role: ValueOf<typeof CONST.POLICY.ROLE>;
 
     /** The policy type */
-    type?: ValueOf<typeof CONST.POLICY.TYPE>;
+    type: ValueOf<typeof CONST.POLICY.TYPE>;
 
     /** The email of the policy owner */
-    owner?: string;
+    owner: string;
 
     /** The output currency for the policy */
-    outputCurrency?: string;
+    outputCurrency: string;
 
     /** The URL for the policy avatar */
     avatar?: string;
@@ -33,9 +33,9 @@ type Policy = {
     lastModified?: string;
     customUnits?: Record<string, unknown>;
 
-    areChatRoomsEnabled?: boolean;
+    areChatRoomsEnabled: boolean;
 
-    isPolicyExpenseChatEnabled?: boolean;
+    isPolicyExpenseChatEnabled: boolean;
 };
 
 export default Policy;

From 4ab225844f4807cd41e819974057ac874d396a73 Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Mon, 11 Sep 2023 11:26:48 -0700
Subject: [PATCH 029/123] update comment

---
 src/libs/PolicyUtils.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/PolicyUtils.js b/src/libs/PolicyUtils.js
index 743dfba34382..5847452537ef 100644
--- a/src/libs/PolicyUtils.js
+++ b/src/libs/PolicyUtils.js
@@ -6,6 +6,7 @@ import ONYXKEYS from '../ONYXKEYS';
 
 /**
  * Filter out the active policies, which will exclude policies with pending deletion
+ * These are policies that we can use to create reports with in NewDot.
  * @param {Object} policies
  * @returns {Array}
  */

From 9f3e7997b97b47a60b767d369c90ebe8342df63c Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Tue, 12 Sep 2023 18:42:43 +0200
Subject: [PATCH 030/123] Init device capabilities migration

---
 .../{index.native.js => index.native.ts}               |  0
 .../canUseTouchScreen/{index.js => index.ts}           | 10 +++++-----
 src/libs/DeviceCapabilities/canUseTouchScreen/types.ts |  3 +++
 .../{index.native.js => index.native.ts}               |  0
 .../hasHoverSupport/{index.js => index.ts}             |  0
 src/libs/DeviceCapabilities/hasHoverSupport/types.ts   |  0
 src/libs/DeviceCapabilities/{index.js => index.ts}     |  0
 7 files changed, 8 insertions(+), 5 deletions(-)
 rename src/libs/DeviceCapabilities/canUseTouchScreen/{index.native.js => index.native.ts} (100%)
 rename src/libs/DeviceCapabilities/canUseTouchScreen/{index.js => index.ts} (85%)
 create mode 100644 src/libs/DeviceCapabilities/canUseTouchScreen/types.ts
 rename src/libs/DeviceCapabilities/hasHoverSupport/{index.native.js => index.native.ts} (100%)
 rename src/libs/DeviceCapabilities/hasHoverSupport/{index.js => index.ts} (100%)
 create mode 100644 src/libs/DeviceCapabilities/hasHoverSupport/types.ts
 rename src/libs/DeviceCapabilities/{index.js => index.ts} (100%)

diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.js b/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts
similarity index 100%
rename from src/libs/DeviceCapabilities/canUseTouchScreen/index.native.js
rename to src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts
diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.js b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
similarity index 85%
rename from src/libs/DeviceCapabilities/canUseTouchScreen/index.js
rename to src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
index 17dcc9dffd73..e35dadf312be 100644
--- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.js
+++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
@@ -1,16 +1,16 @@
+import CanUseTouchScreen from './types';
+
 /**
  * Allows us to identify whether the platform has a touchscreen.
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
- *
- * @returns {Boolean}
  */
-function canUseTouchScreen() {
+const canUseTouchScreen: CanUseTouchScreen = () => {
     let hasTouchScreen = false;
     if ('maxTouchPoints' in navigator) {
         hasTouchScreen = navigator.maxTouchPoints > 0;
     } else if ('msMaxTouchPoints' in navigator) {
-        hasTouchScreen = navigator.msMaxTouchPoints > 0;
+        hasTouchScreen = (navigator as Navigator)?.msMaxTouchPoints > 0;
     } else {
         const mQ = window.matchMedia && matchMedia('(pointer:coarse)');
         if (mQ && mQ.media === '(pointer:coarse)') {
@@ -24,6 +24,6 @@ function canUseTouchScreen() {
         }
     }
     return hasTouchScreen;
-}
+};
 
 export default canUseTouchScreen;
diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/types.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/types.ts
new file mode 100644
index 000000000000..6b71ecffeb05
--- /dev/null
+++ b/src/libs/DeviceCapabilities/canUseTouchScreen/types.ts
@@ -0,0 +1,3 @@
+type CanUseTouchScreen = () => boolean;
+
+export default CanUseTouchScreen;
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.native.js b/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts
similarity index 100%
rename from src/libs/DeviceCapabilities/hasHoverSupport/index.native.js
rename to src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.js b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
similarity index 100%
rename from src/libs/DeviceCapabilities/hasHoverSupport/index.js
rename to src/libs/DeviceCapabilities/hasHoverSupport/index.ts
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/types.ts b/src/libs/DeviceCapabilities/hasHoverSupport/types.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/libs/DeviceCapabilities/index.js b/src/libs/DeviceCapabilities/index.ts
similarity index 100%
rename from src/libs/DeviceCapabilities/index.js
rename to src/libs/DeviceCapabilities/index.ts

From d0a1cba2c8fa06893896d018f5b48c692482c42b Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 12 Sep 2023 11:01:43 -0700
Subject: [PATCH 031/123] add comments

---
 src/types/onyx/Policy.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
index 4df45e9d1146..35855402807c 100644
--- a/src/types/onyx/Policy.ts
+++ b/src/types/onyx/Policy.ts
@@ -27,14 +27,25 @@ type Policy = {
     /** Error objects keyed by field name containing errors keyed by microtime */
     errorFields?: OnyxCommon.ErrorFields;
 
+    /** Indicates the type of change made to the policy that hasn't been synced with the server yet  */
     pendingAction?: OnyxCommon.PendingAction;
+
+    /** A list of errors keyed by microtime */
     errors: OnyxCommon.Errors;
+
+    /** Whether this policy was loaded from a policy summary, or loaded completely with all of its values */
     isFromFullPolicy?: boolean;
+
+    /** When this policy was last modified */
     lastModified?: string;
+
+    /** The custom units data for this policy */
     customUnits?: Record<string, unknown>;
 
+    /** Whether chat rooms can be created and used on this policy. Enabled manually by CQ/JS snippet. */
     areChatRoomsEnabled: boolean;
 
+    /** Whether policy expense chats can be created and used on this policy. Enabled manually by CQ/JS snippet. */
     isPolicyExpenseChatEnabled: boolean;
 };
 

From b64ece2f38679e7841b7b2ae7e6f90d7b8ebb18e Mon Sep 17 00:00:00 2001
From: Jasper Huang <jasper@expensify.com>
Date: Tue, 12 Sep 2023 11:02:39 -0700
Subject: [PATCH 032/123] update comments

---
 src/types/onyx/Policy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts
index 35855402807c..df4a1364a894 100644
--- a/src/types/onyx/Policy.ts
+++ b/src/types/onyx/Policy.ts
@@ -42,10 +42,10 @@ type Policy = {
     /** The custom units data for this policy */
     customUnits?: Record<string, unknown>;
 
-    /** Whether chat rooms can be created and used on this policy. Enabled manually by CQ/JS snippet. */
+    /** Whether chat rooms can be created and used on this policy. Enabled manually by CQ/JS snippet. Always true for free policies. */
     areChatRoomsEnabled: boolean;
 
-    /** Whether policy expense chats can be created and used on this policy. Enabled manually by CQ/JS snippet. */
+    /** Whether policy expense chats can be created and used on this policy. Enabled manually by CQ/JS snippet. Always true for free policies. */
     isPolicyExpenseChatEnabled: boolean;
 };
 

From ebf2e6683d3f019a8549984c72befd534c553401 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Tue, 12 Sep 2023 20:24:16 +0200
Subject: [PATCH 033/123] Improved script find objects and fields with arrow
 function on different moments, removed unused styles

---
 .github/scripts/findUnusedKeys.sh |  83 ++++++--
 src/styles/styles.js              | 336 +-----------------------------
 2 files changed, 67 insertions(+), 352 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index 0dbd5c033d5f..85d8112e8f13 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -15,12 +15,6 @@ readonly AMOUNT_LINES_TO_SHOW=3
 
 readonly FILE_EXTENSIONS=('-name' '*.js' '-o' '-name' '*.jsx' '-o' '-name' '*.ts' '-o' '-name' '*.tsx')
 
-# Regex
-readonly OBJ_PROP_DECLARATION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\}"
-readonly OBJ_DEFINITION_REGEX="^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{"
-readonly CAPTURE_ARROW_FUNC_REGEX="^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
-readonly CAPTURE_OBJ_ARROW_FUNC_REGEX="^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{"
-
 source scripts/shellUtils.sh
 
 # trap ctrl-c and call ctrl_c()
@@ -38,7 +32,11 @@ ctrl_c() {
   
 count_lines() {
   local file=$1
-  wc -l < "$file"
+  if [[ -e "$file" ]]; then
+    wc -l < "$file"
+  else
+    echo "File not found: $file"
+  fi
 }
 
 # Read the style file with unused keys
@@ -109,24 +107,39 @@ lookfor_unused_keywords() {
 
 
 # Function to find and store keys from a file
-find_styles_and_store_keys() {
+find_styles_object_and_store_keys() {
   local file="$1"
   local base_name="${2:-styles}" # Set styles as default
   local parent_keys=()
   local root_key=""
   local line_number=0
+  local inside_arrow_function=false
 
   while IFS= read -r line; do
     ((line_number++))
 
+    # Check if we are inside an arrow function and we find a closing curly brace
+    if [[ "$inside_arrow_function" == true ]]; then
+      if [[ "$line" =~ ^[[:space:]]*\}\) ]]; then
+        inside_arrow_function=false
+      fi
+      continue
+    fi
+
+    # Check if we are inside an arrow function
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
+      inside_arrow_function=true
+      continue
+    fi
+
     # Skip lines that are not key-related
-    if [[ ! "$line" =~ $OBJ_PROP_DECLARATION_REGEX && ! "$line" =~ $CAPTURE_ARROW_FUNC_REGEX ]]; then
+    if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then
       continue
     fi
     
-    if [[ "$line" =~ $OBJ_DEFINITION_REGEX ]]; then
+    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
       root_key="${BASH_REMATCH[2]%%:*{*)}"
-    elif [[ "$line" =~ $CAPTURE_OBJ_ARROW_FUNC_REGEX ]]; then
+    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
       # Removing all the extra lines after the ":"
       local key="${line%%:*}"
       key="${key// /}"  # Trim spaces
@@ -150,6 +163,42 @@ find_styles_and_store_keys() {
   done < "$file"
 }
 
+find_styles_functions_and_store_keys() {
+  local file="$1"
+  local line_number=0
+  local inside_object=false
+  local inside_arrow_function=false
+  local key=""
+
+  while IFS= read -r line; do
+    ((line_number++))
+
+    # Check if we are inside an arrow function
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
+      inside_arrow_function=true
+      key="${line%%:*}"
+      key="${key// /}"  # Trim spaces
+      echo "styles.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
+    fi
+
+    # If we are inside an arrow function and we find an opening curly brace,
+    # then set inside_object to true, indicating we are inside an object.
+    if [[ "$inside_arrow_function" == true && "$line" =~ ^[[:space:]]*\{ ]]; then
+      inside_object=true
+    fi
+
+    # If we are inside an object, continue to the next line.
+    if [[ "$inside_object" == true ]]; then
+      continue
+    fi
+
+    # If we find a closing curly brace, reset the inside_object flag.
+    if [[ "$line" =~ ^[[:space:]]*\},?$ ]]; then
+      inside_object=false
+    fi
+  done < "$file"
+}
+
 find_utility_styles_store_prefix() {
   # Loop through all files in the src folder
   while read -r file; do
@@ -179,7 +228,7 @@ find_utility_usage_as_styles() {
       continue
     fi
 
-    find_styles_and_store_keys "${file}" "${root_key}"
+    find_styles_object_and_store_keys "${file}" "${root_key}"
   done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
@@ -203,19 +252,19 @@ lookfor_unused_utilities() {
   done < "$UTILITY_STYLES_KEYS_FILE"
 }
 
+echo "🔍 Looking for styles."
 # Find and store the name of the utility files as keys
 find_utility_styles_store_prefix
+find_utility_usage_as_styles
 
 # Find and store keys from styles.js
-find_styles_and_store_keys "$STYLES_FILE"
+find_styles_object_and_store_keys "$STYLES_FILE"
+find_styles_functions_and_store_keys "$STYLES_FILE"
 
-find_utility_usage_as_styles
+echo "🗄️ Now going through the codebase and looking for unused keys."
 
 # Look for usages of utilities into src/styles
 lookfor_unused_utilities
-
-echo "⏱️ Now going through the list and looking for unused keys."
-
 lookfor_unused_keywords
 
 final_styles_line_count=$(count_lines "$STYLES_KEYS_FILE")
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 1c1340600a51..2fd346bed64c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -174,12 +174,6 @@ const styles = {
     ...themeColors,
     ...textUnderline,
 
-    rateCol: {
-        margin: 0,
-        padding: 0,
-        flexBasis: '48%',
-    },
-
     autoCompleteSuggestionsContainer: {
         backgroundColor: themeColors.appBG,
         borderRadius: 8,
@@ -236,13 +230,6 @@ const styles = {
         borderRadius: 12,
     },
 
-    unitCol: {
-        margin: 0,
-        padding: 0,
-        marginLeft: '4%',
-        flexBasis: '48%',
-    },
-
     webViewStyles,
 
     link,
@@ -265,19 +252,6 @@ const styles = {
         backgroundColor: themeColors.appBG,
     },
 
-    h1: {
-        color: themeColors.heading,
-        fontFamily: fontFamily.EXP_NEUE_BOLD,
-        fontSize: variables.fontSizeh1,
-        fontWeight: fontWeightBold,
-    },
-
-    h3: {
-        fontFamily: fontFamily.EXP_NEUE_BOLD,
-        fontSize: variables.fontSizeNormal,
-        fontWeight: fontWeightBold,
-    },
-
     h4: {
         fontFamily: fontFamily.EXP_NEUE_BOLD,
         fontSize: variables.fontSizeLabel,
@@ -428,10 +402,6 @@ const styles = {
         color: themeColors.textSupporting,
     },
 
-    colorHeading: {
-        color: themeColors.heading,
-    },
-
     bgTransparent: {
         backgroundColor: 'transparent',
     },
@@ -632,10 +602,6 @@ const styles = {
         backgroundColor: themeColors.activeComponentBG,
     },
 
-    fontWeightBold: {
-        fontWeight: fontWeightBold,
-    },
-
     touchableButtonImage: {
         alignItems: 'center',
         height: variables.componentSizeNormal,
@@ -829,10 +795,6 @@ const styles = {
         height: CONST.DESKTOP_HEADER_PADDING,
     },
 
-    pushTextRight: {
-        left: 100000,
-    },
-
     reportOptions: {
         marginLeft: 8,
     },
@@ -1104,10 +1066,6 @@ const styles = {
 
     noOutline: addOutlineWidth({}, 0),
 
-    errorOutline: {
-        borderColor: themeColors.danger,
-    },
-
     textLabelSupporting: {
         fontFamily: fontFamily.EXP_NEUE,
         fontSize: variables.fontSizeLabel,
@@ -1173,13 +1131,6 @@ const styles = {
         marginBottom: 4,
     },
 
-    desktopRedirectPage: {
-        backgroundColor: themeColors.appBG,
-        minHeight: '100%',
-        flex: 1,
-        alignItems: 'center',
-    },
-
     signInPage: {
         backgroundColor: themeColors.highlightBG,
         minHeight: '100%',
@@ -1559,11 +1510,6 @@ const styles = {
         width: 18,
     },
 
-    chatContent: {
-        flex: 4,
-        justifyContent: 'flex-end',
-    },
-
     chatContentScrollView: {
         flexGrow: 1,
         justifyContent: 'flex-start',
@@ -1718,11 +1664,6 @@ const styles = {
         textAlignVertical: 'top',
     },
 
-    editInputComposeSpacing: {
-        backgroundColor: themeColors.transparent,
-        marginVertical: 8,
-    },
-
     // composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669
     textInputComposeSpacing: {
         paddingVertical: 5,
@@ -1844,23 +1785,6 @@ const styles = {
         width: 200,
     },
 
-    chatSwticherPillWrapper: {
-        marginTop: 5,
-        marginRight: 4,
-    },
-
-    navigationModalOverlay: {
-        ...userSelect.userSelectNone,
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        transform: [
-            {
-                translateX: -variables.sideBarWidth,
-            },
-        ],
-    },
-
     sidebarVisible: {
         borderRightWidth: 1,
     },
@@ -1885,14 +1809,6 @@ const styles = {
         borderRadius: 24,
     },
 
-    singleSubscript: {
-        height: variables.iconSizeNormal,
-        width: variables.iconSizeNormal,
-        backgroundColor: themeColors.icon,
-        borderRadius: 20,
-        zIndex: 1,
-    },
-
     singleAvatarSmall: {
         height: 18,
         width: 18,
@@ -1936,17 +1852,6 @@ const styles = {
         right: 0,
     },
 
-    leftSideLargeAvatar: {
-        left: 15,
-    },
-
-    rightSideLargeAvatar: {
-        right: 15,
-        zIndex: 2,
-        borderWidth: 4,
-        borderRadius: 100,
-    },
-
     secondAvatarInline: {
         bottom: -3,
         right: -25,
@@ -1961,18 +1866,6 @@ const styles = {
         height: variables.avatarSizeLarge,
     },
 
-    avatarNormal: {
-        height: variables.componentSizeNormal,
-        width: variables.componentSizeNormal,
-        borderRadius: variables.componentSizeNormal,
-    },
-
-    avatarSmall: {
-        height: variables.avatarSizeSmall,
-        width: variables.avatarSizeSmall,
-        borderRadius: variables.avatarSizeSmall,
-    },
-
     avatarInnerText: {
         color: themeColors.textLight,
         fontSize: variables.fontSizeSmall,
@@ -1989,21 +1882,6 @@ const styles = {
         textAlign: 'center',
     },
 
-    avatarSpace: {
-        top: 3,
-        left: 3,
-    },
-
-    avatar: {
-        backgroundColor: themeColors.sidebar,
-        borderColor: themeColors.sidebar,
-    },
-
-    focusedAvatar: {
-        backgroundColor: themeColors.border,
-        borderColor: themeColors.border,
-    },
-
     emptyAvatar: {
         height: variables.avatarSizeNormal,
         width: variables.avatarSizeNormal,
@@ -2050,11 +1928,6 @@ const styles = {
         marginRight: variables.avatarChatSpacing - 4,
     },
 
-    modalViewContainer: {
-        alignItems: 'center',
-        flex: 1,
-    },
-
     borderTop: {
         borderTopWidth: variables.borderTopWidth,
         borderColor: themeColors.border,
@@ -2144,14 +2017,6 @@ const styles = {
         ...(isSmallScreenWidth && flex.flex1),
     }),
 
-    modalCenterContentContainer: {
-        flex: 1,
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: themeColors.modalBackdrop,
-    },
-
     centeredModalStyles: (isSmallScreenWidth, isFullScreenWhenSmall) => ({
         borderWidth: isSmallScreenWidth && !isFullScreenWhenSmall ? 1 : 0,
         marginHorizontal: isSmallScreenWidth ? 0 : 20,
@@ -2174,28 +2039,6 @@ const styles = {
         alignItems: 'center',
     },
 
-    notFoundSafeArea: {
-        flex: 1,
-        backgroundColor: themeColors.heading,
-    },
-
-    notFoundView: {
-        flex: 1,
-        alignItems: 'center',
-        paddingTop: 40,
-        paddingBottom: 40,
-        justifyContent: 'space-between',
-    },
-
-    notFoundLogo: {
-        width: 202,
-        height: 63,
-    },
-
-    notFoundContent: {
-        alignItems: 'center',
-    },
-
     notFoundTextHeader: {
         ...headlineFont,
         color: themeColors.heading,
@@ -2206,20 +2049,6 @@ const styles = {
         textAlign: 'center',
     },
 
-    notFoundTextBody: {
-        color: themeColors.componentBG,
-        fontFamily: fontFamily.EXP_NEUE_BOLD,
-        fontWeight: fontWeightBold,
-        fontSize: 15,
-    },
-
-    notFoundButtonText: {
-        color: themeColors.link,
-        fontFamily: fontFamily.EXP_NEUE_BOLD,
-        fontWeight: fontWeightBold,
-        fontSize: 15,
-    },
-
     blockingViewContainer: {
         paddingBottom: variables.contentHeaderHeight,
     },
@@ -2270,18 +2099,6 @@ const styles = {
         justifyContent: 'space-around',
     },
 
-    settingsPageColumn: {
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'space-around',
-    },
-
-    settingsPageContainer: {
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        width: '100%',
-    },
-
     twoFactorAuthSection: {
         backgroundColor: themeColors.appBG,
         padding: 0,
@@ -2419,18 +2236,6 @@ const styles = {
         left: -16,
     },
 
-    svgAvatarBorder: {
-        borderRadius: 100,
-        overflow: 'hidden',
-    },
-
-    displayName: {
-        fontSize: variables.fontSizeLarge,
-        fontFamily: fontFamily.EXP_NEUE_BOLD,
-        fontWeight: fontWeightBold,
-        color: themeColors.heading,
-    },
-
     pageWrapper: {
         width: '100%',
         alignItems: 'center',
@@ -2502,21 +2307,11 @@ const styles = {
         transform: [{rotate: '180deg'}],
     },
 
-    navigationSceneContainer: {
-        backgroundColor: themeColors.appBG,
-    },
-
     navigationScreenCardStyle: {
         backgroundColor: themeColors.appBG,
         height: '100%',
     },
 
-    navigationSceneFullScreenWrapper: {
-        borderRadius: variables.componentBorderRadiusCard,
-        overflow: 'hidden',
-        height: '100%',
-    },
-
     invisible: {
         position: 'absolute',
         opacity: 0,
@@ -2554,14 +2349,6 @@ const styles = {
         paddingBottom: 0,
     },
 
-    detailsPageSectionVersion: {
-        alignSelf: 'center',
-        color: themeColors.textSupporting,
-        fontSize: variables.fontSizeSmall,
-        height: 24,
-        lineHeight: 20,
-    },
-
     switchTrack: {
         width: 50,
         height: 28,
@@ -2711,12 +2498,6 @@ const styles = {
         alignSelf: 'center',
     },
 
-    iouDetailsContainer: {
-        flexGrow: 1,
-        paddingStart: 20,
-        paddingEnd: 20,
-    },
-
     codeWordWrapper: {
         ...codeStyles.codeWordWrapper,
     },
@@ -2756,11 +2537,6 @@ const styles = {
         zIndex: 10,
     },
 
-    navigatorFullScreenLoading: {
-        backgroundColor: themeColors.highlightBG,
-        opacity: 1,
-    },
-
     reimbursementAccountFullScreenLoading: {
         backgroundColor: themeColors.componentBG,
         opacity: 0.8,
@@ -2845,40 +2621,6 @@ const styles = {
         height: '100%',
     },
 
-    fullscreenCard: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '100%',
-    },
-
-    fullscreenCardWeb: {
-        left: 'auto',
-        right: '-24%',
-        top: '-18%',
-        height: '120%',
-    },
-
-    fullscreenCardWebCentered: {
-        left: '0',
-        right: '0',
-        top: '0',
-        height: '60%',
-    },
-
-    fullscreenCardMobile: {
-        left: '-20%',
-        top: '-30%',
-        width: '150%',
-    },
-
-    fullscreenCardMediumScreen: {
-        left: '-15%',
-        top: '-30%',
-        width: '145%',
-    },
-
     smallEditIcon: {
         alignItems: 'center',
         backgroundColor: themeColors.buttonHoveredBG,
@@ -2897,41 +2639,6 @@ const styles = {
         bottom: -4,
     },
 
-    workspaceCard: {
-        width: '100%',
-        height: 400,
-        borderRadius: variables.componentBorderRadiusCard,
-        overflow: 'hidden',
-        backgroundColor: themeColors.heroCard,
-    },
-
-    workspaceCardMobile: {
-        height: 475,
-    },
-
-    workspaceCardMediumScreen: {
-        height: 540,
-    },
-
-    workspaceCardMainText: {
-        fontSize: variables.fontSizeXXXLarge,
-        fontWeight: 'bold',
-        lineHeight: variables.fontSizeXXXLarge,
-    },
-
-    workspaceCardContent: {
-        zIndex: 1,
-        padding: 50,
-    },
-
-    workspaceCardContentMediumScreen: {
-        padding: 25,
-    },
-
-    workspaceCardCTA: {
-        width: 250,
-    },
-
     autoGrowHeightMultilineInput: {
         maxHeight: 115,
     },
@@ -3011,12 +2718,6 @@ const styles = {
         opacity: variables.overlayOpacity,
     },
 
-    communicationsLinkIcon: {
-        right: -36,
-        top: 0,
-        bottom: 0,
-    },
-
     shortTermsBorder: {
         borderWidth: 1,
         borderColor: themeColors.border,
@@ -3202,10 +2903,6 @@ const styles = {
         fontSize: 48,
     },
 
-    closeAccountMessageInput: {
-        height: 153,
-    },
-
     imageCropContainer: {
         overflow: 'hidden',
         alignItems: 'center',
@@ -3302,24 +2999,11 @@ const styles = {
         alignItems: 'center',
     },
 
-    callRequestSection: {
-        backgroundColor: themeColors.appBG,
-        paddingHorizontal: 0,
-        paddingBottom: 0,
-        marginHorizontal: 0,
-        marginBottom: 0,
-    },
-
     archivedReportFooter: {
         borderRadius: variables.componentBorderRadius,
         ...wordBreak.breakWord,
     },
 
-    saveButtonPadding: {
-        paddingLeft: 18,
-        paddingRight: 18,
-    },
-
     deeplinkWrapperContainer: {
         padding: 20,
         flex: 1,
@@ -3365,11 +3049,7 @@ const styles = {
         alignSelf: 'flex-start',
         marginRight: 4,
     },
-    reactionListItem: {
-        flexDirection: 'row',
-        paddingVertical: 12,
-        paddingHorizontal: 20,
-    },
+
     reactionListHeaderText: {
         color: themeColors.textSupporting,
         marginLeft: 8,
@@ -3461,11 +3141,6 @@ const styles = {
         width: '100%',
     },
 
-    listPickerSeparator: {
-        height: 1,
-        backgroundColor: themeColors.buttonDefaultBG,
-    },
-
     datePickerRoot: {
         position: 'relative',
         zIndex: 99,
@@ -3518,15 +3193,6 @@ const styles = {
         width: 16,
     },
 
-    validateCodeMessage: {
-        width: variables.modalContentMaxWidth,
-        textAlign: 'center',
-    },
-
-    whisper: {
-        backgroundColor: themeColors.cardBG,
-    },
-
     contextMenuItemPopoverMaxWidth: {
         maxWidth: 375,
     },

From 9f47e6a2fcf95df8a4cb0fef16819483090f3f02 Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Wed, 13 Sep 2023 11:14:39 +0700
Subject: [PATCH 034/123] Update src/libs/actions/Report.js

Co-authored-by: Carlos Martins <luacmartins@gmail.com>
---
 src/libs/actions/Report.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 2de649163079..cd3ca192d9a4 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -192,7 +192,7 @@ function subscribeToReportTypingEvents(reportID) {
 }
 
 /**
- * Initialize our pusher subscriptions to listen for someone typing in a report.
+ * Initialize our pusher subscriptions to listen for someone leaving a room.
  *
  * @param {String} reportID
  */

From 6a1f0806474e48c60c4e05edc85ab3f8ef8a4823 Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Wed, 13 Sep 2023 11:21:02 +0700
Subject: [PATCH 035/123] Update src/libs/actions/Report.js

Co-authored-by: Carlos Martins <luacmartins@gmail.com>
---
 src/libs/actions/Report.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index cd3ca192d9a4..65ec101aeb6d 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -937,7 +937,7 @@ function broadcastUserIsTyping(reportID) {
     Pusher.sendEvent(privateReportChannelName, Pusher.TYPE.USER_IS_TYPING, typingStatus);
 }
 /**
- * Broadcasts whether or not a user is leaving on a report over the report's private pusher channel.
+ * Broadcasts to the report's private pusher channel whether a user is leaving a report
  *
  * @param {String} reportID
  */

From 39c079b8d43ab38e0b3ae829f127957d15ebf7b0 Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Wed, 13 Sep 2023 11:23:20 +0700
Subject: [PATCH 036/123] Update src/pages/home/ReportScreen.js

Co-authored-by: Carlos Martins <luacmartins@gmail.com>
---
 src/pages/home/ReportScreen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 74182d8db49a..0f824db5860c 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -88,7 +88,7 @@ const propTypes = {
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
-    /** Whether user leaving current report that listen to another device leaveRoom trigger */
+    /** Whether user is leaving the current report */
     userLeavingStatus: PropTypes.bool,
 
     ...windowDimensionsPropTypes,

From 70c6b304f3dd0edef9c9f606b876467a962298f2 Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Wed, 13 Sep 2023 11:24:09 +0700
Subject: [PATCH 037/123] Update src/pages/home/ReportScreen.js

Co-authored-by: Carlos Martins <luacmartins@gmail.com>
---
 src/pages/home/ReportScreen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 0f824db5860c..ba4322d08393 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -290,7 +290,7 @@ function ReportScreen({
         const prevOnyxReportID = prevReport.reportID;
         const routeReportID = getReportID(route);
 
-        // navigate to concierge when the room removed from another device (e.g. user leaving a room)
+        // Navigate to the Concierge chat if the room was removed from another device (e.g. user leaving a room)
         if (
             // non-optimistic case
             userLeavingStatus ||

From f91b792e26b924ea6f37ab2e39d2131d2743ed7a Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 13 Sep 2023 11:28:49 +0700
Subject: [PATCH 038/123] make getNormalizedTypingStatus become generic
 getNormalizedStatus

---
 src/libs/actions/Report.js | 35 +++++++----------------------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index cd3ca192d9a4..d61670aacc13 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -113,35 +113,14 @@ function getReportChannelName(reportID) {
  * @param {Object} typingStatus
  * @returns {Object}
  */
-function getNormalizedTypingStatus(typingStatus) {
-    let normalizedTypingStatus = typingStatus;
+function getNormalizedStatus(status) {
+    let normalizedStatus = status;
 
-    if (_.first(_.keys(typingStatus)) === 'userLogin') {
-        normalizedTypingStatus = {[typingStatus.userLogin]: true};
+    if (_.first(_.keys(status)) === 'userLogin') {
+        normalizedStatus = {[status.userLogin]: true};
     }
 
-    return normalizedTypingStatus;
-}
-
-/**
- * There are 2 possibilities that we can receive via pusher for a user's leaving status:
- * 1. The "new" way from New Expensify is passed as {[login]: Boolean} (e.g. {yuwen@expensify.com: true}), where the value
- * is whether the user with that login is leaving on the report or not.
- * 2. The "old" way from e.com which is passed as {userLogin: login} (e.g. {userLogin: bstites@expensify.com})
- *
- * This method makes sure that no matter which we get, we return the "new" format
- *
- * @param {Object} leavingStatus
- * @returns {Object}
- */
-function getNormalizedLeavingStatus(leavingStatus) {
-    let normalizedLeavingStatus = leavingStatus;
-
-    if (_.first(_.keys(leavingStatus)) === 'userLogin') {
-        normalizedLeavingStatus = {[leavingStatus.userLogin]: true};
-    }
-
-    return normalizedLeavingStatus;
+    return normalizedStatus;
 }
 
 /**
@@ -162,7 +141,7 @@ function subscribeToReportTypingEvents(reportID) {
         // If the pusher message comes from OldDot, we expect the typing status to be keyed by user
         // login OR by 'Concierge'. If the pusher message comes from NewDot, it is keyed by accountID
         // since personal details are keyed by accountID.
-        const normalizedTypingStatus = getNormalizedTypingStatus(typingStatus);
+        const normalizedTypingStatus = getNormalizedStatus(typingStatus);
         const accountIDOrLogin = _.first(_.keys(normalizedTypingStatus));
 
         if (!accountIDOrLogin) {
@@ -209,7 +188,7 @@ function subscribeToReportLeavingEvents(reportID) {
         // If the pusher message comes from OldDot, we expect the leaving status to be keyed by user
         // login OR by 'Concierge'. If the pusher message comes from NewDot, it is keyed by accountID
         // since personal details are keyed by accountID.
-        const normalizedLeavingStatus = getNormalizedLeavingStatus(leavingStatus);
+        const normalizedLeavingStatus = getNormalizedStatus(leavingStatus);
         const accountIDOrLogin = _.first(_.keys(normalizedLeavingStatus));
 
         if (!accountIDOrLogin) {

From a658b186749b240e04a340fb59949e5cabdcfaaa Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 13 Sep 2023 11:39:12 +0700
Subject: [PATCH 039/123] fix lint

---
 src/libs/actions/Report.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index b74e532b1c39..f0ac66923002 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -103,14 +103,14 @@ function getReportChannelName(reportID) {
 }
 
 /**
- * There are 2 possibilities that we can receive via pusher for a user's typing status:
+ * There are 2 possibilities that we can receive via pusher for a user's typing/leaving status:
  * 1. The "new" way from New Expensify is passed as {[login]: Boolean} (e.g. {yuwen@expensify.com: true}), where the value
- * is whether the user with that login is typing on the report or not.
+ * is whether the user with that login is typing/leaving on the report or not.
  * 2. The "old" way from e.com which is passed as {userLogin: login} (e.g. {userLogin: bstites@expensify.com})
  *
  * This method makes sure that no matter which we get, we return the "new" format
  *
- * @param {Object} typingStatus
+ * @param {Object} status
  * @returns {Object}
  */
 function getNormalizedStatus(status) {

From a842d93b5d3b1a00942146455202aa4e5662ecbc Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Wed, 13 Sep 2023 11:02:31 +0200
Subject: [PATCH 040/123] [TS migration] Migrate 'DeviceCapabilities' lib to
 TypeScript

---
 .../canUseTouchScreen/index.native.ts             |  6 +++---
 .../DeviceCapabilities/canUseTouchScreen/index.ts | 15 ++++++++++++---
 .../hasHoverSupport/index.native.ts               |  7 +++----
 .../DeviceCapabilities/hasHoverSupport/index.ts   |  8 +++-----
 .../DeviceCapabilities/hasHoverSupport/types.ts   |  3 +++
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts
index 4306b0cff3f6..60980801e73c 100644
--- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts
+++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts
@@ -1,5 +1,5 @@
-function canUseTouchScreen() {
-    return true;
-}
+import CanUseTouchScreen from './types';
+
+const canUseTouchScreen: CanUseTouchScreen = () => true;
 
 export default canUseTouchScreen;
diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
index e35dadf312be..72798159e36c 100644
--- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
+++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
@@ -1,5 +1,8 @@
+import {Merge} from 'type-fest';
 import CanUseTouchScreen from './types';
 
+type ExtendedNavigator = Merge<Navigator, {msMaxTouchPoints: number}>;
+
 /**
  * Allows us to identify whether the platform has a touchscreen.
  *
@@ -7,19 +10,25 @@ import CanUseTouchScreen from './types';
  */
 const canUseTouchScreen: CanUseTouchScreen = () => {
     let hasTouchScreen = false;
+
+    // TypeScript removed support for msMaxTouchPoints, this doesn't mean however that
+    // this property doesn't exist - hence the use of ExtendedNavigator to ensure
+    // that the functionality doesn't change
+    // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1029
     if ('maxTouchPoints' in navigator) {
         hasTouchScreen = navigator.maxTouchPoints > 0;
     } else if ('msMaxTouchPoints' in navigator) {
-        hasTouchScreen = (navigator as Navigator)?.msMaxTouchPoints > 0;
+        hasTouchScreen = (navigator as ExtendedNavigator).msMaxTouchPoints > 0;
     } else {
-        const mQ = window.matchMedia && matchMedia('(pointer:coarse)');
+        // Same case as for Navigator - TypeScript thinks that matchMedia is obligatory property of window although it may not be
+        const mQ = (window as Partial<Window & typeof globalThis>).matchMedia && matchMedia('(pointer:coarse)');
         if (mQ && mQ.media === '(pointer:coarse)') {
             hasTouchScreen = !!mQ.matches;
         } else if ('orientation' in window) {
             hasTouchScreen = true; // deprecated, but good fallback
         } else {
             // Only as a last resort, fall back to user agent sniffing
-            const UA = navigator.userAgent;
+            const UA = (navigator as ExtendedNavigator).userAgent;
             hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
         }
     }
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts b/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts
index d77fcc17448a..097b3b0cbba1 100644
--- a/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts
+++ b/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts
@@ -1,9 +1,8 @@
+import HasHoverSupport from './types';
+
 /**
  * Allows us to identify whether the platform is hoverable.
- *
- * @returns {Boolean}
  */
-
-const hasHoverSupport = () => false;
+const hasHoverSupport: HasHoverSupport = () => false;
 
 export default hasHoverSupport;
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
index 84a3fbbc5ed1..df62e6681548 100644
--- a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
+++ b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
@@ -1,10 +1,8 @@
+import HasHoverSupport from './types';
+
 /**
  * Allows us to identify whether the platform is hoverable.
- *
- * @returns {Boolean}
  */
-function hasHoverSupport() {
-    return window.matchMedia('(hover: hover) and (pointer: fine)').matches;
-}
+const hasHoverSupport: HasHoverSupport = () => window.matchMedia('(hover: hover) and (pointer: fine)').matches;
 
 export default hasHoverSupport;
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/types.ts b/src/libs/DeviceCapabilities/hasHoverSupport/types.ts
index e69de29bb2d1..b8fe944cf88e 100644
--- a/src/libs/DeviceCapabilities/hasHoverSupport/types.ts
+++ b/src/libs/DeviceCapabilities/hasHoverSupport/types.ts
@@ -0,0 +1,3 @@
+type HasHoverSupport = () => boolean;
+
+export default HasHoverSupport;

From 32d135582c6c20e3fa5ab5f0e88ff9a47c9c8532 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 14 Sep 2023 16:43:09 +0200
Subject: [PATCH 041/123] delegate category selection to parent

---
 .../CategoryPicker/categoryPickerPropTypes.js | 16 ++++------
 src/components/CategoryPicker/index.js        | 30 ++++---------------
 src/pages/iou/MoneyRequestCategoryPage.js     | 27 +++++++++++++++--
 3 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js
index b8e24c199a73..6f2800a5d98f 100644
--- a/src/components/CategoryPicker/categoryPickerPropTypes.js
+++ b/src/components/CategoryPicker/categoryPickerPropTypes.js
@@ -2,14 +2,11 @@ import PropTypes from 'prop-types';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
-    /** The report ID of the IOU */
-    reportID: PropTypes.string.isRequired,
-
     /** The policyID we are getting categories for */
     policyID: PropTypes.string,
 
-    /** The type of IOU report, i.e. bill, request, send */
-    iouType: PropTypes.string.isRequired,
+    /** The selected category of an expense */
+    selectedCategory: PropTypes.string,
 
     /* Onyx Props */
     /** Collection of categories attached to a policy */
@@ -19,18 +16,15 @@ const propTypes = {
     /** Collection of recently used categories attached to a policy */
     policyRecentlyUsedCategories: PropTypes.arrayOf(PropTypes.string),
 
-    /* Onyx Props */
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: PropTypes.shape({
-        category: PropTypes.string.isRequired,
-    }),
+    /** Callback to fire when a category is pressed */
+    onSubmit: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
     policyID: '',
+    selectedCategory: '',
     policyCategories: {},
     policyRecentlyUsedCategories: [],
-    iou: {},
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index 91c7e82e7887..66ac0bf14d4a 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -5,15 +5,12 @@ import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import {propTypes, defaultProps} from './categoryPickerPropTypes';
 import styles from '../../styles/styles';
-import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
-import * as IOU from '../../libs/actions/IOU';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import OptionsSelector from '../OptionsSelector';
 import useLocalize from '../../hooks/useLocalize';
 
-function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentlyUsedCategories}) {
+function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, onSubmit}) {
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
 
@@ -21,18 +18,18 @@ function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentl
     const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
 
     const selectedOptions = useMemo(() => {
-        if (!iou.category) {
+        if (!selectedCategory) {
             return [];
         }
 
         return [
             {
-                name: iou.category,
+                name: selectedCategory,
                 enabled: true,
                 accountID: null,
             },
         ];
-    }, [iou.category]);
+    }, [selectedCategory]);
 
     const initialFocusedIndex = useMemo(() => {
         if (isCategoriesCountBelowThreshold && selectedOptions.length > 0) {
@@ -53,20 +50,6 @@ function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentl
     const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, searchValue);
     const shouldShowTextInput = !isCategoriesCountBelowThreshold;
 
-    const navigateBack = () => {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
-    };
-
-    const updateCategory = (category) => {
-        if (category.searchText === iou.category) {
-            IOU.resetMoneyRequestCategory();
-        } else {
-            IOU.setMoneyRequestCategory(category.searchText);
-        }
-
-        navigateBack();
-    };
-
     return (
         <OptionsSelector
             optionHoveredStyle={styles.hoveredComponentBG}
@@ -81,7 +64,7 @@ function CategoryPicker({policyCategories, reportID, iouType, iou, policyRecentl
             highlightSelectedOptions
             isRowMultilineSupported
             onChangeText={setSearchValue}
-            onSelectRow={updateCategory}
+            onSelectRow={onSubmit}
         />
     );
 }
@@ -97,7 +80,4 @@ export default withOnyx({
     policyRecentlyUsedCategories: {
         key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`,
     },
-    iou: {
-        key: ONYXKEYS.IOU,
-    },
 })(CategoryPicker);
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 80b88a762609..adba5755496d 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -10,6 +10,7 @@ import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CategoryPicker from '../../components/CategoryPicker';
 import ONYXKEYS from '../../ONYXKEYS';
 import reportPropTypes from '../reportPropTypes';
+import * as IOU from '../../libs/actions/IOU';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -26,13 +27,20 @@ const propTypes = {
 
     /** The report currently being used */
     report: reportPropTypes,
+
+    /* Onyx Props */
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    iou: PropTypes.shape({
+        category: PropTypes.string.isRequired,
+    }),
 };
 
 const defaultProps = {
     report: {},
+    iou: {},
 };
 
-function MoneyRequestCategoryPage({route, report}) {
+function MoneyRequestCategoryPage({route, report, iou}) {
     const {translate} = useLocalize();
 
     const reportID = lodashGet(route, 'params.reportID', '');
@@ -42,6 +50,16 @@ function MoneyRequestCategoryPage({route, report}) {
         Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     };
 
+    const updateCategory = (category) => {
+        if (category.searchText === iou.category) {
+            IOU.resetMoneyRequestCategory();
+        } else {
+            IOU.setMoneyRequestCategory(category.searchText);
+        }
+
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -53,9 +71,9 @@ function MoneyRequestCategoryPage({route, report}) {
             />
 
             <CategoryPicker
+                selectedCategory={iou.category}
                 policyID={report.policyID}
-                reportID={reportID}
-                iouType={iouType}
+                onSubmit={updateCategory}
             />
         </ScreenWrapper>
     );
@@ -69,4 +87,7 @@ export default withOnyx({
     report: {
         key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
     },
+    iou: {
+        key: ONYXKEYS.IOU,
+    },
 })(MoneyRequestCategoryPage);

From d7996869bf22815900c87a80f9ac9e68a1f27626 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 14 Sep 2023 16:44:05 +0200
Subject: [PATCH 042/123] implement edit request category page

---
 src/CONST.ts                         |  1 +
 src/pages/EditRequestCategoryPage.js | 49 ++++++++++++++++++++++++++++
 src/pages/EditRequestPage.js         | 26 ++++++++++++++-
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/EditRequestCategoryPage.js

diff --git a/src/CONST.ts b/src/CONST.ts
index 1ef2f3e83246..7b6d1d1d36fb 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1349,6 +1349,7 @@ const CONST = {
         DATE: 'date',
         DESCRIPTION: 'description',
         MERCHANT: 'merchant',
+        CATEGORY: 'category',
     },
     FOOTER: {
         EXPENSE_MANAGEMENT_URL: `${USE_EXPENSIFY_URL}/expense-management`,
diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
new file mode 100644
index 000000000000..ba94c2b40800
--- /dev/null
+++ b/src/pages/EditRequestCategoryPage.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ScreenWrapper from '../components/ScreenWrapper';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
+import Navigation from '../libs/Navigation/Navigation';
+import useLocalize from '../hooks/useLocalize';
+import CategoryPicker from '../components/CategoryPicker';
+
+const propTypes = {
+    /** Transaction default category value */
+    defaultCategory: PropTypes.string.isRequired,
+
+    /** The policyID we are getting categories for */
+    policyID: PropTypes.string.isRequired,
+
+    /** Callback to fire when the Save button is pressed  */
+    onSubmit: PropTypes.func.isRequired,
+};
+
+function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
+    const {translate} = useLocalize();
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.category')}
+                onBackButtonPress={Navigation.goBack}
+            />
+
+            <CategoryPicker
+                selectedCategory={defaultCategory}
+                policyID={policyID}
+                onSubmit={(category) =>
+                    onSubmit({
+                        category: category.searchText,
+                    })
+                }
+            />
+        </ScreenWrapper>
+    );
+}
+
+EditRequestCategoryPage.propTypes = propTypes;
+EditRequestCategoryPage.displayName = 'EditRequestCategoryPage';
+
+export default EditRequestCategoryPage;
diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js
index 266515e29c2c..d4fc92c894d0 100644
--- a/src/pages/EditRequestPage.js
+++ b/src/pages/EditRequestPage.js
@@ -19,6 +19,7 @@ import reportPropTypes from './reportPropTypes';
 import * as IOU from '../libs/actions/IOU';
 import * as CurrencyUtils from '../libs/CurrencyUtils';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
+import EditRequestCategoryPage from './EditRequestCategoryPage';
 
 const propTypes = {
     /** Route from navigation */
@@ -69,7 +70,13 @@ const defaultProps = {
 function EditRequestPage({report, route, parentReport, policy, session}) {
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
     const transaction = TransactionUtils.getLinkedTransaction(parentReportAction);
-    const {amount: transactionAmount, currency: transactionCurrency, comment: transactionDescription, merchant: transactionMerchant} = ReportUtils.getTransactionDetails(transaction);
+    const {
+        amount: transactionAmount,
+        currency: transactionCurrency,
+        comment: transactionDescription,
+        merchant: transactionMerchant,
+        category: transactionCategory,
+    } = ReportUtils.getTransactionDetails(transaction);
 
     const defaultCurrency = lodashGet(route, 'params.currency', '') || transactionCurrency;
 
@@ -169,6 +176,23 @@ function EditRequestPage({report, route, parentReport, policy, session}) {
         );
     }
 
+    if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY) {
+        return (
+            <EditRequestCategoryPage
+                defaultCategory={transactionCategory}
+                policyID={lodashGet(report, 'policyID', '')}
+                onSubmit={(transactionChanges) => {
+                    let updatedCategory = transactionChanges.category;
+                    // In case the same category has been selected, do reset of the category.
+                    if (transactionCategory === updatedCategory) {
+                        updatedCategory = '';
+                    }
+                    editMoneyRequest({category: updatedCategory});
+                }}
+            />
+        );
+    }
+
     return <FullPageNotFoundView shouldShow />;
 }
 

From da95354c9ad2a170f224a080e4651ef0a0ec2207 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 14 Sep 2023 16:46:25 +0200
Subject: [PATCH 043/123] preview and navigate to edit a category

---
 .../ReportActionItem/MoneyRequestView.js      | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index a9264812b99d..7ad7dc0ce356 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
@@ -27,6 +28,7 @@ import Image from '../Image';
 import ReportActionItemImage from './ReportActionItemImage';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import OfflineWithFeedback from '../OfflineWithFeedback';
+import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -35,6 +37,10 @@ const propTypes = {
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 
+    /* Onyx Props */
+    /** Collection of categories attached to a policy */
+    policyCategories: PropTypes.objectOf(categoryPropTypes),
+
     /** The transaction associated with the transactionThread */
     transaction: transactionPropTypes,
 
@@ -46,6 +52,7 @@ const propTypes = {
 
 const defaultProps = {
     parentReport: {},
+    policyCategories: {},
     transaction: {
         amount: 0,
         currency: CONST.CURRENCY.USD,
@@ -53,7 +60,7 @@ const defaultProps = {
     },
 };
 
-function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, transaction}) {
+function MoneyRequestView({report, parentReport, policyCategories, shouldShowHorizontalRule, transaction}) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
 
@@ -65,6 +72,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
         currency: transactionCurrency,
         comment: transactionDescription,
         merchant: transactionMerchant,
+        category: transactionCategory,
     } = ReportUtils.getTransactionDetails(transaction);
     const isEmptyMerchant =
         transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
@@ -72,6 +80,7 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
 
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
+    const shouldShowCategory = !_.isEmpty(policyCategories) || !_.isEmpty(transactionCategory);
 
     let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
     if (isSettled) {
@@ -165,6 +174,18 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
                     subtitleTextStyle={styles.textLabelError}
                 />
             </OfflineWithFeedback>
+            {shouldShowCategory && (
+                <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.category') || lodashGet(transaction, 'pendingAction')}>
+                    <MenuItemWithTopDescription
+                        description={translate('common.category')}
+                        title={transactionCategory}
+                        interactive={canEdit}
+                        shouldShowRightIcon={canEdit}
+                        titleStyle={styles.flex1}
+                        onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.CATEGORY))}
+                    />
+                </OfflineWithFeedback>
+            )}
             {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
         </View>
     );
@@ -183,6 +204,9 @@ export default compose(
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,
         },
+        policyCategories: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report.policyID}`,
+        },
         session: {
             key: ONYXKEYS.SESSION,
         },

From bfc59ba9dcf7275eb7cad57dac477d0576577190 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 14 Sep 2023 17:35:52 +0200
Subject: [PATCH 044/123] prepare api

---
 src/libs/TransactionUtils.js | 14 +++++++++++++-
 src/libs/actions/IOU.js      | 13 +++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index 4ca8b48d284e..73ba6a8116ef 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -141,6 +141,11 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
         shouldStopSmartscan = true;
     }
 
+    if (_.has(transactionChanges, 'category')) {
+        updatedTransaction.modifiedCategory = transactionChanges.category;
+        shouldStopSmartscan = true;
+    }
+
     if (shouldStopSmartscan && _.has(transaction, 'receipt') && !_.isEmpty(transaction.receipt) && lodashGet(transaction, 'receipt.state') !== CONST.IOU.RECEIPT_STATE.OPEN) {
         updatedTransaction.receipt.state = CONST.IOU.RECEIPT_STATE.OPEN;
     }
@@ -151,6 +156,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
         ...(_.has(transactionChanges, 'amount') && {amount: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'currency') && {currency: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
         ...(_.has(transactionChanges, 'merchant') && {merchant: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
+        ...(_.has(transactionChanges, 'category') && {category: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE}),
     };
 
     return updatedTransaction;
@@ -232,12 +238,18 @@ function getMerchant(transaction) {
 }
 
 /**
- * Return the category from the transaction. This "category" field has no "modified" complement.
+ * Return the category from the transaction, return the modifiedCategory if present.
  *
  * @param {Object} transaction
  * @return {String}
  */
 function getCategory(transaction) {
+    const modifiedCategory = lodashGet(transaction, 'modifiedCategory', null);
+
+    if (!_.isNull(modifiedCategory)) {
+        return modifiedCategory;
+    }
+
     return lodashGet(transaction, 'category', '');
 }
 
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 8f18119203be..3e23bb596eee 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -1121,6 +1121,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
                     created: null,
                     currency: null,
                     merchant: null,
+                    category: null,
                 },
             },
         },
@@ -1156,6 +1157,18 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
         },
     ];
 
+    // STEP 5: Use the modifiedCategory as a category on success
+    if (!_.isUndefined(updatedTransaction.modifiedCategory)) {
+        successData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
+            value: {
+                category: updatedTransaction.modifiedCategory,
+                modifiedCategory: null,
+            },
+        });
+    }
+
     // STEP 6: Call the API endpoint
     const {created, amount, currency, comment, merchant, category} = ReportUtils.getTransactionDetails(updatedTransaction);
     API.write(

From 30c7499a5004cb5247ff16566cf7abce32beb258 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 15 Sep 2023 00:15:56 +0700
Subject: [PATCH 045/123] Ensure pusher's leavingStatus be sent earlier

---
 src/libs/actions/Report.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index f0ac66923002..92dbb0e5e0f6 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1846,6 +1846,12 @@ function getCurrentUserAccountID() {
 function leaveRoom(reportID) {
     const report = lodashGet(allReports, [reportID], {});
     const reportKeys = _.keys(report);
+
+    // Pusher's leavingStatus should be sent earlier.
+    // Place the broadcast before calling the LeaveRoom API to prevent a race condition
+    // between Onyx report being null and Pusher's leavingStatus becoming true.
+    broadcastUserIsLeavingRoom(reportID);
+
     API.write(
         'LeaveRoom',
         {
@@ -1887,7 +1893,6 @@ function leaveRoom(reportID) {
     if (Navigation.getTopmostReportId() === reportID) {
         Navigation.goBack();
     }
-    broadcastUserIsLeavingRoom(reportID);
     navigateToConciergeChat();
 }
 

From b9a001eb84adf3a75be054f07d30889a4bc3910e Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 15 Sep 2023 00:44:57 +0700
Subject: [PATCH 046/123] Add prevUserLeavingStatus to the check

---
 src/pages/home/ReportScreen.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index ed29ccbb5954..b784c91b23db 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -146,6 +146,7 @@ function ReportScreen({
     const flatListRef = useRef();
     const reactionListRef = useRef();
     const prevReport = usePrevious(report);
+    const prevUserLeavingStatus = usePrevious(userLeavingStatus);
 
     const [skeletonViewContainerHeight, setSkeletonViewContainerHeight] = useState(0);
     const [isBannerVisible, setIsBannerVisible] = useState(true);
@@ -293,7 +294,7 @@ function ReportScreen({
         // Navigate to the Concierge chat if the room was removed from another device (e.g. user leaving a room)
         if (
             // non-optimistic case
-            userLeavingStatus ||
+            (!prevUserLeavingStatus && userLeavingStatus) ||
             // optimistic case
             (prevOnyxReportID && prevOnyxReportID === routeReportID && !onyxReportID && prevReport.statusNum === CONST.REPORT.STATUS.OPEN && report.statusNum === CONST.REPORT.STATUS.CLOSED)
         ) {
@@ -312,7 +313,7 @@ function ReportScreen({
 
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
-    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, userLeavingStatus, prevReport.statusNum]);
+    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, prevUserLeavingStatus, userLeavingStatus, prevReport.statusNum]);
 
     useEffect(() => {
         // Ensures subscription event succeeds when the report/workspace room is created optimistically.

From 05f020c371399f9d4871287853b61c4bb973da19 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 15 Sep 2023 17:35:06 +0200
Subject: [PATCH 047/123] do not stop smart scan

---
 src/libs/TransactionUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index 73ba6a8116ef..5fc6294aca91 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -143,7 +143,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
 
     if (_.has(transactionChanges, 'category')) {
         updatedTransaction.modifiedCategory = transactionChanges.category;
-        shouldStopSmartscan = true;
+        shouldStopSmartscan = false;
     }
 
     if (shouldStopSmartscan && _.has(transaction, 'receipt') && !_.isEmpty(transaction.receipt) && lodashGet(transaction, 'receipt.state') !== CONST.IOU.RECEIPT_STATE.OPEN) {

From 636924f0928a253fd6a7efb4d271eba125afdcbc Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Fri, 15 Sep 2023 19:07:05 +0200
Subject: [PATCH 048/123] handle a selected category alone

---
 src/libs/OptionsListUtils.js       | 12 ++++++++++++
 tests/unit/OptionsListUtilsTest.js | 23 ++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 7629a1acc0a6..8027a30b34a1 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -666,6 +666,18 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
     const numberOfCategories = _.size(categoriesValues);
     let indexOffset = 0;
 
+    if (numberOfCategories === 0 && selectedOptions.length > 0) {
+        categorySections.push({
+            // "Selected" section
+            title: '',
+            shouldShow: false,
+            indexOffset,
+            data: getCategoryOptionTree(selectedOptions, true),
+        });
+
+        return categorySections;
+    }
+
     if (!_.isEmpty(searchInputValue)) {
         const searchCategories = _.filter(categoriesValues, (category) => category.name.toLowerCase().includes(searchInputValue.toLowerCase()));
 
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index f1a251e4e433..ef90c767175e 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -660,6 +660,7 @@ describe('OptionsListUtils', () => {
         const selectedOptions = [
             {
                 name: 'Medical',
+                enabled: true,
             },
         ];
         const smallCategoriesList = {
@@ -817,7 +818,7 @@ describe('OptionsListUtils', () => {
                         keyForList: 'Medical',
                         searchText: 'Medical',
                         tooltipText: 'Medical',
-                        isDisabled: true,
+                        isDisabled: false,
                     },
                 ],
             },
@@ -1000,6 +1001,23 @@ describe('OptionsListUtils', () => {
                 data: [],
             },
         ];
+        const emptyCategoriesList = {};
+        const emptySelectedResultList = [
+            {
+                title: '',
+                shouldShow: false,
+                indexOffset: 0,
+                data: [
+                    {
+                        text: 'Medical',
+                        keyForList: 'Medical',
+                        searchText: 'Medical',
+                        tooltipText: 'Medical',
+                        isDisabled: false,
+                    },
+                ],
+            },
+        ];
 
         const smallResult = OptionsListUtils.getNewChatOptions(REPORTS, PERSONAL_DETAILS, [], emptySearch, [], [], false, false, true, smallCategoriesList);
         expect(smallResult.categoryOptions).toStrictEqual(smallResultList);
@@ -1054,6 +1072,9 @@ describe('OptionsListUtils', () => {
             recentlyUsedCategories,
         );
         expect(largeWrongSearchResult.categoryOptions).toStrictEqual(largeWrongSearchResultList);
+
+        const emptyResult = OptionsListUtils.getNewChatOptions(REPORTS, PERSONAL_DETAILS, [], search, selectedOptions, [], false, false, true, emptyCategoriesList);
+        expect(emptyResult.categoryOptions).toStrictEqual(emptySelectedResultList);
     });
 
     it('getCategoryOptionTree()', () => {

From 812ea0568c93ef608a43f35013a0a9bef6eff8f5 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 11:05:03 +0200
Subject: [PATCH 049/123] do not use modified category

---
 src/libs/TransactionUtils.js | 11 ++---------
 src/libs/actions/IOU.js      | 12 ------------
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js
index 5fc6294aca91..7e768e97b837 100644
--- a/src/libs/TransactionUtils.js
+++ b/src/libs/TransactionUtils.js
@@ -142,8 +142,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep
     }
 
     if (_.has(transactionChanges, 'category')) {
-        updatedTransaction.modifiedCategory = transactionChanges.category;
-        shouldStopSmartscan = false;
+        updatedTransaction.category = transactionChanges.category;
     }
 
     if (shouldStopSmartscan && _.has(transaction, 'receipt') && !_.isEmpty(transaction.receipt) && lodashGet(transaction, 'receipt.state') !== CONST.IOU.RECEIPT_STATE.OPEN) {
@@ -238,18 +237,12 @@ function getMerchant(transaction) {
 }
 
 /**
- * Return the category from the transaction, return the modifiedCategory if present.
+ * Return the category from the transaction. This "category" field has no "modified" complement.
  *
  * @param {Object} transaction
  * @return {String}
  */
 function getCategory(transaction) {
-    const modifiedCategory = lodashGet(transaction, 'modifiedCategory', null);
-
-    if (!_.isNull(modifiedCategory)) {
-        return modifiedCategory;
-    }
-
     return lodashGet(transaction, 'category', '');
 }
 
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 16722d4dc70b..9f1d67d1db1d 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -1160,18 +1160,6 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
         },
     ];
 
-    // STEP 5: Use the modifiedCategory as a category on success
-    if (!_.isUndefined(updatedTransaction.modifiedCategory)) {
-        successData.push({
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-            value: {
-                category: updatedTransaction.modifiedCategory,
-                modifiedCategory: null,
-            },
-        });
-    }
-
     // STEP 6: Call the API endpoint
     const {created, amount, currency, comment, merchant, category} = ReportUtils.getTransactionDetails(updatedTransaction);
     API.write(

From d9595b03823b72ea492ac1d0c5ac09f9c2284b1d Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Mon, 18 Sep 2023 15:14:16 +0530
Subject: [PATCH 050/123] fix: Refocus issue on address field on delete and
 cancel

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/HeaderWithBackButton/index.js |  2 ++
 src/components/PopoverMenu/index.js          |  5 +++++
 src/components/ThreeDotsMenu/index.js        | 12 ++++++++++--
 src/pages/iou/WaypointEditor.js              | 11 ++++++++++-
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index bbf905cc1ac2..b99290918e13 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -47,6 +47,7 @@ function HeaderWithBackButton({
     },
     threeDotsMenuItems = [],
     children = null,
+    onPopoverHide = () => {},
 }) {
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
@@ -137,6 +138,7 @@ function HeaderWithBackButton({
                             menuItems={threeDotsMenuItems}
                             onIconPress={onThreeDotsButtonPress}
                             anchorPosition={threeDotsAnchorPosition}
+                            onPopoverHide={onPopoverHide}
                         />
                     )}
                     {shouldShowCloseButton && (
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 5fabf73547ea..1533f329ad4a 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -34,6 +34,9 @@ const propTypes = {
     }),
 
     withoutOverlay: PropTypes.bool,
+
+    /** Function to call on popover hide */
+    onPopoverHide: PropTypes.func,
 };
 
 const defaultProps = {
@@ -44,6 +47,7 @@ const defaultProps = {
     },
     anchorRef: () => {},
     withoutOverlay: false,
+    onPopoverHide: () => {},
 };
 
 function PopoverMenu(props) {
@@ -78,6 +82,7 @@ function PopoverMenu(props) {
             isVisible={props.isVisible}
             onModalHide={() => {
                 setFocusedIndex(-1);
+                props.onPopoverHide();
                 if (selectedItemIndex.current !== null) {
                     props.menuItems[selectedItemIndex.current].onSelected();
                     selectedItemIndex.current = null;
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index b5637a4f3879..5daeb9669933 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -1,5 +1,5 @@
 import React, {useState, useRef} from 'react';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import Icon from '../Icon';
@@ -45,6 +45,9 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /** Function to call on popover hide */
+    onPopoverClose: PropTypes.func,
 };
 
 const defaultProps = {
@@ -57,9 +60,10 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    onPopoverHide: () => {},
 };
 
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment}) {
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onPopoverHide}) {
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
     const {translate} = useLocalize();
@@ -69,6 +73,9 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
     };
 
     const hidePopoverMenu = () => {
+        InteractionManager.runAfterInteractions(() => {
+            onPopoverHide();
+        });
         setPopupMenuVisible(false);
     };
 
@@ -101,6 +108,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
             </View>
             <PopoverMenu
                 onClose={hidePopoverMenu}
+                onPopoverHide={onPopoverHide}
                 isVisible={isPopupMenuVisible}
                 anchorPosition={anchorPosition}
                 anchorAlignment={anchorAlignment}
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 68e85a34746d..6680134698b4 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -1,7 +1,7 @@
 import React, {useMemo, useRef, useState} from 'react';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {View} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import {useIsFocused} from '@react-navigation/native';
@@ -157,6 +157,13 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 
+    const focus = () => {
+        InteractionManager.runAfterInteractions(() => {
+            if (!textInput.current) return;
+            textInput.current.focus();
+        });
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -179,12 +186,14 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                             onSelected: () => setIsDeleteStopModalOpen(true),
                         },
                     ]}
+                    onPopoverHide={focus}
                 />
                 <ConfirmModal
                     title={translate('distance.deleteWaypoint')}
                     isVisible={isDeleteStopModalOpen}
                     onConfirm={deleteStopAndHideModal}
                     onCancel={() => setIsDeleteStopModalOpen(false)}
+                    onModalHide={focus}
                     prompt={translate('distance.deleteWaypointConfirmation')}
                     confirmText={translate('common.delete')}
                     cancelText={translate('common.cancel')}

From 6756074fa9163d0367e8e60d4cc21c2dbc73eff2 Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Mon, 18 Sep 2023 13:18:39 +0200
Subject: [PATCH 051/123] Updated script to handle styles with theme function,
 and obj spreading in style.js file

---
 .github/scripts/findUnusedKeys.sh | 154 ++++++++++++++++++++++++------
 1 file changed, 123 insertions(+), 31 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index 85d8112e8f13..e34d8e0d78ea 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -110,6 +110,85 @@ lookfor_unused_keywords() {
 find_styles_object_and_store_keys() {
   local file="$1"
   local base_name="${2:-styles}" # Set styles as default
+  local line_number=0
+  local inside_arrow_function=false
+
+  while IFS= read -r line; do
+    ((line_number++))
+
+    # Check if we are inside an arrow function and we find a closing curly brace
+    if [[ "$inside_arrow_function" == true ]]; then
+      if [[ "$line" =~ ^[[:space:]]*\}\) ]]; then
+        inside_arrow_function=false
+      fi
+      continue
+    fi
+
+    # Check if we are inside an arrow function
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ || "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
+      inside_arrow_function=true
+      continue
+    fi
+
+    # Skip lines that are not key-related
+    if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then
+      continue
+    fi
+    
+    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
+      key="${BASH_REMATCH[2]%%:*{*)}"
+      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"    
+    fi
+  done < "$file"
+}
+
+find_styles_functions_and_store_keys() {
+  local file="$1"
+  local line_number=0
+  local inside_object=false
+  local inside_arrow_function=false
+  local key=""
+
+  while IFS= read -r line; do
+    ((line_number++))
+
+    # Skip lines that are not key-related
+    if [[ "${line}" == *styles* ]]; then
+      continue
+    fi
+
+    # Check if we are inside an arrow function and we find a closing curly brace
+    if [[ "$inside_arrow_function" == true ]]; then
+      if [[ "$line" =~ ^[[:space:]]*\}\) ]]; then
+        inside_arrow_function=false
+      fi
+      continue
+    fi
+
+    # Check if we are inside an arrow function
+    if [[ "${line}" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\( ]]; then
+      inside_arrow_function=true
+      key="${line%%:*}"
+      key="${key// /}"  # Trim spaces
+      echo "styles.${key}|...${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
+      continue
+    fi
+
+    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
+      inside_arrow_function=true
+      key="${BASH_REMATCH[2]}"
+      key="${key// /}"  # Trim spaces
+      echo "styles.${key}|...${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
+      continue
+    fi
+
+  done < "$file"
+}
+
+find_theme_style_and_store_keys() {
+  local file="$1"
+  local start_line_number="$2"
+  local base_name="${3:-styles}" # Set styles as default
   local parent_keys=()
   local root_key=""
   local line_number=0
@@ -118,6 +197,10 @@ find_styles_object_and_store_keys() {
   while IFS= read -r line; do
     ((line_number++))
 
+    if [ ! "$line_number" -ge "$start_line_number" ]; then
+      continue
+    fi
+
     # Check if we are inside an arrow function and we find a closing curly brace
     if [[ "$inside_arrow_function" == true ]]; then
       if [[ "$line" =~ ^[[:space:]]*\}\) ]]; then
@@ -127,22 +210,22 @@ find_styles_object_and_store_keys() {
     fi
 
     # Check if we are inside an arrow function
-    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ || "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
       inside_arrow_function=true
       continue
     fi
 
     # Skip lines that are not key-related
     if [[ ! "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*\} ]]; then
+
       continue
     fi
     
-    if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\{ ]]; then
-      root_key="${BASH_REMATCH[2]%%:*{*)}"
-    elif [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{|^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
       # Removing all the extra lines after the ":"
       local key="${line%%:*}"
       key="${key// /}"  # Trim spaces
+
       if [[ ${#parent_keys[@]} -gt 0 ]]; then
         local parent_key_trimmed="${parent_keys[${#parent_keys[@]}-1]// /}"  # Trim spaces
         key="$parent_key_trimmed.$key"
@@ -150,12 +233,8 @@ find_styles_object_and_store_keys() {
         local parent_key_trimmed="${root_key// /}"  # Trim spaces
         key="$parent_key_trimmed.$key"
       fi
-    
-      if [[ "$key" == "styles."* ]]; then
-        echo "${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
-      else
-        echo "styles.${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
-      fi
+
+      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
       parent_keys+=("$key")
     elif [[ "$line" =~ ^[[:space:]]*\} ]]; then
       parent_keys=("${parent_keys[@]:0:${#parent_keys[@]}-1}")
@@ -163,40 +242,51 @@ find_styles_object_and_store_keys() {
   done < "$file"
 }
 
-find_styles_functions_and_store_keys() {
+# Given that all the styles are inside of a function, we need to find the function and then look for the styles
+collect_theme_keys_from_styles() {
   local file="$1"
   local line_number=0
-  local inside_object=false
-  local inside_arrow_function=false
-  local key=""
+  local inside_styles=false
 
   while IFS= read -r line; do
     ((line_number++))
 
-    # Check if we are inside an arrow function
-    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-])+:[[:space:]]*\(.*\)[[:space:]]*'=>'[[:space:]]*\(\{ ]]; then
-      inside_arrow_function=true
-      key="${line%%:*}"
-      key="${key// /}"  # Trim spaces
-      echo "styles.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
+    if [[ "$inside_styles" == false ]]; then
+      if [[ "$line" =~ ^[[:space:]]*(const|let|var)[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]*=[[:space:]]*\(.*\)[[:space:]]*'=>' ]]; then
+        key="${BASH_REMATCH[2]}"
+        key="${key// /}"  # Trim spaces
+        if [[ "$key" == "styles"* ]]; then
+          inside_styles=true
+          # Need to start within the style function
+          ((line_number++))
+          find_theme_style_and_store_keys "$file" "$line_number"
+        fi
+        continue
+      fi
     fi
+  done < "$file"
+}
 
-    # If we are inside an arrow function and we find an opening curly brace,
-    # then set inside_object to true, indicating we are inside an object.
-    if [[ "$inside_arrow_function" == true && "$line" =~ ^[[:space:]]*\{ ]]; then
-      inside_object=true
-    fi
+lookfor_unused_spread_keywords() {
+  local inside_object=false
 
-    # If we are inside an object, continue to the next line.
-    if [[ "$inside_object" == true ]]; then
-      continue
+  while IFS= read -r line; do
+    # Detect the start of an object
+    if [[ "$line" =~ ^[[:space:]]*([a-zA-Z0-9_-]+\.)?[a-zA-Z0-9_-]+:[[:space:]]*\{ ]]; then
+      inside_object=true
     fi
 
-    # If we find a closing curly brace, reset the inside_object flag.
+    # Detect the end of an object
     if [[ "$line" =~ ^[[:space:]]*\},?$ ]]; then
       inside_object=false
     fi
-  done < "$file"
+
+    # If we're inside an object and the line starts with '...', capture the key
+    if [[ "$inside_object" == true && "$line" =~ ^[[:space:]]*\.\.\.([a-zA-Z0-9_]+)(\(.+\))?,?$ ]]; then
+      local key=("${BASH_REMATCH[1]}")
+      remove_keyword "...${key}"
+    fi
+  done < "$STYLES_FILE"
 }
 
 find_utility_styles_store_prefix() {
@@ -228,7 +318,7 @@ find_utility_usage_as_styles() {
       continue
     fi
 
-    find_styles_object_and_store_keys "${file}" "${root_key}"
+    find_theme_style_and_store_keys "${file}" 0 "${root_key}"
   done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
 }
 
@@ -260,11 +350,13 @@ find_utility_usage_as_styles
 # Find and store keys from styles.js
 find_styles_object_and_store_keys "$STYLES_FILE"
 find_styles_functions_and_store_keys "$STYLES_FILE"
+collect_theme_keys_from_styles "$STYLES_FILE"
 
 echo "🗄️ Now going through the codebase and looking for unused keys."
 
 # Look for usages of utilities into src/styles
 lookfor_unused_utilities
+lookfor_unused_spread_keywords
 lookfor_unused_keywords
 
 final_styles_line_count=$(count_lines "$STYLES_KEYS_FILE")

From 54e786c1593e5a53ba9c58827c345908be6420af Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Mon, 18 Sep 2023 13:36:08 +0200
Subject: [PATCH 052/123] fixed some lint issues

---
 .github/scripts/findUnusedKeys.sh | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index e34d8e0d78ea..6668d3257546 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -259,7 +259,7 @@ collect_theme_keys_from_styles() {
           inside_styles=true
           # Need to start within the style function
           ((line_number++))
-          find_theme_style_and_store_keys "$file" "$line_number"
+          find_theme_style_and_store_keys "$STYLES_FILE" "$line_number"
         fi
         continue
       fi
@@ -269,6 +269,7 @@ collect_theme_keys_from_styles() {
 
 lookfor_unused_spread_keywords() {
   local inside_object=false
+  local key=""
 
   while IFS= read -r line; do
     # Detect the start of an object
@@ -283,7 +284,7 @@ lookfor_unused_spread_keywords() {
 
     # If we're inside an object and the line starts with '...', capture the key
     if [[ "$inside_object" == true && "$line" =~ ^[[:space:]]*\.\.\.([a-zA-Z0-9_]+)(\(.+\))?,?$ ]]; then
-      local key=("${BASH_REMATCH[1]}")
+      key="${BASH_REMATCH[1]}"
       remove_keyword "...${key}"
     fi
   done < "$STYLES_FILE"

From 3dd7b5c14b2817594ef19f299b329262174ec61a Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 15:11:26 +0200
Subject: [PATCH 053/123] create getRootParentReport helper

---
 src/libs/ReportUtils.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 9396ea921b61..7115de23d1a1 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1601,6 +1601,29 @@ function getParentReport(report) {
     return lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, {});
 }
 
+/**
+ * Returns the root parentReport if the given report is nested.
+ * Uses recursion to iterate any depth of nested reports.
+ *
+ * @param {Object} report
+ * @returns {Object}
+ */
+function getRootParentReport(report) {
+    if (!report) {
+        return {};
+    }
+
+    // Returns the founded root report, because it does not have a parentReportID
+    if (!report.parentReportID) {
+        return report;
+    }
+
+    const parentReport = getReport(report.parentReportID);
+
+    // Runs recursion to iterate a parent report
+    return getRootParentReport(parentReport);
+}
+
 /**
  * Get the title for a report.
  *
@@ -3613,6 +3636,7 @@ export {
     isAllowedToComment,
     getBankAccountRoute,
     getParentReport,
+    getRootParentReport,
     getTaskParentReportActionIDInAssigneeReport,
     getReportPreviewMessage,
     getModifiedExpenseMessage,

From d7b6b89b73d20413d809093843fa48941862921e Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 15:12:17 +0200
Subject: [PATCH 054/123] improve conditions of MoneyRequestConfirmationList

---
 src/components/MoneyRequestConfirmationList.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index da98d324681e..d72860e78a48 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -191,13 +191,19 @@ function MoneyRequestConfirmationList(props) {
     const {unit, rate, currency} = props.mileageRate;
     const distance = lodashGet(transaction, 'routes.route0.distance', 0);
     const shouldCalculateDistanceAmount = props.isDistanceRequest && props.iouAmount === 0;
-    const shouldCategoryBeEditable = !_.isEmpty(props.policyCategories) && Permissions.canUseCategories(props.betas);
+
+    // A flag for verifying that the current report is a sub-report of a workspace chat
+    const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(ReportUtils.getReport(props.reportID))), [props.reportID]);
+
+    // A flag for showing the categories field
+    const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && !_.isEmpty(props.policyCategories);
 
     // Fetches the first tag list of the policy
     const tagListKey = _.first(_.keys(props.policyTags));
     const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []);
     const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], '');
-    const canUseTags = Permissions.canUseTags(props.betas);
+    // A flag for showing the tags field
+    const shouldShowTags = isPolicyExpenseChat && Permissions.canUseTags(props.betas) && !_.isEmpty(tagList);
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
         shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
@@ -510,7 +516,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly || !isTypeRequest}
                         />
                     )}
-                    {shouldCategoryBeEditable && (
+                    {shouldShowCategories && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouCategory}
@@ -520,7 +526,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
-                    {canUseTags && !!tagList && (
+                    {shouldShowTags && (
                         <MenuItemWithTopDescription
                             shouldShowRightIcon={!props.isReadOnly}
                             title={props.iouTag}

From ddb21c87a6a4834949fe4162b122afbdea9c36dc Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 15:14:09 +0200
Subject: [PATCH 055/123] improve conditions of MoneyRequestView

---
 .../ReportActionItem/MoneyRequestView.js        | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index eb08639d8d8e..8232f8618f2c 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -10,6 +10,7 @@ import ROUTES from '../../ROUTES';
 import Navigation from '../../libs/Navigation/Navigation';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import compose from '../../libs/compose';
+import Permissions from '../../libs/Permissions';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
@@ -31,6 +32,9 @@ import OfflineWithFeedback from '../OfflineWithFeedback';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
+    /** List of betas available to current user */
+    betas: PropTypes.arrayOf(PropTypes.string),
+
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
@@ -51,6 +55,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    betas: [],
     parentReport: {},
     policyCategories: {},
     transaction: {
@@ -60,7 +65,7 @@ const defaultProps = {
     },
 };
 
-function MoneyRequestView({report, parentReport, policyCategories, shouldShowHorizontalRule, transaction}) {
+function MoneyRequestView({betas, report, parentReport, policyCategories, shouldShowHorizontalRule, transaction}) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const {translate} = useLocalize();
 
@@ -80,7 +85,10 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
 
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
     const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
-    const shouldShowCategory = !_.isEmpty(policyCategories) || !_.isEmpty(transactionCategory);
+    // A flag for verifying that the current report is a sub-report of a workspace chat
+    const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
+    // A flag for showing categories
+    const shouldShowCategory = isPolicyExpenseChat && Permissions.canUseCategories(betas) && (!_.isEmpty(policyCategories) || !_.isEmpty(transactionCategory));
 
     let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
     if (isSettled) {
@@ -201,6 +209,9 @@ MoneyRequestView.displayName = 'MoneyRequestView';
 export default compose(
     withCurrentUserPersonalDetails,
     withOnyx({
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
         parentReport: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`,
         },

From 24e4db5626db5a0e29238565240fa7f5de913e1d Mon Sep 17 00:00:00 2001
From: Eduardo <eduardo.graciano@callstack.com>
Date: Mon, 18 Sep 2023 16:03:35 +0200
Subject: [PATCH 056/123] removed unused style

---
 src/styles/styles.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index a8b764dc0e39..81f3c22c0dae 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -225,11 +225,6 @@ const styles = (theme) => ({
         color: theme.textSupporting,
     },
 
-    appIconBorderRadius: {
-        overflow: 'hidden',
-        borderRadius: 12,
-    },
-
     webViewStyles: webViewStyles(theme),
 
     link: link(theme),

From f8b84a96161b61712069800d54da4312300ead1a Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 18:21:04 +0200
Subject: [PATCH 057/123] improve options helpers

---
 src/libs/OptionsListUtils.js       | 38 +++++++++++++-
 tests/unit/OptionsListUtilsTest.js | 84 ------------------------------
 2 files changed, 37 insertions(+), 85 deletions(-)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 8027a30b34a1..c38f99edac65 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -599,6 +599,32 @@ function isCurrentUser(userDetails) {
     return _.some(_.keys(loginList), (login) => login.toLowerCase() === userDetailsLogin.toLowerCase());
 }
 
+/**
+ * Calculates count of all enabled options
+ *
+ * @param {Object[]} options - an initial strings array
+ * @param {Boolean} options[].enabled - a flag to enable/disable option in a list
+ * @param {String} options[].name - a name of an option
+ * @returns {Boolean}
+ */
+function getEnabledCategoriesCount(options) {
+    return _.chain(options)
+        .filter((option) => Boolean(option.enabled))
+        .value().length;
+}
+
+/**
+ * Verifies that there is at least one enabled option
+ *
+ * @param {Object[]} options - an initial strings array
+ * @param {Boolean} options[].enabled - a flag to enable/disable option in a list
+ * @param {String} options[].name - a name of an option
+ * @returns {Boolean}
+ */
+function hasEnabledOptions(options) {
+    return _.some(options, (option) => Boolean(option.enabled));
+}
+
 /**
  * Build the options for the category tree hierarchy via indents
  *
@@ -612,6 +638,10 @@ function getCategoryOptionTree(options, isOneLine = false) {
     const optionCollection = {};
 
     _.each(options, (option) => {
+        if (!option.enabled) {
+            return;
+        }
+
         if (isOneLine) {
             if (_.has(optionCollection, option.name)) {
                 return;
@@ -662,7 +692,11 @@ function getCategoryOptionTree(options, isOneLine = false) {
  */
 function getCategoryListSections(categories, recentlyUsedCategories, selectedOptions, searchInputValue, maxRecentReportsToShow) {
     const categorySections = [];
-    const categoriesValues = _.values(categories);
+    const categoriesValues = _.chain(categories)
+        .values()
+        .filter((category) => category.enabled)
+        .value();
+
     const numberOfCategories = _.size(categoriesValues);
     let indexOffset = 0;
 
@@ -1342,6 +1376,8 @@ export {
     isSearchStringMatch,
     shouldOptionShowTooltip,
     getLastMessageTextForReport,
+    getEnabledCategoriesCount,
+    hasEnabledOptions,
     getCategoryOptionTree,
     formatMemberForList,
 };
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index ef90c767175e..f10eecefaafd 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -687,13 +687,6 @@ describe('OptionsListUtils', () => {
                 shouldShow: false,
                 indexOffset: 0,
                 data: [
-                    {
-                        text: 'Taxi',
-                        keyForList: 'Taxi',
-                        searchText: 'Taxi',
-                        tooltipText: 'Taxi',
-                        isDisabled: true,
-                    },
                     {
                         text: 'Restaurant',
                         keyForList: 'Restaurant',
@@ -827,13 +820,6 @@ describe('OptionsListUtils', () => {
                 shouldShow: true,
                 indexOffset: 1,
                 data: [
-                    {
-                        text: 'Taxi',
-                        keyForList: 'Taxi',
-                        searchText: 'Taxi',
-                        tooltipText: 'Taxi',
-                        isDisabled: true,
-                    },
                     {
                         text: 'Restaurant',
                         keyForList: 'Restaurant',
@@ -848,13 +834,6 @@ describe('OptionsListUtils', () => {
                 shouldShow: true,
                 indexOffset: 3,
                 data: [
-                    {
-                        text: 'Taxi',
-                        keyForList: 'Taxi',
-                        searchText: 'Taxi',
-                        tooltipText: 'Taxi',
-                        isDisabled: true,
-                    },
                     {
                         text: 'Restaurant',
                         keyForList: 'Restaurant',
@@ -883,13 +862,6 @@ describe('OptionsListUtils', () => {
                         tooltipText: 'Milk',
                         isDisabled: false,
                     },
-                    {
-                        text: '    Vegetables',
-                        keyForList: 'Vegetables',
-                        searchText: 'Food: Vegetables',
-                        tooltipText: 'Vegetables',
-                        isDisabled: true,
-                    },
                     {
                         text: 'Cars',
                         keyForList: 'Cars',
@@ -904,13 +876,6 @@ describe('OptionsListUtils', () => {
                         tooltipText: 'Audi',
                         isDisabled: false,
                     },
-                    {
-                        text: '    BMW',
-                        keyForList: 'BMW',
-                        searchText: 'Cars: BMW',
-                        tooltipText: 'BMW',
-                        isDisabled: true,
-                    },
                     {
                         text: '    Mercedes-Benz',
                         keyForList: 'Mercedes-Benz',
@@ -939,13 +904,6 @@ describe('OptionsListUtils', () => {
                         tooltipText: 'Breakfast',
                         isDisabled: false,
                     },
-                    {
-                        text: '        Dinner',
-                        keyForList: 'Dinner',
-                        searchText: 'Travel: Meals: Dinner',
-                        tooltipText: 'Dinner',
-                        isDisabled: true,
-                    },
                     {
                         text: '        Lunch',
                         keyForList: 'Lunch',
@@ -983,13 +941,6 @@ describe('OptionsListUtils', () => {
                         tooltipText: 'Food: Milk',
                         isDisabled: false,
                     },
-                    {
-                        text: 'Food: Vegetables',
-                        keyForList: 'Food: Vegetables',
-                        searchText: 'Food: Vegetables',
-                        tooltipText: 'Food: Vegetables',
-                        isDisabled: true,
-                    },
                 ],
             },
         ];
@@ -1153,13 +1104,6 @@ describe('OptionsListUtils', () => {
             },
         };
         const result = [
-            {
-                text: 'Taxi',
-                keyForList: 'Taxi',
-                searchText: 'Taxi',
-                tooltipText: 'Taxi',
-                isDisabled: true,
-            },
             {
                 text: 'Restaurant',
                 keyForList: 'Restaurant',
@@ -1188,13 +1132,6 @@ describe('OptionsListUtils', () => {
                 tooltipText: 'Milk',
                 isDisabled: false,
             },
-            {
-                text: '    Vegetables',
-                keyForList: 'Vegetables',
-                searchText: 'Food: Vegetables',
-                tooltipText: 'Vegetables',
-                isDisabled: true,
-            },
             {
                 text: 'Cars',
                 keyForList: 'Cars',
@@ -1209,13 +1146,6 @@ describe('OptionsListUtils', () => {
                 tooltipText: 'Audi',
                 isDisabled: false,
             },
-            {
-                text: '    BMW',
-                keyForList: 'BMW',
-                searchText: 'Cars: BMW',
-                tooltipText: 'BMW',
-                isDisabled: true,
-            },
             {
                 text: '    Mercedes-Benz',
                 keyForList: 'Mercedes-Benz',
@@ -1223,13 +1153,6 @@ describe('OptionsListUtils', () => {
                 tooltipText: 'Mercedes-Benz',
                 isDisabled: false,
             },
-            {
-                text: 'Medical',
-                keyForList: 'Medical',
-                searchText: 'Medical',
-                tooltipText: 'Medical',
-                isDisabled: true,
-            },
             {
                 text: 'Travel',
                 keyForList: 'Travel',
@@ -1251,13 +1174,6 @@ describe('OptionsListUtils', () => {
                 tooltipText: 'Breakfast',
                 isDisabled: false,
             },
-            {
-                text: '        Dinner',
-                keyForList: 'Dinner',
-                searchText: 'Travel: Meals: Dinner',
-                tooltipText: 'Dinner',
-                isDisabled: true,
-            },
             {
                 text: '        Lunch',
                 keyForList: 'Lunch',

From b12a93ed40c9d0eb03c8be2c15769123d66ae2c2 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 18:21:18 +0200
Subject: [PATCH 058/123] check enabled categories

---
 src/components/CategoryPicker/index.js              | 2 +-
 src/components/MoneyRequestConfirmationList.js      | 2 +-
 src/components/ReportActionItem/MoneyRequestView.js | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index 66ac0bf14d4a..da7b77ca193e 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -14,7 +14,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
 
-    const policyCategoriesCount = _.size(policyCategories);
+    const policyCategoriesCount = OptionsListUtils.getEnabledCategoriesCount(_.values(policyCategories));
     const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
 
     const selectedOptions = useMemo(() => {
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index d72860e78a48..7ed5ba0e1f09 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -196,7 +196,7 @@ function MoneyRequestConfirmationList(props) {
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(ReportUtils.getReport(props.reportID))), [props.reportID]);
 
     // A flag for showing the categories field
-    const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && !_.isEmpty(props.policyCategories);
+    const shouldShowCategories = isPolicyExpenseChat && Permissions.canUseCategories(props.betas) && OptionsListUtils.hasEnabledOptions(_.values(props.policyCategories));
 
     // Fetches the first tag list of the policy
     const tagListKey = _.first(_.keys(props.policyTags));
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 8232f8618f2c..be937a834c42 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -14,6 +14,7 @@ import Permissions from '../../libs/Permissions';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import styles from '../../styles/styles';
 import * as ReportUtils from '../../libs/ReportUtils';
+import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import * as StyleUtils from '../../styles/StyleUtils';
 import CONST from '../../CONST';
@@ -88,7 +89,8 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
     // A flag for verifying that the current report is a sub-report of a workspace chat
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
     // A flag for showing categories
-    const shouldShowCategory = isPolicyExpenseChat && Permissions.canUseCategories(betas) && (!_.isEmpty(policyCategories) || !_.isEmpty(transactionCategory));
+    const shouldShowCategory =
+        isPolicyExpenseChat && Permissions.canUseCategories(betas) && (!_.isEmpty(transactionCategory) || OptionsListUtils.hasEnabledOptions(_.values(policyCategories)));
 
     let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
     if (isSettled) {

From 7a643bfdfca602541f070e8ea257e8c462e5808a Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Mon, 18 Sep 2023 18:45:44 +0200
Subject: [PATCH 059/123] fix billable condition

---
 src/components/MoneyRequestConfirmationList.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index da969dce1145..d60b2e5d44bf 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -204,8 +204,12 @@ function MoneyRequestConfirmationList(props) {
     const tagListKey = _.first(_.keys(props.policyTags));
     const tagList = lodashGet(props.policyTags, [tagListKey, 'tags'], []);
     const tagListName = lodashGet(props.policyTags, [tagListKey, 'name'], '');
+    const canUseTags = Permissions.canUseTags(props.betas);
     // A flag for showing the tags field
-    const shouldShowTags = isPolicyExpenseChat && Permissions.canUseTags(props.betas) && !_.isEmpty(tagList);
+    const shouldShowTags = isPolicyExpenseChat && canUseTags && !_.isEmpty(tagList);
+
+    // A flag for showing the billable field
+    const shouldShowBillable = canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
 
     const formattedAmount = CurrencyUtils.convertToDisplayString(
         shouldCalculateDistanceAmount ? DistanceRequestUtils.getDistanceRequestAmount(distance, unit, rate) : props.iouAmount,
@@ -539,7 +543,7 @@ function MoneyRequestConfirmationList(props) {
                             disabled={didConfirm || props.isReadOnly}
                         />
                     )}
-                    {canUseTags && !lodashGet(props.policy, 'disabledFields.defaultBillable', true) && (
+                    {shouldShowBillable && (
                         <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
                             <Text color={!props.iouIsBillable ? themeColors.textSupporting : undefined}>{translate('common.billable')}</Text>
                             <Switch

From 6a8b7d86779d8aa98442474944e78f9c29fb4a2c Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 19 Sep 2023 11:43:57 +0700
Subject: [PATCH 060/123] fix unread marker of modified messsage

---
 src/libs/actions/IOU.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 587b2392deba..79b1ecdad855 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -1087,6 +1087,7 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
     }
 
     // STEP 4: Compose the optimistic data
+    const currentTime = DateUtils.getDBTime();
     const optimisticData = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -1110,6 +1111,14 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
             key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.chatReportID}`,
             value: updatedChatReport,
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`,
+            value: {
+                lastReadTime: currentTime,
+                lastVisibleActionCreated: currentTime,
+            },
+        },
     ];
 
     const successData = [
@@ -1163,6 +1172,14 @@ function editMoneyRequest(transactionID, transactionThreadReportID, transactionC
             key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.chatReportID}`,
             value: chatReport,
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`,
+            value: {
+                lastReadTime: transactionThread.lastReadTime,
+                lastVisibleActionCreated: transactionThread.lastVisibleActionCreated,
+            },
+        },
     ];
 
     // STEP 6: Call the API endpoint

From feeac721700ba5a95d8ea05b64d03ad8e1226da2 Mon Sep 17 00:00:00 2001
From: DylanDylann <dylandylan9112@gmail.com>
Date: Tue, 19 Sep 2023 12:16:30 +0700
Subject: [PATCH 061/123] fix offline deleted workspace allow to open reimburse
 page

---
 src/libs/PolicyUtils.js                           | 9 +++++++++
 src/pages/workspace/WorkspaceInitialPage.js       | 2 +-
 src/pages/workspace/WorkspaceInviteMessagePage.js | 2 +-
 src/pages/workspace/WorkspaceInvitePage.js        | 2 +-
 src/pages/workspace/WorkspaceMembersPage.js       | 2 +-
 src/pages/workspace/WorkspacePageWithSections.js  | 2 +-
 6 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/libs/PolicyUtils.js b/src/libs/PolicyUtils.js
index 164f284a4ef5..6ec0c11a31d6 100644
--- a/src/libs/PolicyUtils.js
+++ b/src/libs/PolicyUtils.js
@@ -166,6 +166,14 @@ function getIneligibleInvitees(policyMembers, personalDetails) {
     return memberEmailsToExclude;
 }
 
+/**
+ * @param {Object} policy
+ * @returns {Boolean}
+ */
+function isPendingDeletePolicy(policy) {
+    return policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+}
+
 export {
     getActivePolicies,
     hasPolicyMemberError,
@@ -179,4 +187,5 @@ export {
     isPolicyAdmin,
     getMemberAccountIDsForWorkspace,
     getIneligibleInvitees,
+    isPendingDeletePolicy,
 };
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 8f93434e6845..2b7fc924d85c 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -186,7 +186,7 @@ function WorkspaceInitialPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
-                    shouldShow={_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)}
+                    shouldShow={_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy) || PolicyUtils.isPendingDeletePolicy(props.policy)}
                     subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
                 >
                     <HeaderWithBackButton
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 9a046d7fe4c2..2a1ccdb66530 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -160,7 +160,7 @@ class WorkspaceInviteMessagePage extends React.Component {
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 <FullPageNotFoundView
-                    shouldShow={_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)}
+                    shouldShow={_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy) || PolicyUtils.isPendingDeletePolicy(this.props.policy)}
                     subtitleKey={_.isEmpty(this.props.policy) ? undefined : 'workspace.common.notAuthorized'}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                 >
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index e37588d2d401..fdb2f817fd1b 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -203,7 +203,7 @@ function WorkspaceInvitePage(props) {
 
                 return (
                     <FullPageNotFoundView
-                        shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
+                        shouldShow={((_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData) || PolicyUtils.isPendingDeletePolicy(props.policy)}
                         subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                     >
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 7bb9a91c130e..6051bf73de10 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -346,7 +346,7 @@ function WorkspaceMembersPage(props) {
             style={[styles.defaultModalContainer]}
         >
             <FullPageNotFoundView
-                shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
+                shouldShow={((_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData) || PolicyUtils.isPendingDeletePolicy(props.policy)}
                 subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             >
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index fa04f5cfc49e..f7907e56f1e5 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -105,7 +105,7 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
         >
             <FullPageNotFoundView
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
-                shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy)}
+                shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)}
                 subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'}
             >
                 <HeaderWithBackButton

From da5635cb42d6982ad82a5fb6b12fb9213b4829d3 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Tue, 19 Sep 2023 07:49:15 +0100
Subject: [PATCH 062/123] consolidate 'I am a Teacher' and 'Intro to School
 Principal' pages

---
 src/ROUTES.ts                                 |  2 +-
 .../AppNavigator/ModalStackNavigators.js      |  2 +-
 src/pages/TeachersUnite/ImTeacherPage.js      | 70 +++++++------------
 .../TeachersUnite/ImTeacherUpdateEmailPage.js | 54 ++++++++++++++
 .../TeachersUnite/IntroSchoolPrincipalPage.js |  1 +
 src/pages/TeachersUnite/SaveTheWorldPage.js   | 23 +-----
 6 files changed, 84 insertions(+), 68 deletions(-)
 create mode 100644 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 2c37116db395..feead4890114 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -139,8 +139,8 @@ export default {
     SEARCH: 'search',
     TEACHERS_UNITE: 'teachersunite',
     I_KNOW_A_TEACHER: 'teachersunite/i-know-a-teacher',
-    INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
     I_AM_A_TEACHER: 'teachersunite/i-am-a-teacher',
+    INTRO_SCHOOL_PRINCIPAL: 'teachersunite/intro-school-principal',
     DETAILS: 'details',
     getDetailsRoute: (login: string) => `details?login=${encodeURIComponent(login)}`,
     PROFILE: 'a/:accountID',
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 392781a777db..16d2e0733224 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -345,7 +345,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
     },
     {
         getComponent: () => {
-            const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/IntroSchoolPrincipalPage').default;
+            const IntroSchoolPrincipalPage = require('../../../pages/TeachersUnite/ImTeacherPage').default;
             return IntroSchoolPrincipalPage;
         },
         name: 'Intro_School_Principal',
diff --git a/src/pages/TeachersUnite/ImTeacherPage.js b/src/pages/TeachersUnite/ImTeacherPage.js
index dbeba700d208..a938abf81b79 100644
--- a/src/pages/TeachersUnite/ImTeacherPage.js
+++ b/src/pages/TeachersUnite/ImTeacherPage.js
@@ -1,54 +1,36 @@
 import React from 'react';
-import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithBackButton from '../../components/HeaderWithBackButton';
-import ROUTES from '../../ROUTES';
-import Navigation from '../../libs/Navigation/Navigation';
-import FixedFooter from '../../components/FixedFooter';
-import styles from '../../styles/styles';
-import Button from '../../components/Button';
-import * as Illustrations from '../../components/Icon/Illustrations';
-import variables from '../../styles/variables';
-import useLocalize from '../../hooks/useLocalize';
-import BlockingView from '../../components/BlockingViews/BlockingView';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as LoginUtils from '../../libs/LoginUtils';
+import ImTeacherUpdateEmailPage from './ImTeacherUpdateEmailPage';
+import IntroSchoolPrincipalPage from './IntroSchoolPrincipalPage';
 
-const propTypes = {};
+const propTypes = {
+    /** Current user session */
+    session: PropTypes.shape({
+        /** Current user primary login */
+        email: PropTypes.string.isRequired,
+    }),
+};
 
-const defaultProps = {};
+const defaultProps = {
+    session: {
+        email: null,
+    },
+};
 
-function ImTeacherPage() {
-    const {translate} = useLocalize();
-
-    return (
-        <ScreenWrapper>
-            <HeaderWithBackButton
-                title={translate('teachersUnitePage.iAmATeacher')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
-            />
-            <BlockingView
-                shouldShowLink
-                shouldEmbedLinkWithSubtitle
-                icon={Illustrations.EmailAddress}
-                title={translate('teachersUnitePage.updateYourEmail')}
-                subtitle={translate('teachersUnitePage.schoolMailAsDefault')}
-                linkKey="teachersUnitePage.contactMethods"
-                onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                iconWidth={variables.signInLogoWidthLargeScreen}
-                iconHeight={variables.lhnLogoWidth}
-            />
-            <FixedFooter style={[styles.flexGrow0]}>
-                <Button
-                    success
-                    accessibilityLabel={translate('teachersUnitePage.updateEmail')}
-                    text={translate('teachersUnitePage.updateEmail')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                />
-            </FixedFooter>
-        </ScreenWrapper>
-    );
+function ImTeacherPage(props) {
+    const isLoggedInEmailPublicDomain = LoginUtils.isEmailPublicDomain(props.session.email);
+    return isLoggedInEmailPublicDomain ? <ImTeacherUpdateEmailPage /> : <IntroSchoolPrincipalPage />;
 }
 
 ImTeacherPage.propTypes = propTypes;
 ImTeacherPage.defaultProps = defaultProps;
 ImTeacherPage.displayName = 'ImTeacherPage';
 
-export default ImTeacherPage;
+export default withOnyx({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(ImTeacherPage);
diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
new file mode 100644
index 000000000000..1ab0b7f40dc7
--- /dev/null
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import ScreenWrapper from '../../components/ScreenWrapper';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
+import ROUTES from '../../ROUTES';
+import Navigation from '../../libs/Navigation/Navigation';
+import FixedFooter from '../../components/FixedFooter';
+import styles from '../../styles/styles';
+import Button from '../../components/Button';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import variables from '../../styles/variables';
+import useLocalize from '../../hooks/useLocalize';
+import BlockingView from '../../components/BlockingViews/BlockingView';
+
+const propTypes = {};
+
+const defaultProps = {};
+
+function ImTeacherUpdateEmailPage() {
+    const {translate} = useLocalize();
+
+    return (
+        <ScreenWrapper>
+            <HeaderWithBackButton
+                title={translate('teachersUnitePage.iAmATeacher')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
+            />
+            <BlockingView
+                shouldShowLink
+                shouldEmbedLinkWithSubtitle
+                icon={Illustrations.EmailAddress}
+                title={translate('teachersUnitePage.updateYourEmail')}
+                subtitle={translate('teachersUnitePage.schoolMailAsDefault')}
+                linkKey="teachersUnitePage.contactMethods"
+                onLinkPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
+                iconWidth={variables.signInLogoWidthLargeScreen}
+                iconHeight={variables.lhnLogoWidth}
+            />
+            <FixedFooter style={[styles.flexGrow0]}>
+                <Button
+                    success
+                    accessibilityLabel={translate('teachersUnitePage.updateEmail')}
+                    text={translate('teachersUnitePage.updateEmail')}
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
+}
+
+ImTeacherUpdateEmailPage.propTypes = propTypes;
+ImTeacherUpdateEmailPage.defaultProps = defaultProps;
+ImTeacherUpdateEmailPage.displayName = 'ImTeacherUpdateEmailPage';
+
+export default ImTeacherUpdateEmailPage;
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index fe25c54cb8cc..f36a67da7c56 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -34,6 +34,7 @@ const defaultProps = {
 
 function IntroSchoolPrincipalPage(props) {
     const {translate} = useLocalize();
+
     /**
      * @param {Object} values
      * @param {String} values.firstName
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index 47c441ad934c..36c142710164 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -13,15 +13,9 @@ import Text from '../../components/Text';
 import MenuItem from '../../components/MenuItem';
 import IllustratedHeaderPageLayout from '../../components/IllustratedHeaderPageLayout';
 import * as LottieAnimations from '../../components/LottieAnimations';
-import * as LoginUtils from '../../libs/LoginUtils';
 import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
-    /** Current user session */
-    session: PropTypes.shape({
-        /** Current user primary login */
-        email: PropTypes.string.isRequired,
-    }),
     /** The list of this user's policies */
     policy: PropTypes.shape({
         /** The user's role in the policy */
@@ -30,25 +24,13 @@ const propTypes = {
 };
 
 const defaultProps = {
-    session: {
-        email: null,
-    },
     policy: {},
 };
 
 function SaveTheWorldPage(props) {
     const {translate} = useLocalize();
-    const isLoggedInEmailPublicDomain = LoginUtils.isEmailPublicDomain(props.session.email);
     const isTeacherAlreadyInvited = !_.isUndefined(props.policy) && props.policy.role === CONST.POLICY.ROLE.USER;
 
-    const handleNavigation = () => {
-        if (isLoggedInEmailPublicDomain) {
-            Navigation.navigate(ROUTES.I_AM_A_TEACHER);
-        } else {
-            Navigation.navigate(ROUTES.INTRO_SCHOOL_PRINCIPAL);
-        }
-    };
-
     return (
         <IllustratedHeaderPageLayout
             shouldShowBackButton
@@ -72,7 +54,7 @@ function SaveTheWorldPage(props) {
                 <MenuItem
                     shouldShowRightIcon
                     title={translate('teachersUnitePage.iAmATeacher')}
-                    onPress={handleNavigation}
+                    onPress={() => Navigation.navigate(ROUTES.I_AM_A_TEACHER)}
                 />
             )}
         </IllustratedHeaderPageLayout>
@@ -84,9 +66,6 @@ SaveTheWorldPage.defaultProps = defaultProps;
 SaveTheWorldPage.displayName = 'SaveTheWorldPage';
 
 export default withOnyx({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
     policy: {
         key: () => `${ONYXKEYS.COLLECTION.POLICY}${CONST.TEACHERS_UNITE.POLICY_ID}`,
     },

From 5707b9de7e468ba62ef81e13178092f31d590316 Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Sat, 20 May 2023 14:12:19 -0400
Subject: [PATCH 063/123] Increase FlatList batch size

---
 src/components/InvertedFlatList/BaseInvertedFlatList.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index d3fcda0ea5fd..0327e4e0b5b9 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -136,8 +136,10 @@ class BaseInvertedFlatList extends Component {
                 // Native platforms do not need to measure items and work fine without this.
                 // Web requires that items be measured or else crazy things happen when scrolling.
                 getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}
-                // We keep this property very low so that chat switching remains fast
-                maxToRenderPerBatch={1}
+                // Keep batch size relatively small for responsiveness, but not too small as it will cause
+                // excessive rendering. See https://github.com/Expensify/App/pull/19345 for performance testing
+                // of this value.
+                maxToRenderPerBatch={10}
                 windowSize={15}
 
                 // Commenting the line below as it breaks the unread indicator test

From d9dfaa734fcfa8151885810dac9c73872a83ab57 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 19 Sep 2023 11:29:48 +0200
Subject: [PATCH 064/123] sort prop types

---
 src/components/ReportActionItem/MoneyRequestView.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 97eb23f80eeb..386d8090d7c4 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -33,6 +33,10 @@ import OfflineWithFeedback from '../OfflineWithFeedback';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
+    /** Whether we should display the horizontal rule below the component */
+    shouldShowHorizontalRule: PropTypes.bool.isRequired,
+
+    /* Onyx Props */
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -42,16 +46,12 @@ const propTypes = {
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 
-    /* Onyx Props */
     /** Collection of categories attached to a policy */
     policyCategories: PropTypes.objectOf(categoryPropTypes),
 
     /** The transaction associated with the transactionThread */
     transaction: transactionPropTypes,
 
-    /** Whether we should display the horizontal rule below the component */
-    shouldShowHorizontalRule: PropTypes.bool.isRequired,
-
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 

From 4f875ea1641b11fa676b5bafbd3c0f3facd2d1fc Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 19 Sep 2023 11:37:24 +0200
Subject: [PATCH 065/123] simplify helpers

---
 src/libs/OptionsListUtils.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 5e44babe1083..ff318d4fd1e5 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -605,9 +605,7 @@ function isCurrentUser(userDetails) {
  * @returns {Boolean}
  */
 function getEnabledCategoriesCount(options) {
-    return _.chain(options)
-        .filter((option) => Boolean(option.enabled))
-        .value().length;
+    return _.filter(options, (option) => option.enabled).length;
 }
 
 /**
@@ -619,7 +617,7 @@ function getEnabledCategoriesCount(options) {
  * @returns {Boolean}
  */
 function hasEnabledOptions(options) {
-    return _.some(options, (option) => Boolean(option.enabled));
+    return _.some(options, (option) => option.enabled);
 }
 
 /**

From d962ce18928ab774f8f50e26a77c97f5d9e3b96e Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 19 Sep 2023 11:37:41 +0200
Subject: [PATCH 066/123] create a handler

---
 src/pages/EditRequestCategoryPage.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
index ba94c2b40800..b1ee6f3384f6 100644
--- a/src/pages/EditRequestCategoryPage.js
+++ b/src/pages/EditRequestCategoryPage.js
@@ -20,6 +20,12 @@ const propTypes = {
 function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
     const {translate} = useLocalize();
 
+    const selectCategory = (category) => {
+        onSubmit({
+            category: category.searchText,
+        });
+    };
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -33,11 +39,7 @@ function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
             <CategoryPicker
                 selectedCategory={defaultCategory}
                 policyID={policyID}
-                onSubmit={(category) =>
-                    onSubmit({
-                        category: category.searchText,
-                    })
-                }
+                onSubmit={selectCategory}
             />
         </ScreenWrapper>
     );

From 72bd7e84f032a9c053adfba33a58e9b30ba710ed Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 19 Sep 2023 11:46:59 +0200
Subject: [PATCH 067/123] reuse iuo props

---
 src/pages/iou/MoneyRequestCategoryPage.js | 9 ++++-----
 src/pages/iou/propTypes/index.js          | 4 ++++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index adba5755496d..92934a505a04 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -11,6 +11,7 @@ import CategoryPicker from '../../components/CategoryPicker';
 import ONYXKEYS from '../../ONYXKEYS';
 import reportPropTypes from '../reportPropTypes';
 import * as IOU from '../../libs/actions/IOU';
+import {iouPropTypes, iouDefaultProps} from './propTypes';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -25,19 +26,17 @@ const propTypes = {
         }),
     }).isRequired,
 
+    /* Onyx Props */
     /** The report currently being used */
     report: reportPropTypes,
 
-    /* Onyx Props */
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    iou: PropTypes.shape({
-        category: PropTypes.string.isRequired,
-    }),
+    iou: iouPropTypes,
 };
 
 const defaultProps = {
     report: {},
-    iou: {},
+    iou: iouDefaultProps,
 };
 
 function MoneyRequestCategoryPage({route, report, iou}) {
diff --git a/src/pages/iou/propTypes/index.js b/src/pages/iou/propTypes/index.js
index 5ecd00d11876..586f8424a2c2 100644
--- a/src/pages/iou/propTypes/index.js
+++ b/src/pages/iou/propTypes/index.js
@@ -18,6 +18,9 @@ const iouPropTypes = PropTypes.shape({
     /** The merchant name */
     merchant: PropTypes.string,
 
+    /** The category name */
+    category: PropTypes.string,
+
     /** The tag */
     tag: PropTypes.string,
 
@@ -37,6 +40,7 @@ const iouDefaultProps = {
     currency: CONST.CURRENCY.USD,
     comment: '',
     merchant: '',
+    category: '',
     tag: '',
     created: '',
     participants: [],

From 37d67702d350aaa6dca47ae274e8e4e1529562eb Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 19 Sep 2023 11:57:36 +0200
Subject: [PATCH 068/123] clarify props

---
 src/components/ReportActionItem/MoneyRequestView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 386d8090d7c4..0aba850b2145 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -33,6 +33,9 @@ import OfflineWithFeedback from '../OfflineWithFeedback';
 import categoryPropTypes from '../categoryPropTypes';
 
 const propTypes = {
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
     /** Whether we should display the horizontal rule below the component */
     shouldShowHorizontalRule: PropTypes.bool.isRequired,
 
@@ -40,9 +43,6 @@ const propTypes = {
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
     parentReport: iouReportPropTypes,
 

From 3353869cc4725020a9205be609395b42ce7b0af9 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Tue, 19 Sep 2023 11:58:04 +0200
Subject: [PATCH 069/123] clarify return type

---
 src/libs/OptionsListUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index ff318d4fd1e5..6c17bad76dd5 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -602,7 +602,7 @@ function isCurrentUser(userDetails) {
  * @param {Object[]} options - an initial strings array
  * @param {Boolean} options[].enabled - a flag to enable/disable option in a list
  * @param {String} options[].name - a name of an option
- * @returns {Boolean}
+ * @returns {Number}
  */
 function getEnabledCategoriesCount(options) {
     return _.filter(options, (option) => option.enabled).length;

From d903534925e7317cc03da0f989d87dc5bb24a090 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 16:19:38 +0530
Subject: [PATCH 070/123] created platform based files

---
 src/components/MenuItem.js                    | 20 ++++------------
 .../MenuItemRenderHTMLTitle/index.js          | 23 +++++++++++++++++++
 .../MenuItemRenderHTMLTitle/index.native.js   | 17 ++++++++++++++
 .../MenuItemRenderHTMLTitle/propTypes.js      |  8 +++++++
 4 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/components/MenuItemRenderHTMLTitle/index.js
 create mode 100644 src/components/MenuItemRenderHTMLTitle/index.native.js
 create mode 100644 src/components/MenuItemRenderHTMLTitle/propTypes.js

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index bb4eeb7a18ac..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -24,11 +24,7 @@ import variables from '../styles/variables';
 import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
-import RenderHTML from './RenderHTML';
-import getPlatform from '../libs/getPlatform';
-
-const platform = getPlatform();
-const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
+import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
 
 const propTypes = menuItemPropTypes;
 
@@ -251,16 +247,10 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) &&
-                                                (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) &&
-                                                (isNative ? (
-                                                    <RenderHTML html={getProcessedTitle} />
-                                                ) : (
-                                                    <View style={styles.chatItemMessage}>
-                                                        <RenderHTML html={getProcessedTitle} />
-                                                    </View>
-                                                ))}
-                                            {!props.shouldRenderAsHTML && !html.length && Boolean(props.title) && (
+                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                            )}
+                                            {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
                                                     style={titleTextStyle}
                                                     numberOfLines={props.numberOfLinesTitle || undefined}
diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
new file mode 100644
index 000000000000..e4f0b27c4f09
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {View} from 'react-native';
+import styles from '../../styles/styles';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return (
+        <View style={styles.chatItemMessage}>
+            <RenderHTML html={props.title} />
+        </View>
+    );
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/index.native.js b/src/components/MenuItemRenderHTMLTitle/index.native.js
new file mode 100644
index 000000000000..b3dff8d77eff
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/index.native.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import RenderHTML from '../RenderHTML';
+import menuItemRenderHTMLTitlePropTypes from './propTypes';
+
+const propTypes = menuItemRenderHTMLTitlePropTypes;
+
+const defaultProps = {};
+
+function MenuItemRenderHTMLTitle(props) {
+    return <RenderHTML html={props.title} />;
+}
+
+MenuItemRenderHTMLTitle.propTypes = propTypes;
+MenuItemRenderHTMLTitle.defaultProps = defaultProps;
+MenuItemRenderHTMLTitle.displayName = 'MenuItemRenderHTMLTitle';
+
+export default MenuItemRenderHTMLTitle;
diff --git a/src/components/MenuItemRenderHTMLTitle/propTypes.js b/src/components/MenuItemRenderHTMLTitle/propTypes.js
new file mode 100644
index 000000000000..68e279eb28c3
--- /dev/null
+++ b/src/components/MenuItemRenderHTMLTitle/propTypes.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Processed title to display for the MenuItem */
+    title: PropTypes.string.isRequired,
+};
+
+export default propTypes;

From 1da55754141df37fbe0d311906a4711bfcad0fe7 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Tue, 19 Sep 2023 17:41:16 +0200
Subject: [PATCH 071/123] [TS migration] Migrate 'MoveToIndexedDB.js' lib to
 TypeScript

---
 src/libs/migrateOnyx.js                |  2 -
 src/libs/migrations/MoveToIndexedDB.js | 75 --------------------------
 tests/unit/MigrationTest.js            | 68 -----------------------
 3 files changed, 145 deletions(-)
 delete mode 100644 src/libs/migrations/MoveToIndexedDB.js

diff --git a/src/libs/migrateOnyx.js b/src/libs/migrateOnyx.js
index 9389a9b66fbc..c1129817ef0a 100644
--- a/src/libs/migrateOnyx.js
+++ b/src/libs/migrateOnyx.js
@@ -3,7 +3,6 @@ import Log from './Log';
 import AddEncryptedAuthToken from './migrations/AddEncryptedAuthToken';
 import RenameActiveClientsKey from './migrations/RenameActiveClientsKey';
 import RenamePriorityModeKey from './migrations/RenamePriorityModeKey';
-import MoveToIndexedDB from './migrations/MoveToIndexedDB';
 import RenameExpensifyNewsStatus from './migrations/RenameExpensifyNewsStatus';
 import AddLastVisibleActionCreated from './migrations/AddLastVisibleActionCreated';
 import KeyReportActionsByReportActionID from './migrations/KeyReportActionsByReportActionID';
@@ -16,7 +15,6 @@ export default function () {
     return new Promise((resolve) => {
         // Add all migrations to an array so they are executed in order
         const migrationPromises = [
-            MoveToIndexedDB,
             RenameActiveClientsKey,
             RenamePriorityModeKey,
             AddEncryptedAuthToken,
diff --git a/src/libs/migrations/MoveToIndexedDB.js b/src/libs/migrations/MoveToIndexedDB.js
deleted file mode 100644
index 1f62985ed7bf..000000000000
--- a/src/libs/migrations/MoveToIndexedDB.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import _ from 'underscore';
-import Onyx from 'react-native-onyx';
-
-import Log from '../Log';
-import ONYXKEYS from '../../ONYXKEYS';
-import getPlatform from '../getPlatform';
-import CONST from '../../CONST';
-
-/**
- * Test whether the current platform is eligible for migration
- * This migration is only applicable for desktop/web
- * We're also skipping logged-out users as there would be nothing to migrate
- *
- * @returns {Boolean}
- */
-function shouldMigrate() {
-    const isTargetPlatform = _.contains([CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP], getPlatform());
-    if (!isTargetPlatform) {
-        Log.info('[Migrate Onyx] Skipped migration MoveToIndexedDB (Not applicable to current platform)');
-        return false;
-    }
-
-    const session = window.localStorage.getItem(ONYXKEYS.SESSION);
-    if (!session || !session.includes('authToken')) {
-        Log.info('[Migrate Onyx] Skipped migration MoveToIndexedDB (Not applicable to logged out users)');
-        return false;
-    }
-
-    return true;
-}
-
-/**
- * Find Onyx data and move it from local storage to IndexedDB
- *
- * @returns {Promise<void>}
- */
-function applyMigration() {
-    const onyxKeys = new Set(_.values(ONYXKEYS));
-    const onyxCollections = _.values(ONYXKEYS.COLLECTION);
-
-    // Prepare a key-value dictionary of keys eligible for migration
-    // Targeting existing Onyx keys in local storage or any key prefixed by a collection name
-    const dataToMigrate = _.chain(window.localStorage)
-        .keys()
-        .filter((key) => onyxKeys.has(key) || _.some(onyxCollections, (collectionKey) => key.startsWith(collectionKey)))
-        .map((key) => [key, JSON.parse(window.localStorage.getItem(key))])
-        .object()
-        .value();
-
-    // Move the data in Onyx and only then delete it from local storage
-    return Onyx.multiSet(dataToMigrate).then(() => _.each(dataToMigrate, (value, key) => window.localStorage.removeItem(key)));
-}
-
-/**
- * Migrate Web/Desktop storage to IndexedDB
- *
- * @returns {Promise}
- */
-export default function () {
-    if (!shouldMigrate()) {
-        return Promise.resolve();
-    }
-
-    return new Promise((resolve, reject) => {
-        applyMigration()
-            .then(() => {
-                Log.info('[Migrate Onyx] Ran migration MoveToIndexedDB');
-                resolve();
-            })
-            .catch((e) => {
-                Log.alert('[Migrate Onyx] MoveToIndexedDB failed', {error: e.message, stack: e.stack}, false);
-                reject(e);
-            });
-    });
-}
diff --git a/tests/unit/MigrationTest.js b/tests/unit/MigrationTest.js
index 0171ee640226..71f7d57fce36 100644
--- a/tests/unit/MigrationTest.js
+++ b/tests/unit/MigrationTest.js
@@ -1,11 +1,8 @@
 import Onyx from 'react-native-onyx';
 import _ from 'underscore';
 import waitForPromisesToResolve from '../utils/waitForPromisesToResolve';
-import CONST from '../../src/CONST';
 import Log from '../../src/libs/Log';
-import getPlatform from '../../src/libs/getPlatform';
 import AddLastVisibleActionCreated from '../../src/libs/migrations/AddLastVisibleActionCreated';
-import MoveToIndexedDB from '../../src/libs/migrations/MoveToIndexedDB';
 import KeyReportActionsByReportActionID from '../../src/libs/migrations/KeyReportActionsByReportActionID';
 import PersonalDetailsByAccountID from '../../src/libs/migrations/PersonalDetailsByAccountID';
 import CheckForPreviousReportActionID from '../../src/libs/migrations/CheckForPreviousReportActionID';
@@ -29,71 +26,6 @@ describe('Migrations', () => {
         return waitForPromisesToResolve();
     });
 
-    describe('MoveToIndexedDb', () => {
-        let mockMultiSet;
-        beforeEach(() => {
-            getPlatform.mockImplementation(() => CONST.PLATFORM.WEB);
-            mockMultiSet = jest.spyOn(Onyx, 'multiSet').mockImplementation(() => Promise.resolve());
-            localStorage.clear();
-        });
-
-        afterAll(() => {
-            mockMultiSet.mockRestore(Onyx, 'multiSet');
-            localStorage.clear();
-        });
-
-        it('Should do nothing for non web/desktop platforms', () => {
-            // Given the migration is not running on web or desktop
-            getPlatform.mockImplementation(() => CONST.PLATFORM.ANDROID);
-
-            // When the migration runs
-            return MoveToIndexedDB().then(() => {
-                // Then we don't expect any storage calls
-                expect(Onyx.multiSet).not.toHaveBeenCalled();
-            });
-        });
-
-        it('Should do nothing when there is no old session data', () => {
-            // Given no session in old storage medium (localStorage)
-            localStorage.removeItem(ONYXKEYS.SESSION);
-
-            // When the migration runs
-            return MoveToIndexedDB().then(() => {
-                // Then we don't expect any storage calls
-                expect(Onyx.multiSet).not.toHaveBeenCalled();
-            });
-        });
-
-        it('Should migrate Onyx keys in localStorage to (new) Onyx', () => {
-            // Given some old data exists in storage
-            const data = {
-                [ONYXKEYS.SESSION]: {authToken: 'mock-token', loading: false},
-                [ONYXKEYS.ACCOUNT]: {email: 'test@mock.com'},
-                [ONYXKEYS.NETWORK]: {isOffline: true},
-            };
-
-            _.forEach(data, (value, key) => localStorage.setItem(key, JSON.stringify(value)));
-
-            // When the migration runs
-            return MoveToIndexedDB().then(() => {
-                // Then multiset should be called with all the data available in localStorage
-                expect(Onyx.multiSet).toHaveBeenCalledWith(data);
-            });
-        });
-
-        it('Should not clear non Onyx keys from localStorage', () => {
-            // Given some Onyx and non-Onyx data exists in localStorage
-            localStorage.setItem(ONYXKEYS.SESSION, JSON.stringify({authToken: 'mock-token'}));
-            localStorage.setItem('non-onyx-item', 'MOCK');
-
-            // When the migration runs
-            return MoveToIndexedDB().then(() => {
-                // Then non-Onyx data should remain in localStorage
-                expect(localStorage.getItem('non-onyx-item')).toEqual('MOCK');
-            });
-        });
-    });
-
     describe('AddLastVisibleActionCreated', () => {
         it('Should add lastVisibleActionCreated wherever lastActionCreated currently is', () =>
             Onyx.multiSet({

From 83e24ec882a668ee71b6664a2354c301dd9bc108 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 21:59:53 +0530
Subject: [PATCH 072/123] Fixed Overflow

---
 src/components/MenuItem.js | 6 ++++--
 src/styles/styles.js       | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 268351699567..824b23c84898 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useEffect, useMemo} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
@@ -248,7 +248,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                <ScrollView style={styles.menuItemHtmlRendererScrollView}>
+                                                    <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                </ScrollView>
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a748a0fb353b..2e411e7e63df 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3988,6 +3988,10 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
+
+    menuItemHtmlRendererScrollView: {
+        maxHeight: 115,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From 0ad4fbaaea7f80d38914b8ab0c3f4f8e4a31faff Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 22:12:38 +0530
Subject: [PATCH 073/123] Fixed app not scrolling

---
 src/components/MenuItem.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 824b23c84898..c435d6330c15 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,6 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
+import {PressableWithoutFeedback} from './Pressable';
 
 const propTypes = menuItemPropTypes;
 
@@ -249,7 +250,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
                                                 <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                    <PressableWithoutFeedback>
+                                                        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
+                                                    </PressableWithoutFeedback>
                                                 </ScrollView>
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (

From 120eb74916bdd35ce88225d463dd27cff773ede9 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Tue, 19 Sep 2023 22:23:38 +0530
Subject: [PATCH 074/123] fixed eslint

---
 src/components/MenuItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index c435d6330c15..12dbbf1e4903 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -25,7 +25,7 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
-import {PressableWithoutFeedback} from './Pressable';
+import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 const propTypes = menuItemPropTypes;
 
@@ -250,7 +250,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
                                                 <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <PressableWithoutFeedback>
+                                                    <PressableWithoutFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}>
                                                         <MenuItemRenderHTMLTitle title={getProcessedTitle} />
                                                     </PressableWithoutFeedback>
                                                 </ScrollView>

From b3d2a0cc67d43ac6f35de668d4e1e4bf10fe27eb Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 20 Sep 2023 10:47:25 +0700
Subject: [PATCH 075/123] resolve leftover conflict

---
 src/pages/home/ReportScreen.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index a8438e0a4f09..794471864aa4 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -352,7 +352,7 @@ function ReportScreen({
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage = useMemo(
-        () => (!_.isEmpty(report) && !isDefaultReport && !report.reportID && !isOptimisticDelete && !report.isLoadingReportActions && !isLoading) || shouldHideReport,
+        () => (!_.isEmpty(report) && !isDefaultReport && !report.reportID && !isOptimisticDelete && !report.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport,
         [report, isLoading, shouldHideReport, isDefaultReport, isOptimisticDelete],
     );
 
@@ -368,11 +368,7 @@ function ReportScreen({
                 shouldEnableKeyboardAvoidingView={isTopMostReportId}
             >
                 <FullPageNotFoundView
-<<<<<<< HEAD
-                    shouldShow={(!report.reportID && !report.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport}
-=======
                     shouldShow={shouldShowNotFoundPage}
->>>>>>> d0b49122d07ed51b974acce3981883e9b049a30c
                     subtitleKey="notFound.noAccess"
                     shouldShowCloseButton={false}
                     shouldShowBackButton={isSmallScreenWidth}

From 91c533e48386812078e37618530e08237a5be9aa Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 20 Sep 2023 10:48:06 +0700
Subject: [PATCH 076/123] resolve leftover conflict

---
 src/pages/home/ReportScreen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 794471864aa4..213f004ac416 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -353,7 +353,7 @@ function ReportScreen({
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage = useMemo(
         () => (!_.isEmpty(report) && !isDefaultReport && !report.reportID && !isOptimisticDelete && !report.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport,
-        [report, isLoading, shouldHideReport, isDefaultReport, isOptimisticDelete],
+        [report, isLoading, shouldHideReport, isDefaultReport, isOptimisticDelete, userLeavingStatus],
     );
 
     return (

From 89263770bad930885e016f1ce3d1449d30174656 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 20 Sep 2023 10:50:17 +0700
Subject: [PATCH 077/123] remove unnecessary code

---
 src/pages/home/ReportScreen.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 213f004ac416..6c11dcc01983 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -290,10 +290,6 @@ function ReportScreen({
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
         return () => {
-            if (!unsubscribeVisibilityListener) {
-                return;
-            }
-            unsubscribeVisibilityListener();
             if (didSubscribeToReportLeavingEvents) {
                 Report.unsubscribeFromLeavingRoomReportChannel(report.reportID);
             }

From b2303b253db992b108842ae273f770592b2d2a7d Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 20 Sep 2023 10:55:54 +0700
Subject: [PATCH 078/123] change didSubscribeToReportLeavingEvents check to
 early return

---
 src/pages/home/ReportScreen.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 6c11dcc01983..8a9f50518dc8 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -290,9 +290,11 @@ function ReportScreen({
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
         return () => {
-            if (didSubscribeToReportLeavingEvents) {
-                Report.unsubscribeFromLeavingRoomReportChannel(report.reportID);
+            if (!didSubscribeToReportLeavingEvents) {
+                return;
             }
+
+            Report.unsubscribeFromLeavingRoomReportChannel(report.reportID);
         };
 
         // I'm disabling the warning, as it expects to use exhaustive deps, even though we want this useEffect to run only on the first render.

From 00ddd452ee93d0df71c7510df540a873a73e2baa Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Wed, 20 Sep 2023 15:05:54 +0700
Subject: [PATCH 079/123] Include newest version of eslint-config-expensify =
 2.0.39

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 40e2ca717931..8e0b493b495e 100644
--- a/package.json
+++ b/package.json
@@ -232,7 +232,7 @@
     "electron-builder": "24.6.4",
     "eslint": "^7.6.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-expensify": "^2.0.38",
+    "eslint-config-expensify": "^2.0.39",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsdoc": "^46.2.6",

From abd2d25dbdd9cf3e699a6d0d944e06e24dfc30f3 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Wed, 20 Sep 2023 11:43:50 +0200
Subject: [PATCH 080/123] re-test


From b0dd5f61fe3114917bd2aa0a125d16e6eebad044 Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Wed, 20 Sep 2023 16:58:17 +0700
Subject: [PATCH 081/123] Add `// eslint-disable-next-line` for Affected files

---
 .eslintrc.js                                      | 1 +
 src/components/LHNOptionsList/OptionRowLHNData.js | 2 ++
 src/pages/EditRequestPage.js                      | 1 +
 src/pages/iou/MoneyRequestTagPage.js              | 2 ++
 src/pages/iou/steps/MoneyRequestConfirmPage.js    | 2 ++
 5 files changed, 8 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index ac4546567833..79239a32395c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,6 +39,7 @@ module.exports = {
             files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
             rules: {
                 'rulesdir/onyx-props-must-have-default': 'off',
+                'rulesdir/no-multiple-onyx-in-file': 'error',
                 'react-native-a11y/has-accessibility-hint': ['off'],
                 'react-native-a11y/has-valid-accessibility-descriptors': [
                     'error',
diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js
index 2c51d6332946..37bc4df9ea3a 100644
--- a/src/components/LHNOptionsList/OptionRowLHNData.js
+++ b/src/components/LHNOptionsList/OptionRowLHNData.js
@@ -195,6 +195,7 @@ export default React.memo(
                 key: ONYXKEYS.NVP_PREFERRED_LOCALE,
             },
         }),
+        // eslint-disable-next-line
         withOnyx({
             parentReportActions: {
                 key: ({fullReport}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${fullReport.parentReportID}`,
@@ -209,6 +210,7 @@ export default React.memo(
             // However, performance overhead of this is minimized by using memos inside the component.
             receiptTransactions: {key: ONYXKEYS.COLLECTION.TRANSACTION},
         }),
+        // eslint-disable-next-line
         withOnyx({
             transaction: {
                 key: ({fullReport, parentReportActions}) =>
diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js
index 2123f1bf10da..466c5e1a1df3 100644
--- a/src/pages/EditRequestPage.js
+++ b/src/pages/EditRequestPage.js
@@ -194,6 +194,7 @@ export default compose(
             key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`,
         },
     }),
+    // eslint-disable-next-line
     withOnyx({
         parentReport: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`,
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index a1795d50df8a..5247dbd3f672 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -91,12 +91,14 @@ export default compose(
             key: ONYXKEYS.IOU,
         },
     }),
+    //  eslint-disable-next-line 
     withOnyx({
         report: {
             // Fetch report ID from IOU participants if no report ID is set in route
             key: ({route, iou}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '') || lodashGet(iou, 'participants.0.reportID', '')}`,
         },
     }),
+    //  eslint-disable-next-line
     withOnyx({
         policyTags: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 224f661915d8..cc37ee6de818 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -350,6 +350,7 @@ export default compose(
             key: ONYXKEYS.IOU,
         },
     }),
+    // eslint-disable-next-line
     withOnyx({
         report: {
             key: ({route, iou}) => {
@@ -369,6 +370,7 @@ export default compose(
             key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
         },
     }),
+    // eslint-disable-next-line
     withOnyx({
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,

From 5cdc7fb71431e3d592999d49efba4e9beb43e462 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Wed, 20 Sep 2023 14:59:46 +0200
Subject: [PATCH 082/123] clarify comment

---
 src/libs/ReportUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 553cb0243f52..ed2e85a4ff11 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1649,7 +1649,7 @@ function getRootParentReport(report) {
         return {};
     }
 
-    // Returns the founded root report, because it does not have a parentReportID
+    // Returns the current report as the root report, because it does not have a parentReportID
     if (!report.parentReportID) {
         return report;
     }

From ce2907d21401cf6c713940e209d8539316e642f6 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Wed, 20 Sep 2023 15:06:46 +0200
Subject: [PATCH 083/123] perform conditions

---
 src/components/ReportActionItem/MoneyRequestView.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index d8ec67ae59da..178cab75a0c2 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import lodashValues from 'lodash/values';
 import PropTypes from 'prop-types';
 import reportPropTypes from '../../pages/reportPropTypes';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -90,8 +90,7 @@ function MoneyRequestView({betas, report, parentReport, policyCategories, should
     // A flag for verifying that the current report is a sub-report of a workspace chat
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
     // A flag for showing categories
-    const shouldShowCategory =
-        isPolicyExpenseChat && Permissions.canUseCategories(betas) && (!_.isEmpty(transactionCategory) || OptionsListUtils.hasEnabledOptions(_.values(policyCategories)));
+    const shouldShowCategory = isPolicyExpenseChat && Permissions.canUseCategories(betas) && (transactionCategory || OptionsListUtils.hasEnabledOptions(lodashValues(policyCategories)));
 
     let description = `${translate('iou.amount')} • ${translate('iou.cash')}`;
     if (isSettled) {

From 4d939236c41fcedc127824e44872b77d03c111ab Mon Sep 17 00:00:00 2001
From: honnamkuan <honnamkuan@gmail.com>
Date: Wed, 20 Sep 2023 21:12:11 +0800
Subject: [PATCH 084/123] refactor lodashGet usages to const

---
 src/libs/ReportUtils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 8bd9cedcf535..9d3dac5a6e33 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -943,7 +943,8 @@ function getIconsForParticipants(participants, personalDetails) {
     for (let i = 0; i < participantsList.length; i++) {
         const accountID = participantsList[i];
         const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
-        participantDetails.push([accountID, lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], ''), avatarSource]);
+        const displayNameLogin = lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], '');
+        participantDetails.push([accountID, displayNameLogin, avatarSource]);
     }
 
     const sortedParticipantDetails = _.chain(participantDetails)

From bd716a534ba9a5a1eb3446b44c619899449ec1a8 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Wed, 20 Sep 2023 15:52:29 +0200
Subject: [PATCH 085/123] Fix prettier

---
 src/libs/migrateOnyx.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/libs/migrateOnyx.js b/src/libs/migrateOnyx.js
index 3e92bb17c842..8ade54c0b5d2 100644
--- a/src/libs/migrateOnyx.js
+++ b/src/libs/migrateOnyx.js
@@ -13,14 +13,7 @@ export default function () {
 
     return new Promise((resolve) => {
         // Add all migrations to an array so they are executed in order
-        const migrationPromises = [
-            RenameActiveClientsKey,
-            RenamePriorityModeKey,
-            AddEncryptedAuthToken,
-            RenameExpensifyNewsStatus,
-            AddLastVisibleActionCreated,
-            PersonalDetailsByAccountID,
-        ];
+        const migrationPromises = [RenameActiveClientsKey, RenamePriorityModeKey, AddEncryptedAuthToken, RenameExpensifyNewsStatus, AddLastVisibleActionCreated, PersonalDetailsByAccountID];
 
         // Reduce all promises down to a single promise. All promises run in a linear fashion, waiting for the
         // previous promise to finish before moving onto the next one.

From 8b438b5931843c9bf31406aac1876954e215fc65 Mon Sep 17 00:00:00 2001
From: Mahesh <maheshmahi19@outlook.com>
Date: Wed, 20 Sep 2023 22:38:55 +0530
Subject: [PATCH 086/123] fix transition of profiles on request confirmation
 page

---
 src/pages/ProfilePage.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index b515da04b7be..47eb44de6f91 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -99,13 +99,6 @@ const getPhoneNumber = (details) => {
 function ProfilePage(props) {
     const accountID = Number(lodashGet(props.route.params, 'accountID', 0));
 
-    // eslint-disable-next-line rulesdir/prefer-early-return
-    useEffect(() => {
-        if (ValidationUtils.isValidAccountRoute(accountID)) {
-            PersonalDetails.openPublicProfilePage(accountID);
-        }
-    }, [accountID]);
-
     const details = lodashGet(props.personalDetails, accountID, ValidationUtils.isValidAccountRoute(accountID) ? {} : {isloading: false});
 
     const displayName = details.displayName ? details.displayName : props.translate('common.hidden');
@@ -143,6 +136,12 @@ function ProfilePage(props) {
 
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
+    useEffect(() => {
+        if (ValidationUtils.isValidAccountRoute(accountID) && !hasMinimumDetails) {
+            PersonalDetails.openPublicProfilePage(accountID);
+        }
+    }, [accountID, hasMinimumDetails]);
+
     return (
         <ScreenWrapper>
             <HeaderWithBackButton

From 0e2e9effe13bb76d82af6654cd2de8c89bdb4c26 Mon Sep 17 00:00:00 2001
From: Mahesh <maheshmahi19@outlook.com>
Date: Wed, 20 Sep 2023 23:32:19 +0530
Subject: [PATCH 087/123] fix lint error

---
 src/pages/ProfilePage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 47eb44de6f91..36fafa94d097 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -136,6 +136,7 @@ function ProfilePage(props) {
 
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
+    // eslint-disable-next-line rulesdir/prefer-early-return
     useEffect(() => {
         if (ValidationUtils.isValidAccountRoute(accountID) && !hasMinimumDetails) {
             PersonalDetails.openPublicProfilePage(accountID);

From 2b020a2921148660a98e212cf0ef6fe4cbe1f983 Mon Sep 17 00:00:00 2001
From: Christoph Pader <christoph.pader@outlook.com>
Date: Wed, 20 Sep 2023 20:42:43 +0200
Subject: [PATCH 088/123] chore: add yalc to gitignore

---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index aae9baad529f..d3b4daac04d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -107,3 +107,7 @@ tsconfig.tsbuildinfo
 
 # Workflow test logs
 /workflow_tests/logs/
+
+# Yalc
+.yalc
+yalc.lock

From de9f1e5cae388819947af025d1079bc3e3efe122 Mon Sep 17 00:00:00 2001
From: Bartosz Grajdek <bartosz.grajdek@swmansion.com>
Date: Wed, 20 Sep 2023 23:44:01 +0200
Subject: [PATCH 089/123] Improve handling for window.matches

---
 src/libs/DeviceCapabilities/canUseTouchScreen/index.ts | 2 +-
 src/libs/DeviceCapabilities/hasHoverSupport/index.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
index 72798159e36c..9e21f5a42b5d 100644
--- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
+++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts
@@ -21,7 +21,7 @@ const canUseTouchScreen: CanUseTouchScreen = () => {
         hasTouchScreen = (navigator as ExtendedNavigator).msMaxTouchPoints > 0;
     } else {
         // Same case as for Navigator - TypeScript thinks that matchMedia is obligatory property of window although it may not be
-        const mQ = (window as Partial<Window & typeof globalThis>).matchMedia && matchMedia('(pointer:coarse)');
+        const mQ = window.matchMedia?.('(pointer:coarse)');
         if (mQ && mQ.media === '(pointer:coarse)') {
             hasTouchScreen = !!mQ.matches;
         } else if ('orientation' in window) {
diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
index df62e6681548..1ff0f461db69 100644
--- a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
+++ b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts
@@ -3,6 +3,6 @@ import HasHoverSupport from './types';
 /**
  * Allows us to identify whether the platform is hoverable.
  */
-const hasHoverSupport: HasHoverSupport = () => window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+const hasHoverSupport: HasHoverSupport = () => window.matchMedia?.('(hover: hover) and (pointer: fine)').matches;
 
 export default hasHoverSupport;

From 00df2fcca20a0824f8ad9578ef99312fa43631f6 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:39:54 +0530
Subject: [PATCH 090/123] fix: cursor issue

---
 src/components/MenuItemRenderHTMLTitle/index.js |  2 +-
 src/styles/styles.js                            | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItemRenderHTMLTitle/index.js b/src/components/MenuItemRenderHTMLTitle/index.js
index e4f0b27c4f09..f91e70dc1249 100644
--- a/src/components/MenuItemRenderHTMLTitle/index.js
+++ b/src/components/MenuItemRenderHTMLTitle/index.js
@@ -10,7 +10,7 @@ const defaultProps = {};
 
 function MenuItemRenderHTMLTitle(props) {
     return (
-        <View style={styles.chatItemMessage}>
+        <View style={styles.renderHTMLTitle}>
             <RenderHTML html={props.title} />
         </View>
     );
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 2e411e7e63df..b218a2eb435b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1661,6 +1661,16 @@ const styles = (theme) => ({
         ...wordBreak.breakWord,
     },
 
+    renderHTMLTitle: {
+        color: theme.text,
+        fontSize: variables.fontSizeNormal,
+        fontFamily: fontFamily.EXP_NEUE,
+        lineHeight: variables.lineHeightXLarge,
+        maxWidth: '100%',
+        ...whiteSpace.preWrap,
+        ...wordBreak.breakWord,
+    },
+
     chatItemComposeWithFirstRow: {
         minHeight: 90,
     },

From 1e1b83ce51f2b75d768cf78a234d05d04d373927 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:41:43 +0530
Subject: [PATCH 091/123] Removed extra scrollview and style

---
 src/components/MenuItem.js | 9 ++-------
 src/styles/styles.js       | 4 ----
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 12dbbf1e4903..268351699567 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useEffect, useMemo} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Text from './Text';
 import styles from '../styles/styles';
@@ -25,7 +25,6 @@ import * as Session from '../libs/actions/Session';
 import Hoverable from './Hoverable';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import MenuItemRenderHTMLTitle from './MenuItemRenderHTMLTitle';
-import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 
 const propTypes = menuItemPropTypes;
 
@@ -249,11 +248,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                             {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
-                                                <ScrollView style={styles.menuItemHtmlRendererScrollView}>
-                                                    <PressableWithoutFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.ADJUSTABLE}>
-                                                        <MenuItemRenderHTMLTitle title={getProcessedTitle} />
-                                                    </PressableWithoutFeedback>
-                                                </ScrollView>
+                                                <MenuItemRenderHTMLTitle title={getProcessedTitle} />
                                             )}
                                             {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
                                                 <Text
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b218a2eb435b..54df5b331690 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3998,10 +3998,6 @@ const styles = (theme) => ({
         height: 30,
         width: '100%',
     },
-
-    menuItemHtmlRendererScrollView: {
-        maxHeight: 115,
-    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument

From 04c6a9733505bc735abb5088f10cd7267ee504d9 Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 04:48:14 +0530
Subject: [PATCH 092/123] fix scroll at new task page

---
 src/pages/tasks/NewTaskPage.js | 88 +++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 9fb600e40753..1696961764ca 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
@@ -149,50 +149,52 @@ function NewTaskPage(props) {
                         Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
                     }}
                 />
-                <View style={[styles.containerWithSpaceBetween]}>
-                    <View style={styles.mb5}>
-                        <MenuItemWithTopDescription
-                            description={props.translate('task.title')}
-                            title={title}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
-                            shouldShowRightIcon
-                        />
-                        <MenuItemWithTopDescription
-                            description={props.translate('task.description')}
-                            title={description}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
-                            shouldShowRightIcon
-                            shouldParseTitle
-                            numberOfLinesTitle={2}
-                            titleStyle={styles.flex1}
-                        />
-                        <MenuItem
-                            label={assignee.displayName ? props.translate('task.assignee') : ''}
-                            title={assignee.displayName || ''}
-                            description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
-                            icon={assignee.icons}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
-                            shouldShowRightIcon
-                        />
-                        <MenuItem
-                            label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
-                            title={shareDestination.displayName || ''}
-                            description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
-                            icon={shareDestination.icons}
-                            onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
-                            interactive={!props.task.parentReportID}
-                            shouldShowRightIcon={!props.task.parentReportID}
+                <ScrollView>
+                    <View style={[styles.containerWithSpaceBetween]}>
+                        <View style={styles.mb5}>
+                            <MenuItemWithTopDescription
+                                description={props.translate('task.title')}
+                                title={title}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
+                                shouldShowRightIcon
+                            />
+                            <MenuItemWithTopDescription
+                                description={props.translate('task.description')}
+                                title={description}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
+                                shouldShowRightIcon
+                                shouldParseTitle
+                                numberOfLinesTitle={2}
+                                titleStyle={styles.flex1}
+                            />
+                            <MenuItem
+                                label={assignee.displayName ? props.translate('task.assignee') : ''}
+                                title={assignee.displayName || ''}
+                                description={assignee.displayName ? LocalePhoneNumber.formatPhoneNumber(assignee.subtitle) : props.translate('task.assignee')}
+                                icon={assignee.icons}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
+                                shouldShowRightIcon
+                            />
+                            <MenuItem
+                                label={shareDestination.displayName ? props.translate('newTaskPage.shareSomewhere') : ''}
+                                title={shareDestination.displayName || ''}
+                                description={shareDestination.displayName ? shareDestination.subtitle : props.translate('newTaskPage.shareSomewhere')}
+                                icon={shareDestination.icons}
+                                onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
+                                interactive={!props.task.parentReportID}
+                                shouldShowRightIcon={!props.task.parentReportID}
+                            />
+                        </View>
+                        <FormAlertWithSubmitButton
+                            isAlertVisible={!_.isEmpty(errorMessage)}
+                            message={errorMessage}
+                            onSubmit={() => onSubmit()}
+                            enabledWhenOffline
+                            buttonText={props.translate('newTaskPage.confirmTask')}
+                            containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
                         />
                     </View>
-                    <FormAlertWithSubmitButton
-                        isAlertVisible={!_.isEmpty(errorMessage)}
-                        message={errorMessage}
-                        onSubmit={() => onSubmit()}
-                        enabledWhenOffline
-                        buttonText={props.translate('newTaskPage.confirmTask')}
-                        containerStyles={[styles.mh0, styles.mt5, styles.flex1, styles.ph5]}
-                    />
-                </View>
+                </ScrollView>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

From 6353a61b11f7dfe876a366e461c63ad7e3650937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arthur=20Gon=C3=A7alves?= <arthurmfgtab@gmail.com>
Date: Tue, 19 Sep 2023 10:19:09 +0100
Subject: [PATCH 093/123] Converted to ts addresing types and files extension

---
 .../BootSplash/{index.native.js => index.native.ts} |  3 ++-
 src/libs/BootSplash/{index.js => index.ts}          | 13 +++++++++----
 src/libs/BootSplash/types.ts                        |  9 +++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)
 rename src/libs/BootSplash/{index.native.js => index.native.ts} (75%)
 rename src/libs/BootSplash/{index.js => index.ts} (66%)
 create mode 100644 src/libs/BootSplash/types.ts

diff --git a/src/libs/BootSplash/index.native.js b/src/libs/BootSplash/index.native.ts
similarity index 75%
rename from src/libs/BootSplash/index.native.js
rename to src/libs/BootSplash/index.native.ts
index 942b3cadb74a..f0082afa46d5 100644
--- a/src/libs/BootSplash/index.native.js
+++ b/src/libs/BootSplash/index.native.ts
@@ -1,7 +1,8 @@
 import {NativeModules} from 'react-native';
 import Log from '../Log';
+import {BootSplashModule} from './types';
 
-const BootSplash = NativeModules.BootSplash;
+const BootSplash: BootSplashModule = NativeModules.BootSplash;
 
 function hide() {
     Log.info('[BootSplash] hiding splash screen', false);
diff --git a/src/libs/BootSplash/index.js b/src/libs/BootSplash/index.ts
similarity index 66%
rename from src/libs/BootSplash/index.js
rename to src/libs/BootSplash/index.ts
index ff7ab5562b1f..d614c06da090 100644
--- a/src/libs/BootSplash/index.js
+++ b/src/libs/BootSplash/index.ts
@@ -1,6 +1,7 @@
 import Log from '../Log';
+import {VisibilityStatus} from './types';
 
-function resolveAfter(delay) {
+function resolveAfter(delay: number) {
     return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
@@ -9,16 +10,20 @@ function hide() {
 
     return document.fonts.ready.then(() => {
         const splash = document.getElementById('splash');
-        if (splash) splash.style.opacity = 0;
+        if (splash) {
+            splash.style.opacity = '0';
+        }
 
         return resolveAfter(250).then(() => {
-            if (!splash || !splash.parentNode) return;
+            if (!splash?.parentNode) {
+                return;
+            }
             splash.parentNode.removeChild(splash);
         });
     });
 }
 
-function getVisibilityStatus() {
+function getVisibilityStatus(): Promise<VisibilityStatus> {
     return Promise.resolve(document.getElementById('splash') ? 'visible' : 'hidden');
 }
 
diff --git a/src/libs/BootSplash/types.ts b/src/libs/BootSplash/types.ts
new file mode 100644
index 000000000000..2329d5315817
--- /dev/null
+++ b/src/libs/BootSplash/types.ts
@@ -0,0 +1,9 @@
+type VisibilityStatus = 'visible' | 'hidden';
+
+type BootSplashModule = {
+    navigationBarHeight: number;
+    hide: () => Promise<void>;
+    getVisibilityStatus: () => Promise<VisibilityStatus>;
+};
+
+export type {BootSplashModule, VisibilityStatus};

From a1dff6f28fb81b71fee4e898445e757cb96297a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arthur=20Gon=C3=A7alves?= <arthurmfgtab@gmail.com>
Date: Thu, 21 Sep 2023 01:08:43 +0100
Subject: [PATCH 094/123] Addressed PR comments

---
 src/libs/BootSplash/index.native.ts | 5 ++---
 src/libs/BootSplash/index.ts        | 6 +++---
 src/types/modules/react-native.d.ts | 5 +++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/libs/BootSplash/index.native.ts b/src/libs/BootSplash/index.native.ts
index f0082afa46d5..0790b4de89bc 100644
--- a/src/libs/BootSplash/index.native.ts
+++ b/src/libs/BootSplash/index.native.ts
@@ -1,10 +1,9 @@
 import {NativeModules} from 'react-native';
 import Log from '../Log';
-import {BootSplashModule} from './types';
 
-const BootSplash: BootSplashModule = NativeModules.BootSplash;
+const BootSplash = NativeModules.BootSplash;
 
-function hide() {
+function hide(): Promise<void> {
     Log.info('[BootSplash] hiding splash screen', false);
     return BootSplash.hide();
 }
diff --git a/src/libs/BootSplash/index.ts b/src/libs/BootSplash/index.ts
index d614c06da090..24842fe631f4 100644
--- a/src/libs/BootSplash/index.ts
+++ b/src/libs/BootSplash/index.ts
@@ -1,11 +1,11 @@
 import Log from '../Log';
 import {VisibilityStatus} from './types';
 
-function resolveAfter(delay: number) {
-    return new Promise((resolve) => setTimeout(resolve, delay));
+function resolveAfter(delay: number): Promise<void> {
+    return new Promise<void>((resolve) => setTimeout(resolve, delay));
 }
 
-function hide() {
+function hide(): Promise<void> {
     Log.info('[BootSplash] hiding splash screen', false);
 
     return document.fonts.ready.then(() => {
diff --git a/src/types/modules/react-native.d.ts b/src/types/modules/react-native.d.ts
index 1b0b39e5f67d..ebe0974db690 100644
--- a/src/types/modules/react-native.d.ts
+++ b/src/types/modules/react-native.d.ts
@@ -1,9 +1,14 @@
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 import 'react-native';
+import {BootSplashModule} from '../../libs/BootSplash/types';
 
 declare module 'react-native' {
     interface TextInput {
         // Typescript type declaration is missing in React Native for setting text selection.
         setSelection: (start: number, end: number) => void;
     }
+
+    interface NativeModulesStatic {
+        BootSplash: BootSplashModule;
+    }
 }

From 0d43181c955938fd331f8592d5221943aaa08e14 Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Thu, 21 Sep 2023 08:47:04 +0530
Subject: [PATCH 095/123] fix: lint issues.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/HeaderWithBackButton/index.js |  4 ++--
 src/components/PopoverMenu/index.js          |  6 +++---
 src/components/ThreeDotsMenu/index.js        | 10 +++++-----
 src/pages/iou/WaypointEditor.js              |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index b99290918e13..26ed6d210b2f 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -47,7 +47,7 @@ function HeaderWithBackButton({
     },
     threeDotsMenuItems = [],
     children = null,
-    onPopoverHide = () => {},
+    onModalHide = () => {},
 }) {
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
@@ -138,7 +138,7 @@ function HeaderWithBackButton({
                             menuItems={threeDotsMenuItems}
                             onIconPress={onThreeDotsButtonPress}
                             anchorPosition={threeDotsAnchorPosition}
-                            onPopoverHide={onPopoverHide}
+                            onModalHide={onModalHide}
                         />
                     )}
                     {shouldShowCloseButton && (
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 1533f329ad4a..baead6578da9 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -36,7 +36,7 @@ const propTypes = {
     withoutOverlay: PropTypes.bool,
 
     /** Function to call on popover hide */
-    onPopoverHide: PropTypes.func,
+    onModalHide: PropTypes.func,
 };
 
 const defaultProps = {
@@ -47,7 +47,7 @@ const defaultProps = {
     },
     anchorRef: () => {},
     withoutOverlay: false,
-    onPopoverHide: () => {},
+    onModalHide: () => {},
 };
 
 function PopoverMenu(props) {
@@ -82,7 +82,7 @@ function PopoverMenu(props) {
             isVisible={props.isVisible}
             onModalHide={() => {
                 setFocusedIndex(-1);
-                props.onPopoverHide();
+                props.onModalHide();
                 if (selectedItemIndex.current !== null) {
                     props.menuItems[selectedItemIndex.current].onSelected();
                     selectedItemIndex.current = null;
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index 5daeb9669933..81d6cbd7b337 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -47,7 +47,7 @@ const propTypes = {
     }),
 
     /** Function to call on popover hide */
-    onPopoverClose: PropTypes.func,
+    onModalHide: PropTypes.func,
 };
 
 const defaultProps = {
@@ -60,10 +60,10 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
-    onPopoverHide: () => {},
+    onModalHide: () => {},
 };
 
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onPopoverHide}) {
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onModalHide}) {
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
     const {translate} = useLocalize();
@@ -74,7 +74,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
 
     const hidePopoverMenu = () => {
         InteractionManager.runAfterInteractions(() => {
-            onPopoverHide();
+            onModalHide();
         });
         setPopupMenuVisible(false);
     };
@@ -108,7 +108,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
             </View>
             <PopoverMenu
                 onClose={hidePopoverMenu}
-                onPopoverHide={onPopoverHide}
+                onPopoverHide={onModalHide}
                 isVisible={isPopupMenuVisible}
                 anchorPosition={anchorPosition}
                 anchorAlignment={anchorAlignment}
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 6680134698b4..239cfe33153f 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -186,7 +186,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                             onSelected: () => setIsDeleteStopModalOpen(true),
                         },
                     ]}
-                    onPopoverHide={focus}
+                    onModalHide={focus}
                 />
                 <ConfirmModal
                     title={translate('distance.deleteWaypoint')}

From 67fb23e362d04faf47e0a4c1c9874df5fee6e94d Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Thu, 21 Sep 2023 08:53:53 +0530
Subject: [PATCH 096/123] fix: minor comment fix.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/components/PopoverMenu/index.js   | 2 +-
 src/components/ThreeDotsMenu/index.js | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index baead6578da9..74d8c7fa8498 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -35,7 +35,7 @@ const propTypes = {
 
     withoutOverlay: PropTypes.bool,
 
-    /** Function to call on popover hide */
+    /** Function to call on modal hide */
     onModalHide: PropTypes.func,
 };
 
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index 218967aa2073..5e22a74fa37e 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -46,7 +46,7 @@ const propTypes = {
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
 
-    /** Function to call on popover hide */
+    /** Function to call on modal hide */
     onModalHide: PropTypes.func,
 
     /** Whether the popover menu should overlay the current view */
@@ -67,8 +67,7 @@ const defaultProps = {
     shouldOverlay: false,
 };
 
-
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment,onModalHide, shouldOverlay}) {
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, onModalHide, shouldOverlay}) {
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
     const {translate} = useLocalize();

From 6dd360142723c1725b7a81f59eaafdb31de9bc49 Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Thu, 21 Sep 2023 08:55:54 +0530
Subject: [PATCH 097/123] fix: lint issue if statement.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/pages/iou/WaypointEditor.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 239cfe33153f..5eb17aac1b50 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -159,7 +159,9 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
 
     const focus = () => {
         InteractionManager.runAfterInteractions(() => {
-            if (!textInput.current) return;
+            if (!textInput.current) {
+                return;
+            }
             textInput.current.focus();
         });
     };

From 9514e235181848d56aa45b8df618750b54b3e1fe Mon Sep 17 00:00:00 2001
From: Krishna Gupta <belivethatkg@gmail.com>
Date: Thu, 21 Sep 2023 09:33:00 +0530
Subject: [PATCH 098/123] fix: input focus function name.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
---
 src/pages/iou/WaypointEditor.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 5eb17aac1b50..3f089ed5f115 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -157,7 +157,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
         Navigation.goBack(ROUTES.getMoneyRequestDistanceTabRoute(iouType));
     };
 
-    const focus = () => {
+    const focusAddressInput = () => {
         InteractionManager.runAfterInteractions(() => {
             if (!textInput.current) {
                 return;
@@ -188,14 +188,14 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
                             onSelected: () => setIsDeleteStopModalOpen(true),
                         },
                     ]}
-                    onModalHide={focus}
+                    onModalHide={focusAddressInput}
                 />
                 <ConfirmModal
                     title={translate('distance.deleteWaypoint')}
                     isVisible={isDeleteStopModalOpen}
                     onConfirm={deleteStopAndHideModal}
                     onCancel={() => setIsDeleteStopModalOpen(false)}
-                    onModalHide={focus}
+                    onModalHide={focusAddressInput}
                     prompt={translate('distance.deleteWaypointConfirmation')}
                     confirmText={translate('common.delete')}
                     cancelText={translate('common.cancel')}

From 74871ced375e8af817c6e09f4a0b5af50598af1f Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Thu, 21 Sep 2023 11:13:50 +0700
Subject: [PATCH 099/123] Update package.json for eslint-config-expensify
 2.0.39

---
 package-lock.json | 14 +++++++-------
 package.json      |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e00218860c30..5980724e7432 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -190,7 +190,7 @@
         "electron-builder": "24.6.4",
         "eslint": "^7.6.0",
         "eslint-config-airbnb-typescript": "^17.1.0",
-        "eslint-config-expensify": "^2.0.38",
+        "eslint-config-expensify": "^2.0.39",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-jest": "^24.1.0",
         "eslint-plugin-jsdoc": "^46.2.6",
@@ -26492,9 +26492,9 @@
       }
     },
     "node_modules/eslint-config-expensify": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.38.tgz",
-      "integrity": "sha512-jAlrYSjkDV8YESUUPcaTjUM8Fgru+37FS+Hq6zzcRR0FbA5bLiOPguhJHo77XpYh5N+PEf4wrpgsS04sjdgDPg==",
+      "version": "2.0.39",
+      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.39.tgz",
+      "integrity": "sha512-DIxR3k99ZIDPE2NK+WLLRWpoDq06gTXdY8XZg9Etd1UqZ7fXm/Yz3/QkTxu7CH7UaXbCH3P4PTo023ULQGKOSw==",
       "dev": true,
       "dependencies": {
         "@lwc/eslint-plugin-lwc": "^0.11.0",
@@ -67264,9 +67264,9 @@
       }
     },
     "eslint-config-expensify": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.38.tgz",
-      "integrity": "sha512-jAlrYSjkDV8YESUUPcaTjUM8Fgru+37FS+Hq6zzcRR0FbA5bLiOPguhJHo77XpYh5N+PEf4wrpgsS04sjdgDPg==",
+      "version": "2.0.39",
+      "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.39.tgz",
+      "integrity": "sha512-DIxR3k99ZIDPE2NK+WLLRWpoDq06gTXdY8XZg9Etd1UqZ7fXm/Yz3/QkTxu7CH7UaXbCH3P4PTo023ULQGKOSw==",
       "dev": true,
       "requires": {
         "@lwc/eslint-plugin-lwc": "^0.11.0",
diff --git a/package.json b/package.json
index 8e0b493b495e..df1448ee7be6 100644
--- a/package.json
+++ b/package.json
@@ -61,9 +61,9 @@
     "@formatjs/intl-pluralrules": "^5.2.2",
     "@gorhom/portal": "^1.0.14",
     "@invertase/react-native-apple-authentication": "^2.2.2",
-    "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52",
     "@kie/act-js": "^2.0.1",
     "@kie/mock-github": "^1.0.0",
+    "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52",
     "@onfido/react-native-sdk": "7.4.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-camera-roll/camera-roll": "5.4.0",
@@ -81,9 +81,9 @@
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.0.11",
+    "@types/node": "^18.14.0",
     "@ua/react-native-airship": "^15.2.6",
     "awesome-phonenumber": "^5.4.0",
-    "@types/node": "^18.14.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
     "canvas-size": "^1.2.6",
@@ -111,8 +111,8 @@
     "react-collapse": "^5.1.0",
     "react-content-loader": "^6.1.0",
     "react-dom": "18.1.0",
-    "react-map-gl": "^7.1.3",
     "react-error-boundary": "^4.0.11",
+    "react-map-gl": "^7.1.3",
     "react-native": "0.72.4",
     "react-native-blob-util": "^0.17.3",
     "react-native-collapsible": "^1.6.0",

From 6b70fff40a3e50537cb96bc29b6d5dae2fcea377 Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Thu, 21 Sep 2023 11:23:00 +0700
Subject: [PATCH 100/123] Revert package.json order after Update for
 eslint-config-expensify 2.0.39

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 7bad0e3bd5db..8dd61d44c43d 100644
--- a/package.json
+++ b/package.json
@@ -61,9 +61,9 @@
     "@formatjs/intl-pluralrules": "^5.2.2",
     "@gorhom/portal": "^1.0.14",
     "@invertase/react-native-apple-authentication": "^2.2.2",
+    "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52",
     "@kie/act-js": "^2.0.1",
     "@kie/mock-github": "^1.0.0",
-    "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#5cdae3d4455b03a04c57f50be3863e2fe6c92c52",
     "@onfido/react-native-sdk": "7.4.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-camera-roll/camera-roll": "5.4.0",
@@ -81,9 +81,9 @@
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.0.11",
-    "@types/node": "^18.14.0",
     "@ua/react-native-airship": "^15.2.6",
     "awesome-phonenumber": "^5.4.0",
+    "@types/node": "^18.14.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
     "canvas-size": "^1.2.6",
@@ -111,8 +111,8 @@
     "react-collapse": "^5.1.0",
     "react-content-loader": "^6.1.0",
     "react-dom": "18.1.0",
-    "react-error-boundary": "^4.0.11",
     "react-map-gl": "^7.1.3",
+    "react-error-boundary": "^4.0.11",
     "react-native": "0.72.4",
     "react-native-blob-util": "^0.17.3",
     "react-native-collapsible": "^1.6.0",

From e9435a9e359d19b7798032951efcb18ed9abf408 Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Thu, 21 Sep 2023 11:32:57 +0700
Subject: [PATCH 101/123] Update fix lint

---
 src/pages/iou/MoneyRequestTagPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index 781b405e0774..3f31f39f4b7b 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -109,7 +109,7 @@ export default compose(
             key: ONYXKEYS.IOU,
         },
     }),
-    //  eslint-disable-next-line 
+    //  eslint-disable-next-line
     withOnyx({
         report: {
             // Fetch report ID from IOU participants if no report ID is set in route

From 6d9c7958827a00001e8422e33116738b7b2ad60e Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Thu, 21 Sep 2023 12:20:12 +0700
Subject: [PATCH 102/123] Revert added deleted withOnyx

---
 src/pages/iou/MoneyRequestTagPage.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index 3f31f39f4b7b..d899f6147f63 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -110,13 +110,6 @@ export default compose(
         },
     }),
     //  eslint-disable-next-line
-    withOnyx({
-        report: {
-            // Fetch report ID from IOU participants if no report ID is set in route
-            key: ({route, iou}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '') || lodashGet(iou, 'participants.0.reportID', '')}`,
-        },
-    }),
-    //  eslint-disable-next-line
     withOnyx({
         policyTags: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,

From 9ebea36d78eea920c5703dfe19d8bf6b4a338ec2 Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Thu, 21 Sep 2023 12:29:57 +0700
Subject: [PATCH 103/123] Update `// eslint-disable-next-line` to `//
 eslint-disable-next-line rulesdir/no-multiple-onyx-in-file`

---
 src/components/LHNOptionsList/OptionRowLHNData.js | 4 ++--
 src/pages/EditRequestPage.js                      | 2 +-
 src/pages/iou/MoneyRequestTagPage.js              | 2 +-
 src/pages/iou/steps/MoneyRequestConfirmPage.js    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHNData.js b/src/components/LHNOptionsList/OptionRowLHNData.js
index 37bc4df9ea3a..4eebdd387fab 100644
--- a/src/components/LHNOptionsList/OptionRowLHNData.js
+++ b/src/components/LHNOptionsList/OptionRowLHNData.js
@@ -195,7 +195,7 @@ export default React.memo(
                 key: ONYXKEYS.NVP_PREFERRED_LOCALE,
             },
         }),
-        // eslint-disable-next-line
+        // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
         withOnyx({
             parentReportActions: {
                 key: ({fullReport}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${fullReport.parentReportID}`,
@@ -210,7 +210,7 @@ export default React.memo(
             // However, performance overhead of this is minimized by using memos inside the component.
             receiptTransactions: {key: ONYXKEYS.COLLECTION.TRANSACTION},
         }),
-        // eslint-disable-next-line
+        // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
         withOnyx({
             transaction: {
                 key: ({fullReport, parentReportActions}) =>
diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js
index 466c5e1a1df3..d3b1df1d4e9b 100644
--- a/src/pages/EditRequestPage.js
+++ b/src/pages/EditRequestPage.js
@@ -194,7 +194,7 @@ export default compose(
             key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`,
         },
     }),
-    // eslint-disable-next-line
+    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({
         parentReport: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '0'}`,
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index d899f6147f63..60be6035431c 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -109,7 +109,7 @@ export default compose(
             key: ONYXKEYS.IOU,
         },
     }),
-    //  eslint-disable-next-line
+    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({
         policyTags: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 4f1ae106623f..14a6cc8a7c23 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -353,7 +353,7 @@ export default compose(
             key: ONYXKEYS.IOU,
         },
     }),
-    // eslint-disable-next-line
+    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({
         report: {
             key: ({route, iou}) => {
@@ -373,7 +373,7 @@ export default compose(
             key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
         },
     }),
-    // eslint-disable-next-line
+    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({
         policy: {
             key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`,

From dc650be3214da7ede698ca7cb3056ebbe9d5769e Mon Sep 17 00:00:00 2001
From: Hans <visaocuoitroi193@gmail.com>
Date: Thu, 21 Sep 2023 13:24:05 +0700
Subject: [PATCH 104/123] Fix loading overlay header for PrivateNotes page

---
 src/pages/PrivateNotes/PrivateNotesListPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index 098bfd2a245b..6c0664d80fa2 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -125,7 +125,7 @@ function PrivateNotesListPage({report, personalDetailsList, network, session}) {
                     onCloseButtonPress={() => Navigation.dismissModal()}
                 />
                 {report.isLoadingPrivateNotes && _.isEmpty(lodashGet(report, 'privateNotes', {})) ? (
-                    <FullScreenLoadingIndicator />
+                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
                 ) : (
                     _.map(privateNotes, (item, index) => getMenuItem(item, index))
                 )}

From 977e79d57c2893883e822563afe7a0ec107dbc92 Mon Sep 17 00:00:00 2001
From: Yonathan Evan Christy <yonathanevan@gmail.com>
Date: Thu, 21 Sep 2023 13:32:09 +0700
Subject: [PATCH 105/123] Update .eslintrc.js

---
 .eslintrc.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 267ec23b8674..3c144064eb62 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,7 +39,6 @@ module.exports = {
             files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
             rules: {
                 'rulesdir/onyx-props-must-have-default': 'off',
-                'rulesdir/no-multiple-onyx-in-file': 'error',
                 'react-native-a11y/has-accessibility-hint': ['off'],
                 'react-native-a11y/has-valid-accessibility-descriptors': [
                     'error',

From 2c1608392cf2f5b73520031659cf0f59e7a6721e Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Thu, 21 Sep 2023 10:38:39 +0200
Subject: [PATCH 106/123] Set batch size to 1 only on web

---
 src/components/InvertedFlatList/BaseInvertedFlatList.js | 4 ----
 src/components/InvertedFlatList/index.js                | 3 +++
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index 0327e4e0b5b9..0bfffb733052 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -136,10 +136,6 @@ class BaseInvertedFlatList extends Component {
                 // Native platforms do not need to measure items and work fine without this.
                 // Web requires that items be measured or else crazy things happen when scrolling.
                 getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}
-                // Keep batch size relatively small for responsiveness, but not too small as it will cause
-                // excessive rendering. See https://github.com/Expensify/App/pull/19345 for performance testing
-                // of this value.
-                maxToRenderPerBatch={10}
                 windowSize={15}
 
                 // Commenting the line below as it breaks the unread indicator test
diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js
index 74409e9a0fe0..d46cd5801605 100644
--- a/src/components/InvertedFlatList/index.js
+++ b/src/components/InvertedFlatList/index.js
@@ -119,6 +119,9 @@ function InvertedFlatList(props) {
             shouldMeasureItems
             contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)}
             onScroll={handleScroll}
+            // We need to keep batch size to one to workaround a bug in react-native-web.
+            // This can be removed once https://github.com/Expensify/App/pull/24482 is merged.
+            maxToRenderPerBatch={1}
         />
     );
 }

From f19d5ab1216bc03360c5c4eeebb82ca70b9ff1e5 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Thu, 21 Sep 2023 10:52:24 +0200
Subject: [PATCH 107/123] Add curly option to ESLint config for Typescript

---
 .eslintrc.js                       | 5 +++--
 src/components/MapView/MapView.tsx | 4 +++-
 src/libs/Growl.ts                  | 8 ++++++--
 src/libs/isInputAutoFilled.ts      | 4 +++-
 src/libs/requireParameters.ts      | 4 +++-
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3c144064eb62..b5b4add538f6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,7 +24,7 @@ const restrictedImportPatterns = [
 ];
 
 module.exports = {
-    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'prettier', 'plugin:react-native-a11y/basic'],
+    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'prettier'],
     plugins: ['react-hooks', 'react-native-a11y'],
     parser: 'babel-eslint',
     ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', 'node_modules/.cache/**', '.git/**'],
@@ -46,7 +46,6 @@ module.exports = {
                         touchables: ['PressableWithoutFeedback', 'PressableWithFeedback'],
                     },
                 ],
-                curly: 'error',
             },
         },
         {
@@ -76,6 +75,7 @@ module.exports = {
                         patterns: restrictedImportPatterns,
                     },
                 ],
+                curly: 'error',
             },
         },
         {
@@ -162,6 +162,7 @@ module.exports = {
                         patterns: restrictedImportPatterns,
                     },
                 ],
+                curly: 'error',
             },
         },
         {
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 7a2248ffafb9..d9f51e111a43 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -54,7 +54,9 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(({accessToken, style, ma
     }, [accessToken]);
 
     const setMapIdle = (e: MapState) => {
-        if (e.gestures.isGestureActive) return;
+        if (e.gestures.isGestureActive) {
+            return;
+        }
         setIsIdle(true);
         if (onMapReady) {
             onMapReady();
diff --git a/src/libs/Growl.ts b/src/libs/Growl.ts
index 99c728f0a210..33d7311973cb 100644
--- a/src/libs/Growl.ts
+++ b/src/libs/Growl.ts
@@ -12,7 +12,9 @@ const isReadyPromise = new Promise((resolve) => {
 });
 
 function setIsReady() {
-    if (!resolveIsReadyPromise) return;
+    if (!resolveIsReadyPromise) {
+        return;
+    }
     resolveIsReadyPromise();
 }
 
@@ -21,7 +23,9 @@ function setIsReady() {
  */
 function show(bodyText: string, type: string, duration: number = CONST.GROWL.DURATION) {
     isReadyPromise.then(() => {
-        if (!growlRef?.current?.show) return;
+        if (!growlRef?.current?.show) {
+            return;
+        }
         growlRef.current.show(bodyText, type, duration);
     });
 }
diff --git a/src/libs/isInputAutoFilled.ts b/src/libs/isInputAutoFilled.ts
index 0abe634001e4..e1b9942b0e78 100644
--- a/src/libs/isInputAutoFilled.ts
+++ b/src/libs/isInputAutoFilled.ts
@@ -4,7 +4,9 @@ import isSelectorSupported from './isSelectorSupported';
  * Check the input is auto filled or not
  */
 export default function isInputAutoFilled(input: Element): boolean {
-    if (!input?.matches) return false;
+    if (!input?.matches) {
+        return false;
+    }
     if (isSelectorSupported(':autofill')) {
         return input.matches(':-webkit-autofill') || input.matches(':autofill');
     }
diff --git a/src/libs/requireParameters.ts b/src/libs/requireParameters.ts
index 098a6d114430..ebeb55e254e0 100644
--- a/src/libs/requireParameters.ts
+++ b/src/libs/requireParameters.ts
@@ -14,7 +14,9 @@ export default function requireParameters(parameterNames: string[], parameters:
         const propertiesToRedact = ['authToken', 'password', 'partnerUserSecret', 'twoFactorAuthCode'];
         const parametersCopy = {...parameters};
         Object.keys(parametersCopy).forEach((key) => {
-            if (!propertiesToRedact.includes(key.toString())) return;
+            if (!propertiesToRedact.includes(key.toString())) {
+                return;
+            }
 
             parametersCopy[key] = '<redacted>';
         });

From 8753fa362c0889c3356e58936cb3f89b6a64dbd1 Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 21 Sep 2023 11:56:50 +0200
Subject: [PATCH 108/123] update name of a method

---
 tests/unit/OptionsListUtilsTest.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index 6bc8b1b01528..6f20e48835fd 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -1024,7 +1024,7 @@ describe('OptionsListUtils', () => {
         );
         expect(largeWrongSearchResult.categoryOptions).toStrictEqual(largeWrongSearchResultList);
 
-        const emptyResult = OptionsListUtils.getNewChatOptions(REPORTS, PERSONAL_DETAILS, [], search, selectedOptions, [], false, false, true, emptyCategoriesList);
+        const emptyResult = OptionsListUtils.getFilteredOptions(REPORTS, PERSONAL_DETAILS, [], search, selectedOptions, [], false, false, true, emptyCategoriesList);
         expect(emptyResult.categoryOptions).toStrictEqual(emptySelectedResultList);
     });
 

From b123a7699cd65503f9f9e7d305725772fbee8fdf Mon Sep 17 00:00:00 2001
From: Huzaifa Rasheed <huzaifarasheed900@gmail.com>
Date: Thu, 21 Sep 2023 16:34:41 +0500
Subject: [PATCH 109/123] Allow currency search by currency name

---
 src/pages/iou/IOUCurrencySelection.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 1238d8934f75..05d90975ac7e 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -96,6 +96,7 @@ function IOUCurrencySelection(props) {
         const currencyOptions = _.map(currencyList, (currencyInfo, currencyCode) => {
             const isSelectedCurrency = currencyCode === selectedCurrencyCode;
             return {
+                currencyName: currencyInfo.name,
                 text: `${currencyCode} - ${CurrencyUtils.getLocalizedCurrencySymbol(currencyCode)}`,
                 currencyCode,
                 keyForList: currencyCode,
@@ -105,7 +106,7 @@ function IOUCurrencySelection(props) {
         });
 
         const searchRegex = new RegExp(Str.escapeForRegExp(searchValue.trim()), 'i');
-        const filteredCurrencies = _.filter(currencyOptions, (currencyOption) => searchRegex.test(currencyOption.text));
+        const filteredCurrencies = _.filter(currencyOptions, (currencyOption) => searchRegex.test(currencyOption.text) || searchRegex.test(currencyOption.currencyName));
         const isEmpty = searchValue.trim() && !filteredCurrencies.length;
 
         return {

From c1e89eeaacbfdbd208bfd350812de5fda26c81fe Mon Sep 17 00:00:00 2001
From: jeet-dhandha <jeet.dhandha.2511@gmail.com>
Date: Thu, 21 Sep 2023 18:07:22 +0530
Subject: [PATCH 110/123] fixed styling for scroll view in NewTaskPage

---
 src/pages/tasks/NewTaskPage.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 1696961764ca..db63e01c4ce6 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -149,8 +149,8 @@ function NewTaskPage(props) {
                         Navigation.goBack(ROUTES.NEW_TASK_DETAILS);
                     }}
                 />
-                <ScrollView>
-                    <View style={[styles.containerWithSpaceBetween]}>
+                <ScrollView contentContainerStyle={styles.flexGrow1}>
+                    <View style={[styles.flex1]}>
                         <View style={styles.mb5}>
                             <MenuItemWithTopDescription
                                 description={props.translate('task.title')}
@@ -185,6 +185,8 @@ function NewTaskPage(props) {
                                 shouldShowRightIcon={!props.task.parentReportID}
                             />
                         </View>
+                    </View>
+                    <View style={[styles.flexShrink0]}>
                         <FormAlertWithSubmitButton
                             isAlertVisible={!_.isEmpty(errorMessage)}
                             message={errorMessage}

From f7a59a8ae5380c4ec7e67b61072d39ee42a50d1f Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Thu, 21 Sep 2023 21:21:17 +0800
Subject: [PATCH 111/123] replace maskedPan with lastFourPAN

---
 src/types/onyx/Card.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index e89c966d49da..d26176f5e7f7 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -10,7 +10,7 @@ type Card = {
     bank: string;
     availableSpend: number;
     domainName: string;
-    maskedPan: string;
+    lastFourPAN: string;
     cardName: string;
     isVirtual: boolean;
     fraud: ValueOf<typeof CONST.EXPENSIFY_CARD.FRAUD_TYPES>;

From e81197ba45500fe4bf8bf8c00befde9e321ba2a5 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 08:47:26 +0800
Subject: [PATCH 112/123] Use hooks instead of HOCs in ReportScreen

---
 src/pages/home/ReportScreen.js | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 63e60a545de9..d5505a582c1c 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -16,15 +16,14 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import ReportActionsView from './report/ReportActionsView';
 import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonView';
 import reportActionPropTypes from './report/reportActionPropTypes';
-import {withNetwork} from '../../components/OnyxProvider';
+import useNetwork from '../../hooks/useNetwork';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+import useLocalize from '../../hooks/useLocalize';
 import compose from '../../libs/compose';
 import Visibility from '../../libs/Visibility';
-import networkPropTypes from '../../components/networkPropTypes';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import ReportFooter from './report/ReportFooter';
 import Banner from '../../components/Banner';
-import withLocalize from '../../components/withLocalize';
 import reportPropTypes from '../reportPropTypes';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import withViewportOffsetTop, {viewportOffsetTopPropTypes} from '../../components/withViewportOffsetTop';
@@ -80,16 +79,12 @@ const propTypes = {
         }),
     ),
 
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
     /** The account manager report ID */
     accountManagerReportID: PropTypes.string,
 
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
-    ...windowDimensionsPropTypes,
     ...viewportOffsetTopPropTypes,
     ...withCurrentReportIDPropTypes,
 };
@@ -138,15 +133,16 @@ function ReportScreen({
     accountManagerReportID,
     personalDetails,
     policies,
-    translate,
-    network,
-    isSmallScreenWidth,
     isSidebarLoaded,
     viewportOffsetTop,
     isComposerFullSize,
     errors,
     currentReportID,
 }) {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
     const firstRenderRef = useRef(true);
     const flatListRef = useRef();
     const reactionListRef = useRef();
@@ -390,7 +386,7 @@ function ReportScreen({
                                 <>
                                     <ReportFooter
                                         pendingAction={addWorkspaceRoomOrChatPendingAction}
-                                        isOffline={network.isOffline}
+                                        isOffline={isOffline}
                                         reportActions={reportActions}
                                         report={report}
                                         isComposerFullSize={isComposerFullSize}
@@ -403,7 +399,7 @@ function ReportScreen({
                             {!isReportReadyForDisplay && (
                                 <ReportFooter
                                     shouldDisableCompose
-                                    isOffline={network.isOffline}
+                                    isOffline={isOffline}
                                 />
                             )}
                         </View>
@@ -420,9 +416,6 @@ ReportScreen.displayName = 'ReportScreen';
 
 export default compose(
     withViewportOffsetTop,
-    withLocalize,
-    withWindowDimensions,
-    withNetwork(),
     withCurrentReportID,
     withOnyx({
         isSidebarLoaded: {

From d3533504abb4de692417c34438a035875cd15940 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 09:30:08 +0800
Subject: [PATCH 113/123] Add testID to all ScreenWrapper components in
 src/pages

---
 src/components/ScreenWrapper/index.js                      | 1 +
 src/components/ScreenWrapper/propTypes.js                  | 3 +++
 src/pages/AddPersonalBankAccountPage.js                    | 1 +
 src/pages/DetailsPage.js                                   | 2 +-
 src/pages/EditRequestAmountPage.js                         | 1 +
 src/pages/EditRequestCategoryPage.js                       | 1 +
 src/pages/EditRequestCreatedPage.js                        | 1 +
 src/pages/EditRequestDescriptionPage.js                    | 1 +
 src/pages/EditRequestMerchantPage.js                       | 1 +
 src/pages/EditRequestReceiptPage.js                        | 1 +
 src/pages/EnablePayments/AdditionalDetailsStep.js          | 1 +
 src/pages/EnablePayments/EnablePaymentsPage.js             | 5 ++++-
 src/pages/ErrorPage/NotFoundPage.js                        | 2 +-
 src/pages/FlagCommentPage.js                               | 5 ++++-
 src/pages/GetAssistancePage.js                             | 2 +-
 src/pages/NewChatPage.js                                   | 1 +
 src/pages/NewChatSelectorPage.js                           | 1 +
 src/pages/PrivateNotes/PrivateNotesEditPage.js             | 1 +
 src/pages/PrivateNotes/PrivateNotesListPage.js             | 5 ++++-
 src/pages/PrivateNotes/PrivateNotesViewPage.js             | 5 ++++-
 src/pages/ProfilePage.js                                   | 2 +-
 src/pages/ReimbursementAccount/ACHContractStep.js          | 5 ++++-
 src/pages/ReimbursementAccount/BankAccountManualStep.js    | 5 ++++-
 src/pages/ReimbursementAccount/BankAccountPlaidStep.js     | 1 +
 src/pages/ReimbursementAccount/BankAccountStep.js          | 5 ++++-
 src/pages/ReimbursementAccount/CompanyStep.js              | 5 ++++-
 src/pages/ReimbursementAccount/ContinueBankAccountSetup.js | 5 ++++-
 src/pages/ReimbursementAccount/EnableStep.js               | 1 +
 src/pages/ReimbursementAccount/ReimbursementAccountPage.js | 4 ++--
 src/pages/ReimbursementAccount/RequestorOnfidoStep.js      | 1 +
 src/pages/ReimbursementAccount/RequestorStep.js            | 5 ++++-
 src/pages/ReimbursementAccount/ValidationStep.js           | 1 +
 src/pages/ReportDetailsPage.js                             | 2 +-
 src/pages/ReportParticipantsPage.js                        | 5 ++++-
 src/pages/ReportWelcomeMessagePage.js                      | 1 +
 src/pages/SearchPage.js                                    | 5 ++++-
 src/pages/ShareCodePage.js                                 | 2 +-
 src/pages/TeachersUnite/ImTeacherPage.js                   | 2 +-
 src/pages/TeachersUnite/IntroSchoolPrincipalPage.js        | 5 ++++-
 src/pages/TeachersUnite/KnowATeacherPage.js                | 5 ++++-
 src/pages/home/ReportScreen.js                             | 1 +
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js  | 1 +
 src/pages/iou/IOUCurrencySelection.js                      | 1 +
 src/pages/iou/MoneyRequestCategoryPage.js                  | 1 +
 src/pages/iou/MoneyRequestDatePage.js                      | 1 +
 src/pages/iou/MoneyRequestDescriptionPage.js               | 1 +
 src/pages/iou/MoneyRequestMerchantPage.js                  | 1 +
 src/pages/iou/MoneyRequestSelectorPage.js                  | 1 +
 src/pages/iou/MoneyRequestTagPage.js                       | 1 +
 src/pages/iou/SplitBillDetailsPage.js                      | 2 +-
 src/pages/iou/WaypointEditor.js                            | 1 +
 src/pages/iou/steps/MoneyRequestConfirmPage.js             | 5 ++++-
 .../MoneyRequestParticipantsPage.js                        | 1 +
 src/pages/iou/steps/NewRequestAmountPage.js                | 1 +
 src/pages/settings/AboutPage/AboutPage.js                  | 5 ++++-
 src/pages/settings/AppDownloadLinks.js                     | 2 +-
 src/pages/settings/Preferences/LanguagePage.js             | 5 ++++-
 src/pages/settings/Preferences/PriorityModePage.js         | 5 ++++-
 src/pages/settings/Preferences/ThemePage.js                | 5 ++++-
 .../settings/Profile/Contacts/ContactMethodDetailsPage.js  | 7 +++++--
 src/pages/settings/Profile/Contacts/ContactMethodsPage.js  | 5 ++++-
 .../settings/Profile/Contacts/NewContactMethodPage.js      | 1 +
 src/pages/settings/Profile/CustomStatus/StatusSetPage.js   | 2 +-
 src/pages/settings/Profile/DisplayNamePage.js              | 1 +
 src/pages/settings/Profile/PersonalDetails/AddressPage.js  | 5 ++++-
 .../settings/Profile/PersonalDetails/DateOfBirthPage.js    | 5 ++++-
 .../settings/Profile/PersonalDetails/LegalNamePage.js      | 1 +
 .../Profile/PersonalDetails/PersonalDetailsInitialPage.js  | 2 +-
 src/pages/settings/Profile/ProfilePage.js                  | 5 ++++-
 src/pages/settings/Profile/PronounsPage.js                 | 5 ++++-
 src/pages/settings/Profile/TimezoneInitialPage.js          | 2 +-
 src/pages/settings/Profile/TimezoneSelectPage.js           | 5 ++++-
 src/pages/settings/Report/NotificationPreferencePage.js    | 5 ++++-
 src/pages/settings/Report/ReportSettingsPage.js            | 2 +-
 src/pages/settings/Report/RoomNamePage.js                  | 1 +
 src/pages/settings/Report/WriteCapabilityPage.js           | 5 ++++-
 src/pages/settings/Security/CloseAccountPage.js            | 5 ++++-
 .../Security/TwoFactorAuth/StepWrapper/StepWrapper.js      | 1 +
 src/pages/settings/Wallet/AddDebitCardPage.js              | 1 +
 src/pages/settings/Wallet/ChooseTransferAccountPage.js     | 2 +-
 src/pages/settings/Wallet/TransferBalancePage.js           | 4 ++--
 src/pages/settings/Wallet/WalletPage/BaseWalletPage.js     | 2 +-
 src/pages/signin/SignInModal.js                            | 1 +
 src/pages/tasks/NewTaskDescriptionPage.js                  | 1 +
 src/pages/tasks/NewTaskDetailsPage.js                      | 1 +
 src/pages/tasks/NewTaskPage.js                             | 5 ++++-
 src/pages/tasks/NewTaskTitlePage.js                        | 1 +
 src/pages/tasks/TaskAssigneeSelectorModal.js               | 1 +
 src/pages/tasks/TaskDescriptionPage.js                     | 1 +
 src/pages/tasks/TaskShareDestinationSelectorModal.js       | 1 +
 src/pages/tasks/TaskTitlePage.js                           | 1 +
 src/pages/wallet/WalletStatementPage.js                    | 1 +
 src/pages/workspace/WorkspaceInitialPage.js                | 5 ++++-
 src/pages/workspace/WorkspaceInviteMessagePage.js          | 5 ++++-
 src/pages/workspace/WorkspaceInvitePage.js                 | 5 ++++-
 src/pages/workspace/WorkspaceMembersPage.js                | 1 +
 src/pages/workspace/WorkspaceNewRoomPage.js                | 1 +
 src/pages/workspace/WorkspacePageWithSections.js           | 1 +
 98 files changed, 202 insertions(+), 53 deletions(-)

diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index f760e5d5aeb4..1cad1e96b26d 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -109,6 +109,7 @@ class ScreenWrapper extends React.Component {
                             style={styles.flex1}
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})}
+                            testID={this.props.testID}
                         >
                             <View
                                 style={[styles.flex1, paddingStyle, ...this.props.style]}
diff --git a/src/components/ScreenWrapper/propTypes.js b/src/components/ScreenWrapper/propTypes.js
index 83033d9e97b7..9434402cc20f 100644
--- a/src/components/ScreenWrapper/propTypes.js
+++ b/src/components/ScreenWrapper/propTypes.js
@@ -10,6 +10,9 @@ const propTypes = {
     /** Returns a function as a child to pass insets to or a node to render without insets */
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 
+    /** A unique ID to find the screen wrapper in tests */
+    testID: PropTypes.string.isRequired,
+
     /** Whether to include padding bottom */
     includeSafeAreaPaddingBottom: PropTypes.bool,
 
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 98bc09a7a217..cc50f927d428 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -103,6 +103,7 @@ class AddPersonalBankAccountPage extends React.Component {
                 includeSafeAreaPaddingBottom={shouldShowSuccess}
                 shouldEnablePickerAvoiding={false}
                 shouldShowOfflineIndicator={false}
+                testID="AddPersonalBankAccountPage"
             >
                 <HeaderWithBackButton
                     title={this.props.translate('bankAccount.addBankAccount')}
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index 52d5fe4a7842..cd4e95333ae1 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -126,7 +126,7 @@ function DetailsPage(props) {
     const isCurrentUser = _.keys(props.loginList).includes(details.login);
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="DetailsPage">
             <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View
diff --git a/src/pages/EditRequestAmountPage.js b/src/pages/EditRequestAmountPage.js
index 46d77ce86a7c..2f691afe4d5e 100644
--- a/src/pages/EditRequestAmountPage.js
+++ b/src/pages/EditRequestAmountPage.js
@@ -56,6 +56,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, report
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestAmountPage"
         >
             <HeaderWithBackButton title={translate('iou.amount')} />
             <MoneyRequestAmountForm
diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
index b1ee6f3384f6..1f5b01680d34 100644
--- a/src/pages/EditRequestCategoryPage.js
+++ b/src/pages/EditRequestCategoryPage.js
@@ -30,6 +30,7 @@ function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestCategoryPage"
         >
             <HeaderWithBackButton
                 title={translate('common.category')}
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index a29936ba9ba4..344e767a69ca 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -23,6 +23,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestCreatedPage"
         >
             <HeaderWithBackButton title={translate('common.date')} />
             <Form
diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
index 00ccc0ccf30d..c497ed38402f 100644
--- a/src/pages/EditRequestDescriptionPage.js
+++ b/src/pages/EditRequestDescriptionPage.js
@@ -27,6 +27,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => descriptionInputRef.current && descriptionInputRef.current.focus()}
+            testID="EditRequestDescriptionPage"
         >
             <HeaderWithBackButton title={translate('common.description')} />
             <Form
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
index 7e7791fa3212..02ed65d0f856 100644
--- a/src/pages/EditRequestMerchantPage.js
+++ b/src/pages/EditRequestMerchantPage.js
@@ -38,6 +38,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => merchantInputRef.current && merchantInputRef.current.focus()}
+            testID="EditRequestMerchantPage"
         >
             <HeaderWithBackButton title={translate('common.merchant')} />
             <Form
diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index 47aa23a93432..ea6e85a9b9d3 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -31,6 +31,7 @@ function EditRequestReceiptPage({route, transactionID}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestReceiptPage"
         >
             <HeaderWithBackButton
                 title={translate('common.receipt')}
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 9804edd63fcd..c4c35d0d453f 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -149,6 +149,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
             <ScreenWrapper
                 style={[styles.flex1]}
                 keyboardAvoidingViewBehavior="height"
+                testID="AdditionalDetailsStep"
             >
                 <HeaderWithBackButton
                     title={translate('additionalDetailsStep.headerTitle')}
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index d62099167ced..ef0f4d17912e 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -55,7 +55,10 @@ class EnablePaymentsPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID="EnablePaymentsPage"
+            >
                 {() => {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
                         return (
diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.js
index f0121cd8f3ef..bcf0da3ae9a2 100644
--- a/src/pages/ErrorPage/NotFoundPage.js
+++ b/src/pages/ErrorPage/NotFoundPage.js
@@ -5,7 +5,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 // eslint-disable-next-line rulesdir/no-negated-variables
 function NotFoundPage() {
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="NotFoundPage">
             <FullPageNotFoundView shouldShow />
         </ScreenWrapper>
     );
diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 1a9a2d8c8767..6af38c84b582 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -154,7 +154,10 @@ function FlagCommentPage(props) {
     ));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="FlagCommentPage"
+        >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), props.report)}>
                     <HeaderWithBackButton title={props.translate('reportActionContextMenu.flagAsOffensive')} />
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index 34f996936654..d5b790a3b5ca 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -78,7 +78,7 @@ function GetAssistancePage(props) {
     }
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="GetAssistancePage">
             <HeaderWithBackButton
                 title={props.translate('getAssistancePage.title')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index cb54aa8e5a7b..a90ae3030ba2 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -173,6 +173,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
+            testID="NewChatPage"
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
                 <KeyboardAvoidingView
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index ce0bbda0d239..f2097ce0c62d 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -32,6 +32,7 @@ function NewChatSelectorPage(props) {
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="NewChatSelectorPage"
         >
             <HeaderWithBackButton
                 title={props.translate('sidebarScreen.fabNewChat')}
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index 206e9e74d91f..81c96c4aa199 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -80,6 +80,7 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(privateNotesInput.current)}
+            testID="PrivateNotesEditPage"
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note']) || !isCurrentUserNote}
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index 098bfd2a245b..5209410bfb5c 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -117,7 +117,10 @@ function PrivateNotesListPage({report, personalDetailsList, network, session}) {
     }, [report, personalDetailsList, session, translate]);
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="PrivateNotesListPage"
+        >
             <FullPageNotFoundView shouldShow={_.isEmpty(report.reportID) || (!report.isLoadingPrivateNotes && network.isOffline && _.isEmpty(lodashGet(report, 'privateNotes', {})))}>
                 <HeaderWithBackButton
                     title={translate('privateNotes.title')}
diff --git a/src/pages/PrivateNotes/PrivateNotesViewPage.js b/src/pages/PrivateNotes/PrivateNotesViewPage.js
index 48f053f10f90..92967795a756 100644
--- a/src/pages/PrivateNotes/PrivateNotesViewPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesViewPage.js
@@ -56,7 +56,10 @@ function PrivateNotesViewPage({route, personalDetailsList, session, report}) {
     const privateNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="PrivateNotesViewPage"
+        >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note'])}
                 subtitleKey="privateNotes.notesUnavailable"
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index b515da04b7be..645de1fc7d80 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -144,7 +144,7 @@ function ProfilePage(props) {
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="ProfilePage">
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 1ef43843571c..38604f0bf2b9 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -145,7 +145,10 @@ function ACHContractStep(props) {
     };
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ACHContractStep"
+        >
             <HeaderWithBackButton
                 title={props.translate('beneficialOwnersStep.additionalInformation')}
                 stepCounter={{step: 4, total: 5}}
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 2416639719fc..5ed03a7badab 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -73,7 +73,10 @@ function BankAccountManualStep(props) {
     const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, 'achData.bankAccountID'));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="BankAccountManualStep"
+        >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
                 stepCounter={{step: 1, total: 5}}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 70cf43fcfdc2..849bb809883e 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -89,6 +89,7 @@ function BankAccountPlaidStep(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldShowOfflineIndicator={false}
+            testID="BankAccountPlaidStep"
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 74482ef612ed..81b43764ad68 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -91,7 +91,10 @@ function BankAccountStep(props) {
     }
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="BankAccountStep"
+        >
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithBackButton
                     title={props.translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 22133415cea8..1c6115f2b465 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -140,7 +140,10 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
     const shouldDisableCompanyTaxID = Boolean(bankAccountID && getDefaultStateForField('companyTaxID'));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="CompanyStep"
+        >
             <HeaderWithBackButton
                 title={translate('companyStep.headerTitle')}
                 stepCounter={{step: 2, total: 5}}
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 46bd227d82dc..611586ce89fa 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -41,7 +41,10 @@ function ContinueBankAccountSetup(props) {
     const errors = lodashGet(props.reimbursementAccount, 'errors', {});
     const pendingAction = lodashGet(props.reimbursementAccount, 'pendingAction', null);
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ContinueBankAccountSetup"
+        >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
                 subtitle={props.policyName}
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 259aa8e89024..a539b3125d0c 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -56,6 +56,7 @@ function EnableStep(props) {
         <ScreenWrapper
             style={[styles.flex1, styles.justifyContentBetween]}
             includeSafeAreaPaddingBottom={false}
+            testID="EnableStep"
         >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index cdb3aeebe924..788d56f266cb 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -339,7 +339,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)) {
             return (
-                <ScreenWrapper>
+                <ScreenWrapper testID="ReimbursementAccountPage">
                     <FullPageNotFoundView
                         shouldShow
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
@@ -385,7 +385,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (errorText) {
             return (
-                <ScreenWrapper>
+                <ScreenWrapper testID="ReimbursementAccountPage">
                     <HeaderWithBackButton
                         title={this.props.translate('workspace.common.connectBankAccount')}
                         subtitle={policyName}
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index 5d91f5dae562..2b043bd31087 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -44,6 +44,7 @@ class RequestorOnfidoStep extends React.Component {
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
                 shouldShowOfflineIndicator={false}
+                testID="RequestorOnfidoStep"
             >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 9831f4b8190c..df55f3566518 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -90,7 +90,10 @@ class RequestorStep extends React.Component {
         }
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID="RequestorStep"
+            >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
                     stepCounter={{step: 3, total: 5}}
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 90dfc8060e19..bfae630557b2 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -131,6 +131,7 @@ class ValidationStep extends React.Component {
             <ScreenWrapper
                 style={[styles.flex1, styles.justifyContentBetween]}
                 includeSafeAreaPaddingBottom={false}
+                testID="ValidationStep"
             >
                 <HeaderWithBackButton
                     title={isVerifying ? this.props.translate('validationStep.headerTitle') : this.props.translate('workspace.common.testTransactions')}
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 3a9e0f5c2eb8..8be8cc225899 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -152,7 +152,7 @@ function ReportDetailsPage(props) {
     ) : null;
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="ReportDetailsPage">
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <ScrollView style={[styles.flex1]}>
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index 6ccb7a0c2e87..fe68a5d7ed2b 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -99,7 +99,10 @@ function ReportParticipantsPage(props) {
     }));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ReportParticipantsPage"
+        >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || ReportUtils.isArchivedRoom(props.report)}>
                     <HeaderWithBackButton
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
index f14b6c48b9dd..918735bad5e1 100644
--- a/src/pages/ReportWelcomeMessagePage.js
+++ b/src/pages/ReportWelcomeMessagePage.js
@@ -62,6 +62,7 @@ function ReportWelcomeMessagePage(props) {
                 }
                 focusAndUpdateMultilineInputRange(welcomeMessageInputRef.current);
             }}
+            testID="ReportWelcomeMessagePage"
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={!PolicyUtils.isPolicyAdmin(props.policy)}>
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 2ee29380ff80..ce43b757428a 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -169,7 +169,10 @@ class SearchPage extends Component {
         );
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID="SearchPage"
+            >
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
                         <HeaderWithBackButton title={this.props.translate('common.search')} />
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index a36149a5f4fa..6f35bf1b3600 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -54,7 +54,7 @@ class ShareCodePage extends React.Component {
         const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
         return (
-            <ScreenWrapper>
+            <ScreenWrapper testID="ShareCodePage">
                 <HeaderWithBackButton
                     title={this.props.translate('common.shareCode')}
                     onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.getReportDetailsRoute(this.props.report.reportID) : ROUTES.SETTINGS)}
diff --git a/src/pages/TeachersUnite/ImTeacherPage.js b/src/pages/TeachersUnite/ImTeacherPage.js
index dbeba700d208..d4e69dd5dd3b 100644
--- a/src/pages/TeachersUnite/ImTeacherPage.js
+++ b/src/pages/TeachersUnite/ImTeacherPage.js
@@ -19,7 +19,7 @@ function ImTeacherPage() {
     const {translate} = useLocalize();
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="ImTeacherPage">
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iAmATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index fe25c54cb8cc..10bc47c00556 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -80,7 +80,10 @@ function IntroSchoolPrincipalPage(props) {
     );
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="IntroSchoolPrincipalPage"
+        >
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.introSchoolPrincipal')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js
index 795bc170a83c..774217899ce4 100644
--- a/src/pages/TeachersUnite/KnowATeacherPage.js
+++ b/src/pages/TeachersUnite/KnowATeacherPage.js
@@ -91,7 +91,10 @@ function KnowATeacherPage(props) {
     );
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="KnowATeacherPage"
+        >
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iKnowATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index d5505a582c1c..535949ab522d 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -318,6 +318,7 @@ function ReportScreen({
             <ScreenWrapper
                 style={screenWrapperStyle}
                 shouldEnableKeyboardAvoidingView={isTopMostReportId}
+                testID="ReportScreen"
             >
                 <FullPageNotFoundView
                     shouldShow={shouldShowNotFoundPage}
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 3d54306b6248..6697aa793f7e 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -34,6 +34,7 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
+            testID="SidebarScreen"
         >
             {({insets}) => (
                 <>
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 1238d8934f75..7854960f8b78 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -131,6 +131,7 @@ function IOUCurrencySelection(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
+            testID="IOUCurrencySelection"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 92934a505a04..63eb35d3d4a1 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -63,6 +63,7 @@ function MoneyRequestCategoryPage({route, report, iou}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="MoneyRequestCategoryPage"
         >
             <HeaderWithBackButton
                 title={translate('common.category')}
diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 68af1a6244b6..1f14eac17603 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -85,6 +85,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="MoneyRequestDatePage"
         >
             <HeaderWithBackButton
                 title={translate('common.date')}
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 63aea67ce598..b17c638af2e3 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -90,6 +90,7 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
+            testID="MoneyRequestDescriptionPage"
         >
             <HeaderWithBackButton
                 title={translate('common.description')}
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index f8ae810eafba..53b4e0131f69 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -93,6 +93,7 @@ function MoneyRequestMerchantPage({iou, route}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
+            testID="MoneyRequestMerchantPage"
         >
             <HeaderWithBackButton
                 title={translate('common.merchant')}
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 33353bf5f4a4..7a035dd3a0b5 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -82,6 +82,7 @@ function MoneyRequestSelectorPage(props) {
                       ]
                     : []
             }
+            testID="MoneyRequestSelectorPage"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index 60be6035431c..b00643f65f4d 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -80,6 +80,7 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="MoneyRequestTagPage"
         >
             <HeaderWithBackButton
                 title={tagListName}
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index 0107b041abf4..67fb489a43f1 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -72,7 +72,7 @@ function SplitBillDetailsPage(props) {
     const {amount: splitAmount, currency: splitCurrency, comment: splitComment} = ReportUtils.getTransactionDetails(transaction);
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="SplitBillDetailsPage">
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || _.isEmpty(reportAction)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index e34730acccea..3cf209979204 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -171,6 +171,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}
             shouldEnableMaxHeight
+            testID="WaypointEditor"
         >
             <FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount) && isFocused}>
                 <HeaderWithBackButton
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 14a6cc8a7c23..83716374720f 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -277,7 +277,10 @@ function MoneyRequestConfirmPage(props) {
     };
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="MoneyRequestConfirmPage"
+        >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                     <HeaderWithBackButton
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index b9ee016d4099..0f08e591324b 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -114,6 +114,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
+            testID="MoneyRequestParticipantsPage"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index 6e44d8d57e32..c3b581cec642 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -176,6 +176,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             onEntryTransitionEnd={focusTextInput}
+            testID="NewRequestAmountPage"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 4af48b896fe0..105ea79637bb 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -81,7 +81,10 @@ function AboutPage(props) {
     ];
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="AboutPage"
+        >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
                     <HeaderWithBackButton
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index c6c8035e5477..73d5c8fca67b 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -55,7 +55,7 @@ function AppDownloadLinksPage(props) {
     ];
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="AppDownloadLinks">
             <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index 706fa3b62db6..5004b85312f3 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -26,7 +26,10 @@ function LanguagePage(props) {
     }));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="LanguagePage"
+        >
             <HeaderWithBackButton
                 title={props.translate('languagePage.language')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 0c3d28fe9d81..76791640f9bf 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -46,7 +46,10 @@ function PriorityModePage(props) {
     );
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="PriorityModePage"
+        >
             <HeaderWithBackButton
                 title={props.translate('priorityModePage.priorityMode')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
index 4e41d5fc7129..a901ee8d350a 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.js
@@ -35,7 +35,10 @@ function ThemePage(props) {
     }));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ThemePage"
+        >
             <HeaderWithBackButton
                 title={props.translate('themePage.theme')}
                 shouldShowBackButton
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index a0091e5c184b..321db65b116b 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -216,7 +216,7 @@ class ContactMethodDetailsPage extends Component {
         const loginData = this.props.loginList[contactMethod];
         if (!contactMethod || !loginData) {
             return (
-                <ScreenWrapper>
+                <ScreenWrapper testID="ContactMethodDetailsPage">
                     <FullPageNotFoundView
                         shouldShow
                         linkKey="contacts.goBackContactMethods"
@@ -232,7 +232,10 @@ class ContactMethodDetailsPage extends Component {
         const isFailedAddContactMethod = Boolean(lodashGet(loginData, 'errorFields.addedLogin'));
 
         return (
-            <ScreenWrapper onEntryTransitionEnd={() => this.validateCodeFormRef.current && this.validateCodeFormRef.current.focus()}>
+            <ScreenWrapper
+                onEntryTransitionEnd={() => this.validateCodeFormRef.current && this.validateCodeFormRef.current.focus()}
+                testID="ContactMethodDetailsPage"
+            >
                 <HeaderWithBackButton
                     title={formattedContactMethod}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS)}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 62e62183a156..41b44e5b6339 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -111,7 +111,10 @@ function ContactMethodsPage(props) {
     });
 
     return (
-        <ScreenWrapper shouldEnableKeyboardAvoidingView={false}>
+        <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
+            testID="ContactMethodsPage"
+        >
             <HeaderWithBackButton
                 title={props.translate('contacts.contactMethods')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 236b7c1c73aa..0de9c34e14b6 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -98,6 +98,7 @@ function NewContactMethodPage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="NewContactMethodPage"
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.newContactMethod')}
diff --git a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
index 7074ce45a7bb..5cb5704d56fd 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
@@ -47,7 +47,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) {
     };
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="StatusSetPage">
             <HeaderWithBackButton
                 title={translate('statusPage.status')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_STATUS)}
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index d93eeed2689c..d4924636acbc 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -69,6 +69,7 @@ function DisplayNamePage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="DisplayNamePage"
         >
             <HeaderWithBackButton
                 title={props.translate('displayNamePage.headerTitle')}
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index 886e207bf68a..2268aa08a7bd 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -129,7 +129,10 @@ function AddressPage({privatePersonalDetails}) {
     };
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="AddressPage"
+        >
             <HeaderWithBackButton
                 title={translate('privatePersonalDetails.homeAddress')}
                 shouldShowBackButton
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 22346a48658d..8fbd27a59d48 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -61,7 +61,10 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
     }, []);
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="DateOfBirthPage"
+        >
             <HeaderWithBackButton
                 title={translate('common.dob')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index 0caf20a3e128..4fb538ac59b6 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -71,6 +71,7 @@ function LegalNamePage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="LegalNamePage"
         >
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.legalName')}
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index e1c4f14047a2..eb6b7a5ba8bf 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -85,7 +85,7 @@ function PersonalDetailsInitialPage(props) {
     };
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="PersonalDetailsInitialPage">
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.personalDetails')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 1864ba60524c..edc6e29b58a6 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -107,7 +107,10 @@ function ProfilePage(props) {
     }, [props.currentUserPersonalDetails]);
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ProfilePage"
+        >
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 5f8824046d69..4f8fb7cdb0df 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -65,7 +65,10 @@ function PronounsPage({currentUserPersonalDetails}) {
     };
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="PronounsPage"
+        >
             <HeaderWithBackButton
                 title={translate('pronounsPage.pronouns')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 94cb40a3f6f3..101d5b2cf77b 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -41,7 +41,7 @@ function TimezoneInitialPage(props) {
     };
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="TimezoneInitialPage">
             <HeaderWithBackButton
                 title={props.translate('timezonePage.timezone')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index 228bae5cbb6b..05de3657e0ac 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -78,7 +78,10 @@ function TimezoneSelectPage(props) {
     };
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="TimezoneSelectPage"
+        >
             <HeaderWithBackButton
                 title={translate('timezonePage.timezone')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
index 17bd77a235ce..5fdb07ceddfa 100644
--- a/src/pages/settings/Report/NotificationPreferencePage.js
+++ b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -43,7 +43,10 @@ function NotificationPreferencePage(props) {
     );
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="NotificationPreferencePage"
+        >
             <FullPageNotFoundView shouldShow={shouldDisableNotificationPreferences}>
                 <HeaderWithBackButton
                     title={props.translate('notificationPreferencesPage.header')}
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index c2bd69028a44..f50b5dcd3882 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -75,7 +75,7 @@ function ReportSettingsPage(props) {
     const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(report);
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="ReportSettingsPage">
             <FullPageNotFoundView shouldShow={shouldDisableSettings}>
                 <HeaderWithBackButton
                     title={translate('common.settings')}
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index ee15a1649261..dd2ab947b4e8 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -81,6 +81,7 @@ function RoomNamePage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => roomNameInputRef.current && roomNameInputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
+            testID="RoomNamePage"
         >
             <FullPageNotFoundView shouldShow={ReportUtils.shouldDisableRename(report, policy)}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
index 59ad90a2cd1f..ce9a9db725fb 100644
--- a/src/pages/settings/Report/WriteCapabilityPage.js
+++ b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -51,7 +51,10 @@ function WriteCapabilityPage(props) {
     const isAbleToEdit = !ReportUtils.isAdminRoom(props.report) && PolicyUtils.isPolicyAdmin(props.policy) && !ReportUtils.isArchivedRoom(props.report);
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="WriteCapabilityPage"
+        >
             <FullPageNotFoundView shouldShow={!isAbleToEdit}>
                 <HeaderWithBackButton
                     title={props.translate('writeCapabilityPage.label')}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index b2370156228a..a5a961705585 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -76,7 +76,10 @@ function CloseAccountPage(props) {
     const userEmailOrPhone = props.formatPhoneNumber(props.session.email);
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="CloseAccountPage"
+        >
             <HeaderWithBackButton
                 title={props.translate('closeAccountPage.closeAccount')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 16f9489d87b0..817bd9e5fb5b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -24,6 +24,7 @@ function StepWrapper({
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
+            testID="StepWrapper"
         >
             <AnimatedStep
                 style={[styles.flex1]}
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 606c2f0809b8..e41f833941ad 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -108,6 +108,7 @@ function DebitCardPage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
+            testID="AddDebitCardPage"
         >
             <HeaderWithBackButton
                 title={translate('addDebitCardPage.addADebitCard')}
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
index fefc1288f688..19bfcf3e4b8c 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
@@ -52,7 +52,7 @@ function ChooseTransferAccountPage(props) {
     };
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="ChooseTransferAccountPage">
             <HeaderWithBackButton
                 title={props.translate('chooseTransferAccountPage.chooseAccount')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)}
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index b52695c2e922..10e591e5945b 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -137,7 +137,7 @@ function TransferBalancePage(props) {
 
     if (props.walletTransfer.shouldShowSuccess && !props.walletTransfer.loading) {
         return (
-            <ScreenWrapper>
+            <ScreenWrapper testID="TransferBalancePage">
                 <HeaderWithBackButton
                     title={props.translate('common.transferBalance')}
                     onBackButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
@@ -170,7 +170,7 @@ function TransferBalancePage(props) {
     const shouldShowTransferView = PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, props.bankAccountList) && props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="TransferBalancePage">
             <FullPageNotFoundView
                 shouldShow={!shouldShowTransferView}
                 titleKey="notFound.pageNotFound"
diff --git a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
index b416ded298e5..40c7bde7d1f5 100644
--- a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
@@ -348,7 +348,7 @@ function BaseWalletPage(props) {
     const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || isSmallScreenWidth;
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="BaseWalletPage">
             <HeaderWithBackButton
                 title={translate('common.wallet')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 50b0af0bfa05..03788298debf 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -22,6 +22,7 @@ function SignInModal() {
             style={[styles.highlightBG]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="SignInModal"
         >
             <HeaderWithBackButton />
             <SignInPage isInModal />
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index dacf368a574e..008e31a96c1d 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -57,6 +57,7 @@ function NewTaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
             shouldEnableMaxHeight
+            testID="NewTaskDescriptionPage"
         >
             <HeaderWithBackButton
                 title={props.translate('task.description')}
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index be3b76e2b3ad..d6b8c04e60ad 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -77,6 +77,7 @@ function NewTaskDetailsPage(props) {
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="NewTaskDetailsPage"
         >
             <HeaderWithBackButton
                 title={props.translate('newTaskPage.assignTask')}
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index e4aa0bcb08e1..a82f199ca2d2 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -143,7 +143,10 @@ function NewTaskPage(props) {
     }
 
     return (
-        <ScreenWrapper shouldEnableKeyboardAvoidingView={false}>
+        <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
+            testID="NewTaskPage"
+        >
             <FullPageNotFoundView
                 shouldShow={!isAllowedToCreateTask}
                 onBackButtonPress={() => Task.dismissModalAndClearOutTaskInfo()}
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 14d7e7d23b9e..8b7401cc3023 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -77,6 +77,7 @@ function NewTaskTitlePage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="NewTaskTitlePage"
         >
             <HeaderWithBackButton
                 title={props.translate('task.title')}
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 2e7ddea1926d..18918b8c9db1 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -209,6 +209,7 @@ function TaskAssigneeSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
+            testID="TaskAssigneeeSelectorModal"
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 382e8d80d4ad..3a336486dbfd 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -67,6 +67,7 @@ function TaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
             shouldEnableMaxHeight
+            testID="TaskDescriptionPage"
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index 44d7b1f6a633..45694492aaca 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -116,6 +116,7 @@ function TaskShareDestinationSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
+            testID="TaskShareDestinationSelectorModal"
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index be0884e971ae..71da6462b118 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -79,6 +79,7 @@ function TaskTitlePage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             shouldEnableMaxHeight
+            testID="TaskTitlePage"
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index cbd9b72e3299..336f2cdda0aa 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -94,6 +94,7 @@ function WalletStatementPage(props) {
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             includeSafeAreaPaddingBottom={false}
+            testID="WalletStatementPage"
         >
             <HeaderWithBackButton
                 title={Str.recapitalize(title)}
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 8f93434e6845..20c94d9e2c07 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -182,7 +182,10 @@ function WorkspaceInitialPage(props) {
     ];
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="WorkspaceInitialPage"
+        >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 3baf84f54ccf..b72e71f18cc5 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -158,7 +158,10 @@ class WorkspaceInviteMessagePage extends React.Component {
         const policyName = lodashGet(this.props.policy, 'name');
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID="WorkspaceInviteMessagePage"
+            >
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)}
                     subtitleKey={_.isEmpty(this.props.policy) ? undefined : 'workspace.common.notAuthorized'}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index e37588d2d401..7ec10e33debb 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -197,7 +197,10 @@ function WorkspaceInvitePage(props) {
     }, [excludedUsers, translate, searchTerm, policyName, userToInvite, personalDetails]);
 
     return (
-        <ScreenWrapper shouldEnableMaxHeight>
+        <ScreenWrapper
+            shouldEnableMaxHeight
+            testID="WorkspaceInvitePage"
+        >
             {({didScreenTransitionEnd}) => {
                 const sections = didScreenTransitionEnd ? getSections() : [];
 
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 7bb9a91c130e..669b0e41b08d 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -344,6 +344,7 @@ function WorkspaceMembersPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             style={[styles.defaultModalContainer]}
+            testID="WorkspaceMembersPage"
         >
             <FullPageNotFoundView
                 shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index f112744842b3..89a3e854578d 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -150,6 +150,7 @@ function WorkspaceNewRoomPage(props) {
                 includeSafeAreaPaddingBottom={false}
                 includePaddingTop={false}
                 shouldEnablePickerAvoiding={false}
+                testID="WorkspaceNewRoomPage"
             >
                 {({insets}) => (
                     <KeyboardAvoidingView
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index fa04f5cfc49e..95f5ff334474 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -102,6 +102,7 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            testID="WorkspacePageWithSections"
         >
             <FullPageNotFoundView
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}

From 83aa25962d629a0cf62c928e4e327efd0af87b0b Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 09:40:13 +0800
Subject: [PATCH 114/123] Add testID to all ScreenWrapper components in
 src/components

---
 src/components/AvatarCropModal/AvatarCropModal.js   |  1 +
 .../CountryPicker/CountrySelectorModal.js           |  1 +
 src/components/DistanceRequest.js                   |  1 +
 src/components/HeaderPageLayout.js                  |  1 +
 .../NewDatePicker/CalendarPicker/YearPickerModal.js |  1 +
 .../ReimbursementAccountLoadingIndicator.js         | 13 ++++++-------
 src/components/StatePicker/StateSelectorModal.js    |  1 +
 7 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index baa958106f84..d16ba1364b71 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -366,6 +366,7 @@ function AvatarCropModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="AvatarCropModal"
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton
diff --git a/src/components/CountryPicker/CountrySelectorModal.js b/src/components/CountryPicker/CountrySelectorModal.js
index ac543d9921d2..ba8c369d7b96 100644
--- a/src/components/CountryPicker/CountrySelectorModal.js
+++ b/src/components/CountryPicker/CountrySelectorModal.js
@@ -78,6 +78,7 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="CountrySelectorModal"
             >
                 <HeaderWithBackButton
                     title={translate('common.country')}
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 8937fc434f53..51cd47a339dc 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -311,6 +311,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
+            testID="DistanceRequest"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index bec1e52b1cad..b57a5bc85e82 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -58,6 +58,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
+            testID="HeaderPageLayout"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
index 1149f9dc56ce..d0d52daa9206 100644
--- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
@@ -64,6 +64,7 @@ function YearPickerModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="YearPickerModal"
             >
                 <HeaderWithBackButton
                     title={translate('yearPickerPage.year')}
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index 61a602be0bda..0aefa0649ce8 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -4,14 +4,12 @@ import PropTypes from 'prop-types';
 import Lottie from 'lottie-react-native';
 import * as LottieAnimations from './LottieAnimations';
 import styles from '../styles/styles';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import useLocalize from '../hooks/useLocalize';
 import Text from './Text';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import ScreenWrapper from './ScreenWrapper';
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
-import compose from '../libs/compose';
-import {withNetwork} from './OnyxProvider';
 
 const propTypes = {
     /** Whether the user is submitting verifications data */
@@ -19,17 +17,18 @@ const propTypes = {
 
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress: PropTypes.func.isRequired,
-    ...withLocalizePropTypes,
 };
 
 function ReimbursementAccountLoadingIndicator(props) {
+    const {translate} = useLocalize();
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}
+            testID="ReimbursementAccountLoadingIndicator"
         >
             <HeaderWithBackButton
-                title={props.translate('reimbursementAccountLoadingAnimation.oneMoment')}
+                title={translate('reimbursementAccountLoadingAnimation.oneMoment')}
                 onBackButtonPress={props.onBackButtonPress}
             />
             <FullPageOfflineBlockingView>
@@ -42,7 +41,7 @@ function ReimbursementAccountLoadingIndicator(props) {
                             style={styles.loadingVBAAnimation}
                         />
                         <View style={[styles.ph6]}>
-                            <Text style={[styles.textAlignCenter]}>{props.translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
+                            <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
                         </View>
                     </View>
                 ) : (
@@ -56,4 +55,4 @@ function ReimbursementAccountLoadingIndicator(props) {
 ReimbursementAccountLoadingIndicator.propTypes = propTypes;
 ReimbursementAccountLoadingIndicator.displayName = 'ReimbursementAccountLoadingIndicator';
 
-export default compose(withLocalize, withNetwork())(ReimbursementAccountLoadingIndicator);
+export default ReimbursementAccountLoadingIndicator;
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index bea335840c53..a5e20470977e 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -84,6 +84,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="StateSelectorModal"
             >
                 <HeaderWithBackButton
                     title={label || translate('common.state')}

From 313c717d1d00321686eb9d8899612737b1322a9e Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 10:27:12 +0800
Subject: [PATCH 115/123] Fix lint

---
 src/pages/home/ReportScreen.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index f8ea8de640bd..f2b0875dbc53 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -88,7 +88,6 @@ const propTypes = {
     /** Whether user is leaving the current report */
     userLeavingStatus: PropTypes.bool,
 
-    ...windowDimensionsPropTypes,
     ...viewportOffsetTopPropTypes,
     ...withCurrentReportIDPropTypes,
 };

From 4cdd4b171606096b728b4ace0567f67f2ffe4a36 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Fri, 22 Sep 2023 08:30:20 +0530
Subject: [PATCH 116/123] add hub for exports

---
 docs/new-expensify/hubs/exports.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/new-expensify/hubs/exports.html b/docs/new-expensify/hubs/exports.html
index e69de29bb2d1..16c96cb51d01 100644
--- a/docs/new-expensify/hubs/exports.html
+++ b/docs/new-expensify/hubs/exports.html
@@ -0,0 +1,6 @@
+---
+layout: default
+title: Exports
+---
+
+{% include hub.html %}
\ No newline at end of file

From 869aa1c99a966cfb89284b82e76ff801e7289f51 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Fri, 22 Sep 2023 08:50:41 +0530
Subject: [PATCH 117/123] fix title case

---
 .github/scripts/createDocsRoutes.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/scripts/createDocsRoutes.js b/.github/scripts/createDocsRoutes.js
index 39cd98383de1..b371caee24b4 100644
--- a/.github/scripts/createDocsRoutes.js
+++ b/.github/scripts/createDocsRoutes.js
@@ -16,7 +16,8 @@ const platformNames = {
  * @returns {String}
  */
 function toTitleCase(str) {
-    return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+    console.log(str)
+    return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1));
 }
 
 /**

From 4f975528315842e5b0c15b43938721e965f409ee Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Fri, 22 Sep 2023 08:51:28 +0530
Subject: [PATCH 118/123] remove console log

---
 .github/scripts/createDocsRoutes.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/scripts/createDocsRoutes.js b/.github/scripts/createDocsRoutes.js
index b371caee24b4..6604a9d207fa 100644
--- a/.github/scripts/createDocsRoutes.js
+++ b/.github/scripts/createDocsRoutes.js
@@ -16,7 +16,6 @@ const platformNames = {
  * @returns {String}
  */
 function toTitleCase(str) {
-    console.log(str)
     return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1));
 }
 

From d00cc56287721f1bda09ffd429b51f7375517745 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 22 Sep 2023 11:39:30 +0800
Subject: [PATCH 119/123] temporarily keep maskedPan

---
 src/types/onyx/Card.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index d26176f5e7f7..489040626e07 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -10,6 +10,7 @@ type Card = {
     bank: string;
     availableSpend: number;
     domainName: string;
+    maskedPan: string; // do not reference, removing as part of Expensify/App#27943
     lastFourPAN: string;
     cardName: string;
     isVirtual: boolean;

From 4b4498154180a60a275b922d0d04db0194b87079 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 11:55:54 +0800
Subject: [PATCH 120/123] Use displayName for testID

---
 src/components/AvatarCropModal/AvatarCropModal.js             | 2 +-
 src/components/CountryPicker/CountrySelectorModal.js          | 2 +-
 src/components/DistanceRequest.js                             | 2 +-
 src/components/HeaderPageLayout.js                            | 2 +-
 .../NewDatePicker/CalendarPicker/YearPickerModal.js           | 2 +-
 src/components/ReimbursementAccountLoadingIndicator.js        | 2 +-
 src/components/StatePicker/StateSelectorModal.js              | 2 +-
 src/pages/AddPersonalBankAccountPage.js                       | 2 +-
 src/pages/DetailsPage.js                                      | 2 +-
 src/pages/EditRequestAmountPage.js                            | 2 +-
 src/pages/EditRequestCategoryPage.js                          | 2 +-
 src/pages/EditRequestCreatedPage.js                           | 2 +-
 src/pages/EditRequestDescriptionPage.js                       | 2 +-
 src/pages/EditRequestMerchantPage.js                          | 2 +-
 src/pages/EditRequestReceiptPage.js                           | 2 +-
 src/pages/EnablePayments/AdditionalDetailsStep.js             | 2 +-
 src/pages/EnablePayments/EnablePaymentsPage.js                | 2 +-
 src/pages/ErrorPage/NotFoundPage.js                           | 2 +-
 src/pages/FlagCommentPage.js                                  | 2 +-
 src/pages/GetAssistancePage.js                                | 2 +-
 src/pages/NewChatPage.js                                      | 2 +-
 src/pages/NewChatSelectorPage.js                              | 2 +-
 src/pages/PrivateNotes/PrivateNotesEditPage.js                | 2 +-
 src/pages/PrivateNotes/PrivateNotesListPage.js                | 2 +-
 src/pages/PrivateNotes/PrivateNotesViewPage.js                | 2 +-
 src/pages/ProfilePage.js                                      | 2 +-
 src/pages/ReimbursementAccount/ACHContractStep.js             | 2 +-
 src/pages/ReimbursementAccount/BankAccountManualStep.js       | 2 +-
 src/pages/ReimbursementAccount/BankAccountPlaidStep.js        | 2 +-
 src/pages/ReimbursementAccount/BankAccountStep.js             | 2 +-
 src/pages/ReimbursementAccount/CompanyStep.js                 | 2 +-
 src/pages/ReimbursementAccount/ContinueBankAccountSetup.js    | 2 +-
 src/pages/ReimbursementAccount/EnableStep.js                  | 2 +-
 src/pages/ReimbursementAccount/ReimbursementAccountPage.js    | 4 ++--
 src/pages/ReimbursementAccount/RequestorOnfidoStep.js         | 2 +-
 src/pages/ReimbursementAccount/RequestorStep.js               | 2 +-
 src/pages/ReimbursementAccount/ValidationStep.js              | 2 +-
 src/pages/ReportDetailsPage.js                                | 2 +-
 src/pages/ReportParticipantsPage.js                           | 2 +-
 src/pages/ReportWelcomeMessagePage.js                         | 2 +-
 src/pages/SearchPage.js                                       | 2 +-
 src/pages/ShareCodePage.js                                    | 2 +-
 src/pages/TeachersUnite/ImTeacherPage.js                      | 2 +-
 src/pages/TeachersUnite/IntroSchoolPrincipalPage.js           | 2 +-
 src/pages/TeachersUnite/KnowATeacherPage.js                   | 2 +-
 src/pages/home/ReportScreen.js                                | 2 +-
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js     | 2 +-
 src/pages/iou/IOUCurrencySelection.js                         | 2 +-
 src/pages/iou/MoneyRequestCategoryPage.js                     | 2 +-
 src/pages/iou/MoneyRequestDatePage.js                         | 2 +-
 src/pages/iou/MoneyRequestDescriptionPage.js                  | 2 +-
 src/pages/iou/MoneyRequestMerchantPage.js                     | 2 +-
 src/pages/iou/MoneyRequestSelectorPage.js                     | 2 +-
 src/pages/iou/MoneyRequestTagPage.js                          | 2 +-
 src/pages/iou/SplitBillDetailsPage.js                         | 2 +-
 src/pages/iou/WaypointEditor.js                               | 2 +-
 src/pages/iou/steps/MoneyRequestConfirmPage.js                | 2 +-
 .../MoneyRequestParticipantsPage.js                           | 2 +-
 src/pages/iou/steps/NewRequestAmountPage.js                   | 2 +-
 src/pages/settings/AboutPage/AboutPage.js                     | 2 +-
 src/pages/settings/AppDownloadLinks.js                        | 2 +-
 src/pages/settings/Preferences/LanguagePage.js                | 2 +-
 src/pages/settings/Preferences/PriorityModePage.js            | 2 +-
 src/pages/settings/Preferences/ThemePage.js                   | 2 +-
 .../settings/Profile/Contacts/ContactMethodDetailsPage.js     | 4 ++--
 src/pages/settings/Profile/Contacts/ContactMethodsPage.js     | 2 +-
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js   | 2 +-
 src/pages/settings/Profile/CustomStatus/StatusSetPage.js      | 2 +-
 src/pages/settings/Profile/DisplayNamePage.js                 | 2 +-
 src/pages/settings/Profile/PersonalDetails/AddressPage.js     | 2 +-
 src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js | 2 +-
 src/pages/settings/Profile/PersonalDetails/LegalNamePage.js   | 2 +-
 .../Profile/PersonalDetails/PersonalDetailsInitialPage.js     | 2 +-
 src/pages/settings/Profile/ProfilePage.js                     | 2 +-
 src/pages/settings/Profile/PronounsPage.js                    | 2 +-
 src/pages/settings/Profile/TimezoneInitialPage.js             | 2 +-
 src/pages/settings/Profile/TimezoneSelectPage.js              | 2 +-
 src/pages/settings/Report/NotificationPreferencePage.js       | 2 +-
 src/pages/settings/Report/ReportSettingsPage.js               | 2 +-
 src/pages/settings/Report/RoomNamePage.js                     | 2 +-
 src/pages/settings/Report/WriteCapabilityPage.js              | 2 +-
 src/pages/settings/Security/CloseAccountPage.js               | 2 +-
 .../Security/TwoFactorAuth/StepWrapper/StepWrapper.js         | 2 +-
 src/pages/settings/Wallet/AddDebitCardPage.js                 | 2 +-
 src/pages/settings/Wallet/ChooseTransferAccountPage.js        | 2 +-
 src/pages/settings/Wallet/TransferBalancePage.js              | 4 ++--
 src/pages/settings/Wallet/WalletPage/BaseWalletPage.js        | 2 +-
 src/pages/signin/SignInModal.js                               | 2 +-
 src/pages/tasks/NewTaskDescriptionPage.js                     | 2 +-
 src/pages/tasks/NewTaskDetailsPage.js                         | 2 +-
 src/pages/tasks/NewTaskPage.js                                | 2 +-
 src/pages/tasks/NewTaskTitlePage.js                           | 2 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js                  | 2 +-
 src/pages/tasks/TaskDescriptionPage.js                        | 2 +-
 src/pages/tasks/TaskShareDestinationSelectorModal.js          | 2 +-
 src/pages/tasks/TaskTitlePage.js                              | 2 +-
 src/pages/wallet/WalletStatementPage.js                       | 2 +-
 src/pages/workspace/WorkspaceInitialPage.js                   | 2 +-
 src/pages/workspace/WorkspaceInviteMessagePage.js             | 2 +-
 src/pages/workspace/WorkspaceInvitePage.js                    | 2 +-
 src/pages/workspace/WorkspaceMembersPage.js                   | 2 +-
 src/pages/workspace/WorkspaceNewRoomPage.js                   | 2 +-
 src/pages/workspace/WorkspacePageWithSections.js              | 2 +-
 103 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index d16ba1364b71..10e8a76f756d 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -366,7 +366,7 @@ function AvatarCropModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="AvatarCropModal"
+                testID={AvatarCropModal.displayName}
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton
diff --git a/src/components/CountryPicker/CountrySelectorModal.js b/src/components/CountryPicker/CountrySelectorModal.js
index ba8c369d7b96..6c6cd19af0c7 100644
--- a/src/components/CountryPicker/CountrySelectorModal.js
+++ b/src/components/CountryPicker/CountrySelectorModal.js
@@ -78,7 +78,7 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="CountrySelectorModal"
+                testID={CountrySelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('common.country')}
diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index 51cd47a339dc..4ac49a5889a8 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -311,7 +311,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
-            testID="DistanceRequest"
+            testID={DistanceRequest.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index b57a5bc85e82..17c2255593e9 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -58,7 +58,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
-            testID="HeaderPageLayout"
+            testID={HeaderPageLayout.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
index d0d52daa9206..9825109fbb63 100644
--- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
@@ -64,7 +64,7 @@ function YearPickerModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="YearPickerModal"
+                testID={YearPickerModal.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('yearPickerPage.year')}
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index 0aefa0649ce8..21aac35f4005 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -25,7 +25,7 @@ function ReimbursementAccountLoadingIndicator(props) {
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}
-            testID="ReimbursementAccountLoadingIndicator"
+            testID={ReimbursementAccountLoadingIndicator.displayName}
         >
             <HeaderWithBackButton
                 title={translate('reimbursementAccountLoadingAnimation.oneMoment')}
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index a5e20470977e..378dcc4ebc8b 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -84,7 +84,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
-                testID="StateSelectorModal"
+                testID={StateSelectorModal.displayName}
             >
                 <HeaderWithBackButton
                     title={label || translate('common.state')}
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index cc50f927d428..7c04970c3980 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -103,7 +103,7 @@ class AddPersonalBankAccountPage extends React.Component {
                 includeSafeAreaPaddingBottom={shouldShowSuccess}
                 shouldEnablePickerAvoiding={false}
                 shouldShowOfflineIndicator={false}
-                testID="AddPersonalBankAccountPage"
+                testID={AddPersonalBankAccountPage.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('bankAccount.addBankAccount')}
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index cd4e95333ae1..058ceef16b4c 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -126,7 +126,7 @@ function DetailsPage(props) {
     const isCurrentUser = _.keys(props.loginList).includes(details.login);
 
     return (
-        <ScreenWrapper testID="DetailsPage">
+        <ScreenWrapper testID={DetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View
diff --git a/src/pages/EditRequestAmountPage.js b/src/pages/EditRequestAmountPage.js
index 2f691afe4d5e..b24275cbdfc0 100644
--- a/src/pages/EditRequestAmountPage.js
+++ b/src/pages/EditRequestAmountPage.js
@@ -56,7 +56,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, report
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestAmountPage"
+            testID={EditRequestAmountPage.displayName}
         >
             <HeaderWithBackButton title={translate('iou.amount')} />
             <MoneyRequestAmountForm
diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
index 1f5b01680d34..e47935dd9df1 100644
--- a/src/pages/EditRequestCategoryPage.js
+++ b/src/pages/EditRequestCategoryPage.js
@@ -30,7 +30,7 @@ function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestCategoryPage"
+            testID={EditRequestCategoryPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.category')}
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index 344e767a69ca..9edce7350400 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -23,7 +23,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestCreatedPage"
+            testID={EditRequestCreatedPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.date')} />
             <Form
diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
index c497ed38402f..0b4858b0bacb 100644
--- a/src/pages/EditRequestDescriptionPage.js
+++ b/src/pages/EditRequestDescriptionPage.js
@@ -27,7 +27,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => descriptionInputRef.current && descriptionInputRef.current.focus()}
-            testID="EditRequestDescriptionPage"
+            testID={EditRequestDescriptionPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.description')} />
             <Form
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
index 02ed65d0f856..7e15a88a3ab4 100644
--- a/src/pages/EditRequestMerchantPage.js
+++ b/src/pages/EditRequestMerchantPage.js
@@ -38,7 +38,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => merchantInputRef.current && merchantInputRef.current.focus()}
-            testID="EditRequestMerchantPage"
+            testID={EditRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.merchant')} />
             <Form
diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index ea6e85a9b9d3..2ef33a72423b 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -31,7 +31,7 @@ function EditRequestReceiptPage({route, transactionID}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="EditRequestReceiptPage"
+            testID={EditRequestReceiptPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.receipt')}
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index c4c35d0d453f..cf18fc6d7303 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -149,7 +149,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
             <ScreenWrapper
                 style={[styles.flex1]}
                 keyboardAvoidingViewBehavior="height"
-                testID="AdditionalDetailsStep"
+                testID={AdditionalDetailsStep.displayName}
             >
                 <HeaderWithBackButton
                     title={translate('additionalDetailsStep.headerTitle')}
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index ef0f4d17912e..064f9371e46a 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -57,7 +57,7 @@ class EnablePaymentsPage extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="EnablePaymentsPage"
+                testID={EnablePaymentsPage.displayName}
             >
                 {() => {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.js
index bcf0da3ae9a2..445e81296566 100644
--- a/src/pages/ErrorPage/NotFoundPage.js
+++ b/src/pages/ErrorPage/NotFoundPage.js
@@ -5,7 +5,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 // eslint-disable-next-line rulesdir/no-negated-variables
 function NotFoundPage() {
     return (
-        <ScreenWrapper testID="NotFoundPage">
+        <ScreenWrapper testID={NotFoundPage.displayName}>
             <FullPageNotFoundView shouldShow />
         </ScreenWrapper>
     );
diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 6af38c84b582..53da810007ea 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -156,7 +156,7 @@ function FlagCommentPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="FlagCommentPage"
+            testID={FlagCommentPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), props.report)}>
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index d5b790a3b5ca..97b498d758b7 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -78,7 +78,7 @@ function GetAssistancePage(props) {
     }
 
     return (
-        <ScreenWrapper testID="GetAssistancePage">
+        <ScreenWrapper testID={GetAssistancePage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('getAssistancePage.title')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index a90ae3030ba2..c3b66910face 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -173,7 +173,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
-            testID="NewChatPage"
+            testID={NewChatPage.displayName}
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
                 <KeyboardAvoidingView
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index f2097ce0c62d..42b56256da20 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -32,7 +32,7 @@ function NewChatSelectorPage(props) {
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewChatSelectorPage"
+            testID={NewChatSelectorPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('sidebarScreen.fabNewChat')}
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index 81c96c4aa199..5f12d8087a93 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -80,7 +80,7 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(privateNotesInput.current)}
-            testID="PrivateNotesEditPage"
+            testID={PrivateNotesEditPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note']) || !isCurrentUserNote}
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index 945b0dbdf793..fdfaa4c60e33 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -119,7 +119,7 @@ function PrivateNotesListPage({report, personalDetailsList, network, session}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PrivateNotesListPage"
+            testID={PrivateNotesListPage.displayName}
         >
             <FullPageNotFoundView shouldShow={_.isEmpty(report.reportID) || (!report.isLoadingPrivateNotes && network.isOffline && _.isEmpty(lodashGet(report, 'privateNotes', {})))}>
                 <HeaderWithBackButton
diff --git a/src/pages/PrivateNotes/PrivateNotesViewPage.js b/src/pages/PrivateNotes/PrivateNotesViewPage.js
index 92967795a756..4c6d960d5d9a 100644
--- a/src/pages/PrivateNotes/PrivateNotesViewPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesViewPage.js
@@ -58,7 +58,7 @@ function PrivateNotesViewPage({route, personalDetailsList, session, report}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PrivateNotesViewPage"
+            testID={PrivateNotesViewPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note'])}
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 645de1fc7d80..f9b92e2dec06 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -144,7 +144,7 @@ function ProfilePage(props) {
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
     return (
-        <ScreenWrapper testID="ProfilePage">
+        <ScreenWrapper testID={ProfilePage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 38604f0bf2b9..761be71d864a 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -147,7 +147,7 @@ function ACHContractStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ACHContractStep"
+            testID={ACHContractStep.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('beneficialOwnersStep.additionalInformation')}
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 5ed03a7badab..9d0b0c1f5bed 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -75,7 +75,7 @@ function BankAccountManualStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="BankAccountManualStep"
+            testID={BankAccountManualStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 849bb809883e..3fbf2a138384 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -89,7 +89,7 @@ function BankAccountPlaidStep(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldShowOfflineIndicator={false}
-            testID="BankAccountPlaidStep"
+            testID={BankAccountPlaidStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 81b43764ad68..e6d508da4392 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -93,7 +93,7 @@ function BankAccountStep(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="BankAccountStep"
+            testID={BankAccountStep.displayName}
         >
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithBackButton
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 1c6115f2b465..0ca9b1b7ea92 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -142,7 +142,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="CompanyStep"
+            testID={CompanyStep.displayName}
         >
             <HeaderWithBackButton
                 title={translate('companyStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 611586ce89fa..5bde2884be51 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -43,7 +43,7 @@ function ContinueBankAccountSetup(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ContinueBankAccountSetup"
+            testID={ContinueBankAccountSetup.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index a539b3125d0c..f0cd826f4c43 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -56,7 +56,7 @@ function EnableStep(props) {
         <ScreenWrapper
             style={[styles.flex1, styles.justifyContentBetween]}
             includeSafeAreaPaddingBottom={false}
-            testID="EnableStep"
+            testID={EnableStep.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 788d56f266cb..e24e12c639bd 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -339,7 +339,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)) {
             return (
-                <ScreenWrapper testID="ReimbursementAccountPage">
+                <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
                     <FullPageNotFoundView
                         shouldShow
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
@@ -385,7 +385,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (errorText) {
             return (
-                <ScreenWrapper testID="ReimbursementAccountPage">
+                <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
                     <HeaderWithBackButton
                         title={this.props.translate('workspace.common.connectBankAccount')}
                         subtitle={policyName}
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index 2b043bd31087..72e3850aabd0 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -44,7 +44,7 @@ class RequestorOnfidoStep extends React.Component {
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
                 shouldShowOfflineIndicator={false}
-                testID="RequestorOnfidoStep"
+                testID={RequestorOnfidoStep.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index df55f3566518..cb1d306eebb6 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -92,7 +92,7 @@ class RequestorStep extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="RequestorStep"
+                testID={RequestorStep.displayName}
             >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index bfae630557b2..851c4a4b2496 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -131,7 +131,7 @@ class ValidationStep extends React.Component {
             <ScreenWrapper
                 style={[styles.flex1, styles.justifyContentBetween]}
                 includeSafeAreaPaddingBottom={false}
-                testID="ValidationStep"
+                testID={ValidationStep.displayName}
             >
                 <HeaderWithBackButton
                     title={isVerifying ? this.props.translate('validationStep.headerTitle') : this.props.translate('workspace.common.testTransactions')}
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 8be8cc225899..4cc3c2b1a5ba 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -152,7 +152,7 @@ function ReportDetailsPage(props) {
     ) : null;
 
     return (
-        <ScreenWrapper testID="ReportDetailsPage">
+        <ScreenWrapper testID={ReportDetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <ScrollView style={[styles.flex1]}>
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index fe68a5d7ed2b..c10401fb90db 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -101,7 +101,7 @@ function ReportParticipantsPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ReportParticipantsPage"
+            testID={ReportParticipantsPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || ReportUtils.isArchivedRoom(props.report)}>
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
index 918735bad5e1..a9c09d870574 100644
--- a/src/pages/ReportWelcomeMessagePage.js
+++ b/src/pages/ReportWelcomeMessagePage.js
@@ -62,7 +62,7 @@ function ReportWelcomeMessagePage(props) {
                 }
                 focusAndUpdateMultilineInputRange(welcomeMessageInputRef.current);
             }}
-            testID="ReportWelcomeMessagePage"
+            testID={ReportWelcomeMessagePage.displayName}
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={!PolicyUtils.isPolicyAdmin(props.policy)}>
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index ce43b757428a..141f4e841853 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -171,7 +171,7 @@ class SearchPage extends Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="SearchPage"
+                testID={SearchPage.displayName}
             >
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 6f35bf1b3600..f19c79db5459 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -54,7 +54,7 @@ class ShareCodePage extends React.Component {
         const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
 
         return (
-            <ScreenWrapper testID="ShareCodePage">
+            <ScreenWrapper testID={ShareCodePage.displayName}>
                 <HeaderWithBackButton
                     title={this.props.translate('common.shareCode')}
                     onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.getReportDetailsRoute(this.props.report.reportID) : ROUTES.SETTINGS)}
diff --git a/src/pages/TeachersUnite/ImTeacherPage.js b/src/pages/TeachersUnite/ImTeacherPage.js
index d4e69dd5dd3b..cc35e40b10de 100644
--- a/src/pages/TeachersUnite/ImTeacherPage.js
+++ b/src/pages/TeachersUnite/ImTeacherPage.js
@@ -19,7 +19,7 @@ function ImTeacherPage() {
     const {translate} = useLocalize();
 
     return (
-        <ScreenWrapper testID="ImTeacherPage">
+        <ScreenWrapper testID={ImTeacherPage.displayName}>
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iAmATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index 10bc47c00556..73b7a2ba8dc9 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -82,7 +82,7 @@ function IntroSchoolPrincipalPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="IntroSchoolPrincipalPage"
+            testID={IntroSchoolPrincipalPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.introSchoolPrincipal')}
diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js
index 774217899ce4..f6506b96d3f2 100644
--- a/src/pages/TeachersUnite/KnowATeacherPage.js
+++ b/src/pages/TeachersUnite/KnowATeacherPage.js
@@ -93,7 +93,7 @@ function KnowATeacherPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="KnowATeacherPage"
+            testID={KnowATeacherPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iKnowATeacher')}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index f2b0875dbc53..922b74d3b6a3 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -360,7 +360,7 @@ function ReportScreen({
             <ScreenWrapper
                 style={screenWrapperStyle}
                 shouldEnableKeyboardAvoidingView={isTopMostReportId}
-                testID="ReportScreen"
+                testID={ReportScreen.displayName}
             >
                 <FullPageNotFoundView
                     shouldShow={shouldShowNotFoundPage}
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 6697aa793f7e..2c7e9e0e1274 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -34,7 +34,7 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
-            testID="SidebarScreen"
+            testID={SidebarScreen.displayName}
         >
             {({insets}) => (
                 <>
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index fa0cb3e9da36..966cd2f87af6 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -132,7 +132,7 @@ function IOUCurrencySelection(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
-            testID="IOUCurrencySelection"
+            testID={IOUCurrencySelection.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 63eb35d3d4a1..6e99fbfe4164 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -63,7 +63,7 @@ function MoneyRequestCategoryPage({route, report, iou}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="MoneyRequestCategoryPage"
+            testID={MoneyRequestCategoryPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.category')}
diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 1f14eac17603..2d2f9c519c50 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -85,7 +85,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="MoneyRequestDatePage"
+            testID={MoneyRequestDatePage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.date')}
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index b17c638af2e3..ab206218e103 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -90,7 +90,7 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
-            testID="MoneyRequestDescriptionPage"
+            testID={MoneyRequestDescriptionPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.description')}
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 53b4e0131f69..dddf63a49673 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -93,7 +93,7 @@ function MoneyRequestMerchantPage({iou, route}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
-            testID="MoneyRequestMerchantPage"
+            testID={MoneyRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.merchant')}
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 7a035dd3a0b5..990ffd4bb590 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -82,7 +82,7 @@ function MoneyRequestSelectorPage(props) {
                       ]
                     : []
             }
-            testID="MoneyRequestSelectorPage"
+            testID={MoneyRequestSelectorPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index b00643f65f4d..fcd2b412fbe8 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -80,7 +80,7 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="MoneyRequestTagPage"
+            testID={MoneyRequestTagPage.displayName}
         >
             <HeaderWithBackButton
                 title={tagListName}
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index 67fb489a43f1..23da92bcc9e7 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -72,7 +72,7 @@ function SplitBillDetailsPage(props) {
     const {amount: splitAmount, currency: splitCurrency, comment: splitComment} = ReportUtils.getTransactionDetails(transaction);
 
     return (
-        <ScreenWrapper testID="SplitBillDetailsPage">
+        <ScreenWrapper testID={SplitBillDetailsPage.displayName}>
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report) || _.isEmpty(reportAction)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 0328c23fdc82..11459cca3aa8 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -180,7 +180,7 @@ function WaypointEditor({transactionID, route: {params: {iouType = '', waypointI
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => textInput.current && textInput.current.focus()}
             shouldEnableMaxHeight
-            testID="WaypointEditor"
+            testID={WaypointEditor.displayName}
         >
             <FullPageNotFoundView shouldShow={(Number.isNaN(parsedWaypointIndex) || parsedWaypointIndex < 0 || parsedWaypointIndex > waypointCount) && isFocused}>
                 <HeaderWithBackButton
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 83716374720f..82b3c4a4909d 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -279,7 +279,7 @@ function MoneyRequestConfirmPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="MoneyRequestConfirmPage"
+            testID={MoneyRequestConfirmPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 0f08e591324b..b737e40b8e4b 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -114,7 +114,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
             onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
-            testID="MoneyRequestParticipantsPage"
+            testID={MoneyRequestParticipantsPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index c3b581cec642..9746fd602eb6 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -176,7 +176,7 @@ function NewRequestAmountPage({route, iou, report, selectedTab}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             onEntryTransitionEnd={focusTextInput}
-            testID="NewRequestAmountPage"
+            testID={NewRequestAmountPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 105ea79637bb..78a300a38057 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -83,7 +83,7 @@ function AboutPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="AboutPage"
+            testID={AboutPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 73d5c8fca67b..57417dca5a30 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -55,7 +55,7 @@ function AppDownloadLinksPage(props) {
     ];
 
     return (
-        <ScreenWrapper testID="AppDownloadLinks">
+        <ScreenWrapper testID={AppDownloadLinks.displayName}>
             <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index 5004b85312f3..f55e49eb561e 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -28,7 +28,7 @@ function LanguagePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="LanguagePage"
+            testID={LanguagePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('languagePage.language')}
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 76791640f9bf..38f856825dcc 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -48,7 +48,7 @@ function PriorityModePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PriorityModePage"
+            testID={PriorityModePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('priorityModePage.priorityMode')}
diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
index a901ee8d350a..0dd6115e74e8 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.js
@@ -37,7 +37,7 @@ function ThemePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ThemePage"
+            testID={ThemePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('themePage.theme')}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index 321db65b116b..b8c817350a38 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -216,7 +216,7 @@ class ContactMethodDetailsPage extends Component {
         const loginData = this.props.loginList[contactMethod];
         if (!contactMethod || !loginData) {
             return (
-                <ScreenWrapper testID="ContactMethodDetailsPage">
+                <ScreenWrapper testID={ContactMethodDetailsPage.displayName}>
                     <FullPageNotFoundView
                         shouldShow
                         linkKey="contacts.goBackContactMethods"
@@ -234,7 +234,7 @@ class ContactMethodDetailsPage extends Component {
         return (
             <ScreenWrapper
                 onEntryTransitionEnd={() => this.validateCodeFormRef.current && this.validateCodeFormRef.current.focus()}
-                testID="ContactMethodDetailsPage"
+                testID={ContactMethodDetailsPage.displayName}
             >
                 <HeaderWithBackButton
                     title={formattedContactMethod}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 41b44e5b6339..b5e05cf017df 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -113,7 +113,7 @@ function ContactMethodsPage(props) {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            testID="ContactMethodsPage"
+            testID={ContactMethodsPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.contactMethods')}
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 0de9c34e14b6..1880ef694b40 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -98,7 +98,7 @@ function NewContactMethodPage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewContactMethodPage"
+            testID={NewContactMethodPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.newContactMethod')}
diff --git a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
index 5cb5704d56fd..189ec3e5f2f3 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusSetPage.js
@@ -47,7 +47,7 @@ function StatusSetPage({draftStatus, currentUserPersonalDetails}) {
     };
 
     return (
-        <ScreenWrapper testID="StatusSetPage">
+        <ScreenWrapper testID={StatusSetPage.displayName}>
             <HeaderWithBackButton
                 title={translate('statusPage.status')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_STATUS)}
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index d4924636acbc..af98a0317a77 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -69,7 +69,7 @@ function DisplayNamePage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="DisplayNamePage"
+            testID={DisplayNamePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('displayNamePage.headerTitle')}
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index 2268aa08a7bd..a50d9e7e23c3 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -131,7 +131,7 @@ function AddressPage({privatePersonalDetails}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="AddressPage"
+            testID={AddressPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('privatePersonalDetails.homeAddress')}
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 8fbd27a59d48..8b4406329616 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -63,7 +63,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="DateOfBirthPage"
+            testID={DateOfBirthPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('common.dob')}
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index 4fb538ac59b6..fc55893169dc 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -71,7 +71,7 @@ function LegalNamePage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="LegalNamePage"
+            testID={LegalNamePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.legalName')}
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index eb6b7a5ba8bf..faac43e52656 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -85,7 +85,7 @@ function PersonalDetailsInitialPage(props) {
     };
 
     return (
-        <ScreenWrapper testID="PersonalDetailsInitialPage">
+        <ScreenWrapper testID={PersonalDetailsInitialPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.personalDetails')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index edc6e29b58a6..881937213c9b 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -109,7 +109,7 @@ function ProfilePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="ProfilePage"
+            testID={ProfilePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 4f8fb7cdb0df..dbfd067de4bb 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -67,7 +67,7 @@ function PronounsPage({currentUserPersonalDetails}) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="PronounsPage"
+            testID={PronounsPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('pronounsPage.pronouns')}
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 101d5b2cf77b..5fd5e1bd7661 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -41,7 +41,7 @@ function TimezoneInitialPage(props) {
     };
 
     return (
-        <ScreenWrapper testID="TimezoneInitialPage">
+        <ScreenWrapper testID={TimezoneInitialPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('timezonePage.timezone')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index 05de3657e0ac..ee34f24788bb 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -80,7 +80,7 @@ function TimezoneSelectPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="TimezoneSelectPage"
+            testID={TimezoneSelectPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('timezonePage.timezone')}
diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
index 5fdb07ceddfa..57619bc3659f 100644
--- a/src/pages/settings/Report/NotificationPreferencePage.js
+++ b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -45,7 +45,7 @@ function NotificationPreferencePage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="NotificationPreferencePage"
+            testID={NotificationPreferencePage.displayName}
         >
             <FullPageNotFoundView shouldShow={shouldDisableNotificationPreferences}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index f50b5dcd3882..1a2960ac3c48 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -75,7 +75,7 @@ function ReportSettingsPage(props) {
     const shouldAllowWriteCapabilityEditing = lodashGet(linkedWorkspace, 'role', '') === CONST.POLICY.ROLE.ADMIN && !ReportUtils.isAdminRoom(report);
 
     return (
-        <ScreenWrapper testID="ReportSettingsPage">
+        <ScreenWrapper testID={ReportSettingsPage.displayName}>
             <FullPageNotFoundView shouldShow={shouldDisableSettings}>
                 <HeaderWithBackButton
                     title={translate('common.settings')}
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index dd2ab947b4e8..b8844a39c38b 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -81,7 +81,7 @@ function RoomNamePage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => roomNameInputRef.current && roomNameInputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
-            testID="RoomNamePage"
+            testID={RoomNamePage.displayName}
         >
             <FullPageNotFoundView shouldShow={ReportUtils.shouldDisableRename(report, policy)}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js
index ce9a9db725fb..4399c757dede 100644
--- a/src/pages/settings/Report/WriteCapabilityPage.js
+++ b/src/pages/settings/Report/WriteCapabilityPage.js
@@ -53,7 +53,7 @@ function WriteCapabilityPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="WriteCapabilityPage"
+            testID={WriteCapabilityPage.displayName}
         >
             <FullPageNotFoundView shouldShow={!isAbleToEdit}>
                 <HeaderWithBackButton
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index a5a961705585..ae015e3cda8a 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -78,7 +78,7 @@ function CloseAccountPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="CloseAccountPage"
+            testID={CloseAccountPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('closeAccountPage.closeAccount')}
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 817bd9e5fb5b..07714fb3c49b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -24,7 +24,7 @@ function StepWrapper({
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
-            testID="StepWrapper"
+            testID={StepWrapper.displayName}
         >
             <AnimatedStep
                 style={[styles.flex1]}
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index e41f833941ad..9cdaf82e3802 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -108,7 +108,7 @@ function DebitCardPage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
-            testID="AddDebitCardPage"
+            testID={AddDebitCardPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('addDebitCardPage.addADebitCard')}
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
index 19bfcf3e4b8c..78a9e92326bc 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
@@ -52,7 +52,7 @@ function ChooseTransferAccountPage(props) {
     };
 
     return (
-        <ScreenWrapper testID="ChooseTransferAccountPage">
+        <ScreenWrapper testID={ChooseTransferAccountPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('chooseTransferAccountPage.chooseAccount')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)}
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index 10e591e5945b..f33c92bea02b 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -137,7 +137,7 @@ function TransferBalancePage(props) {
 
     if (props.walletTransfer.shouldShowSuccess && !props.walletTransfer.loading) {
         return (
-            <ScreenWrapper testID="TransferBalancePage">
+            <ScreenWrapper testID={TransferBalancePage.displayName}>
                 <HeaderWithBackButton
                     title={props.translate('common.transferBalance')}
                     onBackButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
@@ -170,7 +170,7 @@ function TransferBalancePage(props) {
     const shouldShowTransferView = PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, props.bankAccountList) && props.userWallet.tierName === CONST.WALLET.TIER_NAME.GOLD;
 
     return (
-        <ScreenWrapper testID="TransferBalancePage">
+        <ScreenWrapper testID={TransferBalancePage.displayName}>
             <FullPageNotFoundView
                 shouldShow={!shouldShowTransferView}
                 titleKey="notFound.pageNotFound"
diff --git a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
index 40c7bde7d1f5..4ffd4cf9a744 100644
--- a/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/BaseWalletPage.js
@@ -348,7 +348,7 @@ function BaseWalletPage(props) {
     const isPopoverBottomMount = anchorPosition.anchorPositionTop === 0 || isSmallScreenWidth;
 
     return (
-        <ScreenWrapper testID="BaseWalletPage">
+        <ScreenWrapper testID={BaseWalletPage.displayName}>
             <HeaderWithBackButton
                 title={translate('common.wallet')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 03788298debf..f1ce09def084 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -22,7 +22,7 @@ function SignInModal() {
             style={[styles.highlightBG]}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="SignInModal"
+            testID={SignInModal.displayName}
         >
             <HeaderWithBackButton />
             <SignInPage isInModal />
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 008e31a96c1d..ac38f3aa19a2 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -57,7 +57,7 @@ function NewTaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
             shouldEnableMaxHeight
-            testID="NewTaskDescriptionPage"
+            testID={NewTaskDescriptionPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('task.description')}
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index d6b8c04e60ad..b7fd3900e1f3 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -77,7 +77,7 @@ function NewTaskDetailsPage(props) {
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewTaskDetailsPage"
+            testID={NewTaskDetailsPage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('newTaskPage.assignTask')}
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index a82f199ca2d2..7fd9bcd9b897 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -145,7 +145,7 @@ function NewTaskPage(props) {
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
-            testID="NewTaskPage"
+            testID={NewTaskPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={!isAllowedToCreateTask}
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 8b7401cc3023..62eb1da4872a 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -77,7 +77,7 @@ function NewTaskTitlePage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            testID="NewTaskTitlePage"
+            testID={NewTaskTitlePage.displayName}
         >
             <HeaderWithBackButton
                 title={props.translate('task.title')}
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 18918b8c9db1..b1519a7502b4 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -209,7 +209,7 @@ function TaskAssigneeSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
-            testID="TaskAssigneeeSelectorModal"
+            testID={TaskAssigneeeSelectorModal.displayName}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 3a336486dbfd..d5e826a45032 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -67,7 +67,7 @@ function TaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
             shouldEnableMaxHeight
-            testID="TaskDescriptionPage"
+            testID={TaskDescriptionPage.displayName}
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index 45694492aaca..2fc8f0eab014 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -116,7 +116,7 @@ function TaskShareDestinationSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
-            testID="TaskShareDestinationSelectorModal"
+            testID={TaskShareDestinationSelectorModal.displayName}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 71da6462b118..5bfc94467e3e 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -79,7 +79,7 @@ function TaskTitlePage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             shouldEnableMaxHeight
-            testID="TaskTitlePage"
+            testID={TaskTitlePage.displayName}
         >
             {({didScreenTransitionEnd}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>
diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index 336f2cdda0aa..91563a44ddd5 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -94,7 +94,7 @@ function WalletStatementPage(props) {
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             includeSafeAreaPaddingBottom={false}
-            testID="WalletStatementPage"
+            testID={WalletStatementPage.displayName}
         >
             <HeaderWithBackButton
                 title={Str.recapitalize(title)}
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 20c94d9e2c07..c012af2434fb 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -184,7 +184,7 @@ function WorkspaceInitialPage(props) {
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
-            testID="WorkspaceInitialPage"
+            testID={WorkspaceInitialPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index b72e71f18cc5..e62d46ecf092 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -160,7 +160,7 @@ class WorkspaceInviteMessagePage extends React.Component {
         return (
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
-                testID="WorkspaceInviteMessagePage"
+                testID={WorkspaceInviteMessagePage.displayName}
             >
                 <FullPageNotFoundView
                     shouldShow={_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 7ec10e33debb..39013dd650e4 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -199,7 +199,7 @@ function WorkspaceInvitePage(props) {
     return (
         <ScreenWrapper
             shouldEnableMaxHeight
-            testID="WorkspaceInvitePage"
+            testID={WorkspaceInvitePage.displayName}
         >
             {({didScreenTransitionEnd}) => {
                 const sections = didScreenTransitionEnd ? getSections() : [];
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 669b0e41b08d..42c2e61b75ea 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -344,7 +344,7 @@ function WorkspaceMembersPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             style={[styles.defaultModalContainer]}
-            testID="WorkspaceMembersPage"
+            testID={WorkspaceMembersPage.displayName}
         >
             <FullPageNotFoundView
                 shouldShow={(_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy)) && !props.isLoadingReportData}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 89a3e854578d..5e4aeda6262e 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -150,7 +150,7 @@ function WorkspaceNewRoomPage(props) {
                 includeSafeAreaPaddingBottom={false}
                 includePaddingTop={false}
                 shouldEnablePickerAvoiding={false}
-                testID="WorkspaceNewRoomPage"
+                testID={WorkspaceNewRoomPage.displayName}
             >
                 {({insets}) => (
                     <KeyboardAvoidingView
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 95f5ff334474..314644262db7 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -102,7 +102,7 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
-            testID="WorkspacePageWithSections"
+            testID={WorkspacePageWithSections.displayName}
         >
             <FullPageNotFoundView
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}

From a7d09e736699e6376f7364e023af85bb1db85ba7 Mon Sep 17 00:00:00 2001
From: Georgia Monahan <georgia@expensify.com>
Date: Fri, 22 Sep 2023 12:37:13 +0800
Subject: [PATCH 121/123] make both optional

---
 src/types/onyx/Card.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index 489040626e07..e7bf417fccc0 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -10,8 +10,8 @@ type Card = {
     bank: string;
     availableSpend: number;
     domainName: string;
-    maskedPan: string; // do not reference, removing as part of Expensify/App#27943
-    lastFourPAN: string;
+    maskedPan?: string; // do not reference, removing as part of Expensify/App#27943
+    lastFourPAN?: string;
     cardName: string;
     isVirtual: boolean;
     fraud: ValueOf<typeof CONST.EXPENSIFY_CARD.FRAUD_TYPES>;

From 4429827e16ae3952d2d6208fa6c0ce9ffc0c480e Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 13:05:24 +0800
Subject: [PATCH 122/123] Fix lint

---
 src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js | 2 +-
 src/pages/settings/AppDownloadLinks.js                    | 2 +-
 src/pages/settings/Wallet/AddDebitCardPage.js             | 2 +-
 src/pages/tasks/TaskAssigneeSelectorModal.js              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 2c7e9e0e1274..bc4d28fdf09f 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -34,7 +34,7 @@ function BaseSidebarScreen(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
             style={[styles.sidebar, Browser.isMobile() ? styles.userSelectNone : {}]}
-            testID={SidebarScreen.displayName}
+            testID={BaseSidebarScreen.displayName}
         >
             {({insets}) => (
                 <>
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 57417dca5a30..957120846f3b 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -55,7 +55,7 @@ function AppDownloadLinksPage(props) {
     ];
 
     return (
-        <ScreenWrapper testID={AppDownloadLinks.displayName}>
+        <ScreenWrapper testID={AppDownloadLinksPage.displayName}>
             <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 9cdaf82e3802..f74fc050738f 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -108,7 +108,7 @@ function DebitCardPage(props) {
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
-            testID={AddDebitCardPage.displayName}
+            testID={DebitCardPage.displayName}
         >
             <HeaderWithBackButton
                 title={translate('addDebitCardPage.addADebitCard')}
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index b1519a7502b4..4ec00df0661c 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -209,7 +209,7 @@ function TaskAssigneeSelectorModal(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => optionRef.current && optionRef.current.textInput.focus()}
-            testID={TaskAssigneeeSelectorModal.displayName}
+            testID={TaskAssigneeSelectorModal.displayName}
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={isTaskNonEditable}>

From f940339db87755111bdc96c495f09102025aaad9 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Fri, 22 Sep 2023 13:22:45 +0800
Subject: [PATCH 123/123] Another one after conflicts

---
 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
index a686fc479548..de83c71a01c7 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -19,7 +19,7 @@ function ImTeacherUpdateEmailPage() {
     const {translate} = useLocalize();
 
     return (
-        <ScreenWrapper testID="ImTeacherPage">
+        <ScreenWrapper testID={ImTeacherUpdateEmailPage.displayName}>
             <HeaderWithBackButton
                 title={translate('teachersUnitePage.iAmATeacher')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.TEACHERS_UNITE)}