From 86aa3a106c36a27a766efe9ee24fcab7130e796d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Thu, 21 Sep 2023 10:37:22 +0200
Subject: [PATCH 001/244] remove unnecessary search actions

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

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index dd42ed80c3d4..39f75d414610 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useCallback, useEffect, useState, useMemo} from 'react';
+import React, {useCallback, useEffect, useState, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -56,6 +56,7 @@ function SearchPage({betas, personalDetails, reports}) {
     });
 
     const {translate} = useLocalize();
+    const isMounted = useRef(false);
 
     const updateOptions = useCallback(() => {
         const {
@@ -79,8 +80,13 @@ function SearchPage({betas, personalDetails, reports}) {
     }, []);
 
     useEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
+
         debouncedUpdateOptions();
-    }, [searchValue, debouncedUpdateOptions]);
+    }, [searchValue]);
 
     /**
      * Returns the sections needed for the OptionsSelector

From afac89ec309687a8c562317de1327256aa0b710c Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Sat, 7 Oct 2023 01:04:23 +0700
Subject: [PATCH 002/244] fix: 28969

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

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 78f6edcf7dd3..faed80059507 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -157,6 +157,8 @@ function ReportScreen({
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);
     const [isBannerVisible, setIsBannerVisible] = useState(true);
 
+    const wasReportAccessibleRef = useRef(false);
+
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
@@ -179,6 +181,12 @@ function ReportScreen({
     const isTopMostReportId = currentReportID === getReportID(route);
     const didSubscribeToReportLeavingEvents = useRef(false);
 
+    useEffect(() => {
+        if (report && report.reportID && !shouldHideReport) {
+            wasReportAccessibleRef.current = true;
+        }
+    }, [shouldHideReport, report]);
+
     let headerView = (
         <HeaderView
             reportID={reportID}
@@ -362,7 +370,7 @@ function ReportScreen({
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage = useMemo(
-        () => (!firstRenderRef.current && !report.reportID && !isOptimisticDelete && !reportMetadata.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport,
+        () => (!wasReportAccessibleRef.current && !firstRenderRef.current && !report.reportID && !isOptimisticDelete && !reportMetadata.isLoadingReportActions && !isLoading && !userLeavingStatus) || shouldHideReport,
         [report, reportMetadata, isLoading, shouldHideReport, isOptimisticDelete, userLeavingStatus],
     );
 

From 3a20b60e93576a3b7b245a91e1ebfa997237e96d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Thu, 26 Oct 2023 15:32:22 +0200
Subject: [PATCH 003/244] fixes after conflicts

---
 src/pages/SearchPage.js | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 3b572bcf0ebb..f9f3cc42f64a 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -18,8 +18,7 @@ import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 import Performance from '../libs/Performance';
 import useLocalize from '../hooks/useLocalize';
-import networkPropTypes from '../components/networkPropTypes';
-import {withNetwork} from '../components/OnyxProvider';
+import useNetwork from "../hooks/useNetwork";
 
 const propTypes = {
     /* Onyx Props */
@@ -33,9 +32,6 @@ const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
-    /** Network info */
-    network: networkPropTypes,
-
     /** Whether we are searching for reports in the server */
     isSearchingForReports: PropTypes.bool,
 };
@@ -44,11 +40,10 @@ const defaultProps = {
     betas: [],
     personalDetails: {},
     reports: {},
-    network: {},
     isSearchingForReports: false,
 };
 
-function SearchPage({betas, personalDetails, reports}) {
+function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
     // Data for initialization (runs only on the first render)
     const {
         recentReports: initialRecentReports,
@@ -65,6 +60,7 @@ function SearchPage({betas, personalDetails, reports}) {
         userToInvite: initialUserToInvite,
     });
 
+    const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const isMounted = useRef(false);
 
@@ -185,12 +181,12 @@ function SearchPage({betas, personalDetails, reports}) {
                             shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             textInputAlert={
-                                props.network.isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''
+                                isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''
                             }
                             onLayout={searchRendered}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                             autoFocus
-                            isLoadingNewOptions={props.isSearchingForReports}
+                            isLoadingNewOptions={isSearchingForReports}
                         />
                     </View>
                 </>
@@ -202,9 +198,7 @@ function SearchPage({betas, personalDetails, reports}) {
 SearchPage.propTypes = propTypes;
 SearchPage.defaultProps = defaultProps;
 SearchPage.displayName = 'SearchPage';
-export default compose(
-    withNetwork(),
-    withOnyx({
+export default withOnyx({
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },
@@ -218,5 +212,4 @@ export default compose(
         key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
         initWithStoredValues: false,
     },
-}),
-)(SearchPage);
+})(SearchPage);

From e212f254a80603a169a9d37910cb66b0ebe29d9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Thu, 26 Oct 2023 15:42:10 +0200
Subject: [PATCH 004/244] fix lint error

---
 src/pages/SearchPage.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index f9f3cc42f64a..d0da509197e1 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -92,6 +92,8 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
         }
 
         debouncedUpdateOptions();
+        // Ignoring the rule intentionally, we want to run the code only when search Value changes to prevent additional runs.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [searchValue]);
 
     /**

From 0cd0edc8abf862c10c1f0f38d61a17552b47041a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Mon, 30 Oct 2023 18:04:34 +0100
Subject: [PATCH 005/244] fix lint error

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

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index fb325a5bc200..27148d97e9bb 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -17,8 +17,8 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
-import useLocalize from '../hooks/useLocalize';
-import useNetwork from "../hooks/useNetwork";
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from "@hooks/useNetwork";
 
 const propTypes = {
     /* Onyx Props */

From 94e2deee606832478f5d28c22e4bc4226f7b8620 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 30 Oct 2023 20:45:04 +0200
Subject: [PATCH 006/244] ReportAction text for transactions edited in OldDot

---
 src/libs/ReportUtils.js | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 0e9091fd6cb2..d14336256894 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1844,6 +1844,8 @@ function getModifiedExpenseMessage(reportAction) {
         return Localize.translateLocal('iou.changedTheRequest');
     }
 
+    const messageFragments = [];
+
     const hasModifiedAmount =
         _.has(reportActionOriginalMessage, 'oldAmount') &&
         _.has(reportActionOriginalMessage, 'oldCurrency') &&
@@ -1864,12 +1866,12 @@ function getModifiedExpenseMessage(reportAction) {
             return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
         }
 
-        return getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false));
     }
 
     const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
     if (hasModifiedComment) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true));
     }
 
     const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
@@ -1877,27 +1879,34 @@ function getModifiedExpenseMessage(reportAction) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
         let formattedOldCreated = new Date(reportActionOriginalMessage.oldCreated);
         formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING);
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false));
     }
 
     if (hasModifiedMerchant) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true));
     }
 
     const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
     if (hasModifiedCategory) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true));
     }
 
     const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
     if (hasModifiedTag) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true));
     }
 
     const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
     if (hasModifiedBillable) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true);
+        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true));
     }
+    
+    return messageFragments.reduce((acc, value, index) => {
+        if (index == 0) {
+            return acc + value;
+        }
+        return acc + ". " + value.charAt(0).toUpperCase() + value.slice(1);
+    }, "");
 }
 
 /**

From 6e5d6b04de5cfe67f3179ad65cb4d0d2340e3201 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 30 Oct 2023 21:02:22 +0200
Subject: [PATCH 007/244] Make Lint happy.

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

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index d14336256894..3e8860543d5f 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1902,10 +1902,10 @@ function getModifiedExpenseMessage(reportAction) {
     }
     
     return messageFragments.reduce((acc, value, index) => {
-        if (index == 0) {
+        if (index === 0) {
             return acc + value;
         }
-        return acc + ". " + value.charAt(0).toUpperCase() + value.slice(1);
+        return `${acc}. ${value.charAt(0).toUpperCase()}${value.slice(1)}`;
     }, "");
 }
 

From a7f3f383524cf5d3b1aef2a31006916aacb56e10 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 30 Oct 2023 21:07:35 +0200
Subject: [PATCH 008/244] Run prettier.

---
 src/libs/ReportUtils.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 3e8860543d5f..49bf6a5f6310 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1871,7 +1871,9 @@ function getModifiedExpenseMessage(reportAction) {
 
     const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
     if (hasModifiedComment) {
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true));
+        messageFragments.push(
+            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true),
+        );
     }
 
     const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
@@ -1883,12 +1885,16 @@ function getModifiedExpenseMessage(reportAction) {
     }
 
     if (hasModifiedMerchant) {
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true));
+        messageFragments.push(
+            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true),
+        );
     }
 
     const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
     if (hasModifiedCategory) {
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true));
+        messageFragments.push(
+            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true),
+        );
     }
 
     const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
@@ -1898,15 +1904,17 @@ function getModifiedExpenseMessage(reportAction) {
 
     const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
     if (hasModifiedBillable) {
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true));
+        messageFragments.push(
+            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true),
+        );
     }
-    
+
     return messageFragments.reduce((acc, value, index) => {
         if (index === 0) {
             return acc + value;
         }
         return `${acc}. ${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-    }, "");
+    }, '');
 }
 
 /**

From f0b5986126073f4d8dab221dede715071774061a Mon Sep 17 00:00:00 2001
From: Luthfi <luthfi.ufi14@gmail.com>
Date: Wed, 1 Nov 2023 20:20:15 +0700
Subject: [PATCH 009/244] add form input styles checklist

---
 contributingGuides/REVIEWER_CHECKLIST.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/contributingGuides/REVIEWER_CHECKLIST.md b/contributingGuides/REVIEWER_CHECKLIST.md
index 16c8f88927b1..51908d696c1d 100644
--- a/contributingGuides/REVIEWER_CHECKLIST.md
+++ b/contributingGuides/REVIEWER_CHECKLIST.md
@@ -51,6 +51,9 @@
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
+- [ ] If the PR modifies the form input styles:
+    - [ ] All the inputs inside a form should be aligned with each other
+    - [ ] Add the Design label so the Design team can review your changes
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

From 61da6b547ba5abe206d813b7631d593e397a4de8 Mon Sep 17 00:00:00 2001
From: Luthfi <luthfi.ufi14@gmail.com>
Date: Wed, 1 Nov 2023 20:27:59 +0700
Subject: [PATCH 010/244] Add the checklist to the PR template

---
 .github/PULL_REQUEST_TEMPLATE.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 0396a7543b50..e516b8b3e0e1 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -114,6 +114,9 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
+- [ ] If the PR modifies the form input styles:
+    - [ ] All the inputs inside a form should be aligned with each other
+    - [ ] Add the Design label so the Design team can review your changes
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

From 0b0359eb5982a94b53edfedcfd6c4273d94b4416 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Thu, 2 Nov 2023 16:58:15 +0100
Subject: [PATCH 011/244] fix lint error

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

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 27148d97e9bb..70eaa0383a23 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -15,10 +15,10 @@ import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import personalDetailsPropType from './personalDetailsPropType';
-import reportPropTypes from './reportPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from "@hooks/useNetwork";
+import personalDetailsPropType from './personalDetailsPropType';
+import reportPropTypes from './reportPropTypes';
 
 const propTypes = {
     /* Onyx Props */

From 1df2c02b2f5495772d56f08def35b9ed998ab58a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Tue, 7 Nov 2023 08:32:22 +0100
Subject: [PATCH 012/244] prettier

---
 src/pages/SearchPage.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 32d10ba539c8..3e6cb0333e3f 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useState, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
@@ -15,8 +17,6 @@ import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import useLocalize from '@hooks/useLocalize';
-import useNetwork from "@hooks/useNetwork";
 import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 
@@ -187,9 +187,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
                             showTitleTooltip
                             shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                            textInputAlert={
-                                isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''
-                            }
+                            textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                             onLayout={searchRendered}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                             autoFocus

From a0a856cddc840617f1f5fd33416766b4b0d502f5 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 00:07:47 +0200
Subject: [PATCH 013/244] Improve message for MODIFIEDEXPENSE action

---
 src/languages/en.ts     |  9 ++--
 src/languages/es.ts     |  9 ++--
 src/libs/ReportUtils.js | 99 ++++++++++++++++++++++++++++++++---------
 3 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index d99b3c7d04d1..919548a3d918 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -573,11 +573,11 @@ export default {
         noReimbursableExpenses: 'This report has an invalid amount',
         pendingConversionMessage: "Total will update when you're back online",
         changedTheRequest: 'changed the request',
-        setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `set the ${valueName} to ${newValueToDisplay}`,
+        setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `the ${valueName} to ${newValueToDisplay}`,
         setTheDistance: ({newDistanceToDisplay, newAmountToDisplay}: SetTheDistanceParams) => `set the distance to ${newDistanceToDisplay}, which set the amount to ${newAmountToDisplay}`,
-        removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) => `removed the ${valueName} (previously ${oldValueToDisplay})`,
+        removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) => `the ${valueName} (previously ${oldValueToDisplay})`,
         updatedTheRequest: ({valueName, newValueToDisplay, oldValueToDisplay}: UpdatedTheRequestParams) =>
-            `changed the ${valueName} to ${newValueToDisplay} (previously ${oldValueToDisplay})`,
+            `the ${valueName} to ${newValueToDisplay} (previously ${oldValueToDisplay})`,
         updatedTheDistance: ({newDistanceToDisplay, oldDistanceToDisplay, newAmountToDisplay, oldAmountToDisplay}: UpdatedTheDistanceParams) =>
             `changed the distance to ${newDistanceToDisplay} (previously ${oldDistanceToDisplay}), which updated the amount to ${newAmountToDisplay} (previously ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
@@ -597,6 +597,9 @@ export default {
         },
         waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `Started settling up, payment is held until ${submitterDisplayName} enables their Wallet`,
         enableWallet: 'Enable Wallet',
+        set: 'set',
+        changed: 'changed',
+        removed: 'removed',
     },
     notificationPreferencesPage: {
         header: 'Notification preferences',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index dea7760a35ce..8d5f678c63e8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -565,13 +565,13 @@ export default {
         noReimbursableExpenses: 'El importe de este informe no es válido',
         pendingConversionMessage: 'El total se actualizará cuando estés online',
         changedTheRequest: 'cambió la solicitud',
-        setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `estableció ${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay}`,
+        setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay}`,
         setTheDistance: ({newDistanceToDisplay, newAmountToDisplay}: SetTheDistanceParams) =>
             `estableció la distancia a ${newDistanceToDisplay}, lo que estableció el importe a ${newAmountToDisplay}`,
         removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) =>
-            `eliminó ${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} (previamente ${oldValueToDisplay})`,
+            `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} (previamente ${oldValueToDisplay})`,
         updatedTheRequest: ({valueName, newValueToDisplay, oldValueToDisplay}: UpdatedTheRequestParams) =>
-            `cambió ${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay} (previamente ${oldValueToDisplay})`,
+            `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay} (previamente ${oldValueToDisplay})`,
         updatedTheDistance: ({newDistanceToDisplay, oldDistanceToDisplay, newAmountToDisplay, oldAmountToDisplay}: UpdatedTheDistanceParams) =>
             `cambió la distancia a ${newDistanceToDisplay} (previamente ${oldDistanceToDisplay}), lo que cambió el importe a ${newAmountToDisplay} (previamente ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,
@@ -591,6 +591,9 @@ export default {
         },
         waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `Inició el pago, pero no se procesará hasta que ${submitterDisplayName} active su Billetera`,
         enableWallet: 'Habilitar Billetera',
+        set: 'estableció',
+        changed: 'cambió',
+        removed: 'eliminó',
     },
     notificationPreferencesPage: {
         header: 'Preferencias de avisos',
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 1297171d3149..9f4b50965f3e 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1917,7 +1917,9 @@ function getModifiedExpenseMessage(reportAction) {
         return Localize.translateLocal('iou.changedTheRequest');
     }
 
-    const messageFragments = [];
+    const removalFragments = [];
+    const setFragments = [];
+    const changeFragments = [];
 
     const hasModifiedAmount =
         _.has(reportActionOriginalMessage, 'oldAmount') &&
@@ -1939,14 +1941,26 @@ function getModifiedExpenseMessage(reportAction) {
             return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
         }
 
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false));
+        const fragment = getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
+        if (!oldAmount) {
+            setFragments.push(fragment);
+        } else if (!amount) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
     const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
     if (hasModifiedComment) {
-        messageFragments.push(
-            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true),
-        );
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true);
+        if (!reportActionOriginalMessage.oldComment) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.newComment) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
     const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
@@ -1954,40 +1968,81 @@ function getModifiedExpenseMessage(reportAction) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
         let formattedOldCreated = new Date(reportActionOriginalMessage.oldCreated);
         formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING);
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false));
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
+        if (!formattedOldCreated) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.created) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
     if (hasModifiedMerchant) {
-        messageFragments.push(
-            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true),
-        );
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true);
+        if (!reportActionOriginalMessage.oldMerchant) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.merchant) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
     const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
     if (hasModifiedCategory) {
-        messageFragments.push(
-            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true),
-        );
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true);
+        if (!reportActionOriginalMessage.oldCategory) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.category) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
     const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
     if (hasModifiedTag) {
-        messageFragments.push(getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true));
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.tag, reportActionOriginalMessage.oldTag, Localize.translateLocal('common.tag'), true);
+        if (!reportActionOriginalMessage.oldTag) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.tag) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
     const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
     if (hasModifiedBillable) {
-        messageFragments.push(
-            getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true),
-        );
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true);
+        if (!reportActionOriginalMessage.oldBillable) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.billable) {
+            removalFragments.push(fragment);
+        } else  {
+            changeFragments.push(fragment);
+        }
     }
 
-    return messageFragments.reduce((acc, value, index) => {
-        if (index === 0) {
-            return acc + value;
-        }
-        return `${acc}. ${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-    }, '');
+    let message = '';
+    if (setFragments.length > 0) {
+        message = setFragments.reduce((acc, value) => {
+            return `${acc} ${value},`;
+        }, `${message} ${Localize.translateLocal('iou.set')}`);
+    }
+    if (changeFragments.length > 0) {
+        message = changeFragments.reduce((acc, value) => {
+            return `${acc} ${value},`;
+        }, `${message} ${Localize.translateLocal('iou.changed')}`);
+    }
+    if (removalFragments.length > 0) {
+        message = removalFragments.reduce((acc, value) => {
+            return `${acc} ${value},`;
+        }, `${message} ${Localize.translateLocal('iou.removed')}`);
+    }
+    message = `${message.substring(1, message.length - 1)}.`;
+    return message;
 }
 
 /**

From 960d00a36d28f7f60966df3686d6d2be6f87db68 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 00:09:28 +0200
Subject: [PATCH 014/244] Add a safety check

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

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 9f4b50965f3e..97bc468de8eb 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -2041,6 +2041,9 @@ function getModifiedExpenseMessage(reportAction) {
             return `${acc} ${value},`;
         }, `${message} ${Localize.translateLocal('iou.removed')}`);
     }
+    if (message === '') {
+        return message;
+    }
     message = `${message.substring(1, message.length - 1)}.`;
     return message;
 }

From a4e82a8baaf2eabf78a40848dbaa28179ad96d89 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 00:21:09 +0200
Subject: [PATCH 015/244] Improve MODIFIEDEXPENSE action message

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

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 97bc468de8eb..a2de3dc73161 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -2026,20 +2026,20 @@ function getModifiedExpenseMessage(reportAction) {
     }
 
     let message = '';
-    if (setFragments.length > 0) {
-        message = setFragments.reduce((acc, value) => {
+    if (changeFragments.length > 0) {
+        message = changeFragments.reduce((acc, value, index) => {
             return `${acc} ${value},`;
-        }, `${message} ${Localize.translateLocal('iou.set')}`);
+        }, `${message}\n${Localize.translateLocal('iou.changed')}`);
     }
-    if (changeFragments.length > 0) {
-        message = changeFragments.reduce((acc, value) => {
+    if (setFragments.length > 0) {
+        message = setFragments.reduce((acc, value) => {
             return `${acc} ${value},`;
-        }, `${message} ${Localize.translateLocal('iou.changed')}`);
+        }, `${message}\n${Localize.translateLocal('iou.set')}`);
     }
     if (removalFragments.length > 0) {
         message = removalFragments.reduce((acc, value) => {
             return `${acc} ${value},`;
-        }, `${message} ${Localize.translateLocal('iou.removed')}`);
+        }, `${message}\n${Localize.translateLocal('iou.removed')}`);
     }
     if (message === '') {
         return message;

From b9b7ef462310e69498e261137bc8ab619af75c98 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 00:33:22 +0200
Subject: [PATCH 016/244] Improve MODIFIEDEXPENSE action message

---
 src/libs/ReportUtils.js | 43 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index a2de3dc73161..5680ea7b017a 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -2028,17 +2028,50 @@ function getModifiedExpenseMessage(reportAction) {
     let message = '';
     if (changeFragments.length > 0) {
         message = changeFragments.reduce((acc, value, index) => {
-            return `${acc} ${value},`;
+            if (index === changeFragments.length - 1) {
+                if (changeFragments.length === 1) {
+                    return `${acc} ${value}.`;        
+                } else if (changeFragments.length === 2) {
+                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+                } else {
+                    return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+                }
+            } else if (index === 0) {
+                return `${acc} ${value}`;
+            }
+            return `${acc}, ${value}`;
         }, `${message}\n${Localize.translateLocal('iou.changed')}`);
     }
     if (setFragments.length > 0) {
-        message = setFragments.reduce((acc, value) => {
-            return `${acc} ${value},`;
+        message = setFragments.reduce((acc, value, index) => {
+            if (index === setFragments.length - 1) {
+                if (setFragments.length === 1) {
+                    return `${acc} ${value}.`;        
+                } else if (setFragments.length === 2) {
+                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+                } else {
+                    return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+                }
+            } else if (index === 0) {
+                return `${acc} ${value}`;
+            }
+            return `${acc}, ${value}`;
         }, `${message}\n${Localize.translateLocal('iou.set')}`);
     }
     if (removalFragments.length > 0) {
-        message = removalFragments.reduce((acc, value) => {
-            return `${acc} ${value},`;
+        message = removalFragments.reduce((acc, value, index) => {
+            if (index === removalFragments.length - 1) {
+                if (removalFragments.length === 1) {
+                    return `${acc} ${value}.`;        
+                } else if (removalFragments.length === 2) {
+                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+                } else {
+                    return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+                }
+            } else if (index === 0) {
+                return `${acc} ${value}`;
+            }
+            return `${acc}, ${value}`;
         }, `${message}\n${Localize.translateLocal('iou.removed')}`);
     }
     if (message === '') {

From 5190539d1b65224687b503204749623915271deb Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 00:39:25 +0200
Subject: [PATCH 017/244] Remove redundancy.

---
 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 5680ea7b017a..5004e5d87dc0 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -2077,7 +2077,7 @@ function getModifiedExpenseMessage(reportAction) {
     if (message === '') {
         return message;
     }
-    message = `${message.substring(1, message.length - 1)}.`;
+    message = `${message.substring(1, message.length)}`;
     return message;
 }
 

From b5518be159aa4cea4aad09ee70ddb760e5b42245 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 15:59:14 +0200
Subject: [PATCH 018/244] Update function doc

---
 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 5004e5d87dc0..d5f56bea8c5c 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1857,7 +1857,7 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip
 }
 
 /**
- * Get the proper message schema for modified expense message.
+ * Get the proper message schema for a modified field on the expense.
  *
  * @param {String} newValue
  * @param {String} oldValue

From be978f9b0138b1474094ae1a3d95ea35eefea982 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 16:17:08 +0200
Subject: [PATCH 019/244] Create reusable function

---
 src/libs/ReportUtils.js | 84 +++++++++++++++++------------------------
 1 file changed, 34 insertions(+), 50 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index d5f56bea8c5c..13ffeb6432f5 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1857,7 +1857,7 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip
 }
 
 /**
- * Get the proper message schema for a modified field on the expense.
+ * Get the proper message schema for a modified a field on the expense.
  *
  * @param {String} newValue
  * @param {String} oldValue
@@ -1880,6 +1880,36 @@ function getProperSchemaForModifiedExpenseMessage(newValue, oldValue, valueName,
     return Localize.translateLocal('iou.updatedTheRequest', {valueName: displayValueName, newValueToDisplay, oldValueToDisplay});
 }
 
+/**
+ * Get the proper message line for a modified expense.
+ *
+ * @param {String} newValue
+ * @param {String} oldValue
+ * @param {String} valueName
+ * @param {Boolean} valueInQuotes
+ * @returns {String}
+ */
+
+function getProperLineForModifiedExpenseMessage(prefix, messageFragments) {
+    if (messageFragments.length === 0) {
+        return '';
+    }
+    return messageFragments.reduce((acc, value, index) => {
+        if (index === messageFragments.length - 1) {
+            if (messageFragments.length === 1) {
+                return `${acc} ${value}.`;        
+            } else if (messageFragments.length === 2) {
+                return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+            } else {
+                return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+            }
+        } else if (index === 0) {
+            return `${acc} ${value}`;
+        }
+        return `${acc}, ${value}`;
+    }, prefix);
+}
+
 /**
  * Get the proper message schema for modified distance message.
  *
@@ -2025,55 +2055,9 @@ function getModifiedExpenseMessage(reportAction) {
         }
     }
 
-    let message = '';
-    if (changeFragments.length > 0) {
-        message = changeFragments.reduce((acc, value, index) => {
-            if (index === changeFragments.length - 1) {
-                if (changeFragments.length === 1) {
-                    return `${acc} ${value}.`;        
-                } else if (changeFragments.length === 2) {
-                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
-                } else {
-                    return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
-                }
-            } else if (index === 0) {
-                return `${acc} ${value}`;
-            }
-            return `${acc}, ${value}`;
-        }, `${message}\n${Localize.translateLocal('iou.changed')}`);
-    }
-    if (setFragments.length > 0) {
-        message = setFragments.reduce((acc, value, index) => {
-            if (index === setFragments.length - 1) {
-                if (setFragments.length === 1) {
-                    return `${acc} ${value}.`;        
-                } else if (setFragments.length === 2) {
-                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
-                } else {
-                    return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
-                }
-            } else if (index === 0) {
-                return `${acc} ${value}`;
-            }
-            return `${acc}, ${value}`;
-        }, `${message}\n${Localize.translateLocal('iou.set')}`);
-    }
-    if (removalFragments.length > 0) {
-        message = removalFragments.reduce((acc, value, index) => {
-            if (index === removalFragments.length - 1) {
-                if (removalFragments.length === 1) {
-                    return `${acc} ${value}.`;        
-                } else if (removalFragments.length === 2) {
-                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
-                } else {
-                    return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
-                }
-            } else if (index === 0) {
-                return `${acc} ${value}`;
-            }
-            return `${acc}, ${value}`;
-        }, `${message}\n${Localize.translateLocal('iou.removed')}`);
-    }
+    let message = getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
+    getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
+     getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
     if (message === '') {
         return message;
     }

From b31ba92326163585034ac04cd466d39765b7876b Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 16:18:59 +0200
Subject: [PATCH 020/244] Run prettier

---
 src/languages/en.ts     |  3 +--
 src/languages/es.ts     |  3 +--
 src/libs/ReportUtils.js | 51 +++++++++++++++++++++++++++++------------
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 919548a3d918..3be57af83cc5 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -576,8 +576,7 @@ export default {
         setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `the ${valueName} to ${newValueToDisplay}`,
         setTheDistance: ({newDistanceToDisplay, newAmountToDisplay}: SetTheDistanceParams) => `set the distance to ${newDistanceToDisplay}, which set the amount to ${newAmountToDisplay}`,
         removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) => `the ${valueName} (previously ${oldValueToDisplay})`,
-        updatedTheRequest: ({valueName, newValueToDisplay, oldValueToDisplay}: UpdatedTheRequestParams) =>
-            `the ${valueName} to ${newValueToDisplay} (previously ${oldValueToDisplay})`,
+        updatedTheRequest: ({valueName, newValueToDisplay, oldValueToDisplay}: UpdatedTheRequestParams) => `the ${valueName} to ${newValueToDisplay} (previously ${oldValueToDisplay})`,
         updatedTheDistance: ({newDistanceToDisplay, oldDistanceToDisplay, newAmountToDisplay, oldAmountToDisplay}: UpdatedTheDistanceParams) =>
             `changed the distance to ${newDistanceToDisplay} (previously ${oldDistanceToDisplay}), which updated the amount to ${newAmountToDisplay} (previously ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 8d5f678c63e8..e2eb899a343a 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -568,8 +568,7 @@ export default {
         setTheRequest: ({valueName, newValueToDisplay}: SetTheRequestParams) => `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay}`,
         setTheDistance: ({newDistanceToDisplay, newAmountToDisplay}: SetTheDistanceParams) =>
             `estableció la distancia a ${newDistanceToDisplay}, lo que estableció el importe a ${newAmountToDisplay}`,
-        removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) =>
-            `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} (previamente ${oldValueToDisplay})`,
+        removedTheRequest: ({valueName, oldValueToDisplay}: RemovedTheRequestParams) => `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} (previamente ${oldValueToDisplay})`,
         updatedTheRequest: ({valueName, newValueToDisplay, oldValueToDisplay}: UpdatedTheRequestParams) =>
             `${valueName === 'comerciante' ? 'el' : 'la'} ${valueName} a ${newValueToDisplay} (previamente ${oldValueToDisplay})`,
         updatedTheDistance: ({newDistanceToDisplay, oldDistanceToDisplay, newAmountToDisplay, oldAmountToDisplay}: UpdatedTheDistanceParams) =>
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 13ffeb6432f5..68555644405c 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1897,7 +1897,7 @@ function getProperLineForModifiedExpenseMessage(prefix, messageFragments) {
     return messageFragments.reduce((acc, value, index) => {
         if (index === messageFragments.length - 1) {
             if (messageFragments.length === 1) {
-                return `${acc} ${value}.`;        
+                return `${acc} ${value}.`;
             } else if (messageFragments.length === 2) {
                 return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
             } else {
@@ -1976,19 +1976,24 @@ function getModifiedExpenseMessage(reportAction) {
             setFragments.push(fragment);
         } else if (!amount) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
 
     const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
     if (hasModifiedComment) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true);
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.newComment,
+            reportActionOriginalMessage.oldComment,
+            Localize.translateLocal('common.description'),
+            true,
+        );
         if (!reportActionOriginalMessage.oldComment) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.newComment) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
@@ -2003,30 +2008,40 @@ function getModifiedExpenseMessage(reportAction) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.created) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
 
     if (hasModifiedMerchant) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true);
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.merchant,
+            reportActionOriginalMessage.oldMerchant,
+            Localize.translateLocal('common.merchant'),
+            true,
+        );
         if (!reportActionOriginalMessage.oldMerchant) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.merchant) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
 
     const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
     if (hasModifiedCategory) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true);
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.category,
+            reportActionOriginalMessage.oldCategory,
+            Localize.translateLocal('common.category'),
+            true,
+        );
         if (!reportActionOriginalMessage.oldCategory) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.category) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
@@ -2038,26 +2053,32 @@ function getModifiedExpenseMessage(reportAction) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.tag) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
 
     const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
     if (hasModifiedBillable) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true);
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.billable,
+            reportActionOriginalMessage.oldBillable,
+            Localize.translateLocal('iou.request'),
+            true,
+        );
         if (!reportActionOriginalMessage.oldBillable) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.billable) {
             removalFragments.push(fragment);
-        } else  {
+        } else {
             changeFragments.push(fragment);
         }
     }
 
-    let message = getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
-    getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
-     getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
+    let message =
+        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
+        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
+        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
     if (message === '') {
         return message;
     }

From 376944c425bc61756f7421bd47ed26f5794b90c8 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 16:22:23 +0200
Subject: [PATCH 021/244] Fix lint.

---
 src/libs/ReportUtils.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 68555644405c..70487dc0862f 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1898,12 +1898,13 @@ function getProperLineForModifiedExpenseMessage(prefix, messageFragments) {
         if (index === messageFragments.length - 1) {
             if (messageFragments.length === 1) {
                 return `${acc} ${value}.`;
-            } else if (messageFragments.length === 2) {
+            }
+            if (messageFragments.length === 2) {
                 return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
-            } else {
-                return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
             }
-        } else if (index === 0) {
+            return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+        }
+        if (index === 0) {
             return `${acc} ${value}`;
         }
         return `${acc}, ${value}`;

From b9f42439e8ff3ee28402bb3b91f9530445c41cbf Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 8 Nov 2023 18:11:51 +0200
Subject: [PATCH 022/244] Update src/libs/ReportUtils.js

Co-authored-by: Tim Golen <tgolen@gmail.com>
---
 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 70487dc0862f..07265d95edc7 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1857,7 +1857,7 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip
 }
 
 /**
- * Get the proper message schema for a modified a field on the expense.
+ * Get the proper message schema for a modified field on the expense.
  *
  * @param {String} newValue
  * @param {String} oldValue

From 271d86cb408b7f949d7bd6cfaea5c8aef5312e8f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 9 Nov 2023 17:29:32 +0100
Subject: [PATCH 023/244] Props types for MenuItem

---
 src/components/{MenuItem.js => MenuItem.tsx} | 162 ++++++++++++++++++-
 1 file changed, 157 insertions(+), 5 deletions(-)
 rename src/components/{MenuItem.js => MenuItem.tsx} (79%)

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.tsx
similarity index 79%
rename from src/components/MenuItem.js
rename to src/components/MenuItem.tsx
index 103d063f9024..3b6ad37a9f5e 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.tsx
@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {useEffect, useMemo} from 'react';
-import {View} from 'react-native';
+import React, {ForwardedRef, ReactNode, useEffect, useMemo} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
@@ -13,6 +13,8 @@ import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
+import AvatarType from '@src/types/onyx/Avatar';
+import { AnimatedStyle } from 'react-native-reanimated';
 import Avatar from './Avatar';
 import Badge from './Badge';
 import DisplayNames from './DisplayNames';
@@ -20,14 +22,164 @@ import Hoverable from './Hoverable';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
-import menuItemPropTypes from './menuItemPropTypes';
 import MultipleAvatars from './MultipleAvatars';
 import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
 import RenderHTML from './RenderHTML';
 import SelectCircle from './SelectCircle';
 import Text from './Text';
 
-const propTypes = menuItemPropTypes;
+type MenuItemProps = {
+    /** Text to be shown as badge near the right end. */
+    badgeText: string;
+    
+    /** Function to fire when component is pressed */
+    onPress?: (event: Event) => void;
+ 
+    /** Used to apply offline styles to child text components */
+    style?: StyleProp<ViewStyle>;
+
+    /** Any additional styles to apply */
+    wrapperStyle?: StyleProp<ViewStyle>;
+
+    /** Used to apply styles specifically to the title */
+    titleStyle?: StyleProp<ViewStyle>;
+
+    /** Icon to display on the left side of component */
+    icon: ReactNode | string | AvatarType;
+
+    /** Secondary icon to display on the left side of component, right of the icon */
+    secondaryIcon: ReactNode;
+
+    /** Icon Width */
+    iconWidth: number;
+
+    /** Icon Height */
+    iconHeight: number;
+
+    /** Text to display for the item */
+    title: string;
+
+    /** Text that appears above the title */
+    label: string;
+
+    /** Boolean whether to display the title right icon */
+    shouldShowTitleIcon: boolean;
+
+    /** Icon to display at right side of title */
+    titleIcon: () => void;
+
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon: boolean;
+    
+    /** Should we make this selectable with a checkbox */
+    shouldShowSelectedState: boolean;
+    
+    /** Should the title show with normal font weight (not bold) */
+    shouldShowBasicTitle: boolean;
+    
+    /** Should the description be shown above the title (instead of the other way around) */
+    shouldShowDescriptionOnTop: boolean;
+    
+    /** Whether this item is selected */
+    isSelected: boolean;
+    
+    /** A boolean flag that gives the icon a green fill if true */
+    success: boolean;
+
+    /** Overrides the icon for shouldShowRightIcon */
+    iconRight: ReactNode;
+
+    /** A description text to show under the title */
+    description: string;
+
+    /** Any additional styles to pass to the icon container. */
+    iconStyles: Array<StyleProp<ViewStyle>>;
+
+    /** The fill color to pass into the icon. */
+    iconFill: string;
+
+    /** The fill color to pass into the secondary icon. */
+    secondaryIconFill: string;
+
+    /** Whether item is focused or active */
+    focused: boolean;
+
+    /** Should we disable this menu item? */
+    disabled: boolean;
+
+    /** A right-aligned subtitle for this menu option */
+    subtitle: string | number;
+
+    /** Flag to choose between avatar image or an icon */
+    iconType: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_ICON | typeof CONST.ICON_TYPE_WORKSPACE;
+
+    /** Whether the menu item should be interactive at all */
+    interactive: boolean;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: string | (() => void);
+    
+    /** Avatars to show on the right of the menu item */
+    floatRightAvatars: AvatarType;
+    
+    /** The type of brick road indicator to show. */
+    brickRoadIndicator: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | typeof CONST.BRICK_ROAD_INDICATOR_STATUS.INFO | '';
+
+    /** Prop to identify if we should load avatars vertically instead of diagonally */
+    shouldStackHorizontally: boolean;
+
+    /** Prop to represent the size of the float right avatar images to be shown */
+    floatRightAvatarSize: typeof CONST.AVATAR_SIZE;
+
+    /** Prop to represent the size of the avatar images to be shown */
+    avatarSize: typeof CONST.AVATAR_SIZE;
+
+    /** The function that should be called when this component is LongPressed or right-clicked. */
+    onSecondaryInteraction: () => void;
+
+    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
+    shouldBlockSelection: boolean;
+
+    /** Any adjustments to style when menu item is hovered or pressed */
+    hoverAndPressStyle: Array<StyleProp<AnimatedStyle<ViewStyle>>>,
+
+    /** Text to display under the main item */
+    furtherDetails: string;
+
+    /** An icon to display under the main item */
+    furtherDetailsIcon: ReactNode | string;
+
+    /** The action accept for anonymous user or not */
+    isAnonymousAction: boolean;
+
+    /**  Whether we should use small avatar subscript sizing the for menu item */
+    isSmallAvatarSubscriptMenu: boolean;
+
+    /** Should we grey out the menu item when it is disabled? */
+    shouldGreyOutWhenDisabled: boolean;
+
+    /** Error to display below the title */
+    error: string;
+
+    /** Should render the content in HTML format */
+    shouldRenderAsHTML: boolean;
+
+    /** Component to be displayed on the right */
+    rightComponent: ReactNode;
+
+    /** Should render component on the right */
+    shouldShowRightComponent: boolean;
+
+    /** Array of objects that map display names to their corresponding tooltip */
+    titleWithTooltips: ReactNode[];
+
+    /** Should check anonymous user in onPress function */
+    shouldCheckActionAllowedOnPress: boolean;
+};
+
+// TODO: Destructure props
+// TODO: Adjust default values
+// TODO: Adjust () => void in AvatarProps - always just used () => void without checking the usage
 
 const defaultProps = {
     badgeText: undefined,
@@ -84,7 +236,7 @@ const defaultProps = {
     shouldCheckActionAllowedOnPress: true,
 };
 
-const MenuItem = React.forwardRef((props, ref) => {
+const MenuItem = React.forwardRef((props: MenuItemProps, ref: ForwardedRef<View>) => {
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');
 

From 8dba84c7e4ca8d0f1e090fd2a7a269d9ece5d6ac Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 9 Nov 2023 17:42:07 +0100
Subject: [PATCH 024/244] Destructure props

---
 src/components/MenuItem.tsx | 222 ++++++++++++++++++------------------
 1 file changed, 112 insertions(+), 110 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 3b6ad37a9f5e..590bdf73cce8 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import React, {ForwardedRef, ReactNode, useEffect, useMemo} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
@@ -236,234 +236,236 @@ const defaultProps = {
     shouldCheckActionAllowedOnPress: true,
 };
 
-const MenuItem = React.forwardRef((props: MenuItemProps, ref: ForwardedRef<View>) => {
+const MenuItem = React.forwardRef(({badgeText,onPress,style,wrapperStyle,titleStyle,icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
+        shouldCheckActionAllowedOnPress
+}: MenuItemProps, ref: ForwardedRef<View>) => {
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');
 
-    const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
-    const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
+    const isDeleted = _.contains(style, styles.offlineFeedback.deleted);
+    const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const titleTextStyle = StyleUtils.combineStyles(
         [
             styles.flexShrink1,
             styles.popoverMenuText,
-            props.icon && !_.isArray(props.icon) && (props.avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
-            props.shouldShowBasicTitle ? undefined : styles.textStrong,
-            props.shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
-            props.numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
-            props.interactive && props.disabled ? {...styles.userSelectNone} : undefined,
+            icon && !_.isArray(icon) && (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
+            shouldShowBasicTitle ? undefined : styles.textStrong,
+            shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
+            numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
+            interactive && disabled ? {...styles.userSelectNone} : undefined,
             styles.ltr,
             isDeleted ? styles.offlineFeedback.deleted : undefined,
         ],
-        props.titleStyle,
+        titleStyle,
     );
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
-        props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
-        props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        props.descriptionTextStyle,
+        icon && !_.isArray(icon) ? styles.ml3 : undefined,
+        title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
+        descriptionTextStyle,
         isDeleted ? styles.offlineFeedback.deleted : undefined,
     ]);
 
-    const fallbackAvatarSize = props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
+    const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
 
     const titleRef = React.useRef('');
     useEffect(() => {
-        if (!props.title || (titleRef.current.length && titleRef.current === props.title) || !props.shouldParseTitle) {
+        if (!title || (titleRef.current.length && titleRef.current === title) || !shouldParseTitle) {
             return;
         }
         const parser = new ExpensiMark();
-        setHtml(parser.replace(props.title));
-        titleRef.current = props.title;
-    }, [props.title, props.shouldParseTitle]);
+        setHtml(parser.replace(title));
+        titleRef.current = title;
+    }, [title, shouldParseTitle]);
 
     const getProcessedTitle = useMemo(() => {
         let title = '';
-        if (props.shouldRenderAsHTML) {
-            title = convertToLTR(props.title);
+        if (shouldRenderAsHTML) {
+            title = convertToLTR(title);
         }
 
-        if (props.shouldParseTitle) {
+        if (shouldParseTitle) {
             title = html;
         }
 
         return title ? `<comment>${title}</comment>` : '';
-    }, [props.title, props.shouldRenderAsHTML, props.shouldParseTitle, html]);
+    }, [title, shouldRenderAsHTML, shouldParseTitle, html]);
 
-    const hasPressableRightComponent = props.iconRight || (props.rightComponent && props.shouldShowRightComponent);
+    const hasPressableRightComponent = iconRight || (rightComponent && shouldShowRightComponent);
 
     const renderTitleContent = () => {
-        if (props.titleWithTooltips && _.isArray(props.titleWithTooltips) && props.titleWithTooltips.length > 0) {
+        if (titleWithTooltips && _.isArray(titleWithTooltips) && titleWithTooltips.length > 0) {
             return (
                 <DisplayNames
-                    fullTitle={props.title}
-                    displayNamesWithTooltips={props.titleWithTooltips}
+                    fullTitle={title}
+                    displayNamesWithTooltips={titleWithTooltips}
                     tooltipEnabled
                     numberOfLines={1}
                 />
             );
         }
 
-        return convertToLTR(props.title);
+        return convertToLTR(title);
     };
 
-    const onPressAction = (e) => {
-        if (props.disabled || !props.interactive) {
+    const onPressAction = (event: GestureResponderEvent | KeyboardEvent) => {
+        if (disabled || !interactive) {
             return;
         }
 
-        if (e && e.type === 'click') {
-            e.currentTarget.blur();
+        if (event && event.type === 'click') {
+            event.currentTarget.blur();
         }
 
-        props.onPress(e);
+        onPress(e);
     };
 
     return (
         <Hoverable>
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
-                    onPress={props.shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, props.isAnonymousAction) : onPressAction}
-                    onPressIn={() => props.shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
+                    onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
-                    onSecondaryInteraction={props.onSecondaryInteraction}
+                    onSecondaryInteraction={onSecondaryInteraction}
                     style={({pressed}) => [
-                        props.style,
-                        !props.interactive && styles.cursorDefault,
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
-                        (isHovered || pressed) && props.hoverAndPressStyle,
-                        ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
-                        props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
+                        style,
+                        !interactive && styles.cursorDefault,
+                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
+                        (isHovered || pressed) && hoverAndPressStyle,
+                        ...(_.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
+                        shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
                     ]}
-                    disabled={props.disabled}
+                    disabled={disabled}
                     ref={ref}
                     role={CONST.ACCESSIBILITY_ROLE.MENUITEM}
-                    accessibilityLabel={props.title ? props.title.toString() : ''}
+                    accessibilityLabel={title ? title.toString() : ''}
                 >
                     {({pressed}) => (
                         <>
                             <View style={[styles.flexColumn, styles.flex1]}>
-                                {Boolean(props.label) && (
-                                    <View style={props.icon ? styles.mb2 : null}>
+                                {Boolean(label) && (
+                                    <View style={icon ? styles.mb2 : null}>
                                         <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>
-                                            {props.label}
+                                            {label}
                                         </Text>
                                     </View>
                                 )}
-                                <View style={[styles.flexRow, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
-                                    {Boolean(props.icon) && _.isArray(props.icon) && (
+                                <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && styles.cursorDisabled]}>
+                                    {Boolean(icon) && _.isArray(icon) && (
                                         <MultipleAvatars
                                             isHovered={isHovered}
                                             isPressed={pressed}
-                                            icons={props.icon}
-                                            size={props.avatarSize}
+                                            icons={icon}
+                                            size={avatarSize}
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
-                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
-                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
+                                                pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
+                                                isHovered && !pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
                                             ]}
                                         />
                                     )}
-                                    {Boolean(props.icon) && !_.isArray(props.icon) && (
-                                        <View style={[styles.popoverMenuIcon, ...props.iconStyles, StyleUtils.getAvatarWidthStyle(props.avatarSize)]}>
-                                            {props.iconType === CONST.ICON_TYPE_ICON && (
+                                    {Boolean(icon) && !_.isArray(icon) && (
+                                        <View style={[styles.popoverMenuIcon, ...iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
+                                            {iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
                                                     hovered={isHovered}
                                                     pressed={pressed}
-                                                    src={props.icon}
-                                                    width={props.iconWidth}
-                                                    height={props.iconHeight}
+                                                    src={icon}
+                                                    width={iconWidth}
+                                                    height={iconHeight}
                                                     fill={
-                                                        props.iconFill ||
+                                                        iconFill ||
                                                         StyleUtils.getIconFillColor(
-                                                            getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
+                                                            getButtonState(focused || isHovered, pressed, success, disabled, interactive),
                                                             true,
                                                         )
                                                     }
                                                 />
                                             )}
-                                            {props.iconType === CONST.ICON_TYPE_WORKSPACE && (
+                                            {iconType === CONST.ICON_TYPE_WORKSPACE && (
                                                 <Avatar
                                                     imageStyles={[styles.alignSelfCenter]}
                                                     size={CONST.AVATAR_SIZE.DEFAULT}
-                                                    source={props.icon}
-                                                    fallbackIcon={props.fallbackIcon}
-                                                    name={props.title}
+                                                    source={icon}
+                                                    fallbackIcon={fallbackIcon}
+                                                    name={title}
                                                     type={CONST.ICON_TYPE_WORKSPACE}
                                                 />
                                             )}
-                                            {props.iconType === CONST.ICON_TYPE_AVATAR && (
+                                            {iconType === CONST.ICON_TYPE_AVATAR && (
                                                 <Avatar
                                                     imageStyles={[styles.alignSelfCenter]}
-                                                    source={props.icon}
-                                                    fallbackIcon={props.fallbackIcon}
-                                                    size={props.avatarSize}
+                                                    source={icon}
+                                                    fallbackIcon={fallbackIcon}
+                                                    size={avatarSize}
                                                 />
                                             )}
                                         </View>
                                     )}
-                                    {Boolean(props.secondaryIcon) && (
-                                        <View style={[styles.popoverMenuIcon, ...props.iconStyles]}>
+                                    {Boolean(secondaryIcon) && (
+                                        <View style={[styles.popoverMenuIcon, ...iconStyles]}>
                                             <Icon
-                                                src={props.secondaryIcon}
-                                                width={props.iconWidth}
-                                                height={props.iconHeight}
+                                                src={secondaryIcon}
+                                                width={iconWidth}
+                                                height={iconHeight}
                                                 fill={
-                                                    props.secondaryIconFill ||
-                                                    StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true)
+                                                    secondaryIconFill ||
+                                                    StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true)
                                                 }
                                             />
                                         </View>
                                     )}
-                                    <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(props.isSmallAvatarSubscriptMenu)]}>
-                                        {Boolean(props.description) && props.shouldShowDescriptionOnTop && (
+                                    <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
+                                        {Boolean(description) && shouldShowDescriptionOnTop && (
                                             <Text
                                                 style={descriptionTextStyle}
                                                 numberOfLines={2}
                                             >
-                                                {props.description}
+                                                {description}
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(props.title) && (Boolean(props.shouldRenderAsHTML) || (Boolean(props.shouldParseTitle) && Boolean(html.length))) && (
+                                            {Boolean(title) && (Boolean(shouldRenderAsHTML) || (Boolean(shouldParseTitle) && Boolean(html.length))) && (
                                                 <View style={styles.renderHTMLTitle}>
                                                     <RenderHTML html={getProcessedTitle} />
                                                 </View>
                                             )}
-                                            {!props.shouldRenderAsHTML && !props.shouldParseTitle && Boolean(props.title) && (
+                                            {!shouldRenderAsHTML && !shouldParseTitle && Boolean(title) && (
                                                 <Text
                                                     style={titleTextStyle}
-                                                    numberOfLines={props.numberOfLinesTitle || undefined}
-                                                    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.interactive && props.disabled}}
+                                                    numberOfLines={numberOfLinesTitle || undefined}
+                                                    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: interactive && disabled}}
                                                 >
                                                     {renderTitleContent()}
                                                 </Text>
                                             )}
-                                            {Boolean(props.shouldShowTitleIcon) && (
+                                            {Boolean(shouldShowTitleIcon) && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon
-                                                        src={props.titleIcon}
+                                                        src={titleIcon}
                                                         fill={themeColors.iconSuccessFill}
                                                     />
                                                 </View>
                                             )}
                                         </View>
-                                        {Boolean(props.description) && !props.shouldShowDescriptionOnTop && (
+                                        {Boolean(description) && !shouldShowDescriptionOnTop && (
                                             <Text
                                                 style={descriptionTextStyle}
                                                 numberOfLines={2}
                                             >
-                                                {props.description}
+                                                {description}
                                             </Text>
                                         )}
-                                        {Boolean(props.error) && (
+                                        {Boolean(error) && (
                                             <View style={[styles.mt1]}>
-                                                <Text style={[styles.textLabelError]}>{props.error}</Text>
+                                                <Text style={[styles.textLabelError]}>{error}</Text>
                                             </View>
                                         )}
-                                        {Boolean(props.furtherDetails) && (
+                                        {Boolean(furtherDetails) && (
                                             <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
                                                 <Icon
-                                                    src={props.furtherDetailsIcon}
+                                                    src={furtherDetailsIcon}
                                                     height={variables.iconSizeNormal}
                                                     width={variables.iconSizeNormal}
                                                     inline
@@ -472,7 +474,7 @@ const MenuItem = React.forwardRef((props: MenuItemProps, ref: ForwardedRef<View>
                                                     style={[styles.furtherDetailsText, styles.ph2, styles.pt1]}
                                                     numberOfLines={2}
                                                 >
-                                                    {props.furtherDetails}
+                                                    {furtherDetails}
                                                 </Text>
                                             </View>
                                         )}
@@ -480,52 +482,52 @@ const MenuItem = React.forwardRef((props: MenuItemProps, ref: ForwardedRef<View>
                                 </View>
                             </View>
                             <View style={[styles.flexRow, styles.menuItemTextContainer, !hasPressableRightComponent && styles.pointerEventsNone]}>
-                                {Boolean(props.badgeText) && (
+                                {Boolean(badgeText) && (
                                     <Badge
-                                        text={props.badgeText}
+                                        text={badgeText}
                                         badgeStyles={[
                                             styles.alignSelfCenter,
-                                            props.brickRoadIndicator ? styles.mr2 : undefined,
-                                            props.focused || isHovered || pressed ? styles.hoveredButton : {},
+                                            brickRoadIndicator ? styles.mr2 : undefined,
+                                            focused || isHovered || pressed ? styles.hoveredButton : {},
                                         ]}
                                     />
                                 )}
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
-                                {(props.subtitle || props.subtitle === 0) && (
+                                {(subtitle || subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, style]}>{subtitle}</Text>
                                     </View>
                                 )}
-                                {!_.isEmpty(props.floatRightAvatars) && (
-                                    <View style={[styles.justifyContentCenter, props.brickRoadIndicator ? styles.mr2 : undefined]}>
+                                {!_.isEmpty(floatRightAvatars) && (
+                                    <View style={[styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : undefined]}>
                                         <MultipleAvatars
                                             isHovered={isHovered}
                                             isPressed={pressed}
-                                            icons={props.floatRightAvatars}
-                                            size={props.floatRightAvatarSize || fallbackAvatarSize}
+                                            icons={floatRightAvatars}
+                                            size={floatRightAvatarSize || fallbackAvatarSize}
                                             fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
-                                            shouldStackHorizontally={props.shouldStackHorizontally}
+                                            shouldStackHorizontally={shouldStackHorizontally}
                                         />
                                     </View>
                                 )}
-                                {Boolean(props.brickRoadIndicator) && (
+                                {Boolean(brickRoadIndicator) && (
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={props.brickRoadIndicator === 'error' ? themeColors.danger : themeColors.success}
+                                            fill={brickRoadIndicator === 'error' ? themeColors.danger : themeColors.success}
                                         />
                                     </View>
                                 )}
-                                {Boolean(props.shouldShowRightIcon) && (
-                                    <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
+                                {Boolean(shouldShowRightIcon) && (
+                                    <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, disabled && styles.cursorDisabled]}>
                                         <Icon
-                                            src={props.iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
+                                            src={iconRight}
+                                            fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive))}
                                         />
                                     </View>
                                 )}
-                                {props.shouldShowRightComponent && props.rightComponent}
-                                {props.shouldShowSelectedState && <SelectCircle isChecked={props.isSelected} />}
+                                {shouldShowRightComponent && rightComponent}
+                                {shouldShowSelectedState && <SelectCircle isChecked={isSelected} />}
                             </View>
                         </>
                     )}

From 12ec1ed805e7c4afa23b4cb683d382989e6f30df Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 9 Nov 2023 17:44:30 +0100
Subject: [PATCH 025/244] Make the component a function declaration

---
 src/components/MenuItem.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 590bdf73cce8..3036269790e8 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,5 +1,5 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {ForwardedRef, ReactNode, useEffect, useMemo} from 'react';
+import React, {ForwardedRef, ReactNode, forwardRef, useEffect, useMemo} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -236,9 +236,9 @@ const defaultProps = {
     shouldCheckActionAllowedOnPress: true,
 };
 
-const MenuItem = React.forwardRef(({badgeText,onPress,style,wrapperStyle,titleStyle,icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
+function MenuItem({badgeText,onPress,style,wrapperStyle,titleStyle,icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
         shouldCheckActionAllowedOnPress
-}: MenuItemProps, ref: ForwardedRef<View>) => {
+}: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');
 
@@ -535,10 +535,8 @@ const MenuItem = React.forwardRef(({badgeText,onPress,style,wrapperStyle,titleSt
             )}
         </Hoverable>
     );
-});
+}
 
-MenuItem.propTypes = propTypes;
-MenuItem.defaultProps = defaultProps;
 MenuItem.displayName = 'MenuItem';
 
-export default MenuItem;
+export default forwardRef(MenuItem);

From 49d35b131c9e8ad9e7593da7cf01f4be04ef0d8c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 10 Nov 2023 11:28:42 +0100
Subject: [PATCH 026/244] Type onPress

---
 src/components/MenuItem.tsx | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 3036269790e8..b6de792d4a0d 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -28,12 +28,23 @@ import RenderHTML from './RenderHTML';
 import SelectCircle from './SelectCircle';
 import Text from './Text';
 
-type MenuItemProps = {
-    /** Text to be shown as badge near the right end. */
-    badgeText: string;
-    
+type ResponsiveProps = {
     /** Function to fire when component is pressed */
-    onPress?: (event: Event) => void;
+    onPress: (event: GestureResponderEvent | KeyboardEvent) => void;
+
+    interactive?: true;
+}
+
+type UnresponsiveProps = {
+    onPress?: undefined;
+
+    /** Whether the menu item should be interactive at all */
+    interactive: false;
+}
+
+type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
+    /** Text to be shown as badge near the right end. */
+    badgeText?: string;
  
     /** Used to apply offline styles to child text components */
     style?: StyleProp<ViewStyle>;
@@ -113,9 +124,6 @@ type MenuItemProps = {
     /** Flag to choose between avatar image or an icon */
     iconType: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_ICON | typeof CONST.ICON_TYPE_WORKSPACE;
 
-    /** Whether the menu item should be interactive at all */
-    interactive: boolean;
-
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon: string | (() => void);
     
@@ -182,7 +190,6 @@ type MenuItemProps = {
 // TODO: Adjust () => void in AvatarProps - always just used () => void without checking the usage
 
 const defaultProps = {
-    badgeText: undefined,
     shouldShowRightIcon: false,
     shouldShowSelectedState: false,
     shouldShowBasicTitle: false,
@@ -236,7 +243,9 @@ const defaultProps = {
     shouldCheckActionAllowedOnPress: true,
 };
 
-function MenuItem({badgeText,onPress,style,wrapperStyle,titleStyle,icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
+function MenuItem({badgeText, onPress,
+    // Props not validated below - Validate if required and default value
+    ,style,wrapperStyle,titleStyle,icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
         shouldCheckActionAllowedOnPress
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -313,11 +322,11 @@ function MenuItem({badgeText,onPress,style,wrapperStyle,titleStyle,icon,secondar
             return;
         }
 
-        if (event && event.type === 'click') {
-            event.currentTarget.blur();
+        if (event && event.type === 'click' && event.currentTarget instanceof EventTarget) {
+            (event.currentTarget as HTMLElement).blur();
         }
 
-        onPress(e);
+        onPress(event);
     };
 
     return (

From 0cedba9095e705a99c5f50fc89d81dc553f96d8d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 10 Nov 2023 11:31:56 +0100
Subject: [PATCH 027/244] Validate style props

---
 src/components/MenuItem.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index b6de792d4a0d..84e19fcbd5ad 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -55,6 +55,8 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Used to apply styles specifically to the title */
     titleStyle?: StyleProp<ViewStyle>;
 
+    // ------------------------------- VALID PROPS ABOVE
+
     /** Icon to display on the left side of component */
     icon: ReactNode | string | AvatarType;
 
@@ -196,9 +198,6 @@ const defaultProps = {
     shouldShowDescriptionOnTop: false,
     shouldShowHeaderTitle: false,
     shouldParseTitle: false,
-    wrapperStyle: [],
-    style: styles.popoverMenuItem,
-    titleStyle: {},
     shouldShowTitleIcon: false,
     titleIcon: () => {},
     descriptionTextStyle: styles.breakWord,
@@ -217,7 +216,6 @@ const defaultProps = {
     isSelected: false,
     subtitle: undefined,
     iconType: CONST.ICON_TYPE_ICON,
-    onPress: () => {},
     onSecondaryInteraction: undefined,
     interactive: true,
     fallbackIcon: Expensicons.FallbackAvatar,
@@ -243,9 +241,9 @@ const defaultProps = {
     shouldCheckActionAllowedOnPress: true,
 };
 
-function MenuItem({badgeText, onPress,
+function MenuItem({badgeText, onPress, style = styles.popoverMenuItem, wrapperStyle, titleStyle,
     // Props not validated below - Validate if required and default value
-    ,style,wrapperStyle,titleStyle,icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
+    icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
         shouldCheckActionAllowedOnPress
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();

From b6e092535411ae4f746cd3c394ad26ebdbf81f26 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 10 Nov 2023 16:17:08 +0100
Subject: [PATCH 028/244] Prop types -> Typescript props

---
 src/components/MenuItem.tsx | 185 ++++++++++++++++++------------------
 1 file changed, 90 insertions(+), 95 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 84e19fcbd5ad..8c9ab27ce3b5 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,5 +1,5 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {ForwardedRef, ReactNode, forwardRef, useEffect, useMemo} from 'react';
+import React, {FC, ForwardedRef, ReactNode, forwardRef, useEffect, useMemo} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import _ from 'underscore';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -15,6 +15,8 @@ import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import AvatarType from '@src/types/onyx/Avatar';
 import { AnimatedStyle } from 'react-native-reanimated';
+import IconType from '@types/Icon';
+import { SvgProps } from 'react-native-svg';
 import Avatar from './Avatar';
 import Badge from './Badge';
 import DisplayNames from './DisplayNames';
@@ -42,7 +44,35 @@ type UnresponsiveProps = {
     interactive: false;
 }
 
-type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
+type TitleIconProps = {
+    /** Boolean whether to display the title right icon */
+    shouldShowTitleIcon: true;
+
+    /** Icon to display at right side of title */
+    titleIcon: IconType;
+}
+
+type NoTitleIconProps = {
+    shouldShowTitleIcon?: false;
+    
+    titleIcon?: undefined;
+}
+
+type RightIconProps = {
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon: true;
+
+    /** Overrides the icon for shouldShowRightIcon */
+    iconRight: IconType;
+}
+
+type NoRightIconProps = {
+    shouldShowRightIcon?: false;
+
+    iconRight?: IconType;
+}
+
+type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | NoTitleIconProps) & (RightIconProps | NoRightIconProps) &{
     /** Text to be shown as badge near the right end. */
     badgeText?: string;
  
@@ -55,79 +85,79 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Used to apply styles specifically to the title */
     titleStyle?: StyleProp<ViewStyle>;
 
-    // ------------------------------- VALID PROPS ABOVE
+    /** Any adjustments to style when menu item is hovered or pressed */
+    hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
 
     /** Icon to display on the left side of component */
-    icon: ReactNode | string | AvatarType;
+    icon?: ReactNode | string | AvatarType;
+
+    /** The fill color to pass into the icon. */
+    iconFill?: string;
 
     /** Secondary icon to display on the left side of component, right of the icon */
-    secondaryIcon: ReactNode;
+    secondaryIcon?: ReactNode;
+
+    /** The fill color to pass into the secondary icon. */
+    secondaryIconFill?: string;
+
+    /** Flag to choose between avatar image or an icon */
+    iconType?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_ICON | typeof CONST.ICON_TYPE_WORKSPACE;
 
     /** Icon Width */
-    iconWidth: number;
+    iconWidth?: number;
 
     /** Icon Height */
-    iconHeight: number;
+    iconHeight?: number;
 
-    /** Text to display for the item */
-    title: string;
+    /** Any additional styles to pass to the icon container. */
+    iconStyles?: StyleProp<ViewStyle>;
 
-    /** Text that appears above the title */
-    label: string;
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon?: FC<SvgProps>;
 
-    /** Boolean whether to display the title right icon */
-    shouldShowTitleIcon: boolean;
+    /** An icon to display under the main item */
+    furtherDetailsIcon?: IconType;
 
-    /** Icon to display at right side of title */
-    titleIcon: () => void;
+    /** A description text to show under the title */
+    description?: string;
 
-    /** Boolean whether to display the right icon */
-    shouldShowRightIcon: boolean;
-    
-    /** Should we make this selectable with a checkbox */
-    shouldShowSelectedState: boolean;
-    
-    /** Should the title show with normal font weight (not bold) */
-    shouldShowBasicTitle: boolean;
-    
     /** Should the description be shown above the title (instead of the other way around) */
-    shouldShowDescriptionOnTop: boolean;
-    
-    /** Whether this item is selected */
-    isSelected: boolean;
-    
+    shouldShowDescriptionOnTop?: boolean;
+
+    /** Error to display below the title */
+    error?: string;
+
     /** A boolean flag that gives the icon a green fill if true */
-    success: boolean;
+    success?: boolean;
 
-    /** Overrides the icon for shouldShowRightIcon */
-    iconRight: ReactNode;
+    /** Whether item is focused or active */
+    focused?: boolean;
 
-    /** A description text to show under the title */
-    description: string;
+    /** Should we disable this menu item? */
+    disabled?: boolean;
 
-    /** Any additional styles to pass to the icon container. */
-    iconStyles: Array<StyleProp<ViewStyle>>;
+    /** Text that appears above the title */
+    label?: string;
 
-    /** The fill color to pass into the icon. */
-    iconFill: string;
+    /** Text to display for the item */
+    title?: string;
 
-    /** The fill color to pass into the secondary icon. */
-    secondaryIconFill: string;
+    /** A right-aligned subtitle for this menu option */
+    subtitle?: string | number;
 
-    /** Whether item is focused or active */
-    focused: boolean;
+    /** Should we make this selectable with a checkbox */
+    shouldShowSelectedState?: boolean;
 
-    /** Should we disable this menu item? */
-    disabled: boolean;
+    /** Whether this item is selected */
+    isSelected?: boolean;
 
-    /** A right-aligned subtitle for this menu option */
-    subtitle: string | number;
+    /** Prop to identify if we should load avatars vertically instead of diagonally */
+    shouldStackHorizontally: boolean;
 
-    /** Flag to choose between avatar image or an icon */
-    iconType: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_ICON | typeof CONST.ICON_TYPE_WORKSPACE;
+    // ------------------------------- VALID PROPS ABOVE
 
-    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: string | (() => void);
+    /** Should the title show with normal font weight (not bold) */
+    shouldShowBasicTitle: boolean;
     
     /** Avatars to show on the right of the menu item */
     floatRightAvatars: AvatarType;
@@ -135,9 +165,6 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** The type of brick road indicator to show. */
     brickRoadIndicator: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | typeof CONST.BRICK_ROAD_INDICATOR_STATUS.INFO | '';
 
-    /** Prop to identify if we should load avatars vertically instead of diagonally */
-    shouldStackHorizontally: boolean;
-
     /** Prop to represent the size of the float right avatar images to be shown */
     floatRightAvatarSize: typeof CONST.AVATAR_SIZE;
 
@@ -150,15 +177,9 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
     shouldBlockSelection: boolean;
 
-    /** Any adjustments to style when menu item is hovered or pressed */
-    hoverAndPressStyle: Array<StyleProp<AnimatedStyle<ViewStyle>>>,
-
     /** Text to display under the main item */
     furtherDetails: string;
 
-    /** An icon to display under the main item */
-    furtherDetailsIcon: ReactNode | string;
-
     /** The action accept for anonymous user or not */
     isAnonymousAction: boolean;
 
@@ -168,9 +189,6 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Should we grey out the menu item when it is disabled? */
     shouldGreyOutWhenDisabled: boolean;
 
-    /** Error to display below the title */
-    error: string;
-
     /** Should render the content in HTML format */
     shouldRenderAsHTML: boolean;
 
@@ -192,58 +210,35 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
 // TODO: Adjust () => void in AvatarProps - always just used () => void without checking the usage
 
 const defaultProps = {
-    shouldShowRightIcon: false,
-    shouldShowSelectedState: false,
     shouldShowBasicTitle: false,
-    shouldShowDescriptionOnTop: false,
     shouldShowHeaderTitle: false,
     shouldParseTitle: false,
-    shouldShowTitleIcon: false,
-    titleIcon: () => {},
     descriptionTextStyle: styles.breakWord,
-    success: false,
-    icon: undefined,
-    secondaryIcon: undefined,
-    iconWidth: undefined,
-    iconHeight: undefined,
-    description: undefined,
-    iconRight: Expensicons.ArrowRight,
-    iconStyles: [],
-    iconFill: undefined,
-    secondaryIconFill: undefined,
-    focused: false,
-    disabled: false,
-    isSelected: false,
-    subtitle: undefined,
-    iconType: CONST.ICON_TYPE_ICON,
-    onSecondaryInteraction: undefined,
     interactive: true,
-    fallbackIcon: Expensicons.FallbackAvatar,
     brickRoadIndicator: '',
     floatRightAvatars: [],
-    shouldStackHorizontally: false,
     avatarSize: CONST.AVATAR_SIZE.DEFAULT,
-    floatRightAvatarSize: undefined,
     shouldBlockSelection: false,
-    hoverAndPressStyle: [],
     furtherDetails: '',
-    furtherDetailsIcon: undefined,
     isAnonymousAction: false,
     isSmallAvatarSubscriptMenu: false,
-    title: '',
     numberOfLinesTitle: 1,
     shouldGreyOutWhenDisabled: true,
-    error: '',
     shouldRenderAsHTML: false,
-    rightComponent: undefined,
     shouldShowRightComponent: false,
     titleWithTooltips: [],
     shouldCheckActionAllowedOnPress: true,
 };
 
-function MenuItem({badgeText, onPress, style = styles.popoverMenuItem, wrapperStyle, titleStyle,
+function MenuItem({
+    badgeText, onPress, style = styles.popoverMenuItem, wrapperStyle, titleStyle, hoverAndPressStyle,
+    icon, iconFill, secondaryIcon, secondaryIconFill, iconType = CONST.ICON_TYPE_ICON, iconWidth, iconHeight, iconStyles, fallbackIcon = Expensicons.FallbackAvatar, shouldShowTitleIcon = false, titleIcon,
+    shouldShowRightIcon = false, iconRight = Expensicons.ArrowRight, furtherDetailsIcon,
+    description, error, success = false, focused = false, disabled = false,
+    title, subtitle, label, shouldShowSelectedState = false, isSelected = false, shouldStackHorizontally = false,
+    shouldShowDescriptionOnTop = false,
     // Props not validated below - Validate if required and default value
-    icon,secondaryIcon,iconWidth,iconHeight,title,label,shouldShowTitleIcon,titleIcon,shouldShowRightIcon,shouldShowSelectedState,shouldShowBasicTitle,shouldShowDescriptionOnTop,isSelected,success,iconRight,description,iconStyles,iconFill,secondaryIconFill,focused,disabled,subtitle,iconType,interactive,fallbackIcon,floatRightAvatars,brickRoadIndicator = '',shouldStackHorizontally,floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,hoverAndPressStyle,furtherDetails,furtherDetailsIcon,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,error,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
+    shouldShowBasicTitle,interactive,floatRightAvatars,brickRoadIndicator = '',floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,furtherDetails,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
         shouldCheckActionAllowedOnPress
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -373,7 +368,7 @@ function MenuItem({badgeText, onPress, style = styles.popoverMenuItem, wrapperSt
                                         />
                                     )}
                                     {Boolean(icon) && !_.isArray(icon) && (
-                                        <View style={[styles.popoverMenuIcon, ...iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
+                                        <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
                                             {iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
                                                     hovered={isHovered}
@@ -411,7 +406,7 @@ function MenuItem({badgeText, onPress, style = styles.popoverMenuItem, wrapperSt
                                         </View>
                                     )}
                                     {Boolean(secondaryIcon) && (
-                                        <View style={[styles.popoverMenuIcon, ...iconStyles]}>
+                                        <View style={[styles.popoverMenuIcon, iconStyles]}>
                                             <Icon
                                                 src={secondaryIcon}
                                                 width={iconWidth}

From 9676e34e8869c382dfcdd4f5ae96d85544b578d5 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 10 Nov 2023 16:31:20 +0100
Subject: [PATCH 029/244] Prop types -> Typescript props

---
 src/components/MenuItem.tsx | 63 ++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 8c9ab27ce3b5..8c7e426a4cfe 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -72,7 +72,22 @@ type NoRightIconProps = {
     iconRight?: IconType;
 }
 
-type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | NoTitleIconProps) & (RightIconProps | NoRightIconProps) &{
+type RightComponent = {
+    /** Should render component on the right */
+    shouldShowRightComponent: true;
+
+    /** Component to be displayed on the right */
+    rightComponent: ReactNode;
+}
+
+type NoRightComponent = {
+    shouldShowRightComponent?: false;
+
+    rightComponent?: undefined;
+}
+
+type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | NoTitleIconProps) &
+(RightIconProps | NoRightIconProps) & (RightComponent | NoRightComponent) & {
     /** Text to be shown as badge near the right end. */
     badgeText?: string;
  
@@ -145,6 +160,9 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     /** A right-aligned subtitle for this menu option */
     subtitle?: string | number;
 
+    /** Should the title show with normal font weight (not bold) */
+    shouldShowBasicTitle?: boolean;
+
     /** Should we make this selectable with a checkbox */
     shouldShowSelectedState?: boolean;
 
@@ -154,23 +172,23 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     /** Prop to identify if we should load avatars vertically instead of diagonally */
     shouldStackHorizontally: boolean;
 
-    // ------------------------------- VALID PROPS ABOVE
+    /** Prop to represent the size of the avatar images to be shown */
+    avatarSize?: typeof CONST.AVATAR_SIZE;
 
-    /** Should the title show with normal font weight (not bold) */
-    shouldShowBasicTitle: boolean;
-    
     /** Avatars to show on the right of the menu item */
-    floatRightAvatars: AvatarType;
-    
-    /** The type of brick road indicator to show. */
-    brickRoadIndicator: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | typeof CONST.BRICK_ROAD_INDICATOR_STATUS.INFO | '';
+    floatRightAvatars?: AvatarType[];
 
     /** Prop to represent the size of the float right avatar images to be shown */
-    floatRightAvatarSize: typeof CONST.AVATAR_SIZE;
+    floatRightAvatarSize?: typeof CONST.AVATAR_SIZE;    
 
-    /** Prop to represent the size of the avatar images to be shown */
-    avatarSize: typeof CONST.AVATAR_SIZE;
+/**  Whether we should use small avatar subscript sizing the for menu item */
+    isSmallAvatarSubscriptMenu?: boolean;
 
+    // ------------------------------- VALID PROPS ABOVE
+    
+    /** The type of brick road indicator to show. */
+    brickRoadIndicator: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | typeof CONST.BRICK_ROAD_INDICATOR_STATUS.INFO | '';
+    
     /** The function that should be called when this component is LongPressed or right-clicked. */
     onSecondaryInteraction: () => void;
 
@@ -183,21 +201,12 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     /** The action accept for anonymous user or not */
     isAnonymousAction: boolean;
 
-    /**  Whether we should use small avatar subscript sizing the for menu item */
-    isSmallAvatarSubscriptMenu: boolean;
-
     /** Should we grey out the menu item when it is disabled? */
     shouldGreyOutWhenDisabled: boolean;
 
     /** Should render the content in HTML format */
     shouldRenderAsHTML: boolean;
 
-    /** Component to be displayed on the right */
-    rightComponent: ReactNode;
-
-    /** Should render component on the right */
-    shouldShowRightComponent: boolean;
-
     /** Array of objects that map display names to their corresponding tooltip */
     titleWithTooltips: ReactNode[];
 
@@ -210,8 +219,6 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
 // TODO: Adjust () => void in AvatarProps - always just used () => void without checking the usage
 
 const defaultProps = {
-    shouldShowBasicTitle: false,
-    shouldShowHeaderTitle: false,
     shouldParseTitle: false,
     descriptionTextStyle: styles.breakWord,
     interactive: true,
@@ -221,11 +228,9 @@ const defaultProps = {
     shouldBlockSelection: false,
     furtherDetails: '',
     isAnonymousAction: false,
-    isSmallAvatarSubscriptMenu: false,
     numberOfLinesTitle: 1,
     shouldGreyOutWhenDisabled: true,
     shouldRenderAsHTML: false,
-    shouldShowRightComponent: false,
     titleWithTooltips: [],
     shouldCheckActionAllowedOnPress: true,
 };
@@ -235,10 +240,11 @@ function MenuItem({
     icon, iconFill, secondaryIcon, secondaryIconFill, iconType = CONST.ICON_TYPE_ICON, iconWidth, iconHeight, iconStyles, fallbackIcon = Expensicons.FallbackAvatar, shouldShowTitleIcon = false, titleIcon,
     shouldShowRightIcon = false, iconRight = Expensicons.ArrowRight, furtherDetailsIcon,
     description, error, success = false, focused = false, disabled = false,
-    title, subtitle, label, shouldShowSelectedState = false, isSelected = false, shouldStackHorizontally = false,
-    shouldShowDescriptionOnTop = false,
+    title, subtitle, shouldShowBasicTitle, label, shouldShowSelectedState = false, isSelected = false, shouldStackHorizontally = false,
+    shouldShowDescriptionOnTop = false, shouldShowRightComponent = false, rightComponent,
+    floatRightAvatars = [], floatRightAvatarSize, avatarSize = CONST.AVATAR_SIZE.DEFAULT, isSmallAvatarSubscriptMenu = false,
     // Props not validated below - Validate if required and default value
-    shouldShowBasicTitle,interactive,floatRightAvatars,brickRoadIndicator = '',floatRightAvatarSize,avatarSize,onSecondaryInteraction,shouldBlockSelection,furtherDetails,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,shouldRenderAsHTML,rightComponent,shouldShowRightComponent,titleWithTooltips,
+    interactive,brickRoadIndicator = '',avatarSize,onSecondaryInteraction,shouldBlockSelection,furtherDetails,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,shouldRenderAsHTML,titleWithTooltips,
         shouldCheckActionAllowedOnPress
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -252,7 +258,6 @@ function MenuItem({
             styles.popoverMenuText,
             icon && !_.isArray(icon) && (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
             shouldShowBasicTitle ? undefined : styles.textStrong,
-            shouldShowHeaderTitle ? styles.textHeadlineH1 : undefined,
             numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
             interactive && disabled ? {...styles.userSelectNone} : undefined,
             styles.ltr,

From 87db8e24ca9fd7f868b177e112f1ce12721b47db Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 10 Nov 2023 16:56:52 +0100
Subject: [PATCH 030/244] Prop types -> Typescript props

---
 src/components/MenuItem.tsx | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 8c7e426a4cfe..c53ab3c3bdb1 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -173,7 +173,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     shouldStackHorizontally: boolean;
 
     /** Prop to represent the size of the avatar images to be shown */
-    avatarSize?: typeof CONST.AVATAR_SIZE;
+    avatarSize?: typeof CONST.AVATAR_SIZE[keyof typeof CONST.AVATAR_SIZE];
 
     /** Avatars to show on the right of the menu item */
     floatRightAvatars?: AvatarType[];
@@ -181,13 +181,13 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     /** Prop to represent the size of the float right avatar images to be shown */
     floatRightAvatarSize?: typeof CONST.AVATAR_SIZE;    
 
-/**  Whether we should use small avatar subscript sizing the for menu item */
+    /**  Whether we should use small avatar subscript sizing the for menu item */
     isSmallAvatarSubscriptMenu?: boolean;
 
-    // ------------------------------- VALID PROPS ABOVE
-    
     /** The type of brick road indicator to show. */
-    brickRoadIndicator: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | typeof CONST.BRICK_ROAD_INDICATOR_STATUS.INFO | '';
+    brickRoadIndicator?: typeof CONST.BRICK_ROAD_INDICATOR_STATUS[keyof typeof CONST.BRICK_ROAD_INDICATOR_STATUS];
+
+    // ------------------------------- VALID PROPS ABOVE
     
     /** The function that should be called when this component is LongPressed or right-clicked. */
     onSecondaryInteraction: () => void;
@@ -221,10 +221,6 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
 const defaultProps = {
     shouldParseTitle: false,
     descriptionTextStyle: styles.breakWord,
-    interactive: true,
-    brickRoadIndicator: '',
-    floatRightAvatars: [],
-    avatarSize: CONST.AVATAR_SIZE.DEFAULT,
     shouldBlockSelection: false,
     furtherDetails: '',
     isAnonymousAction: false,
@@ -236,15 +232,16 @@ const defaultProps = {
 };
 
 function MenuItem({
-    badgeText, onPress, style = styles.popoverMenuItem, wrapperStyle, titleStyle, hoverAndPressStyle,
+    interactive = true, onPress, badgeText, style = styles.popoverMenuItem, wrapperStyle, titleStyle, hoverAndPressStyle,
     icon, iconFill, secondaryIcon, secondaryIconFill, iconType = CONST.ICON_TYPE_ICON, iconWidth, iconHeight, iconStyles, fallbackIcon = Expensicons.FallbackAvatar, shouldShowTitleIcon = false, titleIcon,
     shouldShowRightIcon = false, iconRight = Expensicons.ArrowRight, furtherDetailsIcon,
     description, error, success = false, focused = false, disabled = false,
     title, subtitle, shouldShowBasicTitle, label, shouldShowSelectedState = false, isSelected = false, shouldStackHorizontally = false,
     shouldShowDescriptionOnTop = false, shouldShowRightComponent = false, rightComponent,
     floatRightAvatars = [], floatRightAvatarSize, avatarSize = CONST.AVATAR_SIZE.DEFAULT, isSmallAvatarSubscriptMenu = false,
+    brickRoadIndicator,
     // Props not validated below - Validate if required and default value
-    interactive,brickRoadIndicator = '',avatarSize,onSecondaryInteraction,shouldBlockSelection,furtherDetails,isAnonymousAction,isSmallAvatarSubscriptMenu,shouldGreyOutWhenDisabled,shouldRenderAsHTML,titleWithTooltips,
+    onSecondaryInteraction,shouldBlockSelection,furtherDetails,isAnonymousAction,shouldGreyOutWhenDisabled,shouldRenderAsHTML,titleWithTooltips,
         shouldCheckActionAllowedOnPress
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -301,7 +298,7 @@ function MenuItem({
     const hasPressableRightComponent = iconRight || (rightComponent && shouldShowRightComponent);
 
     const renderTitleContent = () => {
-        if (titleWithTooltips && _.isArray(titleWithTooltips) && titleWithTooltips.length > 0) {
+        if (titleWithTooltips && Array.isArray(titleWithTooltips) && titleWithTooltips.length > 0) {
             return (
                 <DisplayNames
                     fullTitle={title}
@@ -312,7 +309,7 @@ function MenuItem({
             );
         }
 
-        return convertToLTR(title);
+        return title ? convertToLTR(title) : '';
     };
 
     const onPressAction = (event: GestureResponderEvent | KeyboardEvent) => {

From 3683fcb5a99470da05ce4ed96f21a3af7e31ae7d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 10 Nov 2023 17:02:44 +0100
Subject: [PATCH 031/244] Prop types -> Typescript props

---
 src/components/MenuItem.tsx | 60 +++++++++++++------------------------
 1 file changed, 20 insertions(+), 40 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index c53ab3c3bdb1..b5686926258a 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -187,62 +187,42 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     /** The type of brick road indicator to show. */
     brickRoadIndicator?: typeof CONST.BRICK_ROAD_INDICATOR_STATUS[keyof typeof CONST.BRICK_ROAD_INDICATOR_STATUS];
 
-    // ------------------------------- VALID PROPS ABOVE
-    
-    /** The function that should be called when this component is LongPressed or right-clicked. */
-    onSecondaryInteraction: () => void;
-
-    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
-    shouldBlockSelection: boolean;
+    /** Should render the content in HTML format */
+    shouldRenderAsHTML?: boolean;
 
-    /** Text to display under the main item */
-    furtherDetails: string;
+    /** Should we grey out the menu item when it is disabled? */
+    shouldGreyOutWhenDisabled?: boolean;
 
     /** The action accept for anonymous user or not */
-    isAnonymousAction: boolean;
+    isAnonymousAction?: boolean;
 
-    /** Should we grey out the menu item when it is disabled? */
-    shouldGreyOutWhenDisabled: boolean;
+    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
+    shouldBlockSelection?: boolean;
 
-    /** Should render the content in HTML format */
-    shouldRenderAsHTML: boolean;
-
-    /** Array of objects that map display names to their corresponding tooltip */
-    titleWithTooltips: ReactNode[];
+    shouldParseTitle?: false;
 
     /** Should check anonymous user in onPress function */
-    shouldCheckActionAllowedOnPress: boolean;
-};
+    shouldCheckActionAllowedOnPress?: boolean;
 
-// TODO: Destructure props
-// TODO: Adjust default values
-// TODO: Adjust () => void in AvatarProps - always just used () => void without checking the usage
-
-const defaultProps = {
-    shouldParseTitle: false,
-    descriptionTextStyle: styles.breakWord,
-    shouldBlockSelection: false,
-    furtherDetails: '',
-    isAnonymousAction: false,
-    numberOfLinesTitle: 1,
-    shouldGreyOutWhenDisabled: true,
-    shouldRenderAsHTML: false,
-    titleWithTooltips: [],
-    shouldCheckActionAllowedOnPress: true,
-};
+    /** Text to display under the main item */
+    furtherDetails?: string;
+    
+    /** The function that should be called when this component is LongPressed or right-clicked. */
+    onSecondaryInteraction: () => void;
 
+    /** Array of objects that map display names to their corresponding tooltip */
+    titleWithTooltips: ReactNode[];
+};
 function MenuItem({
     interactive = true, onPress, badgeText, style = styles.popoverMenuItem, wrapperStyle, titleStyle, hoverAndPressStyle,
     icon, iconFill, secondaryIcon, secondaryIconFill, iconType = CONST.ICON_TYPE_ICON, iconWidth, iconHeight, iconStyles, fallbackIcon = Expensicons.FallbackAvatar, shouldShowTitleIcon = false, titleIcon,
-    shouldShowRightIcon = false, iconRight = Expensicons.ArrowRight, furtherDetailsIcon,
+    shouldShowRightIcon = false, iconRight = Expensicons.ArrowRight, furtherDetailsIcon, furtherDetails,
     description, error, success = false, focused = false, disabled = false,
     title, subtitle, shouldShowBasicTitle, label, shouldShowSelectedState = false, isSelected = false, shouldStackHorizontally = false,
     shouldShowDescriptionOnTop = false, shouldShowRightComponent = false, rightComponent,
     floatRightAvatars = [], floatRightAvatarSize, avatarSize = CONST.AVATAR_SIZE.DEFAULT, isSmallAvatarSubscriptMenu = false,
-    brickRoadIndicator,
-    // Props not validated below - Validate if required and default value
-    onSecondaryInteraction,shouldBlockSelection,furtherDetails,isAnonymousAction,shouldGreyOutWhenDisabled,shouldRenderAsHTML,titleWithTooltips,
-        shouldCheckActionAllowedOnPress
+    brickRoadIndicator, shouldRenderAsHTML = false, shouldGreyOutWhenDisabled = true, isAnonymousAction = false,
+    shouldBlockSelection = false, shouldParseTitle = false, shouldCheckActionAllowedOnPress = true, onSecondaryInteraction, titleWithTooltips
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');

From bab1de41b8e579d609142d2364659c70c831fcd0 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 20 Nov 2023 18:37:47 +0200
Subject: [PATCH 032/244] Move logic in a separate unit

---
 src/libs/ModifiedExpenseMessage.ts            | 276 ++++++++++++++++++
 .../LocalNotification/BrowserNotifications.js |   3 +-
 src/libs/OptionsListUtils.js                  |   3 +-
 src/libs/ReportUtils.js                       | 264 -----------------
 .../report/ContextMenu/ContextMenuActions.js  |   3 +-
 src/pages/home/report/ReportActionItem.js     |   3 +-
 6 files changed, 284 insertions(+), 268 deletions(-)
 create mode 100644 src/libs/ModifiedExpenseMessage.ts

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
new file mode 100644
index 000000000000..d323edcd38f8
--- /dev/null
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -0,0 +1,276 @@
+import {format} from 'date-fns';
+import lodashGet from 'lodash/get';
+import * as Localize from './Localize';
+import * as PolicyUtils from './PolicyUtils';
+import Onyx from 'react-native-onyx';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import * as ReportUtils from './ReportUtils';
+import * as CurrencyUtils from './CurrencyUtils';
+import _ from 'underscore';
+
+let allPolicyTags = {};
+
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            allPolicyTags = {};
+            return;
+        }
+
+        allPolicyTags = value;
+    },
+});
+
+function getPolicyTags(policyID: string) {
+    return lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
+}
+
+
+/**
+ * Get the proper message schema for a modified field on the expense.
+ *
+ * @param {String} newValue
+ * @param {String} oldValue
+ * @param {String} valueName
+ * @param {Boolean} valueInQuotes
+ * @param {Boolean} shouldConvertToLowercase
+ * @returns {String}
+ */
+
+function getProperSchemaForModifiedExpenseMessage(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true) {
+    const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
+    const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
+    const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
+
+    if (!oldValue) {
+        return Localize.translateLocal('iou.setTheRequest', {valueName: displayValueName, newValueToDisplay});
+    }
+    if (!newValue) {
+        return Localize.translateLocal('iou.removedTheRequest', {valueName: displayValueName, oldValueToDisplay});
+    }
+    return Localize.translateLocal('iou.updatedTheRequest', {valueName: displayValueName, newValueToDisplay, oldValueToDisplay});
+}
+
+/**
+ * Get the proper message line for a modified expense.
+ *
+ * @param {String} newValue
+ * @param {String} oldValue
+ * @param {String} valueName
+ * @param {Boolean} valueInQuotes
+ * @returns {String}
+ */
+
+function getProperLineForModifiedExpenseMessage(prefix: string, messageFragments: Array<string>) {
+    if (messageFragments.length === 0) {
+        return '';
+    }
+    return messageFragments.reduce((acc, value, index) => {
+        if (index === messageFragments.length - 1) {
+            if (messageFragments.length === 1) {
+                return `${acc} ${value}.`;
+            }
+            if (messageFragments.length === 2) {
+                return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+            }
+            return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+        }
+        if (index === 0) {
+            return `${acc} ${value}`;
+        }
+        return `${acc}, ${value}`;
+    }, prefix);
+}
+
+/**
+ * Get the proper message schema for modified distance message.
+ *
+ * @param {String} newDistance
+ * @param {String} oldDistance
+ * @param {String} newAmount
+ * @param {String} oldAmount
+ * @returns {String}
+ */
+
+function getProperSchemaForModifiedDistanceMessage(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
+    if (!oldDistance) {
+        return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
+    }
+    return Localize.translateLocal('iou.updatedTheDistance', {
+        newDistanceToDisplay: newDistance,
+        oldDistanceToDisplay: oldDistance,
+        newAmountToDisplay: newAmount,
+        oldAmountToDisplay: oldAmount,
+    });
+}
+
+/**
+ * Get the report action message when expense has been modified.
+ *
+ * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
+ * If we change this function be sure to update the backend as well.
+ *
+ * @param {Object} reportAction
+ * @returns {String}
+ */
+function getModifiedExpenseMessage(reportAction: Object): string {
+    const reportActionOriginalMessage: any = lodashGet(reportAction, 'originalMessage', {});
+    if (_.isEmpty(reportActionOriginalMessage)) {
+        return Localize.translateLocal('iou.changedTheRequest');
+    }
+    const reportID = lodashGet(reportAction, 'reportID', '');
+    const policyID = lodashGet(ReportUtils.getReport(reportID), 'policyID', '');
+    const policyTags = getPolicyTags(policyID);
+    const policyTag = PolicyUtils.getTag(policyTags);
+    const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
+
+    const removalFragments = [];
+    const setFragments = [];
+    const changeFragments = [];
+
+    const hasModifiedAmount =
+        _.has(reportActionOriginalMessage, 'oldAmount') &&
+        _.has(reportActionOriginalMessage, 'oldCurrency') &&
+        _.has(reportActionOriginalMessage, 'amount') &&
+        _.has(reportActionOriginalMessage, 'currency');
+
+    const hasModifiedMerchant = _.has(reportActionOriginalMessage, 'oldMerchant') && _.has(reportActionOriginalMessage, 'merchant');
+    if (hasModifiedAmount) {
+        const oldCurrency = reportActionOriginalMessage.oldCurrency;
+        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.oldAmount, oldCurrency);
+
+        const currency = reportActionOriginalMessage.currency;
+        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount, currency);
+
+        // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
+        // We check the merchant is in distance format (includes @) as a sanity check
+        if (hasModifiedMerchant && reportActionOriginalMessage.merchant.includes('@')) {
+            return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
+        }
+
+        const fragment = getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
+        if (!oldAmount) {
+            setFragments.push(fragment);
+        } else if (!amount) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
+    if (hasModifiedComment) {
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.newComment,
+            reportActionOriginalMessage.oldComment,
+            Localize.translateLocal('common.description'),
+            true,
+        );
+        if (!reportActionOriginalMessage.oldComment) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.newComment) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
+    if (hasModifiedCreated) {
+        // Take only the YYYY-MM-DD value as the original date includes timestamp
+        let formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
+        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
+        if (!formattedOldCreated) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.created) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    if (hasModifiedMerchant) {
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.merchant,
+            reportActionOriginalMessage.oldMerchant,
+            Localize.translateLocal('common.merchant'),
+            true,
+        );
+        if (!reportActionOriginalMessage.oldMerchant) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.merchant) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
+    if (hasModifiedCategory) {
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.category,
+            reportActionOriginalMessage.oldCategory,
+            Localize.translateLocal('common.category'),
+            true,
+        );
+        if (!reportActionOriginalMessage.oldCategory) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.category) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
+    if (hasModifiedTag) {
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.tag,
+            reportActionOriginalMessage.oldTag,
+            policyTagListName,
+            true,
+            policyTagListName === Localize.translateLocal('common.tag'),
+        );
+        if (!reportActionOriginalMessage.oldTag) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.tag) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
+    if (hasModifiedBillable) {
+        const fragment = getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage.billable,
+            reportActionOriginalMessage.oldBillable,
+            Localize.translateLocal('iou.request'),
+            true,
+        );
+        if (!reportActionOriginalMessage.oldBillable) {
+            setFragments.push(fragment);
+        } else if (!reportActionOriginalMessage.billable) {
+            removalFragments.push(fragment);
+        } else {
+            changeFragments.push(fragment);
+        }
+    }
+
+    let message =
+        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
+        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
+        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
+    if (message === '') {
+        return message;
+    }
+    message = `${message.substring(1, message.length)}`;
+    return message;
+}
+
+export default {
+    getModifiedExpenseMessage,
+};
\ No newline at end of file
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
index 20d9be48d915..497b686e7d5e 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -4,6 +4,7 @@ import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.p
 import * as ReportUtils from '@libs/ReportUtils';
 import * as AppUpdate from '@userActions/AppUpdate';
 import focusApp from './focusApp';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 
 const DEFAULT_DELAY = 4000;
 
@@ -131,7 +132,7 @@ export default {
     pushModifiedExpenseNotification({reportAction, onClick}, usesIcon = false) {
         push({
             title: _.map(reportAction.person, (f) => f.text).join(', '),
-            body: ReportUtils.getModifiedExpenseMessage(reportAction),
+            body: ModifiedExpenseMessage.getModifiedExpenseMessage(reportAction),
             delay: 0,
             onClick,
             icon: usesIcon ? EXPENSIFY_ICON_URL : '',
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 7e0aaa8ffb2f..af0407a18112 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -20,6 +20,7 @@ import * as ReportActionUtils from './ReportActionsUtils';
 import * as ReportUtils from './ReportUtils';
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
+import ModifiedExpenseMessage from './ModifiedExpenseMessage';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
@@ -402,7 +403,7 @@ function getLastMessageTextForReport(report) {
     } else if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml, translationKey: report.lastMessageTranslationKey})) {
         lastMessageTextFromReport = `[${Localize.translateLocal(report.lastMessageTranslationKey || 'common.attachment')}]`;
     } else if (ReportActionUtils.isModifiedExpenseAction(lastReportAction)) {
-        const properSchemaForModifiedExpenseMessage = ReportUtils.getModifiedExpenseMessage(lastReportAction);
+        const properSchemaForModifiedExpenseMessage = ModifiedExpenseMessage.getModifiedExpenseMessage(lastReportAction);
         lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForModifiedExpenseMessage, true);
     } else if (
         lastActionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED ||
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 4968fc33b04b..2a3db8437518 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1,5 +1,4 @@
 /* eslint-disable rulesdir/prefer-underscore-method */
-import {format} from 'date-fns';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
@@ -81,25 +80,6 @@ Onyx.connect({
     callback: (val) => (loginList = val),
 });
 
-let allPolicyTags = {};
-
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allPolicyTags = {};
-            return;
-        }
-
-        allPolicyTags = value;
-    },
-});
-
-function getPolicyTags(policyID) {
-    return lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
-}
-
 function getChatType(report) {
     return report ? report.chatType : '';
 }
@@ -1884,249 +1864,6 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip
     return Localize.translateLocal(containsNonReimbursable ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', {payer: payerName, amount: formattedAmount});
 }
 
-/**
- * Get the proper message schema for a modified field on the expense.
- *
- * @param {String} newValue
- * @param {String} oldValue
- * @param {String} valueName
- * @param {Boolean} valueInQuotes
- * @param {Boolean} shouldConvertToLowercase
- * @returns {String}
- */
-
-function getProperSchemaForModifiedExpenseMessage(newValue, oldValue, valueName, valueInQuotes, shouldConvertToLowercase = true) {
-    const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
-    const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
-    const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
-
-    if (!oldValue) {
-        return Localize.translateLocal('iou.setTheRequest', {valueName: displayValueName, newValueToDisplay});
-    }
-    if (!newValue) {
-        return Localize.translateLocal('iou.removedTheRequest', {valueName: displayValueName, oldValueToDisplay});
-    }
-    return Localize.translateLocal('iou.updatedTheRequest', {valueName: displayValueName, newValueToDisplay, oldValueToDisplay});
-}
-
-/**
- * Get the proper message line for a modified expense.
- *
- * @param {String} newValue
- * @param {String} oldValue
- * @param {String} valueName
- * @param {Boolean} valueInQuotes
- * @returns {String}
- */
-
-function getProperLineForModifiedExpenseMessage(prefix, messageFragments) {
-    if (messageFragments.length === 0) {
-        return '';
-    }
-    return messageFragments.reduce((acc, value, index) => {
-        if (index === messageFragments.length - 1) {
-            if (messageFragments.length === 1) {
-                return `${acc} ${value}.`;
-            }
-            if (messageFragments.length === 2) {
-                return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
-            }
-            return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
-        }
-        if (index === 0) {
-            return `${acc} ${value}`;
-        }
-        return `${acc}, ${value}`;
-    }, prefix);
-}
-
-/**
- * Get the proper message schema for modified distance message.
- *
- * @param {String} newDistance
- * @param {String} oldDistance
- * @param {String} newAmount
- * @param {String} oldAmount
- * @returns {String}
- */
-
-function getProperSchemaForModifiedDistanceMessage(newDistance, oldDistance, newAmount, oldAmount) {
-    if (!oldDistance) {
-        return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
-    }
-    return Localize.translateLocal('iou.updatedTheDistance', {
-        newDistanceToDisplay: newDistance,
-        oldDistanceToDisplay: oldDistance,
-        newAmountToDisplay: newAmount,
-        oldAmountToDisplay: oldAmount,
-    });
-}
-
-/**
- * Get the report action message when expense has been modified.
- *
- * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
- * If we change this function be sure to update the backend as well.
- *
- * @param {Object} reportAction
- * @returns {String}
- */
-function getModifiedExpenseMessage(reportAction) {
-    const reportActionOriginalMessage = lodashGet(reportAction, 'originalMessage', {});
-    if (_.isEmpty(reportActionOriginalMessage)) {
-        return Localize.translateLocal('iou.changedTheRequest');
-    }
-    const reportID = lodashGet(reportAction, 'reportID', '');
-    const policyID = lodashGet(getReport(reportID), 'policyID', '');
-    const policyTags = getPolicyTags(policyID);
-    const policyTag = PolicyUtils.getTag(policyTags);
-    const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
-
-    const removalFragments = [];
-    const setFragments = [];
-    const changeFragments = [];
-
-    const hasModifiedAmount =
-        _.has(reportActionOriginalMessage, 'oldAmount') &&
-        _.has(reportActionOriginalMessage, 'oldCurrency') &&
-        _.has(reportActionOriginalMessage, 'amount') &&
-        _.has(reportActionOriginalMessage, 'currency');
-
-    const hasModifiedMerchant = _.has(reportActionOriginalMessage, 'oldMerchant') && _.has(reportActionOriginalMessage, 'merchant');
-    if (hasModifiedAmount) {
-        const oldCurrency = reportActionOriginalMessage.oldCurrency;
-        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.oldAmount, oldCurrency);
-
-        const currency = reportActionOriginalMessage.currency;
-        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount, currency);
-
-        // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
-        // We check the merchant is in distance format (includes @) as a sanity check
-        if (hasModifiedMerchant && reportActionOriginalMessage.merchant.includes('@')) {
-            return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
-        }
-
-        const fragment = getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
-        if (!oldAmount) {
-            setFragments.push(fragment);
-        } else if (!amount) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
-    if (hasModifiedComment) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.newComment,
-            reportActionOriginalMessage.oldComment,
-            Localize.translateLocal('common.description'),
-            true,
-        );
-        if (!reportActionOriginalMessage.oldComment) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.newComment) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
-    if (hasModifiedCreated) {
-        // Take only the YYYY-MM-DD value as the original date includes timestamp
-        let formattedOldCreated = new Date(reportActionOriginalMessage.oldCreated);
-        formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING);
-        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
-        if (!formattedOldCreated) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.created) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    if (hasModifiedMerchant) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.merchant,
-            reportActionOriginalMessage.oldMerchant,
-            Localize.translateLocal('common.merchant'),
-            true,
-        );
-        if (!reportActionOriginalMessage.oldMerchant) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.merchant) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
-    if (hasModifiedCategory) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.category,
-            reportActionOriginalMessage.oldCategory,
-            Localize.translateLocal('common.category'),
-            true,
-        );
-        if (!reportActionOriginalMessage.oldCategory) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.category) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
-    if (hasModifiedTag) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.tag,
-            reportActionOriginalMessage.oldTag,
-            policyTagListName,
-            true,
-            policyTagListName === Localize.translateLocal('common.tag'),
-        );
-        if (!reportActionOriginalMessage.oldTag) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.tag) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
-    if (hasModifiedBillable) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.billable,
-            reportActionOriginalMessage.oldBillable,
-            Localize.translateLocal('iou.request'),
-            true,
-        );
-        if (!reportActionOriginalMessage.oldBillable) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.billable) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
-    }
-
-    let message =
-        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
-        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
-        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
-    if (message === '') {
-        return message;
-    }
-    message = `${message.substring(1, message.length)}`;
-    return message;
-}
-
 /**
  * Given the updates user made to the request, compose the originalMessage
  * object of the modified expense action.
@@ -4514,7 +4251,6 @@ export {
     getParentReport,
     getRootParentReport,
     getReportPreviewMessage,
-    getModifiedExpenseMessage,
     canUserPerformWriteAction,
     getOriginalReportID,
     canAccessReport,
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index 4f35926c5957..0d788dbefda4 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -22,6 +22,7 @@ import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import {clearActiveReportAction, hideContextMenu, showDeleteModal} from './ReportActionContextMenu';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 
 /**
  * Gets the HTML version of the message in an action.
@@ -276,7 +277,7 @@ export default [
                     const displayMessage = ReportUtils.getReportPreviewMessage(iouReport, reportAction);
                     Clipboard.setString(displayMessage);
                 } else if (ReportActionsUtils.isModifiedExpenseAction(reportAction)) {
-                    const modifyExpenseMessage = ReportUtils.getModifiedExpenseMessage(reportAction);
+                    const modifyExpenseMessage = ModifiedExpenseMessage.getModifiedExpenseMessage(reportAction);
                     Clipboard.setString(modifyExpenseMessage);
                 } else if (ReportActionsUtils.isMoneyRequestAction(reportAction)) {
                     const displayMessage = ReportUtils.getIOUReportActionDisplayMessage(reportAction);
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 9f803f72cbbb..ed89e4c2f413 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -74,6 +74,7 @@ import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemThread from './ReportActionItemThread';
 import reportActionPropTypes from './reportActionPropTypes';
 import ReportAttachmentsContext from './ReportAttachmentsContext';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
@@ -414,7 +415,7 @@ function ReportActionItem(props) {
                 </ReportActionItemBasicMessage>
             );
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
-            children = <ReportActionItemBasicMessage message={ReportUtils.getModifiedExpenseMessage(props.action)} />;
+            children = <ReportActionItemBasicMessage message={ModifiedExpenseMessage.getModifiedExpenseMessage(props.action)} />;
         } else {
             const hasBeenFlagged = !_.contains([CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING], moderationDecision);
             children = (

From 4ea44ee4d1c1be7f8d79ee0d8388278262d5b681 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 20 Nov 2023 18:43:45 +0200
Subject: [PATCH 033/244] Move policy tags logic to PolicyUtils

---
 src/libs/ModifiedExpenseMessage.ts | 34 ++++++------------------------
 src/libs/PolicyUtils.ts            | 22 +++++++++++++++++++
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index d323edcd38f8..18767c68e010 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -2,42 +2,20 @@ import {format} from 'date-fns';
 import lodashGet from 'lodash/get';
 import * as Localize from './Localize';
 import * as PolicyUtils from './PolicyUtils';
-import Onyx from 'react-native-onyx';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import * as ReportUtils from './ReportUtils';
 import * as CurrencyUtils from './CurrencyUtils';
 import _ from 'underscore';
 
-let allPolicyTags = {};
-
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allPolicyTags = {};
-            return;
-        }
-
-        allPolicyTags = value;
-    },
-});
-
-function getPolicyTags(policyID: string) {
-    return lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
-}
-
 
 /**
  * Get the proper message schema for a modified field on the expense.
  *
- * @param {String} newValue
- * @param {String} oldValue
- * @param {String} valueName
- * @param {Boolean} valueInQuotes
- * @param {Boolean} shouldConvertToLowercase
- * @returns {String}
+ * @param newValue
+ * @param oldValue
+ * @param valueName
+ * @param valueInQuotes
+ * @param shouldConvertToLowercase
  */
 
 function getProperSchemaForModifiedExpenseMessage(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true) {
@@ -123,7 +101,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
     }
     const reportID = lodashGet(reportAction, 'reportID', '');
     const policyID = lodashGet(ReportUtils.getReport(reportID), 'policyID', '');
-    const policyTags = getPolicyTags(policyID);
+    const policyTags = PolicyUtils.getPolicyTags(policyID);
     const policyTag = PolicyUtils.getTag(policyTags);
     const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
 
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index 62640a11311a..aa33a74dedf9 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -3,11 +3,32 @@ import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {PersonalDetails, Policy, PolicyMembers, PolicyTags} from '@src/types/onyx';
+import Onyx from 'react-native-onyx';
+import lodashGet from 'lodash/get';
 
 type MemberEmailsToAccountIDs = Record<string, number>;
 type PersonalDetailsList = Record<string, PersonalDetails>;
 type UnitRate = {rate: number};
 
+let allPolicyTags = {};
+
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            allPolicyTags = {};
+            return;
+        }
+
+        allPolicyTags = value;
+    },
+});
+
+function getPolicyTags(policyID: string) {
+    return lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
+}
+
 /**
  * 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.
@@ -199,6 +220,7 @@ function isPendingDeletePolicy(policy: OnyxEntry<Policy>): boolean {
 
 export {
     getActivePolicies,
+    getPolicyTags,
     hasPolicyMemberError,
     hasPolicyError,
     hasPolicyErrorFields,

From b9229a774e6919d00cc553c2866a11d02ed1d68d Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 20 Nov 2023 22:35:25 +0200
Subject: [PATCH 034/244] Better naming

---
 src/libs/ModifiedExpenseMessage.ts            | 59 +++++++++----------
 .../LocalNotification/BrowserNotifications.js |  2 +-
 src/libs/OptionsListUtils.js                  |  2 +-
 .../report/ContextMenu/ContextMenuActions.js  |  2 +-
 src/pages/home/report/ReportActionItem.js     |  2 +-
 5 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 18767c68e010..f95c2ddfef99 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -9,7 +9,7 @@ import _ from 'underscore';
 
 
 /**
- * Get the proper message schema for a modified field on the expense.
+ * Get the partial message for a modified field on the expense.
  *
  * @param newValue
  * @param oldValue
@@ -18,7 +18,7 @@ import _ from 'underscore';
  * @param shouldConvertToLowercase
  */
 
-function getProperSchemaForModifiedExpenseMessage(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true) {
+function getPartialMessageForValue(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true) {
     const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
     const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
     const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
@@ -33,16 +33,15 @@ function getProperSchemaForModifiedExpenseMessage(newValue: string, oldValue: st
 }
 
 /**
- * Get the proper message line for a modified expense.
+ * Get the message line for a modified expense.
  *
- * @param {String} newValue
- * @param {String} oldValue
- * @param {String} valueName
- * @param {Boolean} valueInQuotes
- * @returns {String}
+ * @param newValue
+ * @param oldValue
+ * @param valueName
+ * @param valueInQuotes
  */
 
-function getProperLineForModifiedExpenseMessage(prefix: string, messageFragments: Array<string>) {
+function getMessageLine(prefix: string, messageFragments: Array<string>) {
     if (messageFragments.length === 0) {
         return '';
     }
@@ -64,16 +63,15 @@ function getProperLineForModifiedExpenseMessage(prefix: string, messageFragments
 }
 
 /**
- * Get the proper message schema for modified distance message.
+ * Get the message for a modified distance request.
  *
- * @param {String} newDistance
- * @param {String} oldDistance
- * @param {String} newAmount
- * @param {String} oldAmount
- * @returns {String}
+ * @param newDistance
+ * @param oldDistance
+ * @param newAmount
+ * @param oldAmount
  */
 
-function getProperSchemaForModifiedDistanceMessage(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
+function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
     if (!oldDistance) {
         return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
     }
@@ -91,10 +89,9 @@ function getProperSchemaForModifiedDistanceMessage(newDistance: string, oldDista
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
  *
- * @param {Object} reportAction
- * @returns {String}
+ * @param reportAction
  */
-function getModifiedExpenseMessage(reportAction: Object): string {
+function getForReportAction(reportAction: Object): string {
     const reportActionOriginalMessage: any = lodashGet(reportAction, 'originalMessage', {});
     if (_.isEmpty(reportActionOriginalMessage)) {
         return Localize.translateLocal('iou.changedTheRequest');
@@ -126,10 +123,10 @@ function getModifiedExpenseMessage(reportAction: Object): string {
         // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
         // We check the merchant is in distance format (includes @) as a sanity check
         if (hasModifiedMerchant && reportActionOriginalMessage.merchant.includes('@')) {
-            return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
+            return getForDistanceRequest(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
         }
 
-        const fragment = getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
+        const fragment = getPartialMessageForValue(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
         if (!oldAmount) {
             setFragments.push(fragment);
         } else if (!amount) {
@@ -141,7 +138,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
 
     const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
     if (hasModifiedComment) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
+        const fragment = getPartialMessageForValue(
             reportActionOriginalMessage.newComment,
             reportActionOriginalMessage.oldComment,
             Localize.translateLocal('common.description'),
@@ -160,7 +157,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
         let formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
-        const fragment = getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
+        const fragment = getPartialMessageForValue(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
         if (!formattedOldCreated) {
             setFragments.push(fragment);
         } else if (!reportActionOriginalMessage.created) {
@@ -171,7 +168,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
     }
 
     if (hasModifiedMerchant) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
+        const fragment = getPartialMessageForValue(
             reportActionOriginalMessage.merchant,
             reportActionOriginalMessage.oldMerchant,
             Localize.translateLocal('common.merchant'),
@@ -188,7 +185,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
 
     const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
     if (hasModifiedCategory) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
+        const fragment = getPartialMessageForValue(
             reportActionOriginalMessage.category,
             reportActionOriginalMessage.oldCategory,
             Localize.translateLocal('common.category'),
@@ -205,7 +202,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
 
     const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
     if (hasModifiedTag) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
+        const fragment = getPartialMessageForValue(
             reportActionOriginalMessage.tag,
             reportActionOriginalMessage.oldTag,
             policyTagListName,
@@ -223,7 +220,7 @@ function getModifiedExpenseMessage(reportAction: Object): string {
 
     const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
     if (hasModifiedBillable) {
-        const fragment = getProperSchemaForModifiedExpenseMessage(
+        const fragment = getPartialMessageForValue(
             reportActionOriginalMessage.billable,
             reportActionOriginalMessage.oldBillable,
             Localize.translateLocal('iou.request'),
@@ -239,9 +236,9 @@ function getModifiedExpenseMessage(reportAction: Object): string {
     }
 
     let message =
-        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
-        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
-        getProperLineForModifiedExpenseMessage(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
+        getMessageLine(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
+        getMessageLine(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
+        getMessageLine(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
     if (message === '') {
         return message;
     }
@@ -250,5 +247,5 @@ function getModifiedExpenseMessage(reportAction: Object): string {
 }
 
 export default {
-    getModifiedExpenseMessage,
+    getForReportAction,
 };
\ No newline at end of file
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
index 497b686e7d5e..853106adafe8 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -132,7 +132,7 @@ export default {
     pushModifiedExpenseNotification({reportAction, onClick}, usesIcon = false) {
         push({
             title: _.map(reportAction.person, (f) => f.text).join(', '),
-            body: ModifiedExpenseMessage.getModifiedExpenseMessage(reportAction),
+            body: ModifiedExpenseMessage.getForReportAction(reportAction),
             delay: 0,
             onClick,
             icon: usesIcon ? EXPENSIFY_ICON_URL : '',
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index af0407a18112..fd6031f5c901 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -403,7 +403,7 @@ function getLastMessageTextForReport(report) {
     } else if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml, translationKey: report.lastMessageTranslationKey})) {
         lastMessageTextFromReport = `[${Localize.translateLocal(report.lastMessageTranslationKey || 'common.attachment')}]`;
     } else if (ReportActionUtils.isModifiedExpenseAction(lastReportAction)) {
-        const properSchemaForModifiedExpenseMessage = ModifiedExpenseMessage.getModifiedExpenseMessage(lastReportAction);
+        const properSchemaForModifiedExpenseMessage = ModifiedExpenseMessage.getForReportAction(lastReportAction);
         lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForModifiedExpenseMessage, true);
     } else if (
         lastActionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED ||
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index 0d788dbefda4..bebb2e2688c5 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -277,7 +277,7 @@ export default [
                     const displayMessage = ReportUtils.getReportPreviewMessage(iouReport, reportAction);
                     Clipboard.setString(displayMessage);
                 } else if (ReportActionsUtils.isModifiedExpenseAction(reportAction)) {
-                    const modifyExpenseMessage = ModifiedExpenseMessage.getModifiedExpenseMessage(reportAction);
+                    const modifyExpenseMessage = ModifiedExpenseMessage.getForReportAction(reportAction);
                     Clipboard.setString(modifyExpenseMessage);
                 } else if (ReportActionsUtils.isMoneyRequestAction(reportAction)) {
                     const displayMessage = ReportUtils.getIOUReportActionDisplayMessage(reportAction);
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index ed89e4c2f413..ce4c151bf2d6 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -415,7 +415,7 @@ function ReportActionItem(props) {
                 </ReportActionItemBasicMessage>
             );
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
-            children = <ReportActionItemBasicMessage message={ModifiedExpenseMessage.getModifiedExpenseMessage(props.action)} />;
+            children = <ReportActionItemBasicMessage message={ModifiedExpenseMessage.getForReportAction(props.action)} />;
         } else {
             const hasBeenFlagged = !_.contains([CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING], moderationDecision);
             children = (

From 72714adfc3730fd32f9e2d551b0ad9ed8016de8b Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 20 Nov 2023 22:44:31 +0200
Subject: [PATCH 035/244] Dry up code.

---
 src/libs/ModifiedExpenseMessage.ts | 103 ++++++++++-------------------
 1 file changed, 34 insertions(+), 69 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index f95c2ddfef99..d3f0b07cbcb8 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -9,7 +9,7 @@ import _ from 'underscore';
 
 
 /**
- * Get the partial message for a modified field on the expense.
+ * Builds the partial message fragment for a modified field on the expense.
  *
  * @param newValue
  * @param oldValue
@@ -18,18 +18,30 @@ import _ from 'underscore';
  * @param shouldConvertToLowercase
  */
 
-function getPartialMessageForValue(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true) {
+function buildMessageFragmentForValue(
+    newValue: string, 
+    oldValue: string, 
+    valueName: string, 
+    valueInQuotes: boolean, 
+    setFragments: Array<string>,
+    removalFragments: Array<string>,
+    changeFragments: Array<string>,
+    shouldConvertToLowercase = true
+) {
     const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
     const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
     const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
 
     if (!oldValue) {
-        return Localize.translateLocal('iou.setTheRequest', {valueName: displayValueName, newValueToDisplay});
+        const fragment = Localize.translateLocal('iou.setTheRequest', {valueName: displayValueName, newValueToDisplay});
+        setFragments.push(fragment);
+    } else if (!newValue) {
+        const fragment = Localize.translateLocal('iou.removedTheRequest', {valueName: displayValueName, oldValueToDisplay});
+        removalFragments.push(fragment);
+    } else {
+        const fragment = Localize.translateLocal('iou.updatedTheRequest', {valueName: displayValueName, newValueToDisplay, oldValueToDisplay});
+        changeFragments.push(fragment);
     }
-    if (!newValue) {
-        return Localize.translateLocal('iou.removedTheRequest', {valueName: displayValueName, oldValueToDisplay});
-    }
-    return Localize.translateLocal('iou.updatedTheRequest', {valueName: displayValueName, newValueToDisplay, oldValueToDisplay});
 }
 
 /**
@@ -102,9 +114,9 @@ function getForReportAction(reportAction: Object): string {
     const policyTag = PolicyUtils.getTag(policyTags);
     const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
 
-    const removalFragments = [];
-    const setFragments = [];
-    const changeFragments = [];
+    const removalFragments: Array<string> = [];
+    const setFragments: Array<string> = [];
+    const changeFragments: Array<string> = [];
 
     const hasModifiedAmount =
         _.has(reportActionOriginalMessage, 'oldAmount') &&
@@ -126,113 +138,66 @@ function getForReportAction(reportAction: Object): string {
             return getForDistanceRequest(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
         }
 
-        const fragment = getPartialMessageForValue(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
-        if (!oldAmount) {
-            setFragments.push(fragment);
-        } else if (!amount) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
+        buildMessageFragmentForValue(amount, oldAmount, Localize.translateLocal('iou.amount'), false, setFragments, removalFragments, changeFragments);
     }
 
     const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
     if (hasModifiedComment) {
-        const fragment = getPartialMessageForValue(
+        buildMessageFragmentForValue(
             reportActionOriginalMessage.newComment,
             reportActionOriginalMessage.oldComment,
             Localize.translateLocal('common.description'),
-            true,
+            true, setFragments, removalFragments, changeFragments
         );
-        if (!reportActionOriginalMessage.oldComment) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.newComment) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
     }
 
     const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
         let formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
-        const fragment = getPartialMessageForValue(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
-        if (!formattedOldCreated) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.created) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
+        buildMessageFragmentForValue(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false, setFragments, removalFragments, changeFragments);
     }
 
     if (hasModifiedMerchant) {
-        const fragment = getPartialMessageForValue(
+        buildMessageFragmentForValue(
             reportActionOriginalMessage.merchant,
             reportActionOriginalMessage.oldMerchant,
             Localize.translateLocal('common.merchant'),
             true,
+            setFragments, removalFragments, changeFragments
         );
-        if (!reportActionOriginalMessage.oldMerchant) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.merchant) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
     }
 
     const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
     if (hasModifiedCategory) {
-        const fragment = getPartialMessageForValue(
+        buildMessageFragmentForValue(
             reportActionOriginalMessage.category,
             reportActionOriginalMessage.oldCategory,
             Localize.translateLocal('common.category'),
-            true,
+            true, setFragments, removalFragments, changeFragments
         );
-        if (!reportActionOriginalMessage.oldCategory) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.category) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
     }
 
     const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
     if (hasModifiedTag) {
-        const fragment = getPartialMessageForValue(
+        buildMessageFragmentForValue(
             reportActionOriginalMessage.tag,
             reportActionOriginalMessage.oldTag,
             policyTagListName,
             true,
+            setFragments, removalFragments, changeFragments,
             policyTagListName === Localize.translateLocal('common.tag'),
         );
-        if (!reportActionOriginalMessage.oldTag) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.tag) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
     }
 
     const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
     if (hasModifiedBillable) {
-        const fragment = getPartialMessageForValue(
+        buildMessageFragmentForValue(
             reportActionOriginalMessage.billable,
             reportActionOriginalMessage.oldBillable,
             Localize.translateLocal('iou.request'),
-            true,
+            true, setFragments, removalFragments, changeFragments
         );
-        if (!reportActionOriginalMessage.oldBillable) {
-            setFragments.push(fragment);
-        } else if (!reportActionOriginalMessage.billable) {
-            removalFragments.push(fragment);
-        } else {
-            changeFragments.push(fragment);
-        }
     }
 
     let message =

From 18d1bf0fb300c9eac3c69ec8ff4e72d8097a0f77 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 20 Nov 2023 22:50:10 +0200
Subject: [PATCH 036/244] Run prettier

---
 src/libs/ModifiedExpenseMessage.ts            | 66 ++++++++++++-------
 .../LocalNotification/BrowserNotifications.js |  2 +-
 src/libs/OptionsListUtils.js                  |  2 +-
 src/libs/PolicyUtils.ts                       |  4 +-
 .../report/ContextMenu/ContextMenuActions.js  |  2 +-
 src/pages/home/report/ReportActionItem.js     |  2 +-
 6 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index d3f0b07cbcb8..d0ebce1275b5 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -1,12 +1,11 @@
 import {format} from 'date-fns';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import CONST from '@src/CONST';
+import * as CurrencyUtils from './CurrencyUtils';
 import * as Localize from './Localize';
 import * as PolicyUtils from './PolicyUtils';
-import CONST from '@src/CONST';
 import * as ReportUtils from './ReportUtils';
-import * as CurrencyUtils from './CurrencyUtils';
-import _ from 'underscore';
-
 
 /**
  * Builds the partial message fragment for a modified field on the expense.
@@ -19,14 +18,14 @@ import _ from 'underscore';
  */
 
 function buildMessageFragmentForValue(
-    newValue: string, 
-    oldValue: string, 
-    valueName: string, 
-    valueInQuotes: boolean, 
-    setFragments: Array<string>,
-    removalFragments: Array<string>,
-    changeFragments: Array<string>,
-    shouldConvertToLowercase = true
+    newValue: string,
+    oldValue: string,
+    valueName: string,
+    valueInQuotes: boolean,
+    setFragments: string[],
+    removalFragments: string[],
+    changeFragments: string[],
+    shouldConvertToLowercase = true,
 ) {
     const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
     const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
@@ -53,7 +52,7 @@ function buildMessageFragmentForValue(
  * @param valueInQuotes
  */
 
-function getMessageLine(prefix: string, messageFragments: Array<string>) {
+function getMessageLine(prefix: string, messageFragments: string[]) {
     if (messageFragments.length === 0) {
         return '';
     }
@@ -114,9 +113,9 @@ function getForReportAction(reportAction: Object): string {
     const policyTag = PolicyUtils.getTag(policyTags);
     const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
 
-    const removalFragments: Array<string> = [];
-    const setFragments: Array<string> = [];
-    const changeFragments: Array<string> = [];
+    const removalFragments: string[] = [];
+    const setFragments: string[] = [];
+    const changeFragments: string[] = [];
 
     const hasModifiedAmount =
         _.has(reportActionOriginalMessage, 'oldAmount') &&
@@ -147,7 +146,10 @@ function getForReportAction(reportAction: Object): string {
             reportActionOriginalMessage.newComment,
             reportActionOriginalMessage.oldComment,
             Localize.translateLocal('common.description'),
-            true, setFragments, removalFragments, changeFragments
+            true,
+            setFragments,
+            removalFragments,
+            changeFragments,
         );
     }
 
@@ -155,7 +157,15 @@ function getForReportAction(reportAction: Object): string {
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
         let formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
-        buildMessageFragmentForValue(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false, setFragments, removalFragments, changeFragments);
+        buildMessageFragmentForValue(
+            reportActionOriginalMessage.created,
+            formattedOldCreated,
+            Localize.translateLocal('common.date'),
+            false,
+            setFragments,
+            removalFragments,
+            changeFragments,
+        );
     }
 
     if (hasModifiedMerchant) {
@@ -164,7 +174,9 @@ function getForReportAction(reportAction: Object): string {
             reportActionOriginalMessage.oldMerchant,
             Localize.translateLocal('common.merchant'),
             true,
-            setFragments, removalFragments, changeFragments
+            setFragments,
+            removalFragments,
+            changeFragments,
         );
     }
 
@@ -174,7 +186,10 @@ function getForReportAction(reportAction: Object): string {
             reportActionOriginalMessage.category,
             reportActionOriginalMessage.oldCategory,
             Localize.translateLocal('common.category'),
-            true, setFragments, removalFragments, changeFragments
+            true,
+            setFragments,
+            removalFragments,
+            changeFragments,
         );
     }
 
@@ -185,7 +200,9 @@ function getForReportAction(reportAction: Object): string {
             reportActionOriginalMessage.oldTag,
             policyTagListName,
             true,
-            setFragments, removalFragments, changeFragments,
+            setFragments,
+            removalFragments,
+            changeFragments,
             policyTagListName === Localize.translateLocal('common.tag'),
         );
     }
@@ -196,7 +213,10 @@ function getForReportAction(reportAction: Object): string {
             reportActionOriginalMessage.billable,
             reportActionOriginalMessage.oldBillable,
             Localize.translateLocal('iou.request'),
-            true, setFragments, removalFragments, changeFragments
+            true,
+            setFragments,
+            removalFragments,
+            changeFragments,
         );
     }
 
@@ -213,4 +233,4 @@ function getForReportAction(reportAction: Object): string {
 
 export default {
     getForReportAction,
-};
\ No newline at end of file
+};
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
index 853106adafe8..4c990a87878c 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -1,10 +1,10 @@
 // Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
 import _ from 'underscore';
 import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as AppUpdate from '@userActions/AppUpdate';
 import focusApp from './focusApp';
-import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 
 const DEFAULT_DELAY = 4000;
 
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index fd6031f5c901..9f0780c6a909 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -13,6 +13,7 @@ import * as ErrorUtils from './ErrorUtils';
 import * as LocalePhoneNumber from './LocalePhoneNumber';
 import * as Localize from './Localize';
 import * as LoginUtils from './LoginUtils';
+import ModifiedExpenseMessage from './ModifiedExpenseMessage';
 import Navigation from './Navigation/Navigation';
 import Permissions from './Permissions';
 import * as PersonalDetailsUtils from './PersonalDetailsUtils';
@@ -20,7 +21,6 @@ import * as ReportActionUtils from './ReportActionsUtils';
 import * as ReportUtils from './ReportUtils';
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
-import ModifiedExpenseMessage from './ModifiedExpenseMessage';
 
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index aa33a74dedf9..ead8d20f838e 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -1,10 +1,10 @@
 import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
 import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import Onyx from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {PersonalDetails, Policy, PolicyMembers, PolicyTags} from '@src/types/onyx';
-import Onyx from 'react-native-onyx';
-import lodashGet from 'lodash/get';
 
 type MemberEmailsToAccountIDs = Record<string, number>;
 type PersonalDetailsList = Record<string, PersonalDetails>;
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index bebb2e2688c5..8be004cbe6a5 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -10,6 +10,7 @@ import Clipboard from '@libs/Clipboard';
 import * as Environment from '@libs/Environment/Environment';
 import fileDownload from '@libs/fileDownload';
 import getAttachmentDetails from '@libs/fileDownload/getAttachmentDetails';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import Navigation from '@libs/Navigation/Navigation';
 import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
@@ -22,7 +23,6 @@ import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import {clearActiveReportAction, hideContextMenu, showDeleteModal} from './ReportActionContextMenu';
-import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 
 /**
  * Gets the HTML version of the message in an action.
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index ce4c151bf2d6..6ae2241093e4 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -36,6 +36,7 @@ import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import focusTextInputAfterAnimation from '@libs/focusTextInputAfterAnimation';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import Navigation from '@libs/Navigation/Navigation';
 import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
@@ -74,7 +75,6 @@ import ReportActionItemSingle from './ReportActionItemSingle';
 import ReportActionItemThread from './ReportActionItemThread';
 import reportActionPropTypes from './reportActionPropTypes';
 import ReportAttachmentsContext from './ReportAttachmentsContext';
-import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 
 const propTypes = {
     ...windowDimensionsPropTypes,

From 5444abd6030d0c45df9a3ff0a4c88b432f234ecf Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Tue, 21 Nov 2023 01:33:08 +0200
Subject: [PATCH 037/244] Fix lint errors

---
 ...seMessage.ts => ModifiedExpenseMessage.js} | 64 +++++++++----------
 src/libs/PolicyUtils.ts                       | 13 ++--
 2 files changed, 34 insertions(+), 43 deletions(-)
 rename src/libs/{ModifiedExpenseMessage.ts => ModifiedExpenseMessage.js} (82%)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.js
similarity index 82%
rename from src/libs/ModifiedExpenseMessage.ts
rename to src/libs/ModifiedExpenseMessage.js
index d0ebce1275b5..5428413efb96 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.js
@@ -17,16 +17,7 @@ import * as ReportUtils from './ReportUtils';
  * @param shouldConvertToLowercase
  */
 
-function buildMessageFragmentForValue(
-    newValue: string,
-    oldValue: string,
-    valueName: string,
-    valueInQuotes: boolean,
-    setFragments: string[],
-    removalFragments: string[],
-    changeFragments: string[],
-    shouldConvertToLowercase = true,
-) {
+function buildMessageFragmentForValue(newValue, oldValue, valueName, valueInQuotes, setFragments, removalFragments, changeFragments, shouldConvertToLowercase = true) {
     const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
     const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
     const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
@@ -52,25 +43,29 @@ function buildMessageFragmentForValue(
  * @param valueInQuotes
  */
 
-function getMessageLine(prefix: string, messageFragments: string[]) {
+function getMessageLine(prefix, messageFragments) {
     if (messageFragments.length === 0) {
         return '';
     }
-    return messageFragments.reduce((acc, value, index) => {
-        if (index === messageFragments.length - 1) {
-            if (messageFragments.length === 1) {
-                return `${acc} ${value}.`;
+    return _.reduce(
+        messageFragments,
+        (acc, value, index) => {
+            if (index === messageFragments.length - 1) {
+                if (messageFragments.length === 1) {
+                    return `${acc} ${value}.`;
+                }
+                if (messageFragments.length === 2) {
+                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+                }
+                return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
             }
-            if (messageFragments.length === 2) {
-                return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
+            if (index === 0) {
+                return `${acc} ${value}`;
             }
-            return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
-        }
-        if (index === 0) {
-            return `${acc} ${value}`;
-        }
-        return `${acc}, ${value}`;
-    }, prefix);
+            return `${acc}, ${value}`;
+        },
+        prefix,
+    );
 }
 
 /**
@@ -80,9 +75,10 @@ function getMessageLine(prefix: string, messageFragments: string[]) {
  * @param oldDistance
  * @param newAmount
  * @param oldAmount
+ * @returns {String}
  */
 
-function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
+function getForDistanceRequest(newDistance, oldDistance, newAmount, oldAmount) {
     if (!oldDistance) {
         return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
     }
@@ -100,22 +96,22 @@ function getForDistanceRequest(newDistance: string, oldDistance: string, newAmou
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
  *
- * @param reportAction
+ * @param {Object} reportAction
+ * @returns {String}
  */
-function getForReportAction(reportAction: Object): string {
-    const reportActionOriginalMessage: any = lodashGet(reportAction, 'originalMessage', {});
+function getForReportAction(reportAction) {
+    const reportActionOriginalMessage = lodashGet(reportAction, 'originalMessage', {});
     if (_.isEmpty(reportActionOriginalMessage)) {
         return Localize.translateLocal('iou.changedTheRequest');
     }
     const reportID = lodashGet(reportAction, 'reportID', '');
     const policyID = lodashGet(ReportUtils.getReport(reportID), 'policyID', '');
     const policyTags = PolicyUtils.getPolicyTags(policyID);
-    const policyTag = PolicyUtils.getTag(policyTags);
-    const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
+    const policyTagListName = PolicyUtils.getTagListName(policyTags) || Localize.translateLocal('common.tag');
 
-    const removalFragments: string[] = [];
-    const setFragments: string[] = [];
-    const changeFragments: string[] = [];
+    const removalFragments = [];
+    const setFragments = [];
+    const changeFragments = [];
 
     const hasModifiedAmount =
         _.has(reportActionOriginalMessage, 'oldAmount') &&
@@ -156,7 +152,7 @@ function getForReportAction(reportAction: Object): string {
     const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
-        let formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
+        const formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
         buildMessageFragmentForValue(
             reportActionOriginalMessage.created,
             formattedOldCreated,
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index ead8d20f838e..ee1243cc573d 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -1,7 +1,5 @@
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
-import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import Onyx from 'react-native-onyx';
+import Onyx, {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {PersonalDetails, Policy, PolicyMembers, PolicyTags} from '@src/types/onyx';
@@ -10,23 +8,20 @@ type MemberEmailsToAccountIDs = Record<string, number>;
 type PersonalDetailsList = Record<string, PersonalDetails>;
 type UnitRate = {rate: number};
 
-let allPolicyTags = {};
-
+let allPolicyTags: OnyxCollection<PolicyTags> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
     waitForCollectionCallback: true,
     callback: (value) => {
         if (!value) {
-            allPolicyTags = {};
             return;
         }
-
-        allPolicyTags = value;
+        allPolicyTags = Object.fromEntries(Object.entries(value).filter(([, policyTags]) => !!policyTags));
     },
 });
 
 function getPolicyTags(policyID: string) {
-    return lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
+    return allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
 }
 
 /**

From 371f138602ffb8f5ce4fb72d3d060bd46738e6ec Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Tue, 21 Nov 2023 02:04:39 +0200
Subject: [PATCH 038/244] Make it a ts file.

---
 src/libs/{ModifiedExpenseMessage.js => ModifiedExpenseMessage.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/libs/{ModifiedExpenseMessage.js => ModifiedExpenseMessage.ts} (100%)

diff --git a/src/libs/ModifiedExpenseMessage.js b/src/libs/ModifiedExpenseMessage.ts
similarity index 100%
rename from src/libs/ModifiedExpenseMessage.js
rename to src/libs/ModifiedExpenseMessage.ts

From ceaa9156cf5b12284654b0c790509e9ee0423933 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Tue, 21 Nov 2023 02:49:30 +0200
Subject: [PATCH 039/244] Migrate to TS

---
 src/libs/ModifiedExpenseMessage.ts | 120 ++++++++++++++---------------
 src/types/onyx/OriginalMessage.ts  |  21 ++++-
 2 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 5428413efb96..6ac50cc2984a 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -1,7 +1,7 @@
 import {format} from 'date-fns';
 import lodashGet from 'lodash/get';
-import _ from 'underscore';
 import CONST from '@src/CONST';
+import {ReportAction} from '@src/types/onyx';
 import * as CurrencyUtils from './CurrencyUtils';
 import * as Localize from './Localize';
 import * as PolicyUtils from './PolicyUtils';
@@ -17,7 +17,16 @@ import * as ReportUtils from './ReportUtils';
  * @param shouldConvertToLowercase
  */
 
-function buildMessageFragmentForValue(newValue, oldValue, valueName, valueInQuotes, setFragments, removalFragments, changeFragments, shouldConvertToLowercase = true) {
+function buildMessageFragmentForValue(
+    newValue: string,
+    oldValue: string,
+    valueName: string,
+    valueInQuotes: boolean,
+    setFragments: string[],
+    removalFragments: string[],
+    changeFragments: string[],
+    shouldConvertToLowercase = true,
+) {
     const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
     const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
     const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
@@ -43,29 +52,25 @@ function buildMessageFragmentForValue(newValue, oldValue, valueName, valueInQuot
  * @param valueInQuotes
  */
 
-function getMessageLine(prefix, messageFragments) {
+function getMessageLine(prefix: string, messageFragments: string[]) {
     if (messageFragments.length === 0) {
         return '';
     }
-    return _.reduce(
-        messageFragments,
-        (acc, value, index) => {
-            if (index === messageFragments.length - 1) {
-                if (messageFragments.length === 1) {
-                    return `${acc} ${value}.`;
-                }
-                if (messageFragments.length === 2) {
-                    return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
-                }
-                return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+    return messageFragments.reduce((acc, value, index) => {
+        if (index === messageFragments.length - 1) {
+            if (messageFragments.length === 1) {
+                return `${acc} ${value}.`;
             }
-            if (index === 0) {
-                return `${acc} ${value}`;
+            if (messageFragments.length === 2) {
+                return `${acc} ${Localize.translateLocal('common.and')} ${value}.`;
             }
-            return `${acc}, ${value}`;
-        },
-        prefix,
-    );
+            return `${acc}, ${Localize.translateLocal('common.and')} ${value}.`;
+        }
+        if (index === 0) {
+            return `${acc} ${value}`;
+        }
+        return `${acc}, ${value}`;
+    }, prefix);
 }
 
 /**
@@ -78,7 +83,7 @@ function getMessageLine(prefix, messageFragments) {
  * @returns {String}
  */
 
-function getForDistanceRequest(newDistance, oldDistance, newAmount, oldAmount) {
+function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
     if (!oldDistance) {
         return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
     }
@@ -96,51 +101,46 @@ function getForDistanceRequest(newDistance, oldDistance, newAmount, oldAmount) {
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
  *
- * @param {Object} reportAction
- * @returns {String}
+ * @param reportAction
  */
-function getForReportAction(reportAction) {
-    const reportActionOriginalMessage = lodashGet(reportAction, 'originalMessage', {});
-    if (_.isEmpty(reportActionOriginalMessage)) {
-        return Localize.translateLocal('iou.changedTheRequest');
+function getForReportAction(reportAction: ReportAction) {
+    if (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
+        return '';
     }
+    const reportActionOriginalMessage = reportAction.originalMessage;
     const reportID = lodashGet(reportAction, 'reportID', '');
     const policyID = lodashGet(ReportUtils.getReport(reportID), 'policyID', '');
     const policyTags = PolicyUtils.getPolicyTags(policyID);
     const policyTagListName = PolicyUtils.getTagListName(policyTags) || Localize.translateLocal('common.tag');
 
-    const removalFragments = [];
-    const setFragments = [];
-    const changeFragments = [];
+    const removalFragments: string[] = [];
+    const setFragments: string[] = [];
+    const changeFragments: string[] = [];
 
-    const hasModifiedAmount =
-        _.has(reportActionOriginalMessage, 'oldAmount') &&
-        _.has(reportActionOriginalMessage, 'oldCurrency') &&
-        _.has(reportActionOriginalMessage, 'amount') &&
-        _.has(reportActionOriginalMessage, 'currency');
+    const hasModifiedAmount = reportActionOriginalMessage.oldAmount && reportActionOriginalMessage.oldCurrency && reportActionOriginalMessage.amount && reportActionOriginalMessage.currency;
 
-    const hasModifiedMerchant = _.has(reportActionOriginalMessage, 'oldMerchant') && _.has(reportActionOriginalMessage, 'merchant');
+    const hasModifiedMerchant = reportActionOriginalMessage.oldMerchant && reportActionOriginalMessage.merchant;
     if (hasModifiedAmount) {
-        const oldCurrency = reportActionOriginalMessage.oldCurrency;
-        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.oldAmount, oldCurrency);
+        const oldCurrency = reportActionOriginalMessage.oldCurrency ?? '';
+        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.oldAmount ?? 0, oldCurrency);
 
-        const currency = reportActionOriginalMessage.currency;
-        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount, currency);
+        const currency = reportActionOriginalMessage.currency ?? '';
+        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount ?? 0, currency);
 
         // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
         // We check the merchant is in distance format (includes @) as a sanity check
-        if (hasModifiedMerchant && reportActionOriginalMessage.merchant.includes('@')) {
-            return getForDistanceRequest(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
+        if (hasModifiedMerchant && (reportActionOriginalMessage.merchant ?? '').includes('@')) {
+            return getForDistanceRequest(reportActionOriginalMessage.merchant ?? '', reportActionOriginalMessage.oldMerchant ?? '', amount, oldAmount);
         }
 
         buildMessageFragmentForValue(amount, oldAmount, Localize.translateLocal('iou.amount'), false, setFragments, removalFragments, changeFragments);
     }
 
-    const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
+    const hasModifiedComment = reportActionOriginalMessage.oldComment && reportActionOriginalMessage.newComment;
     if (hasModifiedComment) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.newComment,
-            reportActionOriginalMessage.oldComment,
+            reportActionOriginalMessage.newComment ?? '',
+            reportActionOriginalMessage.oldComment ?? '',
             Localize.translateLocal('common.description'),
             true,
             setFragments,
@@ -149,12 +149,12 @@ function getForReportAction(reportAction) {
         );
     }
 
-    const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
+    const hasModifiedCreated = reportActionOriginalMessage.oldCreated && reportActionOriginalMessage.created;
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
-        const formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated), CONST.DATE.FNS_FORMAT_STRING);
+        const formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated ?? ''), CONST.DATE.FNS_FORMAT_STRING);
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.created,
+            reportActionOriginalMessage.created ?? '',
             formattedOldCreated,
             Localize.translateLocal('common.date'),
             false,
@@ -166,8 +166,8 @@ function getForReportAction(reportAction) {
 
     if (hasModifiedMerchant) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.merchant,
-            reportActionOriginalMessage.oldMerchant,
+            reportActionOriginalMessage.merchant ?? '',
+            reportActionOriginalMessage.oldMerchant ?? '',
             Localize.translateLocal('common.merchant'),
             true,
             setFragments,
@@ -176,11 +176,11 @@ function getForReportAction(reportAction) {
         );
     }
 
-    const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
+    const hasModifiedCategory = reportActionOriginalMessage.oldCategory && reportActionOriginalMessage.category;
     if (hasModifiedCategory) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.category,
-            reportActionOriginalMessage.oldCategory,
+            reportActionOriginalMessage.category ?? '',
+            reportActionOriginalMessage.oldCategory ?? '',
             Localize.translateLocal('common.category'),
             true,
             setFragments,
@@ -189,11 +189,11 @@ function getForReportAction(reportAction) {
         );
     }
 
-    const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
+    const hasModifiedTag = reportActionOriginalMessage.oldTag && reportActionOriginalMessage.tag;
     if (hasModifiedTag) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.tag,
-            reportActionOriginalMessage.oldTag,
+            reportActionOriginalMessage.tag ?? '',
+            reportActionOriginalMessage.oldTag ?? '',
             policyTagListName,
             true,
             setFragments,
@@ -203,11 +203,11 @@ function getForReportAction(reportAction) {
         );
     }
 
-    const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
+    const hasModifiedBillable = reportActionOriginalMessage.oldBillable && reportActionOriginalMessage.billable;
     if (hasModifiedBillable) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.billable,
-            reportActionOriginalMessage.oldBillable,
+            reportActionOriginalMessage.billable ?? '',
+            reportActionOriginalMessage.oldBillable ?? '',
             Localize.translateLocal('iou.request'),
             true,
             setFragments,
@@ -221,7 +221,7 @@ function getForReportAction(reportAction) {
         getMessageLine(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
         getMessageLine(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
     if (message === '') {
-        return message;
+        return Localize.translateLocal('iou.changedTheRequest');
     }
     message = `${message.substring(1, message.length)}`;
     return message;
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index b5e4b25a6508..c8ee5d5771de 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -171,7 +171,24 @@ type OriginalMessagePolicyTask = {
 
 type OriginalMessageModifiedExpense = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE;
-    originalMessage: unknown;
+    originalMessage: {
+        oldMerchant?: string;
+        merchant?: string;
+        oldCurrency?: string;
+        currency?: string;
+        oldAmount?: number;
+        amount?: number;
+        oldComment?: string;
+        newComment?: string;
+        oldCreated?: string;
+        created?: string;
+        oldCategory?: string;
+        category?: string;
+        oldTag?: string;
+        tag?: string;
+        oldBillable?: string;
+        billable?: string;
+    };
 };
 
 type OriginalMessageReimbursementQueued = {
@@ -196,4 +213,4 @@ type OriginalMessage =
     | OriginalMessageReimbursementQueued;
 
 export default OriginalMessage;
-export type {ChronosOOOEvent, Decision, Reaction, ActionName};
+export type {ChronosOOOEvent, Decision, Reaction, ActionName, OriginalMessageModifiedExpense};

From 3bec4fd1f562b596cbb6f327f77aee3a210e8ab6 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Tue, 21 Nov 2023 03:42:23 +0200
Subject: [PATCH 040/244] Make Lint happy.

---
 src/libs/ModifiedExpenseMessage.ts |  5 +----
 src/libs/ReportUtils.js            | 11 +++++++++++
 src/types/onyx/OriginalMessage.ts  |  2 +-
 src/types/onyx/ReportAction.ts     |  1 +
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 6ac50cc2984a..44259180f4eb 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -1,5 +1,4 @@
 import {format} from 'date-fns';
-import lodashGet from 'lodash/get';
 import CONST from '@src/CONST';
 import {ReportAction} from '@src/types/onyx';
 import * as CurrencyUtils from './CurrencyUtils';
@@ -80,7 +79,6 @@ function getMessageLine(prefix: string, messageFragments: string[]) {
  * @param oldDistance
  * @param newAmount
  * @param oldAmount
- * @returns {String}
  */
 
 function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
@@ -108,8 +106,7 @@ function getForReportAction(reportAction: ReportAction) {
         return '';
     }
     const reportActionOriginalMessage = reportAction.originalMessage;
-    const reportID = lodashGet(reportAction, 'reportID', '');
-    const policyID = lodashGet(ReportUtils.getReport(reportID), 'policyID', '');
+    const policyID = ReportUtils.getReportPolicyID(reportAction.reportID ?? '');
     const policyTags = PolicyUtils.getPolicyTags(policyID);
     const policyTagListName = PolicyUtils.getTagListName(policyTags) || Localize.translateLocal('common.tag');
 
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 2a3db8437518..248df849ca52 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -823,6 +823,16 @@ function getReport(reportID) {
     return lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {}) || {};
 }
 
+/**
+ * Get the report policyID given a reportID
+ *
+ * @param {String} reportID
+ * @returns {String}
+ */
+function getReportPolicyID(reportID) {
+    return getReport(reportID).policyID || '';
+}
+
 /**
  * Get the notification preference given a report
  *
@@ -4173,6 +4183,7 @@ export {
     getDisplayNamesWithTooltips,
     getDisplayNamesStringFromTooltips,
     getReportName,
+    getReportPolicyID,
     getReport,
     getReportNotificationPreference,
     getReportIDFromLink,
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index c8ee5d5771de..5e1bdfb7cf81 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -213,4 +213,4 @@ type OriginalMessage =
     | OriginalMessageReimbursementQueued;
 
 export default OriginalMessage;
-export type {ChronosOOOEvent, Decision, Reaction, ActionName, OriginalMessageModifiedExpense};
+export type {ChronosOOOEvent, Decision, Reaction, ActionName};
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index 2195c4e3ff0b..e67c075e54f1 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -90,6 +90,7 @@ type ReportActionBase = {
     avatar?: string;
     automatic?: boolean;
     shouldShow?: boolean;
+    reportID?: string;
     childReportID?: string;
     childReportName?: string;
     childType?: string;

From 8802892701b70a68208bb0c54e67f42f9e6ef1c8 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 21 Nov 2023 10:25:11 +0100
Subject: [PATCH 041/244] Get rid of too many union types

---
 src/components/MenuItem.tsx | 67 ++++++++++++-------------------------
 1 file changed, 21 insertions(+), 46 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index d9b8489ca7d3..12f9aa36c913 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -44,50 +44,7 @@ type UnresponsiveProps = {
     interactive: false;
 }
 
-type TitleIconProps = {
-    /** Boolean whether to display the title right icon */
-    shouldShowTitleIcon: true;
-
-    /** Icon to display at right side of title */
-    titleIcon: IconType;
-}
-
-type NoTitleIconProps = {
-    shouldShowTitleIcon?: false;
-    
-    titleIcon?: undefined;
-}
-
-type RightIconProps = {
-    /** Boolean whether to display the right icon */
-    shouldShowRightIcon: true;
-
-    /** Overrides the icon for shouldShowRightIcon */
-    iconRight: IconType;
-}
-
-type NoRightIconProps = {
-    shouldShowRightIcon?: false;
-
-    iconRight?: IconType;
-}
-
-type RightComponent = {
-    /** Should render component on the right */
-    shouldShowRightComponent: true;
-
-    /** Component to be displayed on the right */
-    rightComponent: ReactNode;
-}
-
-type NoRightComponent = {
-    shouldShowRightComponent?: false;
-
-    rightComponent?: undefined;
-}
-
-type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | NoTitleIconProps) &
-(RightIconProps | NoRightIconProps) & (RightComponent | NoRightComponent) & {
+type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Text to be shown as badge near the right end. */
     badgeText?: string;
  
@@ -133,6 +90,24 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & (TitleIconProps | N
     /** An icon to display under the main item */
     furtherDetailsIcon?: IconType;
 
+    /** Boolean whether to display the title right icon */
+    shouldShowTitleIcon?: boolean;
+
+    /** Icon to display at right side of title */
+    titleIcon?: IconType;
+
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon?: boolean;
+
+    /** Overrides the icon for shouldShowRightIcon */
+    iconRight?: IconType;
+
+    /** Should render component on the right */
+    shouldShowRightComponent?: boolean;
+
+    /** Component to be displayed on the right */
+    rightComponent?: ReactNode;
+
     /** A description text to show under the title */
     description?: string;
 
@@ -278,7 +253,7 @@ function MenuItem({
         return title ? `<comment>${title}</comment>` : '';
     }, [title, shouldRenderAsHTML, shouldParseTitle, html]);
 
-    const hasPressableRightComponent = iconRight || (rightComponent && shouldShowRightComponent);
+    const hasPressableRightComponent = iconRight || (shouldShowRightComponent && rightComponent);
 
     const renderTitleContent = () => {
         if (titleWithTooltips && Array.isArray(titleWithTooltips) && titleWithTooltips.length > 0) {
@@ -427,7 +402,7 @@ function MenuItem({
                                                     {renderTitleContent()}
                                                 </Text>
                                             )}
-                                            {Boolean(shouldShowTitleIcon) && (
+                                            {Boolean(shouldShowTitleIcon) && Boolean(titleIcon) && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon
                                                         src={titleIcon}

From f74f3c34779a794f3b51d0e993525220994f79cd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 21 Nov 2023 13:00:13 +0100
Subject: [PATCH 042/244] Typing

---
 src/components/Badge.tsx             |  2 +-
 src/components/DisplayNames/types.ts |  6 +-
 src/components/Icon/index.tsx        |  4 ++
 src/components/MenuItem.tsx          | 98 +++++++++++++++-------------
 4 files changed, 63 insertions(+), 47 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 22c056dfdfc4..575646f7dd9c 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -29,7 +29,7 @@ type BadgeProps = {
     textStyles?: StyleProp<TextStyle>;
 
     /** Callback to be called on onPress */
-    onPress: (event?: GestureResponderEvent | KeyboardEvent) => void;
+    onPress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
 };
 
 function Badge({success = false, error = false, pressable = false, text, environment = CONST.ENVIRONMENT.DEV, badgeStyles, textStyles, onPress = () => {}}: BadgeProps) {
diff --git a/src/components/DisplayNames/types.ts b/src/components/DisplayNames/types.ts
index 94e4fc7c39c6..1dcaf3e1f9c1 100644
--- a/src/components/DisplayNames/types.ts
+++ b/src/components/DisplayNames/types.ts
@@ -29,7 +29,7 @@ type DisplayNamesProps = {
     tooltipEnabled?: boolean;
 
     /** Arbitrary styles of the displayName text */
-    textStyles: StyleProp<TextStyle>;
+    textStyles?: StyleProp<TextStyle>;
 
     /**
      * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
@@ -42,3 +42,7 @@ type DisplayNamesProps = {
 };
 
 export default DisplayNamesProps;
+
+export type {
+    DisplayNameWithTooltip
+}
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 022c740907ea..4b8f27ad1358 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -100,3 +100,7 @@ class Icon extends PureComponent<IconProps> {
 }
 
 export default Icon;
+
+export type {
+    SrcProps
+}
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 12f9aa36c913..6516056c3906 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,7 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import React, {FC, ForwardedRef, ReactNode, forwardRef, useEffect, useMemo} from 'react';
-import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
-import _ from 'underscore';
+import React, {FC, ForwardedRef, ReactNode, forwardRef, useEffect, useMemo, useRef, useState} from 'react';
+import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
@@ -21,7 +20,7 @@ import Avatar from './Avatar';
 import Badge from './Badge';
 import DisplayNames from './DisplayNames';
 import Hoverable from './Hoverable';
-import Icon from './Icon';
+import Icon, { SrcProps } from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
 import MultipleAvatars from './MultipleAvatars';
@@ -29,6 +28,7 @@ import PressableWithSecondaryInteraction from './PressableWithSecondaryInteracti
 import RenderHTML from './RenderHTML';
 import SelectCircle from './SelectCircle';
 import Text from './Text';
+import { DisplayNameWithTooltip } from './DisplayNames/types';
 
 type ResponsiveProps = {
     /** Function to fire when component is pressed */
@@ -60,14 +60,16 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Any adjustments to style when menu item is hovered or pressed */
     hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
 
+    descriptionTextStyle?: StyleProp<ViewStyle>;
+
     /** Icon to display on the left side of component */
     icon?: ReactNode | string | AvatarType;
-
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
     /** The fill color to pass into the icon. */
     iconFill?: string;
 
     /** Secondary icon to display on the left side of component, right of the icon */
-    secondaryIcon?: ReactNode;
+    secondaryIcon?: (props: SrcProps) => React.ReactNode;
 
     /** The fill color to pass into the secondary icon. */
     secondaryIconFill?: string;
@@ -157,7 +159,11 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     floatRightAvatars?: AvatarType[];
 
     /** Prop to represent the size of the float right avatar images to be shown */
-    floatRightAvatarSize?: typeof CONST.AVATAR_SIZE;    
+    floatRightAvatarSize?: typeof CONST.AVATAR_SIZE[keyof typeof CONST.AVATAR_SIZE];
+
+    viewMode?: typeof CONST.OPTION_MODE[keyof typeof CONST.OPTION_MODE];
+
+    numberOfLinesTitle?: number;
 
     /**  Whether we should use small avatar subscript sizing the for menu item */
     isSmallAvatarSubscriptMenu?: boolean;
@@ -189,10 +195,12 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     onSecondaryInteraction: () => void;
 
     /** Array of objects that map display names to their corresponding tooltip */
-    titleWithTooltips: ReactNode[];
+    titleWithTooltips: DisplayNameWithTooltip[];
 };
+
 function MenuItem({
     interactive = true, onPress, badgeText, style = styles.popoverMenuItem, wrapperStyle, titleStyle, hoverAndPressStyle,
+    descriptionTextStyle = styles.breakWord, viewMode = CONST.OPTION_MODE.DEFAULT, numberOfLinesTitle = 1,
     icon, iconFill, secondaryIcon, secondaryIconFill, iconType = CONST.ICON_TYPE_ICON, iconWidth, iconHeight, iconStyles, fallbackIcon = Expensicons.FallbackAvatar, shouldShowTitleIcon = false, titleIcon,
     shouldShowRightIcon = false, iconRight = Expensicons.ArrowRight, furtherDetailsIcon, furtherDetails,
     description, error, success = false, focused = false, disabled = false,
@@ -203,34 +211,32 @@ function MenuItem({
     shouldBlockSelection = false, shouldParseTitle = false, shouldCheckActionAllowedOnPress = true, onSecondaryInteraction, titleWithTooltips
 }: MenuItemProps, ref: ForwardedRef<View>) {
     const {isSmallScreenWidth} = useWindowDimensions();
-    const [html, setHtml] = React.useState('');
+    const [html, setHtml] = useState('');
+    const titleRef = useRef('');
 
-    const isDeleted = _.contains(style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
+    const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
     const titleTextStyle = StyleUtils.combineStyles(
         [
             styles.flexShrink1,
             styles.popoverMenuText,
-            icon && !_.isArray(icon) && (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
+            icon && !Array.isArray(icon) && (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
             shouldShowBasicTitle ? undefined : styles.textStrong,
             numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
             interactive && disabled ? {...styles.userSelectNone} : undefined,
             styles.ltr,
-            isDeleted ? styles.offlineFeedback.deleted : undefined,
+            styles.offlineFeedback.deleted
         ],
         titleStyle,
     );
-    const descriptionTextStyle = StyleUtils.combineStyles([
+    const descriptionTextStyles = StyleUtils.combineStyles([
         styles.textLabelSupporting,
-        icon && !_.isArray(icon) ? styles.ml3 : undefined,
+        icon && !Array.isArray(icon) && styles.ml3,
         title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
         descriptionTextStyle,
-        isDeleted ? styles.offlineFeedback.deleted : undefined,
+        styles.offlineFeedback.deleted
     ]);
 
-    const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
-
-    const titleRef = React.useRef('');
     useEffect(() => {
         if (!title || (titleRef.current.length && titleRef.current === title) || !shouldParseTitle) {
             return;
@@ -241,22 +247,22 @@ function MenuItem({
     }, [title, shouldParseTitle]);
 
     const getProcessedTitle = useMemo(() => {
-        let title = '';
+        let processedTitle = '';
         if (shouldRenderAsHTML) {
-            title = convertToLTR(title);
+            processedTitle = title ? convertToLTR(title) : '';
         }
 
         if (shouldParseTitle) {
-            title = html;
+            processedTitle = html;
         }
 
-        return title ? `<comment>${title}</comment>` : '';
+        return processedTitle ? `<comment>${processedTitle}</comment>` : '';
     }, [title, shouldRenderAsHTML, shouldParseTitle, html]);
 
     const hasPressableRightComponent = iconRight || (shouldShowRightComponent && rightComponent);
 
     const renderTitleContent = () => {
-        if (titleWithTooltips && Array.isArray(titleWithTooltips) && titleWithTooltips.length > 0) {
+        if (title && titleWithTooltips && Array.isArray(titleWithTooltips) && titleWithTooltips.length > 0) {
             return (
                 <DisplayNames
                     fullTitle={title}
@@ -279,7 +285,9 @@ function MenuItem({
             (event.currentTarget as HTMLElement).blur();
         }
 
-        onPress(event);
+        if (onPress) {
+            onPress(event);
+        }
     };
 
     return (
@@ -290,12 +298,12 @@ function MenuItem({
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}
-                    style={({pressed}) => [
+                    style={({pressed}: { pressed: PressableStateCallbackType }) => [
                         style,
                         !interactive && styles.cursorDefault,
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
+                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true),
                         (isHovered || pressed) && hoverAndPressStyle,
-                        ...(_.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
+                        ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
                     ]}
                     disabled={disabled}
@@ -308,16 +316,16 @@ function MenuItem({
                             <View style={[styles.flexColumn, styles.flex1]}>
                                 {Boolean(label) && (
                                     <View style={icon ? styles.mb2 : null}>
-                                        <Text style={StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre)}>
+                                        <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre])}>
                                             {label}
                                         </Text>
                                     </View>
                                 )}
                                 <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && styles.cursorDisabled]}>
-                                    {Boolean(icon) && _.isArray(icon) && (
+                                    {Boolean(icon) && Array.isArray(icon) && (
                                         <MultipleAvatars
                                             isHovered={isHovered}
-                                            isPressed={pressed}
+                                            isPressed={Boolean(pressed)}
                                             icons={icon}
                                             size={avatarSize}
                                             secondAvatarStyle={[
@@ -327,19 +335,19 @@ function MenuItem({
                                             ]}
                                         />
                                     )}
-                                    {Boolean(icon) && !_.isArray(icon) && (
+                                    {Boolean(icon) && !Array.isArray(icon) && (
                                         <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
                                             {iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
                                                     hovered={isHovered}
-                                                    pressed={pressed}
+                                                    pressed={Boolean(pressed)}
                                                     src={icon}
                                                     width={iconWidth}
                                                     height={iconHeight}
                                                     fill={
-                                                        iconFill ||
+                                                        iconFill ??
                                                         StyleUtils.getIconFillColor(
-                                                            getButtonState(focused || isHovered, pressed, success, disabled, interactive),
+                                                            getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive),
                                                             true,
                                                         )
                                                     }
@@ -365,15 +373,15 @@ function MenuItem({
                                             )}
                                         </View>
                                     )}
-                                    {Boolean(secondaryIcon) && (
+                                    {secondaryIcon && (
                                         <View style={[styles.popoverMenuIcon, iconStyles]}>
                                             <Icon
                                                 src={secondaryIcon}
                                                 width={iconWidth}
                                                 height={iconHeight}
                                                 fill={
-                                                    secondaryIconFill ||
-                                                    StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true)
+                                                    secondaryIconFill ??
+                                                    StyleUtils.getIconFillColor(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true)
                                                 }
                                             />
                                         </View>
@@ -381,7 +389,7 @@ function MenuItem({
                                     <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
                                         {Boolean(description) && shouldShowDescriptionOnTop && (
                                             <Text
-                                                style={descriptionTextStyle}
+                                                style={descriptionTextStyles}
                                                 numberOfLines={2}
                                             >
                                                 {description}
@@ -413,7 +421,7 @@ function MenuItem({
                                         </View>
                                         {Boolean(description) && !shouldShowDescriptionOnTop && (
                                             <Text
-                                                style={descriptionTextStyle}
+                                                style={descriptionTextStyles}
                                                 numberOfLines={2}
                                             >
                                                 {description}
@@ -444,7 +452,7 @@ function MenuItem({
                                 </View>
                             </View>
                             <View style={[styles.flexRow, styles.menuItemTextContainer, !hasPressableRightComponent && styles.pointerEventsNone]}>
-                                {Boolean(badgeText) && (
+                                {badgeText && (
                                     <Badge
                                         text={badgeText}
                                         badgeStyles={[
@@ -455,18 +463,18 @@ function MenuItem({
                                     />
                                 )}
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
-                                {(subtitle || subtitle === 0) && (
+                                {(subtitle ?? subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, style]}>{subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, style as TextStyle]}>{subtitle}</Text>
                                     </View>
                                 )}
                                 {!_.isEmpty(floatRightAvatars) && (
                                     <View style={[styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : undefined]}>
                                         <MultipleAvatars
                                             isHovered={isHovered}
-                                            isPressed={pressed}
+                                            isPressed={Boolean(pressed)}
                                             icons={floatRightAvatars}
-                                            size={floatRightAvatarSize || fallbackAvatarSize}
+                                            size={floatRightAvatarSize ?? fallbackAvatarSize}
                                             fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
                                             shouldStackHorizontally={shouldStackHorizontally}
                                         />
@@ -489,7 +497,7 @@ function MenuItem({
                                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, disabled && styles.cursorDisabled]}>
                                         <Icon
                                             src={iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive))}
+                                            fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive))}
                                         />
                                     </View>
                                 )}

From 800d2b1ab29eb344244d3ce325eca31f7c59305a Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Wed, 22 Nov 2023 23:02:57 +0000
Subject: [PATCH 043/244] fix(expensify card page): not found state showing up
 and disappearing immediately

---
 .../settings/Wallet/ExpensifyCardPage.js      | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index e92fca171817..beee9d63d984 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -87,7 +87,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    cardList: {},
+    cardList: null,
     draftValues: {
         addressLine1: '',
         addressLine2: '',
@@ -127,17 +127,21 @@ function ExpensifyCardPage({
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const domainCards = CardUtils.getDomainCards(cardList)[domain];
-    const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
-    const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
+    const domainCards = useMemo(() => cardList && CardUtils.getDomainCards(cardList)[domain], [cardList, domain]);
+    const virtualCard = useMemo(() => (domainCards && _.find(domainCards, (card) => card.isVirtual)) || {}, [domainCards]);
+    const physicalCard = useMemo(() => (domainCards && _.find(domainCards, (card) => !card.isVirtual)) || {}, [domainCards]);
 
     const [isLoading, setIsLoading] = useState(false);
+    const [isNotFound, setIsNotFound] = useState(false);
     const [details, setDetails] = useState({});
     const [cardDetailsError, setCardDetailsError] = useState('');
 
-    if (_.isEmpty(virtualCard) && _.isEmpty(physicalCard)) {
-        return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;
-    }
+    useEffect(() => {
+        if (!cardList) {
+            return;
+        }
+        setIsNotFound(_.isEmpty(virtualCard) && _.isEmpty(physicalCard));
+    }, [cardList, physicalCard, virtualCard]);
 
     const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(physicalCard.availableSpend || virtualCard.availableSpend || 0);
 
@@ -166,6 +170,10 @@ function ExpensifyCardPage({
     const hasDetectedIndividualFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL);
     const cardDetailsErrorObject = cardDetailsError ? {error: cardDetailsError} : {};
 
+    if (isNotFound) {
+        return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;
+    }
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}

From bf79989fc5994f0b83015f677e8e8ba8cb93bd3b Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Thu, 23 Nov 2023 12:19:13 +0000
Subject: [PATCH 044/244] fix(get physical card): weird back button behaviour

---
 src/libs/GetPhysicalCardUtils.ts | 2 +-
 src/libs/Navigation/linkTo.js    | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/libs/GetPhysicalCardUtils.ts b/src/libs/GetPhysicalCardUtils.ts
index 57a9d773cc9d..80391108e377 100644
--- a/src/libs/GetPhysicalCardUtils.ts
+++ b/src/libs/GetPhysicalCardUtils.ts
@@ -82,7 +82,7 @@ function setCurrentRoute(currentRoute: string, domain: string, privatePersonalDe
     }
 
     // Redirect the user if he's not allowed to be on the current step
-    Navigation.navigate(expectedRoute, CONST.NAVIGATION.ACTION_TYPE.REPLACE);
+    Navigation.goBack(expectedRoute);
 }
 
 /**
diff --git a/src/libs/Navigation/linkTo.js b/src/libs/Navigation/linkTo.js
index ca87a0d7b79c..db8b0493272c 100644
--- a/src/libs/Navigation/linkTo.js
+++ b/src/libs/Navigation/linkTo.js
@@ -89,11 +89,6 @@ export default function linkTo(navigation, path, type, isActiveRoute) {
             if (!isActiveRoute && type === CONST.NAVIGATION.ACTION_TYPE.PUSH) {
                 minimalAction.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;
             }
-            // There are situations when the user is trying to access a route which he has no access to
-            // So we want to redirect him to the right one and replace the one he tried to access
-            if (type === CONST.NAVIGATION.ACTION_TYPE.REPLACE) {
-                minimalAction.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;
-            }
             root.dispatch(minimalAction);
             return;
         }

From 8d14ca8003d9bf58639f57e7071fc0a31bacba39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Mon, 27 Nov 2023 23:02:00 +0100
Subject: [PATCH 045/244] refactor theme to functional way

---
 src/pages/SearchPage.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 0fdd54da74f9..05405fce3cec 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -8,7 +8,7 @@ import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
+import useThemeStyles from "@styles/useThemeStyles";
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
@@ -34,7 +34,6 @@ const propTypes = {
 
     /** Whether we are searching for reports in the server */
     isSearchingForReports: PropTypes.bool,
-    ...withThemeStylesPropTypes,
 };
 
 const defaultProps = {
@@ -63,6 +62,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
 
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
+    const themeStyles = useThemeStyles();
     const isMounted = useRef(false);
 
     const updateOptions = useCallback(() => {
@@ -177,7 +177,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
                     <HeaderWithBackButton title={translate('common.search')} />
-                    <View style={[props.themeStyles.flex1, props.themeStyles.w100, props.themeStyles.pRelative]}>
+                    <View style={[themeStyles.flex1, themeStyles.w100, themeStyles.pRelative]}>
                         <OptionsSelector
                             sections={getSections()}
                             value={searchValue}
@@ -219,4 +219,3 @@ export default withOnyx({
         initWithStoredValues: false,
     },
 })(SearchPage);
-//withThemeStyles

From 82a0275f45083737f74288c95d40a4d791c7e218 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 24 Nov 2023 17:03:55 +0100
Subject: [PATCH 046/244] add FormProvider in page

---
 src/pages/workspace/WorkspaceInviteMessagePage.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 85dd65377dcf..739f7bf3695a 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -27,6 +27,8 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {policyDefaultProps, policyPropTypes} from './withPolicy';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 
 const personalDetailsPropTypes = PropTypes.shape({
     /** The accountID of the person */
@@ -178,7 +180,7 @@ class WorkspaceInviteMessagePage extends React.Component {
                         onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(this.props.route.params.policyID))}
                     />
 
-                    <Form
+                    <FormProvider
                         style={[this.props.themeStyles.flexGrow1, this.props.themeStyles.ph5]}
                         formID={ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}
                         validate={this.validate}
@@ -216,7 +218,8 @@ class WorkspaceInviteMessagePage extends React.Component {
                             <Text>{this.props.translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
                         </View>
                         <View style={[this.props.themeStyles.mb3]}>
-                            <TextInput
+                            <InputWrapper
+                                InputComponent={TextInput}
                                 ref={(el) => (this.welcomeMessageInputRef = el)}
                                 role={CONST.ACCESSIBILITY_ROLE.TEXT}
                                 inputID="welcomeMessage"
@@ -233,7 +236,7 @@ class WorkspaceInviteMessagePage extends React.Component {
                                 shouldSaveDraft
                             />
                         </View>
-                    </Form>
+                    </FormProvider>
                 </FullPageNotFoundView>
             </ScreenWrapper>
         );

From 4f479e2f4116b114f79c1a3c82d1073d1c509c70 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 24 Nov 2023 17:04:30 +0100
Subject: [PATCH 047/244] fix prettier

---
 src/pages/workspace/WorkspaceInviteMessagePage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 739f7bf3695a..273bcba6e6c2 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -6,6 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MultipleAvatars from '@components/MultipleAvatars';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -27,8 +29,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {policyDefaultProps, policyPropTypes} from './withPolicy';
 import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
 
 const personalDetailsPropTypes = PropTypes.shape({
     /** The accountID of the person */

From 148798661d3f72556e3134583245ba8d951e6965 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 24 Nov 2023 17:05:17 +0100
Subject: [PATCH 048/244] remove unused imports

---
 src/pages/workspace/WorkspaceInviteMessagePage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 273bcba6e6c2..825c130eeaac 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -5,7 +5,6 @@ import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';

From ee5369e3e423eb813835ad84c001cb18ebec6bbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Tue, 28 Nov 2023 21:30:59 +0100
Subject: [PATCH 049/244] prettier

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

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 05405fce3cec..b0eb45876520 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -8,11 +8,11 @@ import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from "@styles/useThemeStyles";
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
 import * as ReportUtils from '@libs/ReportUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';

From b350c6b9fcfde9eb5aa68cea5ba0d881bce6ec7c Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 00:36:24 +0200
Subject: [PATCH 050/244] Update src/libs/ModifiedExpenseMessage.ts

Co-authored-by: Tim Golen <tgolen@gmail.com>
---
 src/libs/ModifiedExpenseMessage.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 44259180f4eb..544ced26cc28 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -72,15 +72,6 @@ function getMessageLine(prefix: string, messageFragments: string[]) {
     }, prefix);
 }
 
-/**
- * Get the message for a modified distance request.
- *
- * @param newDistance
- * @param oldDistance
- * @param newAmount
- * @param oldAmount
- */
-
 function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
     if (!oldDistance) {
         return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});

From 03931a24e14d0746eada51c63a4a3f630fff5c75 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 00:36:33 +0200
Subject: [PATCH 051/244] Update src/libs/ModifiedExpenseMessage.ts

Co-authored-by: Tim Golen <tgolen@gmail.com>
---
 src/libs/ModifiedExpenseMessage.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 544ced26cc28..e82c037cf632 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -89,8 +89,6 @@ function getForDistanceRequest(newDistance: string, oldDistance: string, newAmou
  *
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
- *
- * @param reportAction
  */
 function getForReportAction(reportAction: ReportAction) {
     if (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {

From 4e9a118da27b1233123d9c5552925d5f71475b5f Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 00:36:41 +0200
Subject: [PATCH 052/244] Update src/libs/ModifiedExpenseMessage.ts

Co-authored-by: Tim Golen <tgolen@gmail.com>
---
 src/libs/ModifiedExpenseMessage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index e82c037cf632..8e7b27b55ce4 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -90,7 +90,7 @@ function getForDistanceRequest(newDistance: string, oldDistance: string, newAmou
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
  */
-function getForReportAction(reportAction: ReportAction) {
+function getForReportAction(reportAction: ReportAction): string {
     if (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
         return '';
     }

From ad9ba61167e344cf3123b763d2a6c72c3b40d7dc Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 29 Nov 2023 13:35:45 +0700
Subject: [PATCH 053/244] fix: room name in invite message does not show link

---
 src/libs/ReportUtils.ts                       |  9 +++++--
 .../report/ContextMenu/ContextMenuActions.js  | 24 ++++++++++++-------
 src/types/onyx/OriginalMessage.ts             |  1 +
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index d93661778b83..8ea82d91e0bf 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -23,6 +23,7 @@ import DeepValueOf from '@src/types/utils/DeepValueOf';
 import {EmptyObject, isEmptyObject, isNotEmptyObject} from '@src/types/utils/EmptyObject';
 import * as CurrencyUtils from './CurrencyUtils';
 import DateUtils from './DateUtils';
+import * as Environment from './Environment/Environment';
 import isReportMessageAttachment from './isReportMessageAttachment';
 import * as LocalePhoneNumber from './LocalePhoneNumber';
 import * as Localize from './Localize';
@@ -346,6 +347,9 @@ type OnyxDataTaskAssigneeChat = {
     optimisticChatCreatedReportAction?: OptimisticCreatedReportAction;
 };
 
+let environmentURL: string;
+Environment.getEnvironmentURL().then((url: string) => (environmentURL = url));
+
 let currentUserEmail: string | undefined;
 let currentUserAccountID: number | undefined;
 let isAnonymousUser = false;
@@ -4164,13 +4168,14 @@ function getChannelLogMemberMessage(reportAction: OnyxEntry<ReportAction>): stri
         message = `${verb} ${mentions?.join(', ')}, and ${lastMention}`;
     }
 
+    const reportID = (reportAction?.originalMessage as ChangeLog)?.reportID ?? 0;
     const roomName = (reportAction?.originalMessage as ChangeLog)?.roomName ?? '';
-    if (roomName) {
+    if (reportID && roomName) {
         const preposition =
             reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
                 ? ' to'
                 : ' from';
-        message += `${preposition} ${roomName}`;
+        message += `${preposition} <a href=\"${environmentURL}/r/${reportID}\" target=\"_blank\">${roomName}</a>`;
     }
 
     return message;
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index 4f35926c5957..973971c60f72 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -23,6 +23,20 @@ import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import {clearActiveReportAction, hideContextMenu, showDeleteModal} from './ReportActionContextMenu';
 
+/**
+ * Sets the HTML string to Clipboard.
+ * @param {String} content
+ */
+function setClipboardHtmlMessage(content) {
+    const parser = new ExpensiMark();
+    if (!Clipboard.canSetHtml()) {
+        Clipboard.setString(parser.htmlToMarkdown(content));
+    } else {
+        const plainText = parser.htmlToText(content);
+        Clipboard.setHtml(content, plainText);
+    }
+}
+
 /**
  * Gets the HTML version of the message in an action.
  * @param {Object} reportAction
@@ -283,15 +297,9 @@ export default [
                     Clipboard.setString(displayMessage);
                 } else if (ReportActionsUtils.isChannelLogMemberAction(reportAction)) {
                     const logMessage = ReportUtils.getChannelLogMemberMessage(reportAction);
-                    Clipboard.setString(logMessage);
+                    setClipboardHtmlMessage(logMessage);
                 } else if (content) {
-                    const parser = new ExpensiMark();
-                    if (!Clipboard.canSetHtml()) {
-                        Clipboard.setString(parser.htmlToMarkdown(content));
-                    } else {
-                        const plainText = parser.htmlToText(content);
-                        Clipboard.setHtml(content, plainText);
-                    }
+                    setClipboardHtmlMessage(content);
                 }
             }
 
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index 0dc532ebeded..b00dee0df96a 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -140,6 +140,7 @@ type ChronosOOOTimestamp = {
 type ChangeLog = {
     targetAccountIDs?: number[];
     roomName?: string;
+    reportID?: number;
 };
 
 type ChronosOOOEvent = {

From ebcd66fd9fe5ccb98c384281342e2e162bf29b20 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 29 Nov 2023 13:50:25 +0700
Subject: [PATCH 054/244] remove redundat escape charaters

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

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 8ea82d91e0bf..728cf44d7d9f 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -4175,7 +4175,7 @@ function getChannelLogMemberMessage(reportAction: OnyxEntry<ReportAction>): stri
             reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
                 ? ' to'
                 : ' from';
-        message += `${preposition} <a href=\"${environmentURL}/r/${reportID}\" target=\"_blank\">${roomName}</a>`;
+        message += `${preposition} <a href="${environmentURL}/r/${reportID}" target="_blank">${roomName}</a>`;
     }
 
     return message;

From fd0a9a9eb6325ba8e0643b3d250217831244d336 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 29 Nov 2023 13:57:06 +0700
Subject: [PATCH 055/244] fix: mention in copied invite message shown as hidden

---
 src/libs/ReportUtils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 728cf44d7d9f..49af0c71c8fb 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -4151,8 +4151,8 @@ function getChannelLogMemberMessage(reportAction: OnyxEntry<ReportAction>): stri
             ? 'invited'
             : 'removed';
 
-    const mentions = (reportAction?.originalMessage as ChangeLog)?.targetAccountIDs?.map(() => {
-        const personalDetail = allPersonalDetails?.accountID;
+    const mentions = (reportAction?.originalMessage as ChangeLog)?.targetAccountIDs?.map((accountID) => {
+        const personalDetail = allPersonalDetails?.[accountID];
         const displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? '') || (personalDetail?.displayName ?? '') || Localize.translateLocal('common.hidden');
         return `@${displayNameOrLogin}`;
     });

From 41f8a94198a6eb74f4662e1edd4f17b6fe46c88f Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 17:26:37 +0200
Subject: [PATCH 056/244] Resolve conflicts after merge.

---
 src/libs/ReportUtils.ts        | 143 ++-------------------------------
 src/types/onyx/ReportAction.ts |   1 -
 2 files changed, 8 insertions(+), 136 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index d93661778b83..da00bc1c5c18 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1953,140 +1953,6 @@ function getReportPreviewMessage(
     return Localize.translateLocal(containsNonReimbursable ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', {payer: payerName ?? '', amount: formattedAmount});
 }
 
-/**
- * Get the proper message schema for modified expense message.
- */
-
-function getProperSchemaForModifiedExpenseMessage(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true): string {
-    const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
-    const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
-    const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
-
-    if (!oldValue) {
-        return Localize.translateLocal('iou.setTheRequest', {valueName: displayValueName, newValueToDisplay});
-    }
-    if (!newValue) {
-        return Localize.translateLocal('iou.removedTheRequest', {valueName: displayValueName, oldValueToDisplay});
-    }
-    return Localize.translateLocal('iou.updatedTheRequest', {valueName: displayValueName, newValueToDisplay, oldValueToDisplay});
-}
-
-/**
- * Get the proper message schema for modified distance message.
- */
-function getProperSchemaForModifiedDistanceMessage(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string): string {
-    if (!oldDistance) {
-        return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
-    }
-    return Localize.translateLocal('iou.updatedTheDistance', {
-        newDistanceToDisplay: newDistance,
-        oldDistanceToDisplay: oldDistance,
-        newAmountToDisplay: newAmount,
-        oldAmountToDisplay: oldAmount,
-    });
-}
-
-/**
- * Get the report action message when expense has been modified.
- *
- * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
- * If we change this function be sure to update the backend as well.
- */
-function getModifiedExpenseMessage(reportAction: OnyxEntry<ReportAction>): string | undefined {
-    const reportActionOriginalMessage = reportAction?.originalMessage as ExpenseOriginalMessage | undefined;
-    if (isEmptyObject(reportActionOriginalMessage)) {
-        return Localize.translateLocal('iou.changedTheRequest');
-    }
-    const reportID = reportAction?.reportID ?? '';
-    const policyID = getReport(reportID)?.policyID ?? '';
-    const policyTags = getPolicyTags(policyID);
-    const policyTag = PolicyUtils.getTag(policyTags);
-    const policyTagListName = policyTag?.name ?? Localize.translateLocal('common.tag');
-
-    const hasModifiedAmount =
-        reportActionOriginalMessage &&
-        'oldAmount' in reportActionOriginalMessage &&
-        'oldCurrency' in reportActionOriginalMessage &&
-        'amount' in reportActionOriginalMessage &&
-        'currency' in reportActionOriginalMessage;
-
-    const hasModifiedMerchant = reportActionOriginalMessage && 'oldMerchant' in reportActionOriginalMessage && 'merchant' in reportActionOriginalMessage;
-    if (hasModifiedAmount) {
-        const oldCurrency = reportActionOriginalMessage?.oldCurrency;
-        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage?.oldAmount ?? 0, oldCurrency ?? '');
-
-        const currency = reportActionOriginalMessage?.currency;
-        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage?.amount ?? 0, currency);
-
-        // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
-        // We check the merchant is in distance format (includes @) as a sanity check
-        if (hasModifiedMerchant && reportActionOriginalMessage?.merchant?.includes('@')) {
-            return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage?.merchant, reportActionOriginalMessage?.oldMerchant ?? '', amount, oldAmount);
-        }
-
-        return getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
-    }
-
-    const hasModifiedComment = reportActionOriginalMessage && 'oldComment' in reportActionOriginalMessage && 'newComment' in reportActionOriginalMessage;
-    if (hasModifiedComment) {
-        return getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage?.newComment ?? '',
-            reportActionOriginalMessage?.oldComment ?? '',
-            Localize.translateLocal('common.description'),
-            true,
-        );
-    }
-
-    const hasModifiedCreated = reportActionOriginalMessage && 'oldCreated' in reportActionOriginalMessage && 'created' in reportActionOriginalMessage;
-    if (hasModifiedCreated) {
-        // Take only the YYYY-MM-DD value as the original date includes timestamp
-        let formattedOldCreated: Date | string = new Date(reportActionOriginalMessage?.oldCreated ?? 0);
-        formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING);
-
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage?.created ?? '', formattedOldCreated?.toString?.(), Localize.translateLocal('common.date'), false);
-    }
-
-    if (hasModifiedMerchant) {
-        return getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage?.merchant ?? '',
-            reportActionOriginalMessage?.oldMerchant ?? '',
-            Localize.translateLocal('common.merchant'),
-            true,
-        );
-    }
-
-    const hasModifiedCategory = reportActionOriginalMessage && 'oldCategory' in reportActionOriginalMessage && 'category' in reportActionOriginalMessage;
-    if (hasModifiedCategory) {
-        return getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage?.category ?? '',
-            reportActionOriginalMessage?.oldCategory ?? '',
-            Localize.translateLocal('common.category'),
-            true,
-        );
-    }
-
-    const hasModifiedTag = reportActionOriginalMessage && 'oldTag' in reportActionOriginalMessage && 'tag' in reportActionOriginalMessage;
-    if (hasModifiedTag) {
-        return getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.tag ?? '',
-            reportActionOriginalMessage.oldTag ?? '',
-            policyTagListName,
-            true,
-            policyTagListName === Localize.translateLocal('common.tag'),
-        );
-    }
-
-    const hasModifiedBillable = reportActionOriginalMessage && 'oldBillable' in reportActionOriginalMessage && 'billable' in reportActionOriginalMessage;
-    if (hasModifiedBillable) {
-        return getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage?.billable ?? '',
-            reportActionOriginalMessage?.oldBillable ?? '',
-            Localize.translateLocal('iou.request'),
-            true,
-        );
-    }
-}
-
 /**
  * Given the updates user made to the request, compose the originalMessage
  * object of the modified expense action.
@@ -3650,6 +3516,13 @@ function getReportIDFromLink(url: string | null): string {
     return reportID;
 }
 
+/**
+ * Get the report policyID given a reportID
+ */
+function getReportPolicyID(reportID: string | undefined): string|undefined {
+    return getReport(reportID)?.policyID;
+}
+
 /**
  * Check if the chat report is linked to an iou that is waiting for the current user to add a credit bank account.
  */
@@ -4267,6 +4140,7 @@ export {
     getReport,
     getReportNotificationPreference,
     getReportIDFromLink,
+    getReportPolicyID,
     getRouteFromLink,
     getDeletedParentActionMessageForChatReport,
     getLastVisibleMessage,
@@ -4342,7 +4216,6 @@ export {
     getParentReport,
     getRootParentReport,
     getReportPreviewMessage,
-    getModifiedExpenseMessage,
     canUserPerformWriteAction,
     getOriginalReportID,
     canAccessReport,
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index 95f5574e5432..891a0ffcb7b8 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -90,7 +90,6 @@ type ReportActionBase = {
     automatic?: boolean;
 
     shouldShow?: boolean;
-    reportID?: string;
 
     /** The ID of childReport */
     childReportID?: string;

From ceff5c197b0301bd3dd95e0e5cd45389b76d9cb1 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 17:36:56 +0200
Subject: [PATCH 057/244] Move policyTags to ModifiedExpenseMessage

---
 src/libs/ModifiedExpenseMessage.ts | 21 ++++++++++++++++++---
 src/libs/PolicyUtils.ts            | 19 +------------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 8e7b27b55ce4..decc4c5a9863 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -1,11 +1,26 @@
 import {format} from 'date-fns';
 import CONST from '@src/CONST';
-import {ReportAction} from '@src/types/onyx';
+import {PolicyTags, ReportAction} from '@src/types/onyx';
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
 import * as CurrencyUtils from './CurrencyUtils';
 import * as Localize from './Localize';
 import * as PolicyUtils from './PolicyUtils';
 import * as ReportUtils from './ReportUtils';
 
+
+let allPolicyTags: OnyxCollection<PolicyTags> = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            return;
+        }
+        allPolicyTags = Object.fromEntries(Object.entries(value).filter(([, policyTags]) => !!policyTags));
+    },
+});
+
 /**
  * Builds the partial message fragment for a modified field on the expense.
  *
@@ -95,8 +110,8 @@ function getForReportAction(reportAction: ReportAction): string {
         return '';
     }
     const reportActionOriginalMessage = reportAction.originalMessage;
-    const policyID = ReportUtils.getReportPolicyID(reportAction.reportID ?? '');
-    const policyTags = PolicyUtils.getPolicyTags(policyID);
+    const policyID = ReportUtils.getReportPolicyID(reportAction.reportID) ?? '';
+    const policyTags = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
     const policyTagListName = PolicyUtils.getTagListName(policyTags) || Localize.translateLocal('common.tag');
 
     const removalFragments: string[] = [];
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index e7328972cfa1..19129959d016 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -1,5 +1,5 @@
 import Str from 'expensify-common/lib/str';
-import Onyx, {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {PersonalDetails, Policy, PolicyMembers, PolicyTag, PolicyTags} from '@src/types/onyx';
@@ -9,22 +9,6 @@ type MemberEmailsToAccountIDs = Record<string, number>;
 type PersonalDetailsList = Record<string, PersonalDetails>;
 type UnitRate = {rate: number};
 
-let allPolicyTags: OnyxCollection<PolicyTags> = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            return;
-        }
-        allPolicyTags = Object.fromEntries(Object.entries(value).filter(([, policyTags]) => !!policyTags));
-    },
-});
-
-function getPolicyTags(policyID: string) {
-    return allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
-}
-
 /**
  * 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.
@@ -216,7 +200,6 @@ function isPendingDeletePolicy(policy: OnyxEntry<Policy>): boolean {
 
 export {
     getActivePolicies,
-    getPolicyTags,
     hasPolicyMemberError,
     hasPolicyError,
     hasPolicyErrorFields,

From 57f083782f1e8ebbfc36ead4f7d0f49854262e99 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 17:55:30 +0200
Subject: [PATCH 058/244] Remove unused function.

---
 src/libs/ModifiedExpenseMessage.ts |  7 ++++---
 src/libs/ReportUtils.ts            | 19 -------------------
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index decc4c5a9863..293411972858 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -1,7 +1,7 @@
 import {format} from 'date-fns';
 import CONST from '@src/CONST';
 import {PolicyTags, ReportAction} from '@src/types/onyx';
-import Onyx, {OnyxCollection} from 'react-native-onyx';
+import Onyx from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import * as CurrencyUtils from './CurrencyUtils';
 import * as Localize from './Localize';
@@ -9,15 +9,16 @@ import * as PolicyUtils from './PolicyUtils';
 import * as ReportUtils from './ReportUtils';
 
 
-let allPolicyTags: OnyxCollection<PolicyTags> = {};
+let allPolicyTags: Record<string, PolicyTags | null> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
     waitForCollectionCallback: true,
     callback: (value) => {
         if (!value) {
+            allPolicyTags = {};
             return;
         }
-        allPolicyTags = Object.fromEntries(Object.entries(value).filter(([, policyTags]) => !!policyTags));
+        allPolicyTags = value;
     },
 });
 
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index da00bc1c5c18..2280f3283b80 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -400,25 +400,6 @@ Onyx.connect({
     callback: (value) => (loginList = value),
 });
 
-let allPolicyTags: Record<string, PolicyTags | null> = {};
-
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allPolicyTags = {};
-            return;
-        }
-
-        allPolicyTags = value;
-    },
-});
-
-function getPolicyTags(policyID: string) {
-    return allPolicyTags[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
-}
-
 function getChatType(report: OnyxEntry<Report>): ValueOf<typeof CONST.REPORT.CHAT_TYPE> | undefined {
     return report?.chatType;
 }

From 7dd7afb9265cc2d10eaab94313b72520749738b0 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 18:25:48 +0200
Subject: [PATCH 059/244] Make lint happy.

---
 src/libs/ModifiedExpenseMessage.ts | 5 ++---
 src/libs/ReportUtils.ts            | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 293411972858..558409fe3a51 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -1,14 +1,13 @@
 import {format} from 'date-fns';
-import CONST from '@src/CONST';
-import {PolicyTags, ReportAction} from '@src/types/onyx';
 import Onyx from 'react-native-onyx';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {PolicyTags, ReportAction} from '@src/types/onyx';
 import * as CurrencyUtils from './CurrencyUtils';
 import * as Localize from './Localize';
 import * as PolicyUtils from './PolicyUtils';
 import * as ReportUtils from './ReportUtils';
 
-
 let allPolicyTags: Record<string, PolicyTags | null> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 2280f3283b80..dabfa271f7c7 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1,4 +1,3 @@
-import {format} from 'date-fns';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
 import lodashEscape from 'lodash/escape';
@@ -14,7 +13,7 @@ import CONST from '@src/CONST';
 import {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Transaction} from '@src/types/onyx';
+import {Beta, Login, PersonalDetails, Policy, Report, ReportAction, Transaction} from '@src/types/onyx';
 import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {ChangeLog, IOUMessage, OriginalMessageActionName} from '@src/types/onyx/OriginalMessage';
 import {Message, ReportActions} from '@src/types/onyx/ReportAction';
@@ -3500,7 +3499,7 @@ function getReportIDFromLink(url: string | null): string {
 /**
  * Get the report policyID given a reportID
  */
-function getReportPolicyID(reportID: string | undefined): string|undefined {
+function getReportPolicyID(reportID: string | undefined): string | undefined {
     return getReport(reportID)?.policyID;
 }
 

From 1cb7f4751f3b99d9e462a871e2a33d821c50c761 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 18:33:51 +0200
Subject: [PATCH 060/244] Better checks.

---
 src/libs/ModifiedExpenseMessage.ts | 57 ++++++++++++++++--------------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 558409fe3a51..aaa6cd10f656 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -118,30 +118,35 @@ function getForReportAction(reportAction: ReportAction): string {
     const setFragments: string[] = [];
     const changeFragments: string[] = [];
 
-    const hasModifiedAmount = reportActionOriginalMessage.oldAmount && reportActionOriginalMessage.oldCurrency && reportActionOriginalMessage.amount && reportActionOriginalMessage.currency;
-
-    const hasModifiedMerchant = reportActionOriginalMessage.oldMerchant && reportActionOriginalMessage.merchant;
+    const hasModifiedAmount =
+        reportActionOriginalMessage &&
+        'oldAmount' in reportActionOriginalMessage &&
+        'oldCurrency' in reportActionOriginalMessage &&
+        'amount' in reportActionOriginalMessage &&
+        'currency' in reportActionOriginalMessage;
+
+    const hasModifiedMerchant = reportActionOriginalMessage && 'oldMerchant' in reportActionOriginalMessage && 'merchant' in reportActionOriginalMessage;
     if (hasModifiedAmount) {
-        const oldCurrency = reportActionOriginalMessage.oldCurrency ?? '';
-        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.oldAmount ?? 0, oldCurrency);
+        const oldCurrency = reportActionOriginalMessage?.oldCurrency ?? '';
+        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage?.oldAmount ?? 0, oldCurrency);
 
-        const currency = reportActionOriginalMessage.currency ?? '';
-        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount ?? 0, currency);
+        const currency = reportActionOriginalMessage?.currency ?? '';
+        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage?.amount ?? 0, currency);
 
         // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
         // We check the merchant is in distance format (includes @) as a sanity check
-        if (hasModifiedMerchant && (reportActionOriginalMessage.merchant ?? '').includes('@')) {
-            return getForDistanceRequest(reportActionOriginalMessage.merchant ?? '', reportActionOriginalMessage.oldMerchant ?? '', amount, oldAmount);
+        if (hasModifiedMerchant && (reportActionOriginalMessage?.merchant ?? '').includes('@')) {
+            return getForDistanceRequest(reportActionOriginalMessage?.merchant ?? '', reportActionOriginalMessage?.oldMerchant ?? '', amount, oldAmount);
         }
 
         buildMessageFragmentForValue(amount, oldAmount, Localize.translateLocal('iou.amount'), false, setFragments, removalFragments, changeFragments);
     }
 
-    const hasModifiedComment = reportActionOriginalMessage.oldComment && reportActionOriginalMessage.newComment;
+    const hasModifiedComment = reportActionOriginalMessage && 'oldComment' in reportActionOriginalMessage && 'newComment' in reportActionOriginalMessage;
     if (hasModifiedComment) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.newComment ?? '',
-            reportActionOriginalMessage.oldComment ?? '',
+            reportActionOriginalMessage?.newComment ?? '',
+            reportActionOriginalMessage?.oldComment ?? '',
             Localize.translateLocal('common.description'),
             true,
             setFragments,
@@ -150,12 +155,12 @@ function getForReportAction(reportAction: ReportAction): string {
         );
     }
 
-    const hasModifiedCreated = reportActionOriginalMessage.oldCreated && reportActionOriginalMessage.created;
+    const hasModifiedCreated = reportActionOriginalMessage && 'oldCreated' in reportActionOriginalMessage && 'created' in reportActionOriginalMessage;
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
-        const formattedOldCreated = format(new Date(reportActionOriginalMessage.oldCreated ?? ''), CONST.DATE.FNS_FORMAT_STRING);
+        const formattedOldCreated = format(new Date(reportActionOriginalMessage?.oldCreated ?? ''), CONST.DATE.FNS_FORMAT_STRING);
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.created ?? '',
+            reportActionOriginalMessage?.created ?? '',
             formattedOldCreated,
             Localize.translateLocal('common.date'),
             false,
@@ -167,8 +172,8 @@ function getForReportAction(reportAction: ReportAction): string {
 
     if (hasModifiedMerchant) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.merchant ?? '',
-            reportActionOriginalMessage.oldMerchant ?? '',
+            reportActionOriginalMessage?.merchant ?? '',
+            reportActionOriginalMessage?.oldMerchant ?? '',
             Localize.translateLocal('common.merchant'),
             true,
             setFragments,
@@ -177,11 +182,11 @@ function getForReportAction(reportAction: ReportAction): string {
         );
     }
 
-    const hasModifiedCategory = reportActionOriginalMessage.oldCategory && reportActionOriginalMessage.category;
+    const hasModifiedCategory = reportActionOriginalMessage && 'oldCategory' in reportActionOriginalMessage && 'category' in reportActionOriginalMessage;
     if (hasModifiedCategory) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.category ?? '',
-            reportActionOriginalMessage.oldCategory ?? '',
+            reportActionOriginalMessage?.category ?? '',
+            reportActionOriginalMessage?.oldCategory ?? '',
             Localize.translateLocal('common.category'),
             true,
             setFragments,
@@ -190,11 +195,11 @@ function getForReportAction(reportAction: ReportAction): string {
         );
     }
 
-    const hasModifiedTag = reportActionOriginalMessage.oldTag && reportActionOriginalMessage.tag;
+    const hasModifiedTag = reportActionOriginalMessage && 'oldTag' in reportActionOriginalMessage && 'tag' in reportActionOriginalMessage;
     if (hasModifiedTag) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.tag ?? '',
-            reportActionOriginalMessage.oldTag ?? '',
+            reportActionOriginalMessage?.tag ?? '',
+            reportActionOriginalMessage?.oldTag ?? '',
             policyTagListName,
             true,
             setFragments,
@@ -204,11 +209,11 @@ function getForReportAction(reportAction: ReportAction): string {
         );
     }
 
-    const hasModifiedBillable = reportActionOriginalMessage.oldBillable && reportActionOriginalMessage.billable;
+    const hasModifiedBillable = reportActionOriginalMessage && 'oldBillable' in reportActionOriginalMessage && 'billable' in reportActionOriginalMessage;
     if (hasModifiedBillable) {
         buildMessageFragmentForValue(
-            reportActionOriginalMessage.billable ?? '',
-            reportActionOriginalMessage.oldBillable ?? '',
+            reportActionOriginalMessage?.billable ?? '',
+            reportActionOriginalMessage?.oldBillable ?? '',
             Localize.translateLocal('iou.request'),
             true,
             setFragments,

From 4bd79291e06168e6907590e10f4f00d425e33a0a Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Wed, 29 Nov 2023 16:52:04 +0000
Subject: [PATCH 061/244] refactor(typescript): migrate IFrame

---
 src/components/{IFrame.js => IFrame.tsx} | 35 ++++++++++--------------
 1 file changed, 15 insertions(+), 20 deletions(-)
 rename src/components/{IFrame.js => IFrame.tsx} (82%)

diff --git a/src/components/IFrame.js b/src/components/IFrame.tsx
similarity index 82%
rename from src/components/IFrame.js
rename to src/components/IFrame.tsx
index aa85ad03ffbf..eca9524b1cb1 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.tsx
@@ -1,10 +1,9 @@
-/* eslint-disable es/no-nullish-coalescing-operators */
-import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {Session} from '@src/types/onyx';
 
-function getNewDotURL(url) {
+function getNewDotURL(url: string | URL) {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
@@ -48,7 +47,7 @@ function getNewDotURL(url) {
     return pathname;
 }
 
-function getOldDotURL(url) {
+function getOldDotURL(url: string | URL) {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');
@@ -86,18 +85,13 @@ function getOldDotURL(url) {
     return pathname;
 }
 
-const propTypes = {
-    // The session of the logged in person
-    session: PropTypes.shape({
-        // The email of the logged in person
-        email: PropTypes.string,
-
-        // The authToken of the logged in person
-        authToken: PropTypes.string,
-    }).isRequired,
+type OldDotIFrameOnyxProps = {
+    session: OnyxEntry<Session>;
 };
 
-function OldDotIFrame({session}) {
+type OldDotIFrameProps = OldDotIFrameOnyxProps;
+
+function OldDotIFrame({session}: OldDotIFrameProps) {
     const [oldDotURL, setOldDotURL] = useState('https://staging.expensify.com');
 
     useEffect(() => {
@@ -106,15 +100,18 @@ function OldDotIFrame({session}) {
         window.addEventListener('message', (event) => {
             const url = event.data;
             // TODO: use this value to navigate to a new path
-            // eslint-disable-next-line no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const newDotURL = getNewDotURL(url);
         });
     }, []);
 
     useEffect(() => {
+        if (!session) {
+            return;
+        }
         document.cookie = `authToken=${session.authToken}; domain=expensify.com.dev; path=/;`;
         document.cookie = `email=${session.email}; domain=expensify.com.dev; path=/;`;
-    }, [session.authToken, session.email]);
+    }, [session]);
 
     return (
         <iframe
@@ -125,9 +122,7 @@ function OldDotIFrame({session}) {
     );
 }
 
-OldDotIFrame.propTypes = propTypes;
-
-export default withOnyx({
+export default withOnyx<OldDotIFrameProps, OldDotIFrameOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },

From 388962f32841fc35c16534edc62acc12b33ca2d8 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 18:58:40 +0200
Subject: [PATCH 062/244] Update src/libs/ReportUtils.ts

Co-authored-by: Tim Golen <tgolen@gmail.com>
---
 src/libs/ReportUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index dabfa271f7c7..6f6514cbd3cb 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -3499,7 +3499,7 @@ function getReportIDFromLink(url: string | null): string {
 /**
  * Get the report policyID given a reportID
  */
-function getReportPolicyID(reportID: string | undefined): string | undefined {
+function getReportPolicyID(reportID?: string)?: string {
     return getReport(reportID)?.policyID;
 }
 

From 9cc76370e105259bc2a74a74536e3dbca233237c Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 18:59:04 +0200
Subject: [PATCH 063/244] Update src/libs/ModifiedExpenseMessage.ts

Co-authored-by: Tim Golen <tgolen@gmail.com>
---
 src/libs/ModifiedExpenseMessage.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index aaa6cd10f656..644002bc2503 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -229,8 +229,7 @@ function getForReportAction(reportAction: ReportAction): string {
     if (message === '') {
         return Localize.translateLocal('iou.changedTheRequest');
     }
-    message = `${message.substring(1, message.length)}`;
-    return message;
+    return `${message.substring(1, message.length)}`;
 }
 
 export default {

From 60a1493613d22e702556bb9898049413be27a979 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 19:00:28 +0200
Subject: [PATCH 064/244] Improve function doc.

---
 src/libs/ModifiedExpenseMessage.ts | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index 644002bc2503..f60cd2222ae7 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -23,14 +23,7 @@ Onyx.connect({
 
 /**
  * Builds the partial message fragment for a modified field on the expense.
- *
- * @param newValue
- * @param oldValue
- * @param valueName
- * @param valueInQuotes
- * @param shouldConvertToLowercase
  */
-
 function buildMessageFragmentForValue(
     newValue: string,
     oldValue: string,
@@ -59,13 +52,7 @@ function buildMessageFragmentForValue(
 
 /**
  * Get the message line for a modified expense.
- *
- * @param newValue
- * @param oldValue
- * @param valueName
- * @param valueInQuotes
  */
-
 function getMessageLine(prefix: string, messageFragments: string[]) {
     if (messageFragments.length === 0) {
         return '';

From 8dd3c9992bdb78f8e4fbaa56feeee9e5779fc425 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Wed, 29 Nov 2023 19:06:27 +0200
Subject: [PATCH 065/244] Add return type declaration

---
 src/libs/ModifiedExpenseMessage.ts | 6 +++---
 src/libs/ReportUtils.ts            | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index f60cd2222ae7..e0c4860c9d49 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -53,7 +53,7 @@ function buildMessageFragmentForValue(
 /**
  * Get the message line for a modified expense.
  */
-function getMessageLine(prefix: string, messageFragments: string[]) {
+function getMessageLine(prefix: string, messageFragments: string[]): string {
     if (messageFragments.length === 0) {
         return '';
     }
@@ -74,7 +74,7 @@ function getMessageLine(prefix: string, messageFragments: string[]) {
     }, prefix);
 }
 
-function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string) {
+function getForDistanceRequest(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string): string {
     if (!oldDistance) {
         return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
     }
@@ -209,7 +209,7 @@ function getForReportAction(reportAction: ReportAction): string {
         );
     }
 
-    let message =
+    const message =
         getMessageLine(`\n${Localize.translateLocal('iou.changed')}`, changeFragments) +
         getMessageLine(`\n${Localize.translateLocal('iou.set')}`, setFragments) +
         getMessageLine(`\n${Localize.translateLocal('iou.removed')}`, removalFragments);
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 6f6514cbd3cb..f55b576f5e6c 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -3499,7 +3499,7 @@ function getReportIDFromLink(url: string | null): string {
 /**
  * Get the report policyID given a reportID
  */
-function getReportPolicyID(reportID?: string)?: string {
+function getReportPolicyID(reportID?: string): string | undefined {
     return getReport(reportID)?.policyID;
 }
 

From 044cf0a8425af68dad97b0afcff9888d54ddcbe0 Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Fri, 1 Dec 2023 10:38:59 +0000
Subject: [PATCH 066/244] refactor: apply pull request feedback

---
 src/components/IFrame.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/IFrame.tsx b/src/components/IFrame.tsx
index eca9524b1cb1..c8de672da800 100644
--- a/src/components/IFrame.tsx
+++ b/src/components/IFrame.tsx
@@ -3,7 +3,15 @@ import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {Session} from '@src/types/onyx';
 
-function getNewDotURL(url: string | URL) {
+type OldDotIFrameOnyxProps = {
+    session: OnyxEntry<Session>;
+};
+
+type OldDotIFrameProps = OldDotIFrameOnyxProps;
+
+type Url = string | URL;
+
+function getNewDotURL(url: Url): string {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
@@ -47,7 +55,7 @@ function getNewDotURL(url: string | URL) {
     return pathname;
 }
 
-function getOldDotURL(url: string | URL) {
+function getOldDotURL(url: Url): string {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');
@@ -85,19 +93,13 @@ function getOldDotURL(url: string | URL) {
     return pathname;
 }
 
-type OldDotIFrameOnyxProps = {
-    session: OnyxEntry<Session>;
-};
-
-type OldDotIFrameProps = OldDotIFrameOnyxProps;
-
 function OldDotIFrame({session}: OldDotIFrameProps) {
     const [oldDotURL, setOldDotURL] = useState('https://staging.expensify.com');
 
     useEffect(() => {
         setOldDotURL(`https://expensify.com.dev/${getOldDotURL(window.location.href)}`);
 
-        window.addEventListener('message', (event) => {
+        window.addEventListener('message', (event: MessageEvent<string>) => {
             const url = event.data;
             // TODO: use this value to navigate to a new path
             // eslint-disable-next-line @typescript-eslint/no-unused-vars

From d254e4f8316b468730264728bcd8a626d603c888 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 1 Dec 2023 12:50:53 +0100
Subject: [PATCH 067/244] Create a Workspace card

---
 src/languages/en.ts                           |  3 ++
 src/languages/es.ts                           |  3 ++
 src/pages/home/sidebar/SidebarLinks.js        |  4 +++
 .../card/WorkspaceCardCreateAWorkspace.tsx    | 31 +++++++++++++++++++
 src/styles/themes/default.ts                  |  2 +-
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 8f772f1260bb..b5a9261e9944 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1492,6 +1492,9 @@ export default {
             benefit4: 'Customizable limits',
             addWorkEmail: 'Add work email address',
             checkingDomain: 'Hang tight! We are still working on enabling your Expensify Cards. Check back here in a few minutes.',
+            createAWorkspace: 'Create a workspace',
+            createAWorkspaceCopy: 'Manage business expenses, issue cards, send invoices, and more.',
+            createAWorkspaceCTA: 'Get Started',
         },
         reimburse: {
             captureReceipts: 'Capture receipts',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3887891299df..2f2244a9674a 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1514,6 +1514,9 @@ export default {
             benefit4: 'Límites personalizables',
             addWorkEmail: 'Añadir correo electrónico de trabajo',
             checkingDomain: '¡Un momento! Estamos todavía trabajando para habilitar tu Tarjeta Expensify. Vuelve aquí en unos minutos.',
+            createAWorkspace: 'Crear un espacio de trabajo',
+            createAWorkspaceCopy: 'Administre gastos comerciales, emita tarjetas, envíe facturas y más.',
+            createAWorkspaceCTA: 'Comenzar',
         },
         reimburse: {
             captureReceipts: 'Captura recibos',
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 2aba742f157f..100d746f6524 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -19,6 +19,7 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
+import WorkspaceCardCreateAWorkspace from '@pages/workspace/card/WorkspaceCardCreateAWorkspace';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -177,6 +178,9 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 </Tooltip>
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
+
+            <WorkspaceCardCreateAWorkspace />
+
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList
                     style={styles.flex1}
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
new file mode 100644
index 000000000000..a7228184415a
--- /dev/null
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Button from '@components/Button';
+import * as Illustrations from '@components/Icon/Illustrations';
+import Section from '@components/Section';
+import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
+import useThemeStyles from '@styles/useThemeStyles';
+
+type WorkspaceCardCreateAWorkspaceProps = WithLocalizeProps;
+
+function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspaceProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <Section
+            title={translate('workspace.card.createAWorkspace')}
+            icon={Illustrations.CreditCardsNew}
+            subtitle={translate('workspace.card.createAWorkspaceCopy')}
+            containerStyles={[styles.highlightBG]}
+        >
+            <Button
+                text={translate('workspace.card.createAWorkspaceCTA')}
+                style={styles.mt5}
+                success
+            />
+        </Section>
+    );
+}
+
+WorkspaceCardCreateAWorkspace.displayName = 'WorkspaceCardNoVBAView';
+
+export default withLocalize(WorkspaceCardCreateAWorkspace);
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 519e818054e0..a09b2eb56888 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -44,7 +44,7 @@ const darkTheme = {
     hoverComponentBG: colors.darkHighlightBackground,
     activeComponentBG: colors.darkBorders,
     signInSidebar: colors.green800,
-    sidebar: colors.darkHighlightBackground,
+    sidebar: colors.darkAppBackground,
     sidebarHover: colors.darkAppBackground,
     heading: colors.darkPrimaryText,
     textLight: colors.darkPrimaryText,

From fa86c1366fa07f4dd53bac49c21c26c5306a8437 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 10:19:23 +0100
Subject: [PATCH 068/244] Workspace title and icon

---
 src/pages/home/sidebar/SidebarLinks.js | 20 ++++++++++++++++++++
 src/styles/styles.ts                   |  4 ++++
 2 files changed, 24 insertions(+)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 100d746f6524..9c186e355cbf 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -9,7 +9,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -179,6 +181,24 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
 
+            <View style={[styles.mh4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb3]}>
+                <Text
+                    style={styles.label}
+                    color={theme.textSupporting}
+                >
+                    Workspace
+                </Text>
+                <PressableWithFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}>
+                    {({hovered}) => (
+                        <Icon
+                            src={Expensicons.Plus}
+                            width={12}
+                            height={12}
+                            additionalStyles={[styles.highlightBG, styles.borderRadiusNormal, styles.p2, hovered && styles.bordersBG]}
+                        />
+                    )}
+                </PressableWithFeedback>
+            </View>
             <WorkspaceCardCreateAWorkspace />
 
             <View style={[styles.pRelative, styles.flex1]}>
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 983f1ba82caa..45d13e528edd 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -313,6 +313,10 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.appBG,
         },
 
+        bordersBG: {
+            backgroundColor: colors.darkBorders,
+        },
+
         h4: {
             fontFamily: fontFamily.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,

From 294bca68ee4f2aeb1367abf115b4bb8088855096 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 14:11:01 +0100
Subject: [PATCH 069/244] Let Icon be at the top or on the right

---
 src/components/Section.js                     | 67 +++++++++++++++----
 .../card/WorkspaceCardCreateAWorkspace.tsx    |  1 +
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index ad52bf0e3509..47ced81f3dfb 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -23,6 +23,8 @@ const propTypes = {
     /** Icon component */
     IconComponent: PropTypes.func,
 
+    iconPosition: PropTypes.oneOf(['top', 'right']),
+
     /** Contents to display inside the section */
     children: PropTypes.node,
 
@@ -47,11 +49,18 @@ const propTypes = {
     iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
+const iconSectionPropTypes = {
+    icon: propTypes.icon,
+    IconComponent: propTypes.IconComponent,
+    iconContainerStyles: propTypes.iconContainerStyles,
+};
+
 const defaultProps = {
     menuItems: null,
     children: null,
     icon: null,
     IconComponent: null,
+    iconPosition: 'right',
     containerStyles: [],
     iconContainerStyles: [],
     titleStyles: [],
@@ -60,29 +69,57 @@ const defaultProps = {
     subtitle: null,
 };
 
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconPosition, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
     const styles = useThemeStyles();
+
     return (
         <>
             <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, ...titleStyles]}>
+                {iconPosition === 'top' && (
+                    <IconSection
+                        icon={icon}
+                        IconComponent={IconComponent}
+                        iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                    />
+                )}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mh1, ...titleStyles]}>
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>
-                    <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
-                        {Boolean(icon) && (
-                            <Icon
-                                src={icon}
-                                height={68}
-                                width={68}
-                            />
-                        )}
-                        {Boolean(IconComponent) && <IconComponent />}
-                    </View>
+                    {iconPosition === 'right' && (
+                        <IconSection
+                            icon={icon}
+                            IconComponent={IconComponent}
+                            iconContainerStyles={iconContainerStyles}
+                        />
+                    )}
                 </View>
 
                 {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, ...subtitleStyles]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, styles.mh1, ...subtitleStyles]}>
                         <Text style={styles.textNormal}>{subtitle}</Text>
                     </View>
                 )}
@@ -94,7 +131,9 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
         </>
     );
 }
-
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
 Section.displayName = 'Section';
 Section.propTypes = propTypes;
 Section.defaultProps = defaultProps;
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index a7228184415a..7e8274f29b4b 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -14,6 +14,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
         <Section
             title={translate('workspace.card.createAWorkspace')}
             icon={Illustrations.CreditCardsNew}
+            iconPosition='top'
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
             containerStyles={[styles.highlightBG]}
         >

From 79fbdb1f44a4e73931e83b8be2cf63d74e98f286 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 14:21:25 +0100
Subject: [PATCH 070/244] Add muted subtitle

---
 src/components/Section.js                     | 22 +++++++++++++++++--
 .../card/WorkspaceCardCreateAWorkspace.tsx    |  3 ++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index 47ced81f3dfb..53e7f4af1bb5 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -40,6 +40,9 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     subtitleStyles: PropTypes.arrayOf(PropTypes.object),
 
+    /** Whether the subtitle should have a muted style */
+    subtitleMuted: PropTypes.boolean,
+
     /** Customize the Section container */
     // eslint-disable-next-line react/forbid-prop-types
     childrenStyles: PropTypes.arrayOf(PropTypes.object),
@@ -65,6 +68,7 @@ const defaultProps = {
     iconContainerStyles: [],
     titleStyles: [],
     subtitleStyles: [],
+    subtitleMuted: false,
     childrenStyles: [],
     subtitle: null,
 };
@@ -92,7 +96,21 @@ function IconSection({icon, IconComponent, iconContainerStyles}) {
     );
 }
 
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, iconPosition, iconContainerStyles, menuItems, subtitle, subtitleStyles, title, titleStyles}) {
+function Section({
+    children,
+    childrenStyles,
+    containerStyles,
+    icon,
+    IconComponent,
+    iconPosition,
+    iconContainerStyles,
+    menuItems,
+    subtitle,
+    subtitleStyles,
+    subtitleMuted,
+    title,
+    titleStyles,
+}) {
     const styles = useThemeStyles();
 
     return (
@@ -120,7 +138,7 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
 
                 {Boolean(subtitle) && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, styles.mh1, ...subtitleStyles]}>
-                        <Text style={styles.textNormal}>{subtitle}</Text>
+                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
                     </View>
                 )}
 
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 7e8274f29b4b..681224a411ff 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -14,8 +14,9 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
         <Section
             title={translate('workspace.card.createAWorkspace')}
             icon={Illustrations.CreditCardsNew}
-            iconPosition='top'
+            iconPosition="top"
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
+            subtitleMuted
             containerStyles={[styles.highlightBG]}
         >
             <Button

From 0f16ecf62cf89c9f6a2bdd5e64587fb806638548 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 14:22:27 +0100
Subject: [PATCH 071/244] Remove Create a Workspace card

---
 src/pages/home/sidebar/SidebarLinks.js | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 9c186e355cbf..f61f231c6191 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -180,27 +180,6 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
                 </Tooltip>
                 <SignInOrAvatarWithOptionalStatus isCreateMenuOpen={isCreateMenuOpen} />
             </View>
-
-            <View style={[styles.mh4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.mb3]}>
-                <Text
-                    style={styles.label}
-                    color={theme.textSupporting}
-                >
-                    Workspace
-                </Text>
-                <PressableWithFeedback accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}>
-                    {({hovered}) => (
-                        <Icon
-                            src={Expensicons.Plus}
-                            width={12}
-                            height={12}
-                            additionalStyles={[styles.highlightBG, styles.borderRadiusNormal, styles.p2, hovered && styles.bordersBG]}
-                        />
-                    )}
-                </PressableWithFeedback>
-            </View>
-            <WorkspaceCardCreateAWorkspace />
-
             <View style={[styles.pRelative, styles.flex1]}>
                 <LHNOptionsList
                     style={styles.flex1}

From fbd4287c8cf403ec6174a31b20ebffb41a256d1f Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Mon, 4 Dec 2023 16:29:39 +0000
Subject: [PATCH 072/244] refactor(typescript): apply pull request feedback

---
 src/components/IFrame.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/IFrame.tsx b/src/components/IFrame.tsx
index c8de672da800..7520ad869507 100644
--- a/src/components/IFrame.tsx
+++ b/src/components/IFrame.tsx
@@ -9,14 +9,12 @@ type OldDotIFrameOnyxProps = {
 
 type OldDotIFrameProps = OldDotIFrameOnyxProps;
 
-type Url = string | URL;
-
-function getNewDotURL(url: Url): string {
+function getNewDotURL(url: string): string {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
 
-    let params;
+    let params: Record<string, string>;
     try {
         params = JSON.parse(paramString);
     } catch {
@@ -55,7 +53,7 @@ function getNewDotURL(url: Url): string {
     return pathname;
 }
 
-function getOldDotURL(url: Url): string {
+function getOldDotURL(url: string): string {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');

From 2122277a902a7ccc7582c744db8ffd2a1cb302c3 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 18:00:00 +0100
Subject: [PATCH 073/244] Drop unused imports

---
 src/pages/home/sidebar/SidebarLinks.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index f61f231c6191..2aba742f157f 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -9,9 +9,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -21,7 +19,6 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
-import WorkspaceCardCreateAWorkspace from '@pages/workspace/card/WorkspaceCardCreateAWorkspace';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';

From 8aea9bb992c549f8fe29d5568f66d51d904c96c5 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 4 Dec 2023 18:27:38 +0100
Subject: [PATCH 074/244] Add Hotdog stand icon

---
 .../simple-illustrations/simple-illustration__hotdogstand.svg   | 1 +
 src/components/Icon/Illustrations.ts                            | 2 ++
 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx      | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 assets/images/simple-illustrations/simple-illustration__hotdogstand.svg

diff --git a/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
new file mode 100644
index 000000000000..732c16a75a2b
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__hotdogstand.svg
@@ -0,0 +1 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M51.148 25.0332H49.0946V25.0198L45.9446 21.8698H45.918C45.9413 21.7332 45.9613 21.5965 45.978 21.4565C46.0113 21.1665 46.028 20.8598 46.028 20.5265C46.028 20.3265 46.0113 20.1165 45.988 19.9165H46.028L51.148 25.0332Z" fill="#002140"/><path d="M57.2778 53.1331H45.8711V56.3364H57.2778V53.1331Z" fill="#0164BF"/><path d="M24.0277 15.1265C24.961 14.6098 25.8943 14.6098 26.8277 15.1265C27.7577 15.6432 28.691 15.6432 29.6243 15.1265C30.5577 14.6098 31.4877 14.6098 32.421 15.1265C33.3543 15.6432 34.2877 15.6432 35.2177 15.1265C36.151 14.6098 37.0843 14.6098 38.0177 15.1265C38.9477 15.6432 40.1477 15.6432 41.081 15.1265C41.7377 14.8198 42.2243 14.2665 42.421 13.6965H42.4877C42.8377 13.7065 42.831 13.6832 43.2643 13.5998C45.2343 13.1898 46.5777 13.5998 47.291 14.8265C48.0843 16.3165 47.4943 18.2898 45.891 19.3098C45.6543 19.4598 45.3977 19.5898 45.121 19.6932C44.1677 20.0598 42.9843 20.3165 41.7043 20.5332C41.3643 18.7865 41.1077 16.6398 37.9677 16.6398H22.9477C21.0077 16.6898 19.8843 18.0798 19.551 19.7132L19.441 19.6932C17.271 18.8798 16.3643 16.5365 17.271 14.8265C17.9843 13.5998 19.3277 13.1898 21.2977 13.5998C22.211 13.7665 21.941 13.6932 22.3343 13.7398C22.3277 14.6765 23.1777 15.5798 24.031 15.1265H24.0277Z" fill="#F25730"/><path d="M45.8711 25.2965V25.0332H49.0944H51.1478H57.2778V53.1332H45.8711V25.2965Z" fill="#FFA75A"/><path d="M23.0513 25.0231C22.8513 25.0231 22.6646 25.0098 22.4813 24.9798C21.6913 24.8598 21.0546 24.4865 20.568 23.9598C19.5846 22.8931 19.2346 21.1998 19.5413 19.7098C19.8746 18.0731 20.998 16.6831 22.938 16.6365H37.958C41.098 16.6365 41.3546 18.7831 41.6946 20.5298C42.9746 20.3131 44.158 20.0565 45.1113 19.6898C45.388 19.5865 45.6446 19.4565 45.8813 19.3065C45.918 19.4798 45.9546 19.6931 45.9813 19.9165C46.0046 20.1165 46.0213 20.3298 46.0213 20.5265C46.0213 20.8565 46.0046 21.1665 45.9713 21.4565C45.9546 21.5965 45.9346 21.7331 45.9113 21.8631C45.8346 22.3065 45.7146 22.6965 45.558 23.0398C45.3913 23.4065 45.1746 23.7165 44.9213 23.9731C44.418 24.4865 43.7613 24.7931 42.9846 24.9298C42.6513 24.9898 42.2946 25.0165 41.9213 25.0165H23.148C23.1146 25.0165 23.0813 25.0165 23.0446 25.0165L23.0513 25.0231Z" fill="#FED607"/><path d="M45.8714 53.1331H34.9414V56.3364H45.8714V53.1331Z" fill="#0164BF"/><path d="M45.871 25.2965L38.9243 33.2699L37.841 34.5165H33.4476H33.001L41.1776 25.1299V25.0332H43.0076H44.951H45.871V25.2965Z" fill="#FFFAF0"/><path d="M43.8645 38.2332V41.6632H43.7479L36.7412 48.6665V43.0898L41.5979 38.2332H43.8645Z" fill="#8DC8FF"/><path d="M43.8645 41.6631V48.6664H36.7412L43.7479 41.6631H43.8645Z" fill="#0185FF"/><path d="M38.9444 33.2833H42.8777C43.8944 33.2833 43.8944 34.7666 42.8777 34.7666H37.8311C37.8377 34.6866 37.8411 34.6033 37.8411 34.5133L38.9277 33.2666L38.9477 33.2799L38.9444 33.2833Z" fill="#002140"/><path d="M41.5979 38.2332L36.7412 43.0898V38.2332H41.5979Z" fill="#0185FF"/><path d="M26.8239 11.8865C27.7539 12.4032 28.6872 12.4032 29.6206 11.8865C30.5539 11.3699 31.4839 11.3699 32.4172 11.8865C33.3506 12.4032 34.2839 12.4032 35.2139 11.8865C36.1472 11.3699 37.0806 11.3699 38.0139 11.8865C38.9439 12.4032 39.8772 12.4032 40.8106 11.8865C41.7672 11.3832 42.6872 12.3899 42.4839 13.4499C42.4672 13.5299 42.4439 13.6132 42.4172 13.6932C42.2206 14.2632 41.7339 14.8165 41.0772 15.1232C40.1439 15.6399 38.9439 15.6399 38.0139 15.1232C37.0806 14.6065 36.1472 14.6065 35.2139 15.1232C34.2839 15.6399 33.3506 15.6399 32.4172 15.1232C31.4839 14.6065 30.5539 14.6065 29.6206 15.1232C28.6872 15.6399 27.7539 15.6399 26.8239 15.1232C25.8906 14.6065 24.9572 14.6065 24.0239 15.1232C23.1706 15.5732 22.3172 14.6732 22.3272 13.7365C22.3272 13.6832 22.3272 13.6265 22.3372 13.5732C22.4172 12.8699 22.8572 12.2699 23.6772 11.8865C24.6106 11.3699 25.8906 11.3699 26.8239 11.8865Z" fill="#FED607"/><path d="M41.178 25.0332V25.1299L33.0013 34.5165H29.058H28.6113L36.788 25.1299V25.0332H41.178Z" fill="#F25730"/><path d="M36.7874 25.1299L28.6107 34.5165H24.6707H24.2207L32.3974 25.1299V25.0332H36.7874V25.1299Z" fill="#FFFAF0"/><path d="M34.9407 53.1331V56.3365H27.2207V53.1331V49.6365H34.9407V53.1331Z" fill="#0185FF"/><path d="M34.9407 48.1631H27.2207V49.6364H34.9407V48.1631Z" fill="#002140"/><path d="M34.9407 40.9998H27.2207V48.1631H34.9407V40.9998Z" fill="#0185FF"/><path d="M37.8312 34.7665C37.5945 37.5598 33.4512 37.4765 33.4512 34.5132H37.8412C37.8412 34.5999 37.8378 34.6832 37.8312 34.7665Z" fill="#FFFAF0"/><path d="M32.3977 25.1299L24.2211 34.5165H20.2811H19.8311L28.0077 25.1299V25.0332H32.3977V25.1299Z" fill="#F25730"/><path d="M33.4476 34.5166C33.4476 37.5633 29.0576 37.5633 29.0576 34.5166H33.4476Z" fill="#F25730"/><path d="M27.2208 53.1331H16.8574V56.3364H27.2208V53.1331Z" fill="#0164BF"/><path d="M25.5212 38.2332V41.6632H25.4012L18.3945 48.6665V43.0898L23.2545 38.2332H25.5212Z" fill="#8DC8FF"/><path d="M25.5212 41.6631V48.6664H18.3945L25.4012 41.6631H25.5212Z" fill="#0185FF"/><path d="M29.058 34.5166C29.058 37.5633 24.668 37.5633 24.668 34.5166H29.058Z" fill="#FFFAF0"/><path d="M23.771 25.0332V25.1299L15.5943 34.5165H11.501L19.6776 25.1299L19.7643 25.0332H20.531H22.4743H23.051H23.771Z" fill="#F25730"/><path d="M23.2545 38.2332L18.3945 43.0898V38.2332H23.2545Z" fill="#0185FF"/><path d="M24.2212 34.5166H24.6712C24.6712 37.5633 20.2812 37.5633 20.2812 34.5166H24.2212Z" fill="#F25730"/><path d="M20.2806 34.5166C20.2806 36.6133 18.2073 37.2666 16.9106 36.4833C16.3206 36.1233 15.8906 35.4699 15.8906 34.5166H20.2806Z" fill="#FFFAF0"/><path d="M24.6708 34.5165C24.6708 37.5632 29.0608 37.5632 29.0608 34.5165C29.0608 37.5632 33.4507 37.5632 33.4507 34.5165C33.4507 37.4765 37.5941 37.5632 37.8307 34.7699H42.8774C43.8941 34.7699 43.8941 33.2865 42.8774 33.2865H38.9441L38.9241 33.2732L45.8707 25.3032V53.1399H34.9407V41.0032H27.2208V53.1399H16.8574V36.6332L16.9108 36.4832C18.2074 37.2699 20.2808 36.6132 20.2808 34.5165C20.2808 37.5632 24.6708 37.5632 24.6708 34.5165ZM43.8674 48.6699V38.2332H36.7441V48.6699H43.8674ZM25.5208 48.6699V38.2332H18.3974V48.6699H25.5208Z" fill="#FFA75A"/><path d="M28.0081 25.0332V25.1299L19.8314 34.5165H15.8914H15.5947L23.7714 25.1299V25.0332H28.0081Z" fill="#FFFAF0"/><path d="M15.5943 34.5166H15.891C15.891 37.5633 11.501 37.5633 11.501 34.5166H15.5943Z" fill="#F25730"/><path d="M16.8574 56.3364H27.2208H34.9407H45.8707H57.2774" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M57.2773 25.0332V53.1332V56.3365" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.7646 25.0332H20.5313H22.4746H23.0513H23.7713H28.008H32.398H36.788H41.178H43.008H44.9513H45.8713H49.0946H51.148H57.278" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.8711 25.0332V25.2965V53.1332V56.3365" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.6776 25.1299L11.501 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.7714 25.1299L15.5947 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.0077 25.1299L19.8311 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M32.3974 25.1299L24.2207 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.788 25.1299L28.6113 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M41.1776 25.1299L33.001 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M46.0175 25.1299L45.8708 25.2965L38.9242 33.2699L37.8408 34.5165" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.841 34.5166H33.4476H33.001H29.0576H28.611H24.671H24.221H20.281H19.831H15.891H15.5943H11.501" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.891 34.5166C15.891 37.5633 11.501 37.5633 11.501 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.2806 34.5166C20.2806 36.6133 18.2073 37.2666 16.9106 36.4833C16.3206 36.1233 15.8906 35.4699 15.8906 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.6712 34.5166C24.6712 37.5633 20.2812 37.5633 20.2812 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.058 34.5166C29.058 37.5633 24.668 37.5633 24.668 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.4476 34.5166C33.4476 37.5633 29.0576 37.5633 29.0576 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.8412 34.5166C37.8412 34.6033 37.8378 34.6866 37.8312 34.7699C37.5945 37.5633 33.4512 37.4799 33.4512 34.5166" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.8574 56.3365V53.1332V36.6299" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.8408 34.7666H42.8775" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.9443 33.2832H42.8777" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.8779 34.7665C43.8946 34.7665 43.8946 33.2832 42.8779 33.2832" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.9414 53.1331H45.8714H57.2781" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.8574 53.1331H27.2208" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 56.3364V53.1331V49.6364V48.1631V40.9998" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M34.9414 56.3364V53.1331V49.6364V48.1631V40.9998" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 40.9998H34.9407" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.7412 38.2332V43.0898V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.8643 38.2332V41.6632V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.7412 38.2332H41.5979H43.8645" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.7412 48.6665H43.8645" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3945 38.2332V43.0898V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M25.5205 38.2332V41.6632V48.6665" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3945 38.2332H23.2545H25.5212" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.3945 48.6665H25.5212" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 48.1631H34.9407" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.2207 49.6365H34.9407" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M37.9614 16.6365H22.9414" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.1546 25.02C23.1213 25.02 23.088 25.02 23.0513 25.02C22.8513 25.02 22.6646 25.0066 22.4813 24.9766C21.6913 24.8566 21.0546 24.4833 20.568 23.9566C19.5846 22.89 19.2346 21.1966 19.5413 19.7066C19.8746 18.07 20.998 16.68 22.938 16.6333" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.4643 22.7431C42.2009 22.7431 41.9309 21.7298 41.6976 20.5298C41.3576 18.7831 41.1009 16.6365 37.9609 16.6365" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.0273 15.1265C24.9607 14.6098 25.894 14.6098 26.8273 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.8242 15.1265C27.7542 15.6431 28.6876 15.6431 29.6209 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.6211 15.1265C30.5544 14.6098 31.4844 14.6098 32.4178 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M32.418 15.1265C33.3513 15.6431 34.2846 15.6431 35.2146 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M35.2139 15.1265C36.1472 14.6098 37.0805 14.6098 38.0139 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.0146 15.1265C38.9446 15.6431 40.1446 15.6431 41.078 15.1265" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.6777 11.8865C24.6111 11.3699 25.8911 11.3699 26.8244 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.8242 11.8865C27.7542 12.4031 28.6876 12.4031 29.6209 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M29.6211 11.8865C30.5544 11.3699 31.4844 11.3699 32.4178 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M32.418 11.8865C33.3513 12.4031 34.2846 12.4031 35.2146 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M35.2139 11.8865C36.1472 11.3699 37.0805 11.3699 38.0139 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.0146 11.8865C38.9446 12.4031 39.878 12.4031 40.8113 11.8865" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M41.9277 25.0198C42.3011 25.0198 42.6577 24.9931 42.9911 24.9331C43.7677 24.7964 44.4244 24.4898 44.9277 23.9764C45.1811 23.7198 45.3944 23.4098 45.5644 23.0431C45.7211 22.7031 45.8411 22.3131 45.9177 21.8665C45.9411 21.7365 45.9611 21.5998 45.9777 21.4598C46.0111 21.1698 46.0277 20.8631 46.0277 20.5298" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M40.8105 11.8865C41.7672 11.3831 42.6872 12.3898 42.4839 13.4498C42.4672 13.5298 42.4439 13.6131 42.4172 13.6931C42.2205 14.2631 41.7339 14.8165 41.0772 15.1231" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M24.0278 15.1266C23.1745 15.5766 22.3211 14.6766 22.3311 13.7399C22.3311 13.6866 22.3311 13.6299 22.3411 13.5766C22.4211 12.8732 22.8611 12.2732 23.6811 11.8899" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.4342 19.6899C17.2642 18.8766 16.3575 16.5332 17.2642 14.8232" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.2942 13.5964C19.3242 13.1864 17.9809 13.5964 17.2676 14.8231" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.1143 19.6899C45.3909 19.5866 45.6476 19.4566 45.8843 19.3066C47.4876 18.2866 48.0776 16.3132 47.2843 14.8232" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M43.2578 13.5964C45.2278 13.1864 46.5711 13.5964 47.2845 14.8231" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.1139 19.6899C44.1606 20.0566 42.9773 20.3133 41.6973 20.5299" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M46.0277 20.5298C46.0277 20.3298 46.011 20.1198 45.9877 19.9198C45.961 19.6931 45.9244 19.4798 45.8877 19.3098" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M45.9443 21.8699L49.0943 25.0199" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M46.0273 19.9131L51.1473 25.0331" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.4814 13.6999C42.8314 13.7065 42.8248 13.6832 43.2581 13.5999" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.2939 13.5964C22.2073 13.7631 21.9373 13.6898 22.3306 13.7364" stroke="#002140" stroke-width="0.999999" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 440350895826..c8a14c7aba03 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -35,6 +35,7 @@ import ConciergeNew from '@assets/images/simple-illustrations/simple-illustratio
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
@@ -60,6 +61,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    HotDogStand,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 681224a411ff..305cffe6bd73 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -13,7 +13,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
     return (
         <Section
             title={translate('workspace.card.createAWorkspace')}
-            icon={Illustrations.CreditCardsNew}
+            icon={Illustrations.HotDogStand}
             iconPosition="top"
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
             subtitleMuted

From bf42670a2067db6f832809789f4c34bbb24c0e20 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:38:17 +0100
Subject: [PATCH 075/244] Approved spanish translations

---
 src/languages/es.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/es.ts b/src/languages/es.ts
index 1e7bd4fca3b3..7d6357e48860 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1514,8 +1514,8 @@ export default {
             benefit4: 'Límites personalizables',
             addWorkEmail: 'Añadir correo electrónico de trabajo',
             checkingDomain: '¡Un momento! Estamos todavía trabajando para habilitar tu Tarjeta Expensify. Vuelve aquí en unos minutos.',
-            createAWorkspace: 'Crear un espacio de trabajo',
-            createAWorkspaceCopy: 'Administre gastos comerciales, emita tarjetas, envíe facturas y más.',
+            createAWorkspace: 'Crea un espacio de trabajo',
+            createAWorkspaceCopy: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
             createAWorkspaceCTA: 'Comenzar',
         },
         reimburse: {

From d76eeef4b99ce6d0a3bf355add7691980b6a442b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 5 Dec 2023 12:44:23 +0100
Subject: [PATCH 076/244] Revert color changes

---
 src/styles/styles.ts         | 4 ----
 src/styles/themes/default.ts | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 45d13e528edd..983f1ba82caa 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -313,10 +313,6 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.appBG,
         },
 
-        bordersBG: {
-            backgroundColor: colors.darkBorders,
-        },
-
         h4: {
             fontFamily: fontFamily.EXP_NEUE_BOLD,
             fontSize: variables.fontSizeLabel,
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index a09b2eb56888..519e818054e0 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -44,7 +44,7 @@ const darkTheme = {
     hoverComponentBG: colors.darkHighlightBackground,
     activeComponentBG: colors.darkBorders,
     signInSidebar: colors.green800,
-    sidebar: colors.darkAppBackground,
+    sidebar: colors.darkHighlightBackground,
     sidebarHover: colors.darkAppBackground,
     heading: colors.darkPrimaryText,
     textLight: colors.darkPrimaryText,

From 8231d4f6c7c9b69a46425a7cdb08506bbe024810 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 6 Dec 2023 20:50:26 +0700
Subject: [PATCH 077/244] fix infinite loading when deleting money report

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

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index c5f8e2b883dc..d8c8734bb362 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -186,10 +186,12 @@ function ReportScreen({
 
     const isTopMostReportId = currentReportID === getReportID(route);
     const didSubscribeToReportLeavingEvents = useRef(false);
+
     useEffect(() => {
-        if (report && report.reportID && !shouldHideReport) {
-            wasReportAccessibleRef.current = true;
+        if (!report || !report.reportID || shouldHideReport) {
+            return;
         }
+        wasReportAccessibleRef.current = true;
     }, [shouldHideReport, report]);
 
     const goBack = useCallback(() => {
@@ -311,7 +313,6 @@ function ReportScreen({
         const onyxReportID = report.reportID;
         const prevOnyxReportID = prevReport.reportID;
         const routeReportID = getReportID(route);
-
         // Navigate to the Concierge chat if the room was removed from another device (e.g. user leaving a room or removed from a room)
         if (
             // non-optimistic case
@@ -321,7 +322,8 @@ function ReportScreen({
                 prevOnyxReportID === routeReportID &&
                 !onyxReportID &&
                 prevReport.statusNum === CONST.REPORT.STATUS.OPEN &&
-                (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM)))
+                (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM))) ||
+            (ReportUtils.isMoneyRequest(prevReport) && _.isEqual(report, defaultProps.report))
         ) {
             Navigation.dismissModal();
             if (Navigation.getTopmostReportId() === prevOnyxReportID) {

From 32b89be8f40a358ed9ad61c517f47e357324c286 Mon Sep 17 00:00:00 2001
From: s-alves10 <sangar.work1028@gmail.com>
Date: Wed, 6 Dec 2023 16:24:39 -0600
Subject: [PATCH 078/244] fix: change onyxFocused state on umount instead of
 deleteDraft

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

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 1ed5db385f7a..bf8a871fa888 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -190,6 +190,9 @@ function ReportActionItemMessageEdit(props) {
         }
 
         return () => {
+            InputFocus.callback(() => setIsFocused(false));
+            InputFocus.inputFocusChange(false);
+
             // Skip if the current report action is not active
             if (!isActive()) {
                 return;
@@ -286,8 +289,6 @@ function ReportActionItemMessageEdit(props) {
      * Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content.
      */
     const deleteDraft = useCallback(() => {
-        InputFocus.callback(() => setIsFocused(false));
-        InputFocus.inputFocusChange(false);
         debouncedSaveDraft.cancel();
         Report.saveReportActionDraft(props.reportID, props.action, '');
 

From 512de40902e2d00f4e58891c0b7b3045dbd6fe56 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Fri, 8 Dec 2023 13:08:23 +0100
Subject: [PATCH 079/244] [TS migration] Migrate 'ReportActionItemMessage.js'
 component

---
 src/libs/ReportUtils.ts                       |   6 +-
 .../home/report/ReportActionItemMessage.js    | 101 ------------------
 .../home/report/ReportActionItemMessage.tsx   |  93 ++++++++++++++++
 src/types/onyx/OriginalMessage.ts             |   4 +-
 src/types/onyx/ReportAction.ts                |   3 +
 5 files changed, 102 insertions(+), 105 deletions(-)
 delete mode 100644 src/pages/home/report/ReportActionItemMessage.js
 create mode 100644 src/pages/home/report/ReportActionItemMessage.tsx

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 608c4333ab0f..a6393780d2a7 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1000,16 +1000,16 @@ function isOneOnOneChat(report: OnyxEntry<Report>): boolean {
 /**
  * Get the report given a reportID
  */
-function getReport(reportID: string | undefined): OnyxEntry<Report> | EmptyObject {
+function getReport(reportID: string | undefined): OnyxEntry<Report> {
     /**
      * Using typical string concatenation here due to performance issues
      * with template literals.
      */
     if (!allReports) {
-        return {};
+        return null;
     }
 
-    return allReports?.[ONYXKEYS.COLLECTION.REPORT + reportID] ?? {};
+    return allReports?.[ONYXKEYS.COLLECTION.REPORT + reportID] ?? null;
 }
 
 /**
diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
deleted file mode 100644
index 2265530f29a1..000000000000
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Text, View} from 'react-native';
-import _ from 'underscore';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import ReportActionItemFragment from './ReportActionItemFragment';
-import reportActionPropTypes from './reportActionPropTypes';
-
-const propTypes = {
-    /** The report action */
-    action: PropTypes.shape(reportActionPropTypes).isRequired,
-
-    /** Should the comment have the appearance of being grouped with the previous comment? */
-    displayAsGroup: PropTypes.bool.isRequired,
-
-    /** Additional styles to add after local styles. */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    /** Whether or not the message is hidden by moderation */
-    isHidden: PropTypes.bool,
-
-    /** The ID of the report */
-    reportID: PropTypes.string.isRequired,
-
-    /** localization props */
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    style: [],
-    isHidden: false,
-};
-
-function ReportActionItemMessage(props) {
-    const styles = useThemeStyles();
-    const fragments = _.compact(props.action.previousMessage || props.action.message);
-    const isIOUReport = ReportActionsUtils.isMoneyRequestAction(props.action);
-    let iouMessage;
-    if (isIOUReport) {
-        const iouReportID = lodashGet(props.action, 'originalMessage.IOUReportID');
-        if (iouReportID) {
-            iouMessage = ReportUtils.getReportPreviewMessage(ReportUtils.getReport(iouReportID), props.action);
-        }
-    }
-
-    const isApprovedOrSubmittedReportAction = _.contains([CONST.REPORT.ACTIONS.TYPE.APPROVED, CONST.REPORT.ACTIONS.TYPE.SUBMITTED], props.action.actionName);
-
-    /**
-     * Get the ReportActionItemFragments
-     * @param {Boolean} shouldWrapInText determines whether the fragments are wrapped in a Text component
-     * @returns {Object} report action item fragments
-     */
-    const renderReportActionItemFragments = (shouldWrapInText) => {
-        const reportActionItemFragments = _.map(fragments, (fragment, index) => (
-            <ReportActionItemFragment
-                key={`actionFragment-${props.action.reportActionID}-${index}`}
-                fragment={fragment}
-                iouMessage={iouMessage}
-                isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(props.action, props.reportID)}
-                attachmentInfo={props.action.attachmentInfo}
-                pendingAction={props.action.pendingAction}
-                source={lodashGet(props.action, 'originalMessage.source')}
-                accountID={props.action.actorAccountID}
-                style={props.style}
-                displayAsGroup={props.displayAsGroup}
-                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
-                // Since system messages from Old Dot begin with the person who performed the action,
-                // the first fragment will contain the person's display name and their email. We'll use this
-                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
-                // formatting.
-                isFragmentContainingDisplayName={index === 0}
-            />
-        ));
-
-        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
-        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
-
-        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
-    };
-
-    return (
-        <View style={[styles.chatItemMessage, ...props.style]}>
-            {!props.isHidden ? (
-                renderReportActionItemFragments(isApprovedOrSubmittedReportAction)
-            ) : (
-                <Text style={[styles.textLabelSupporting, styles.lh20]}>{props.translate('moderation.flaggedContent')}</Text>
-            )}
-        </View>
-    );
-}
-
-ReportActionItemMessage.propTypes = propTypes;
-ReportActionItemMessage.defaultProps = defaultProps;
-ReportActionItemMessage.displayName = 'ReportActionItemMessage';
-
-export default withLocalize(ReportActionItemMessage);
diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx
new file mode 100644
index 000000000000..4f70e98d44b9
--- /dev/null
+++ b/src/pages/home/report/ReportActionItemMessage.tsx
@@ -0,0 +1,93 @@
+import React, {ReactElement} from 'react';
+import {StyleProp, Text, View, ViewStyle} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+import {ReportAction} from '@src/types/onyx';
+import {OriginalMessageAddComment} from '@src/types/onyx/OriginalMessage';
+import ReportActionItemFragment from './ReportActionItemFragment';
+
+type ReportActionItemMessageProps = {
+    /** The report action */
+    action: ReportAction;
+
+    /** Should the comment have the appearance of being grouped with the previous comment? */
+    displayAsGroup: boolean;
+
+    /** Additional styles to add after local styles. */
+    style?: StyleProp<ViewStyle>;
+
+    /** Whether or not the message is hidden by moderation */
+    isHidden?: boolean;
+
+    /** The ID of the report */
+    reportID: string;
+};
+
+function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHidden = false}: ReportActionItemMessageProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const fragments = (action.previousMessage ?? action.message ?? []).filter((item) => !!item);
+    const isIOUReport = ReportActionsUtils.isMoneyRequestAction(action);
+    let iouMessage: string | undefined;
+    if (isIOUReport) {
+        const originalMessage = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? action.originalMessage : null;
+        const iouReportID = originalMessage?.IOUReportID;
+        if (iouReportID) {
+            iouMessage = ReportUtils.getReportPreviewMessage(ReportUtils.getReport(iouReportID), action);
+        }
+    }
+
+    const isApprovedOrSubmittedReportAction = [CONST.REPORT.ACTIONS.TYPE.APPROVED, CONST.REPORT.ACTIONS.TYPE.SUBMITTED].some((type) => type === action.actionName);
+
+    /**
+     * Get the ReportActionItemFragments
+     * @param shouldWrapInText determines whether the fragments are wrapped in a Text component
+     * @returns report action item fragments
+     */
+    const renderReportActionItemFragments = (shouldWrapInText: boolean): ReactElement | ReactElement[] => {
+        const reportActionItemFragments = fragments.map((fragment, index) => (
+            <ReportActionItemFragment
+                /* eslint-disable-next-line react/no-array-index-key */
+                key={`actionFragment-${action.reportActionID}-${index}`}
+                fragment={fragment}
+                iouMessage={iouMessage}
+                isThreadParentMessage={ReportActionsUtils.isThreadParentMessage(action, reportID)}
+                attachmentInfo={action.attachmentInfo}
+                pendingAction={action.pendingAction}
+                source={(action.originalMessage as OriginalMessageAddComment['originalMessage'])?.source}
+                accountID={action.actorAccountID}
+                style={style}
+                displayAsGroup={displayAsGroup}
+                isApprovedOrSubmittedReportAction={isApprovedOrSubmittedReportAction}
+                // Since system messages from Old Dot begin with the person who performed the action,
+                // the first fragment will contain the person's display name and their email. We'll use this
+                // to decide if the fragment should be from left to right for RTL display names e.g. Arabic for proper
+                // formatting.
+                isFragmentContainingDisplayName={index === 0}
+            />
+        ));
+
+        // Approving or submitting reports in oldDot results in system messages made up of multiple fragments of `TEXT` type
+        // which we need to wrap in `<Text>` to prevent them rendering on separate lines.
+
+        return shouldWrapInText ? <Text style={styles.ltr}>{reportActionItemFragments}</Text> : reportActionItemFragments;
+    };
+
+    return (
+        <View style={[styles.chatItemMessage, style]}>
+            {!isHidden ? (
+                renderReportActionItemFragments(isApprovedOrSubmittedReportAction)
+            ) : (
+                <Text style={[styles.textLabelSupporting, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
+            )}
+        </View>
+    );
+}
+
+ReportActionItemMessage.displayName = 'ReportActionItemMessage';
+
+export default ReportActionItemMessage;
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index f76fbd5ffd7d..c44589a4a105 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -24,6 +24,7 @@ type OriginalMessageApproved = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.APPROVED;
     originalMessage: unknown;
 };
+type OriginalMessageSource = 'Chronos' | 'email' | 'ios' | 'android' | 'web' | '';
 
 type IOUDetails = {
     amount: number;
@@ -94,6 +95,7 @@ type OriginalMessageAddComment = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT;
     originalMessage: {
         html: string;
+        source?: OriginalMessageSource;
         lastModified?: string;
         taskReportID?: string;
         edits?: string[];
@@ -231,4 +233,4 @@ type OriginalMessage =
     | OriginalMessageMoved;
 
 export default OriginalMessage;
-export type {ChronosOOOEvent, Decision, Reaction, ActionName, IOUMessage, Closed, OriginalMessageActionName, ChangeLog};
+export type {ChronosOOOEvent, Decision, Reaction, ActionName, IOUMessage, Closed, OriginalMessageActionName, ChangeLog, OriginalMessageAddComment};
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index a0e90f4e9c34..ee4345f50071 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -79,6 +79,9 @@ type ReportActionBase = {
     /** report action message */
     message?: Message[];
 
+    /** previous report action message */
+    previousMessage?: Message[];
+
     /** Whether we have received a response back from the server */
     isLoading?: boolean;
 

From 8ad959ad0a5507b4b940cef05c4588cc67fc15ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Fija=C5=82kiewicz?= <piotr.fjj@gmail.com>
Date: Fri, 8 Dec 2023 14:56:15 +0100
Subject: [PATCH 080/244] bring back accidentally deleted code

---
 src/pages/SearchPage.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 817fb7a231d1..68724b51e796 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -189,6 +189,8 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
                             showTitleTooltip
                             shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            shouldShowReferralCTA
+                            referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}
                             textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                             onLayout={searchRendered}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}

From e307df9285066974f117ce2bbd028a546c6ae84d Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 8 Dec 2023 16:13:13 +0100
Subject: [PATCH 081/244] migrate from class based component to functional

---
 .../workspace/WorkspaceInviteMessagePage.js   | 252 +++++++-----------
 1 file changed, 98 insertions(+), 154 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 6d761b1130a8..e8dd1257b01b 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -18,7 +18,6 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigationFocus from '@components/withNavigationFocus';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
-import * as Localize from '@libs/Localize';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -71,181 +70,126 @@ const defaultProps = {
     invitedEmailsToAccountIDsDraft: {},
 };
 
-class WorkspaceInviteMessagePage extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.sendInvitation = this.sendInvitation.bind(this);
-        this.validate = this.validate.bind(this);
-        this.openPrivacyURL = this.openPrivacyURL.bind(this);
-        this.debouncedSaveDraf = _.debounce((newDraft) => {
-            Policy.setWorkspaceInviteMessageDraft(this.props.route.params.policyID, newDraft);
-        }, 2000);
-        this.state = {
-            welcomeNote: this.props.workspaceInviteMessageDraft || this.getDefaultWelcomeNote(),
-        };
-    }
-
-    componentDidMount() {
-        if (_.isEmpty(this.props.invitedEmailsToAccountIDsDraft)) {
-            Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(this.props.route.params.policyID), true);
-            return;
-        }
-        this.focusWelcomeMessageInput();
+function WorkspaceInviteMessagePage(props) {
+    if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
+        Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true);
+        return;
     }
 
-    componentDidUpdate(prevProps) {
-        if (!prevProps.isFocused && this.props.isFocused) {
-            this.focusWelcomeMessageInput();
-        }
-
-        if (
-            !(
-                (prevProps.preferredLocale !== this.props.preferredLocale || prevProps.policy.name !== this.props.policy.name) &&
-                this.state.welcomeNote === Localize.translate(prevProps.preferredLocale, 'workspace.inviteMessage.welcomeNote', {workspaceName: prevProps.policy.name})
-            )
-        ) {
-            return;
-        }
-        this.setState({welcomeNote: this.getDefaultWelcomeNote()});
-    }
-
-    componentWillUnmount() {
-        if (!this.focusTimeout) {
-            return;
-        }
-        clearTimeout(this.focusTimeout);
-    }
+    const saveDraft = (newDraft) => {
+        Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft);
+    };
 
-    getDefaultWelcomeNote() {
-        return this.props.translate('workspace.inviteMessage.welcomeNote', {
-            workspaceName: this.props.policy.name,
+    const getDefaultWelcomeNote = () =>
+        props.translate('workspace.inviteMessage.welcomeNote', {
+            workspaceName: props.policy.name,
         });
-    }
 
-    sendInvitation() {
+    const welcomeMessage = props.workspaceInviteMessageDraft || getDefaultWelcomeNote();
+
+    const sendInvitation = () => {
         Keyboard.dismiss();
-        Policy.addMembersToWorkspace(this.props.invitedEmailsToAccountIDsDraft, this.state.welcomeNote, this.props.route.params.policyID);
-        Policy.setWorkspaceInviteMembersDraft(this.props.route.params.policyID, {});
+        Policy.addMembersToWorkspace(props.invitedEmailsToAccountIDsDraft, welcomeMessage, props.route.params.policyID);
+        Policy.setWorkspaceInviteMembersDraft(props.route.params.policyID, {});
         // Pop the invite message page before navigating to the members page.
         Navigation.goBack(ROUTES.HOME);
-        Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(this.props.route.params.policyID));
-    }
+        Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(props.route.params.policyID));
+    };
 
     /**
      * Opens privacy url as an external link
      * @param {Object} event
      */
-    openPrivacyURL(event) {
+    const openPrivacyURL = (event) => {
         event.preventDefault();
         Link.openExternalLink(CONST.PRIVACY_URL);
-    }
-
-    focusWelcomeMessageInput() {
-        this.focusTimeout = setTimeout(() => {
-            this.welcomeMessageInputRef.focus();
-            // Below condition is needed for web, desktop and mweb only, for native cursor is set at end by default.
-            if (this.welcomeMessageInputRef.value && this.welcomeMessageInputRef.setSelectionRange) {
-                const length = this.welcomeMessageInputRef.value.length;
-                this.welcomeMessageInputRef.setSelectionRange(length, length);
-            }
-        }, CONST.ANIMATED_TRANSITION);
-    }
+    };
 
-    validate() {
+    const validate = () => {
         const errorFields = {};
-        if (_.isEmpty(this.props.invitedEmailsToAccountIDsDraft)) {
+        if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
             errorFields.welcomeMessage = 'workspace.inviteMessage.inviteNoMembersError';
         }
         return errorFields;
-    }
-
-    render() {
-        const policyName = lodashGet(this.props.policy, 'name');
-
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                testID={WorkspaceInviteMessagePage.displayName}
+    };
+
+    const policyName = lodashGet(props.policy, 'name');
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={WorkspaceInviteMessagePage.displayName}
+        >
+            <FullPageNotFoundView
+                shouldShow={_.isEmpty(props.policy) || !PolicyUtils.isPolicyAdmin(props.policy) || PolicyUtils.isPendingDeletePolicy(props.policy)}
+                subtitleKey={_.isEmpty(props.policy) ? undefined : 'workspace.common.notAuthorized'}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             >
-                <FullPageNotFoundView
-                    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)}
+                <HeaderWithBackButton
+                    title={props.translate('workspace.inviteMessage.inviteMessageTitle')}
+                    subtitle={policyName}
+                    shouldShowGetAssistanceButton
+                    guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
+                    shouldShowBackButton
+                    onCloseButtonPress={() => Navigation.dismissModal()}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID))}
+                />
+
+                <FormProvider
+                    style={[props.themeStyles.flexGrow1, props.themeStyles.ph5]}
+                    formID={ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}
+                    validate={validate}
+                    onSubmit={sendInvitation}
+                    submitButtonText={props.translate('common.invite')}
+                    enabledWhenOffline
+                    footerContent={
+                        <PressableWithoutFeedback
+                            onPress={openPrivacyURL}
+                            role={CONST.ACCESSIBILITY_ROLE.LINK}
+                            accessibilityLabel={props.translate('common.privacy')}
+                            href={CONST.PRIVACY_URL}
+                            style={[props.themeStyles.mv2, props.themeStyles.alignSelfStart]}
+                        >
+                            <View style={[props.themeStyles.flexRow]}>
+                                <Text style={[props.themeStyles.mr1, props.themeStyles.label, props.themeStyles.link]}>{props.translate('common.privacy')}</Text>
+                            </View>
+                        </PressableWithoutFeedback>
+                    }
                 >
-                    <HeaderWithBackButton
-                        title={this.props.translate('workspace.inviteMessage.inviteMessageTitle')}
-                        subtitle={policyName}
-                        shouldShowGetAssistanceButton
-                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                        shouldShowBackButton
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(this.props.route.params.policyID))}
-                    />
-
-                    <FormProvider
-                        style={[this.props.themeStyles.flexGrow1, this.props.themeStyles.ph5]}
-                        formID={ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}
-                        validate={this.validate}
-                        onSubmit={this.sendInvitation}
-                        submitButtonText={this.props.translate('common.invite')}
-                        enabledWhenOffline
-                        footerContent={
-                            <PressableWithoutFeedback
-                                onPress={this.openPrivacyURL}
-                                role={CONST.ACCESSIBILITY_ROLE.LINK}
-                                accessibilityLabel={this.props.translate('common.privacy')}
-                                href={CONST.PRIVACY_URL}
-                                style={[this.props.themeStyles.mv2, this.props.themeStyles.alignSelfStart]}
-                            >
-                                <View style={[this.props.themeStyles.flexRow]}>
-                                    <Text style={[this.props.themeStyles.mr1, this.props.themeStyles.label, this.props.themeStyles.link]}>{this.props.translate('common.privacy')}</Text>
-                                </View>
-                            </PressableWithoutFeedback>
-                        }
-                    >
-                        <View style={[this.props.themeStyles.mv4, this.props.themeStyles.justifyContentCenter, this.props.themeStyles.alignItemsCenter]}>
-                            <MultipleAvatars
-                                size={CONST.AVATAR_SIZE.LARGE}
-                                icons={OptionsListUtils.getAvatarsForAccountIDs(
-                                    _.values(this.props.invitedEmailsToAccountIDsDraft),
-                                    this.props.allPersonalDetails,
-                                    this.props.invitedEmailsToAccountIDsDraft,
-                                )}
-                                shouldStackHorizontally
-                                shouldDisplayAvatarsInRows
-                                secondAvatarStyle={[this.props.themeStyles.secondAvatarInline]}
-                            />
-                        </View>
-                        <View style={[this.props.themeStyles.mb5]}>
-                            <Text>{this.props.translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
-                        </View>
-                        <View style={[this.props.themeStyles.mb3]}>
-                            <InputWrapper
-                                InputComponent={TextInput}
-                                ref={(el) => (this.welcomeMessageInputRef = el)}
-                                role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                                inputID="welcomeMessage"
-                                label={this.props.translate('workspace.inviteMessage.personalMessagePrompt')}
-                                accessibilityLabel={this.props.translate('workspace.inviteMessage.personalMessagePrompt')}
-                                autoCompleteType="off"
-                                autoCorrect={false}
-                                autoGrowHeight
-                                inputStyle={[this.props.themeStyles.verticalAlignTop]}
-                                containerStyles={[this.props.themeStyles.autoGrowHeightMultilineInput]}
-                                defaultValue={this.state.welcomeNote}
-                                value={this.state.welcomeNote}
-                                onChangeText={(text) => {
-                                    this.debouncedSaveDraf(text);
-                                    this.setState({welcomeNote: text});
-                                }}
-                            />
-                        </View>
-                    </FormProvider>
-                </FullPageNotFoundView>
-            </ScreenWrapper>
-        );
-    }
+                    <View style={[props.themeStyles.mv4, props.themeStyles.justifyContentCenter, props.themeStyles.alignItemsCenter]}>
+                        <MultipleAvatars
+                            size={CONST.AVATAR_SIZE.LARGE}
+                            icons={OptionsListUtils.getAvatarsForAccountIDs(_.values(props.invitedEmailsToAccountIDsDraft), props.allPersonalDetails, props.invitedEmailsToAccountIDsDraft)}
+                            shouldStackHorizontally
+                            shouldDisplayAvatarsInRows
+                            secondAvatarStyle={[props.themeStyles.secondAvatarInline]}
+                        />
+                    </View>
+                    <View style={[props.themeStyles.mb5]}>
+                        <Text>{props.translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
+                    </View>
+                    <View style={[props.themeStyles.mb3]}>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                            inputID="welcomeMessage"
+                            label={props.translate('workspace.inviteMessage.personalMessagePrompt')}
+                            accessibilityLabel={props.translate('workspace.inviteMessage.personalMessagePrompt')}
+                            autoCompleteType="off"
+                            autoCorrect={false}
+                            autoGrowHeight
+                            inputStyle={[props.themeStyles.verticalAlignTop]}
+                            containerStyles={[props.themeStyles.autoGrowHeightMultilineInput]}
+                            value={welcomeMessage}
+                            onChangeText={(text) => {
+                                saveDraft(text);
+                            }}
+                        />
+                    </View>
+                </FormProvider>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
 }
 
 WorkspaceInviteMessagePage.propTypes = propTypes;

From 8164342608fa099725d8759f65f098b9b9449050 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 11 Dec 2023 10:30:48 +0100
Subject: [PATCH 082/244] Update type imports

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

diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx
index 4f70e98d44b9..81742a47dcde 100644
--- a/src/pages/home/report/ReportActionItemMessage.tsx
+++ b/src/pages/home/report/ReportActionItemMessage.tsx
@@ -5,8 +5,8 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import {ReportAction} from '@src/types/onyx';
-import {OriginalMessageAddComment} from '@src/types/onyx/OriginalMessage';
+import type {ReportAction} from '@src/types/onyx';
+import type {OriginalMessageAddComment} from '@src/types/onyx/OriginalMessage';
 import ReportActionItemFragment from './ReportActionItemFragment';
 
 type ReportActionItemMessageProps = {

From bfbbe952acd05949f0cb295923d63743f5810f3a Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Mon, 11 Dec 2023 11:23:54 +0100
Subject: [PATCH 083/244] Add type predicate to isEmptyObject function

---
 src/libs/ReportUtils.ts        | 8 ++++----
 src/types/utils/EmptyObject.ts | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index a6393780d2a7..53eaeb3d00b8 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1000,16 +1000,16 @@ function isOneOnOneChat(report: OnyxEntry<Report>): boolean {
 /**
  * Get the report given a reportID
  */
-function getReport(reportID: string | undefined): OnyxEntry<Report> {
+function getReport(reportID: string | undefined): OnyxEntry<Report> | EmptyObject {
     /**
      * Using typical string concatenation here due to performance issues
      * with template literals.
      */
     if (!allReports) {
-        return null;
+        return {};
     }
 
-    return allReports?.[ONYXKEYS.COLLECTION.REPORT + reportID] ?? null;
+    return allReports?.[ONYXKEYS.COLLECTION.REPORT + reportID] ?? {};
 }
 
 /**
@@ -1922,7 +1922,7 @@ function getTransactionReportName(reportAction: OnyxEntry<ReportAction>): string
  * @param [reportAction] This can be either a report preview action or the IOU action
  */
 function getReportPreviewMessage(
-    report: OnyxEntry<Report>,
+    report: OnyxEntry<Report> | EmptyObject,
     reportAction: OnyxEntry<ReportAction> | EmptyObject = {},
     shouldConsiderReceiptBeingScanned = false,
     isPreviewMessageForParentChatReport = false,
diff --git a/src/types/utils/EmptyObject.ts b/src/types/utils/EmptyObject.ts
index 9b9f3244a5f8..8cb1ff6db2a2 100644
--- a/src/types/utils/EmptyObject.ts
+++ b/src/types/utils/EmptyObject.ts
@@ -7,7 +7,7 @@ function isNotEmptyObject<T extends Record<string, unknown> | Falsy>(arg: T | Em
     return Object.keys(arg ?? {}).length > 0;
 }
 
-function isEmptyObject<T>(obj: T): boolean {
+function isEmptyObject<T>(obj: T | EmptyObject | null | undefined): obj is EmptyObject {
     return Object.keys(obj ?? {}).length === 0;
 }
 

From 0b91ff11fe572dda9809b993cf8215694e9a2fdc Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:36:59 +0100
Subject: [PATCH 084/244] add timeoutRef clear on unmount

---
 src/pages/workspace/WorkspaceInviteMessagePage.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 7ae3e9f16897..164a2d6f2ffb 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -75,6 +75,13 @@ function WorkspaceInviteMessagePage(props) {
     const focusTimeoutRef = useRef();
     const welcomeMessageInputRef = useRef(null);
 
+    useEffect(
+        () => () => {
+            clearTimeout(focusTimeoutRef.current);
+        },
+        [],
+    );
+
     const focusWelcomeMessageInput = () => {
         focusTimeoutRef.current = setTimeout(() => {
             welcomeMessageInputRef.current.focus();

From 103821be9d3ba154ee046efc36742ac13f15da62 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 11 Dec 2023 15:39:51 +0100
Subject: [PATCH 085/244] migrate LinkPreviewer to typescript

---
 src/pages/home/report/LinkPreviewer.js  | 139 ------------------------
 src/pages/home/report/LinkPreviewer.tsx | 120 ++++++++++++++++++++
 2 files changed, 120 insertions(+), 139 deletions(-)
 delete mode 100644 src/pages/home/report/LinkPreviewer.js
 create mode 100644 src/pages/home/report/LinkPreviewer.tsx

diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
deleted file mode 100644
index 5c16d5596774..000000000000
--- a/src/pages/home/report/LinkPreviewer.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import {uniqBy} from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Image, View} from 'react-native';
-import _ from 'underscore';
-import Text from '@components/Text';
-import TextLink from '@components/TextLink';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
-import variables from '@styles/variables';
-
-const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
-const MAX_IMAGE_HEIGHT = 180;
-const MAX_IMAGE_WIDTH = 340;
-
-const propTypes = {
-    /** Data about links provided in message. */
-    linkMetadata: PropTypes.arrayOf(
-        PropTypes.shape({
-            /**  The URL of the link. */
-            url: PropTypes.string,
-
-            /**  A description of the link. */
-            description: PropTypes.string,
-
-            /**  The title of the link. */
-            title: PropTypes.string,
-
-            /**  The publisher of the link. */
-            publisher: PropTypes.string,
-
-            /**  The image associated with the link. */
-            image: PropTypes.shape({
-                /**  The height of the image. */
-                height: PropTypes.number,
-
-                /**  The width of the image. */
-                width: PropTypes.number,
-
-                /**  The URL of the image. */
-                url: PropTypes.string,
-            }),
-
-            /**  The provider logo associated with the link. */
-            logo: PropTypes.shape({
-                /**  The height of the logo. */
-                height: PropTypes.number,
-
-                /**  The width of the logo. */
-                width: PropTypes.number,
-
-                /**  The URL of the logo. */
-                url: PropTypes.string,
-            }),
-        }),
-    ),
-
-    /** Maximum amount of visible link previews. -1 means unlimited amount of previews */
-    maxAmountOfPreviews: PropTypes.number,
-};
-
-const defaultProps = {
-    linkMetadata: [],
-    maxAmountOfPreviews: -1,
-};
-
-function LinkPreviewer(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
-    return _.map(
-        _.take(uniqBy(props.linkMetadata, 'url'), props.maxAmountOfPreviews >= 0 ? Math.min(props.maxAmountOfPreviews, props.linkMetadata.length) : props.linkMetadata.length),
-        (linkData) => {
-            if (_.isArray(linkData)) {
-                return;
-            }
-            const {description, image, title, logo, publisher, url} = linkData;
-
-            return (
-                linkData && (
-                    <View
-                        style={styles.linkPreviewWrapper}
-                        key={url}
-                    >
-                        <View style={styles.flexRow}>
-                            {!_.isEmpty(logo) && (
-                                <Image
-                                    style={styles.linkPreviewLogoImage}
-                                    source={{uri: logo.url}}
-                                />
-                            )}
-                            {!_.isEmpty(publisher) && (
-                                <Text
-                                    fontSize={variables.fontSizeLabel}
-                                    style={styles.pl2}
-                                >
-                                    {publisher}
-                                </Text>
-                            )}
-                        </View>
-                        {!_.isEmpty(title) && (
-                            <TextLink
-                                fontSize={variables.fontSizeNormal}
-                                style={[styles.mv2, StyleUtils.getTextColorStyle(theme.link), styles.alignSelfStart]}
-                                href={url}
-                            >
-                                {title}
-                            </TextLink>
-                        )}
-                        {!_.isEmpty(description) && <Text fontSize={variables.fontSizeNormal}>{description}</Text>}
-                        {!_.isEmpty(image) && IMAGE_TYPES.includes(image.type) && (
-                            <Image
-                                style={[
-                                    styles.linkPreviewImage,
-                                    {
-                                        aspectRatio: image.width / image.height,
-                                        maxHeight: Math.min(image.height, MAX_IMAGE_HEIGHT),
-
-                                        // Calculate maximum width when image is too tall, so it doesn't move away from left
-                                        maxWidth: Math.min((Math.min(image.height, MAX_IMAGE_HEIGHT) / image.height) * image.width, MAX_IMAGE_WIDTH),
-                                    },
-                                ]}
-                                resizeMode="contain"
-                                source={{uri: image.url}}
-                            />
-                        )}
-                    </View>
-                )
-            );
-        },
-    );
-}
-
-LinkPreviewer.propTypes = propTypes;
-LinkPreviewer.defaultProps = defaultProps;
-LinkPreviewer.displayName = 'ReportLinkPreview';
-
-export default LinkPreviewer;
diff --git a/src/pages/home/report/LinkPreviewer.tsx b/src/pages/home/report/LinkPreviewer.tsx
new file mode 100644
index 000000000000..c9f50ec91a48
--- /dev/null
+++ b/src/pages/home/report/LinkPreviewer.tsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import {Image, View} from 'react-native';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useTheme from '@styles/themes/useTheme';
+import useStyleUtils from '@styles/useStyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
+import variables from '@styles/variables';
+
+const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
+const MAX_IMAGE_HEIGHT = 180;
+const MAX_IMAGE_WIDTH = 340;
+
+type ImageData = {
+    /** The height of the image. */
+    height: number;
+
+    /** The width of the image. */
+    width: number;
+
+    /** The URL of the image. */
+    url: string;
+
+    /** The type of the image. */
+    type?: string;
+};
+
+type LinkMetadata = {
+    /** The URL of the link. */
+    url?: string;
+
+    /** A description of the link. */
+    description?: string;
+
+    /** The title of the link. */
+    title?: string;
+
+    /** The publisher of the link. */
+    publisher?: string;
+
+    /** The image associated with the link. */
+    image?: ImageData;
+
+    /** The provider logo associated with the link. */
+    logo?: ImageData;
+};
+
+type LinkPreviewerProps = {
+    /** Data about links provided in message. */
+    linkMetadata?: LinkMetadata[];
+
+    /** Maximum amount of visible link previews. -1 means unlimited amount of previews */
+    maxAmountOfPreviews?: number;
+};
+
+function LinkPreviewer({linkMetadata = [], maxAmountOfPreviews = -1}: LinkPreviewerProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const uniqueLinks = linkMetadata.filter((link, index, self) => self.findIndex((t) => t.url === link.url) === index);
+    const linksToShow = uniqueLinks.slice(0, maxAmountOfPreviews >= 0 ? Math.min(maxAmountOfPreviews, linkMetadata.length) : linkMetadata.length);
+    return linksToShow.map((linkData) => {
+        const {description, image, title, logo, publisher, url} = linkData;
+        return (
+            linkData && (
+                <View
+                    style={styles.linkPreviewWrapper}
+                    key={url}
+                >
+                    <View style={styles.flexRow}>
+                        {logo && (
+                            <Image
+                                style={styles.linkPreviewLogoImage}
+                                source={{uri: logo.url}}
+                            />
+                        )}
+                        {publisher && (
+                            <Text
+                                fontSize={variables.fontSizeLabel}
+                                style={styles.pl2}
+                            >
+                                {publisher}
+                            </Text>
+                        )}
+                    </View>
+                    {title && url && (
+                        <TextLink
+                            fontSize={variables.fontSizeNormal}
+                            style={[styles.mv2, StyleUtils.getTextColorStyle(theme.link), styles.alignSelfStart]}
+                            href={url}
+                        >
+                            {title}
+                        </TextLink>
+                    )}
+                    {description && <Text fontSize={variables.fontSizeNormal}>{description}</Text>}
+                    {image?.type && IMAGE_TYPES.includes(image.type) && (
+                        <Image
+                            style={[
+                                styles.linkPreviewImage,
+                                {
+                                    aspectRatio: image.width / image.height,
+                                    maxHeight: Math.min(image.height, MAX_IMAGE_HEIGHT),
+
+                                    // Calculate maximum width when image is too tall, so it doesn't move away from left
+                                    maxWidth: Math.min((Math.min(image.height, MAX_IMAGE_HEIGHT) / image.height) * image.width, MAX_IMAGE_WIDTH),
+                                },
+                            ]}
+                            resizeMode="contain"
+                            source={{uri: image.url}}
+                        />
+                    )}
+                </View>
+            )
+        );
+    });
+}
+
+LinkPreviewer.displayName = 'ReportLinkPreview';
+
+export default LinkPreviewer;

From d3fb9ba8aa560937ab0bd058eefdd9c9d29b352d Mon Sep 17 00:00:00 2001
From: Yauheni Pasiukevich <pasyukevich@live.com>
Date: Fri, 1 Dec 2023 13:45:56 +0100
Subject: [PATCH 086/244] Migrate 'SpacerView.js' component to TypeScript

---
 .../{SpacerView.js => SpacerView.tsx}         | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)
 rename src/components/{SpacerView.js => SpacerView.tsx} (76%)

diff --git a/src/components/SpacerView.js b/src/components/SpacerView.tsx
similarity index 76%
rename from src/components/SpacerView.js
rename to src/components/SpacerView.tsx
index b9705a15b5f3..938036feb9ac 100644
--- a/src/components/SpacerView.js
+++ b/src/components/SpacerView.tsx
@@ -1,34 +1,25 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import usePrevious from '@hooks/usePrevious';
-import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 
-const propTypes = {
+type SpacerViewProps = {
     /**
      * Should we show the spacer
      */
-    shouldShow: PropTypes.bool.isRequired,
+    shouldShow: boolean;
 
     /**
      * Array of style objects
-     * @default []
      */
-    style: stylePropTypes,
+    style?: StyleProp<ViewStyle>;
 };
 
-const defaultProps = {
-    style: [],
-};
-
-function SpacerView({shouldShow = true, style = []}) {
-    const StyleUtils = useStyleUtils();
+function SpacerView({shouldShow = true, style = []}: SpacerViewProps) {
     const marginVertical = useSharedValue(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL);
     const borderBottomWidth = useSharedValue(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH);
     const prevShouldShow = usePrevious(shouldShow);
-
     const duration = CONST.ANIMATED_TRANSITION;
     const animatedStyles = useAnimatedStyle(() => ({
         borderBottomWidth: withTiming(borderBottomWidth.value, {duration}),
@@ -50,10 +41,8 @@ function SpacerView({shouldShow = true, style = []}) {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we only need to trigger when shouldShow prop is changed
     }, [shouldShow, prevShouldShow]);
 
-    return <Animated.View style={[animatedStyles, ...StyleUtils.parseStyleAsArray(style)]} />;
+    return <Animated.View style={[animatedStyles, style]} />;
 }
 
 SpacerView.displayName = 'SpacerView';
-SpacerView.propTypes = propTypes;
-SpacerView.defaultProps = defaultProps;
 export default SpacerView;

From 426973c85c2c6000978c711972918038dc090b64 Mon Sep 17 00:00:00 2001
From: Yauheni Pasiukevich <pasyukevich@live.com>
Date: Mon, 4 Dec 2023 17:48:29 +0100
Subject: [PATCH 087/244] apply comments

---
 src/components/SpacerView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/SpacerView.tsx b/src/components/SpacerView.tsx
index 938036feb9ac..4c54aef61ba2 100644
--- a/src/components/SpacerView.tsx
+++ b/src/components/SpacerView.tsx
@@ -16,9 +16,9 @@ type SpacerViewProps = {
     style?: StyleProp<ViewStyle>;
 };
 
-function SpacerView({shouldShow = true, style = []}: SpacerViewProps) {
-    const marginVertical = useSharedValue(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL);
-    const borderBottomWidth = useSharedValue(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH);
+function SpacerView({shouldShow, style}: SpacerViewProps) {
+    const marginVertical = useSharedValue<number>(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL);
+    const borderBottomWidth = useSharedValue<number>(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH);
     const prevShouldShow = usePrevious(shouldShow);
     const duration = CONST.ANIMATED_TRANSITION;
     const animatedStyles = useAnimatedStyle(() => ({
@@ -45,4 +45,5 @@ function SpacerView({shouldShow = true, style = []}: SpacerViewProps) {
 }
 
 SpacerView.displayName = 'SpacerView';
+
 export default SpacerView;

From f0022194f3376a48f12937f9d0442bd71238050c Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 12 Dec 2023 13:11:19 +0700
Subject: [PATCH 088/244] display modal after keyboard is hidden

---
 .../settings/Profile/Contacts/ContactMethodDetailsPage.js     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index b468607ed8f3..37219db10bfe 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -209,7 +209,9 @@ class ContactMethodDetailsPage extends Component {
      * @param {Boolean} isOpen
      */
     toggleDeleteModal(isOpen) {
-        this.setState({isDeleteModalOpen: isOpen});
+        InteractionManager.runAfterInteractions(() => {
+            this.setState({isDeleteModalOpen: isOpen});
+        });
         Keyboard.dismiss();
     }
 

From a19b7d4f3472d24c92217dc8002fb0b97b597c96 Mon Sep 17 00:00:00 2001
From: Yauheni Pasiukevich <pasyukevich@live.com>
Date: Wed, 6 Dec 2023 12:27:05 +0100
Subject: [PATCH 089/244] Migrate 'AnimatedEmptyStateBackground.js' component
 to TypeScript

---
 ...EmptyStateBackground.js => AnimatedEmptyStateBackground.tsx} | 0
 src/styles/utils/index.ts                                       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/pages/home/report/{AnimatedEmptyStateBackground.js => AnimatedEmptyStateBackground.tsx} (100%)

diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.tsx
similarity index 100%
rename from src/pages/home/report/AnimatedEmptyStateBackground.js
rename to src/pages/home/report/AnimatedEmptyStateBackground.tsx
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 8d52c8de200a..20c5eaf19eee 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -728,7 +728,7 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv
 /**
  * Gets the correct size for the empty state background image based on screen dimensions
  */
-function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ViewStyle {
+function getReportWelcomeBackgroundImageStyle(isSmallScreenWidth: boolean, isMoneyReport = false): ImageStyle {
     const emptyStateBackground = isMoneyReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT : CONST.EMPTY_STATE_BACKGROUND;
 
     if (isSmallScreenWidth) {

From e08d75e301efe84af1023d55ee32d353b57a89b1 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 13 Dec 2023 09:46:19 +0100
Subject: [PATCH 090/244] Updates to follow main branch

---
 .../home/report/ReportActionItemMessage.tsx      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/pages/home/report/ReportActionItemMessage.tsx b/src/pages/home/report/ReportActionItemMessage.tsx
index 81742a47dcde..a095115eff88 100644
--- a/src/pages/home/report/ReportActionItemMessage.tsx
+++ b/src/pages/home/report/ReportActionItemMessage.tsx
@@ -7,6 +7,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import type {ReportAction} from '@src/types/onyx';
 import type {OriginalMessageAddComment} from '@src/types/onyx/OriginalMessage';
+import TextCommentFragment from './comment/TextCommentFragment';
 import ReportActionItemFragment from './ReportActionItemFragment';
 
 type ReportActionItemMessageProps = {
@@ -32,6 +33,21 @@ function ReportActionItemMessage({action, displayAsGroup, reportID, style, isHid
 
     const fragments = (action.previousMessage ?? action.message ?? []).filter((item) => !!item);
     const isIOUReport = ReportActionsUtils.isMoneyRequestAction(action);
+
+    if (ReportActionsUtils.isMemberChangeAction(action)) {
+        const fragment = ReportActionsUtils.getMemberChangeMessageFragment(action);
+
+        return (
+            <TextCommentFragment
+                fragment={fragment}
+                displayAsGroup={displayAsGroup}
+                style={style}
+                source=""
+                styleAsDeleted={false}
+            />
+        );
+    }
+
     let iouMessage: string | undefined;
     if (isIOUReport) {
         const originalMessage = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU ? action.originalMessage : null;

From 6ad344fe14d96a9ae5aaf3d0eb13071432477245 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Wed, 13 Dec 2023 09:59:09 +0100
Subject: [PATCH 091/244] Fix linter error

---
 src/types/onyx/OriginalMessage.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index aa647649d418..aec355bf81b6 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -237,4 +237,16 @@ type OriginalMessage =
     | OriginalMessageMoved;
 
 export default OriginalMessage;
-export type {ChronosOOOEvent, Decision, Reaction, ActionName, IOUMessage, Closed, OriginalMessageActionName, ChangeLog, OriginalMessageIOU, OriginalMessageCreated, OriginalMessageAddComment};
+export type {
+    ChronosOOOEvent,
+    Decision,
+    Reaction,
+    ActionName,
+    IOUMessage,
+    Closed,
+    OriginalMessageActionName,
+    ChangeLog,
+    OriginalMessageIOU,
+    OriginalMessageCreated,
+    OriginalMessageAddComment,
+};

From 20463d1c466e0632c0878636811f7f01470f6b62 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 13 Dec 2023 10:15:53 +0100
Subject: [PATCH 092/244] fix PR comments

---
 src/pages/home/report/LinkPreviewer.tsx | 41 ++++---------------------
 src/types/onyx/ReportAction.ts          | 36 +++++++++++++++++++++-
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/pages/home/report/LinkPreviewer.tsx b/src/pages/home/report/LinkPreviewer.tsx
index c9f50ec91a48..cdc7bfff23be 100644
--- a/src/pages/home/report/LinkPreviewer.tsx
+++ b/src/pages/home/report/LinkPreviewer.tsx
@@ -6,45 +6,12 @@ import useTheme from '@styles/themes/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import type {LinkMetadata} from '@src/types/onyx/ReportAction';
 
 const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
 const MAX_IMAGE_HEIGHT = 180;
 const MAX_IMAGE_WIDTH = 340;
 
-type ImageData = {
-    /** The height of the image. */
-    height: number;
-
-    /** The width of the image. */
-    width: number;
-
-    /** The URL of the image. */
-    url: string;
-
-    /** The type of the image. */
-    type?: string;
-};
-
-type LinkMetadata = {
-    /** The URL of the link. */
-    url?: string;
-
-    /** A description of the link. */
-    description?: string;
-
-    /** The title of the link. */
-    title?: string;
-
-    /** The publisher of the link. */
-    publisher?: string;
-
-    /** The image associated with the link. */
-    image?: ImageData;
-
-    /** The provider logo associated with the link. */
-    logo?: ImageData;
-};
-
 type LinkPreviewerProps = {
     /** Data about links provided in message. */
     linkMetadata?: LinkMetadata[];
@@ -58,8 +25,12 @@ function LinkPreviewer({linkMetadata = [], maxAmountOfPreviews = -1}: LinkPrevie
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const uniqueLinks = linkMetadata.filter((link, index, self) => self.findIndex((t) => t.url === link.url) === index);
-    const linksToShow = uniqueLinks.slice(0, maxAmountOfPreviews >= 0 ? Math.min(maxAmountOfPreviews, linkMetadata.length) : linkMetadata.length);
+    const maxAmmountOfLinks = maxAmountOfPreviews >= 0 ? Math.min(maxAmountOfPreviews, linkMetadata.length) : linkMetadata.length;
+    const linksToShow = uniqueLinks.slice(0, maxAmmountOfLinks);
     return linksToShow.map((linkData) => {
+        if (Array.isArray(linkData)) {
+            return;
+        }
         const {description, image, title, logo, publisher, url} = linkData;
         return (
             linkData && (
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index a0e90f4e9c34..60311e844054 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -144,9 +144,43 @@ type ReportActionBase = {
     isNewestReportAction?: boolean;
 };
 
+type ImageData = {
+    /** The height of the image. */
+    height: number;
+
+    /** The width of the image. */
+    width: number;
+
+    /** The URL of the image. */
+    url: string;
+
+    /** The type of the image. */
+    type?: string;
+};
+
+type LinkMetadata = {
+    /** The URL of the link. */
+    url?: string;
+
+    /** A description of the link. */
+    description?: string;
+
+    /** The title of the link. */
+    title?: string;
+
+    /** The publisher of the link. */
+    publisher?: string;
+
+    /** The image associated with the link. */
+    image?: ImageData;
+
+    /** The provider logo associated with the link. */
+    logo?: ImageData;
+};
+
 type ReportAction = ReportActionBase & OriginalMessage;
 
 type ReportActions = Record<string, ReportAction>;
 
 export default ReportAction;
-export type {Message, ReportActions};
+export type {Message, ReportActions, LinkMetadata};

From 554727957f9e212678c2943045c63872a026175c Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Wed, 13 Dec 2023 10:24:49 +0100
Subject: [PATCH 093/244] fix typescript errors

---
 src/pages/home/report/LinkPreviewer.tsx |  2 +-
 src/types/onyx/ReportAction.ts          | 37 ++-----------------------
 2 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/src/pages/home/report/LinkPreviewer.tsx b/src/pages/home/report/LinkPreviewer.tsx
index cdc7bfff23be..9b2bd2c45dc2 100644
--- a/src/pages/home/report/LinkPreviewer.tsx
+++ b/src/pages/home/report/LinkPreviewer.tsx
@@ -64,7 +64,7 @@ function LinkPreviewer({linkMetadata = [], maxAmountOfPreviews = -1}: LinkPrevie
                         </TextLink>
                     )}
                     {description && <Text fontSize={variables.fontSizeNormal}>{description}</Text>}
-                    {image?.type && IMAGE_TYPES.includes(image.type) && (
+                    {image?.type && IMAGE_TYPES.includes(image.type) && image.width && image.height && (
                         <Image
                             style={[
                                 styles.linkPreviewImage,
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index b8fc7f2d7ff7..a881b63fbb95 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -63,6 +63,9 @@ type ImageMetadata = {
 
     /**  The URL of the image. */
     url?: string;
+
+    /**  The type of the image. */
+    type?: string;
 };
 
 type LinkMetadata = {
@@ -192,40 +195,6 @@ type ReportActionBase = {
     isNewestReportAction?: boolean;
 };
 
-type ImageData = {
-    /** The height of the image. */
-    height: number;
-
-    /** The width of the image. */
-    width: number;
-
-    /** The URL of the image. */
-    url: string;
-
-    /** The type of the image. */
-    type?: string;
-};
-
-type LinkMetadata = {
-    /** The URL of the link. */
-    url?: string;
-
-    /** A description of the link. */
-    description?: string;
-
-    /** The title of the link. */
-    title?: string;
-
-    /** The publisher of the link. */
-    publisher?: string;
-
-    /** The image associated with the link. */
-    image?: ImageData;
-
-    /** The provider logo associated with the link. */
-    logo?: ImageData;
-};
-
 type ReportAction = ReportActionBase & OriginalMessage;
 
 type ReportActions = Record<string, ReportAction>;

From 9146059cedc7132ce6bed0f6b1fc94d78ec70d48 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:01:24 +0100
Subject: [PATCH 094/244] Make styles naming more general

---
 src/components/DatePicker/CalendarPicker/index.js |  2 +-
 src/components/MenuItem.js                        |  2 +-
 src/styles/styles.ts                              | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/index.js b/src/components/DatePicker/CalendarPicker/index.js
index a404c4746397..bbdeda6ef84f 100644
--- a/src/components/DatePicker/CalendarPicker/index.js
+++ b/src/components/DatePicker/CalendarPicker/index.js
@@ -236,7 +236,7 @@ class CalendarPicker extends React.PureComponent {
                                         <View
                                             style={[
                                                 this.props.themeStyles.calendarDayContainer,
-                                                isSelected ? this.props.themeStyles.calendarDayContainerSelected : {},
+                                                isSelected ? this.props.themeStyles.buttonDefaultBG : {},
                                                 !isDisabled ? this.props.StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index a56729f630d5..05898ba3e36d 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -339,7 +339,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                         badgeStyles={[
                                             styles.alignSelfCenter,
                                             props.brickRoadIndicator ? styles.mr2 : undefined,
-                                            props.focused || isHovered || pressed ? styles.hoveredButton : {},
+                                            props.focused || isHovered || pressed ? styles.buttonHoveredBG : {},
                                         ]}
                                     />
                                 )}
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index fb851ecfcf54..b83a6d529344 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -936,10 +936,14 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
         },
 
-        calendarDayContainerSelected: {
+        buttonDefaultBG: {
             backgroundColor: theme.buttonDefaultBG,
         },
 
+        buttonHoveredBG: {
+            backgroundColor: theme.buttonHoveredBG,
+        },
+
         autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
             ({
                 height: lodashClamp(textInputHeight, minHeight, maxHeight),
@@ -1914,10 +1918,6 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'flex-end',
         },
 
-        hoveredButton: {
-            backgroundColor: theme.buttonHoveredBG,
-        },
-
         composerSizeButton: {
             alignSelf: 'center',
             height: 32,

From 73721d195fc17e9d6db409bfb71adf4a6e098cfd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:01:51 +0100
Subject: [PATCH 095/244] Card layout as const

---
 src/components/Section.js                     | 34 ++++++++-----------
 .../card/WorkspaceCardCreateAWorkspace.tsx    |  4 +--
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/Section.js b/src/components/Section.js
index 53e7f4af1bb5..f2bf72006d07 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -7,6 +7,11 @@ import MenuItemList from './MenuItemList';
 import menuItemPropTypes from './menuItemPropTypes';
 import Text from './Text';
 
+const CARD_LAYOUT = {
+    ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_RIGHT: 'iconOnRight',
+};
+
 const propTypes = {
     /** An array of props that are pass to individual MenuItem components */
     menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
@@ -23,7 +28,9 @@ const propTypes = {
     /** Icon component */
     IconComponent: PropTypes.func,
 
-    iconPosition: PropTypes.oneOf(['top', 'right']),
+    /** Card layout that affects icon positioning, margins, sizes. */
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
 
     /** Contents to display inside the section */
     children: PropTypes.node,
@@ -63,7 +70,7 @@ const defaultProps = {
     children: null,
     icon: null,
     IconComponent: null,
-    iconPosition: 'right',
+    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
     containerStyles: [],
     iconContainerStyles: [],
     titleStyles: [],
@@ -96,27 +103,13 @@ function IconSection({icon, IconComponent, iconContainerStyles}) {
     );
 }
 
-function Section({
-    children,
-    childrenStyles,
-    containerStyles,
-    icon,
-    IconComponent,
-    iconPosition,
-    iconContainerStyles,
-    menuItems,
-    subtitle,
-    subtitleStyles,
-    subtitleMuted,
-    title,
-    titleStyles,
-}) {
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
     const styles = useThemeStyles();
 
     return (
         <>
             <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                {iconPosition === 'top' && (
+                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
                     <IconSection
                         icon={icon}
                         IconComponent={IconComponent}
@@ -127,7 +120,7 @@ function Section({
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>
-                    {iconPosition === 'right' && (
+                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
                         <IconSection
                             icon={icon}
                             IconComponent={IconComponent}
@@ -137,7 +130,7 @@ function Section({
                 </View>
 
                 {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mt4, styles.mh1, ...subtitleStyles]}>
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
                         <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
                     </View>
                 )}
@@ -156,4 +149,5 @@ Section.displayName = 'Section';
 Section.propTypes = propTypes;
 Section.defaultProps = defaultProps;
 
+export {CARD_LAYOUT};
 export default Section;
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 305cffe6bd73..5f4baa548583 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from '@components/Button';
 import * as Illustrations from '@components/Icon/Illustrations';
-import Section from '@components/Section';
+import Section, {CARD_LAYOUT} from '@components/Section';
 import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 
@@ -14,7 +14,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
         <Section
             title={translate('workspace.card.createAWorkspace')}
             icon={Illustrations.HotDogStand}
-            iconPosition="top"
+            cardLayout={CARD_LAYOUT.ICON_ON_TOP}
             subtitle={translate('workspace.card.createAWorkspaceCopy')}
             subtitleMuted
             containerStyles={[styles.highlightBG]}

From 71783064dcb1139b7c64374abc9e4235277d8863 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:02:12 +0100
Subject: [PATCH 096/244] Medium sized button

---
 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 5f4baa548583..7915f8b4fb9d 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -23,6 +23,7 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
                 text={translate('workspace.card.createAWorkspaceCTA')}
                 style={styles.mt5}
                 success
+                medium
             />
         </Section>
     );

From 04d59f3d7fa4dbb1ef498548bc0d70d4a535808b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Wed, 13 Dec 2023 11:24:15 +0100
Subject: [PATCH 097/244] Empty workspace translations

---
 src/languages/en.ts                                       | 8 +++-----
 src/languages/es.ts                                       | 8 +++-----
 .../workspace/card/WorkspaceCardCreateAWorkspace.tsx      | 6 +++---
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index acd8257f534b..7983d673ef0f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1470,8 +1470,9 @@ export default {
             mustBeOnlineToViewMembers: 'You must be online in order to view members of this workspace.',
         },
         emptyWorkspace: {
-            title: 'Create a new workspace',
-            subtitle: "Workspaces are where you'll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more — all in one place.",
+            title: 'Create a workspace',
+            subtitle: 'Manage business expenses, issue cards, send invoices, and more.',
+            createAWorkspaceCTA: 'Get Started',
             features: {
                 trackAndCollect: 'Track and collect receipts',
                 companyCards: 'Company credit cards',
@@ -1507,9 +1508,6 @@ export default {
             benefit4: 'Customizable limits',
             addWorkEmail: 'Add work email address',
             checkingDomain: 'Hang tight! We are still working on enabling your Expensify Cards. Check back here in a few minutes.',
-            createAWorkspace: 'Create a workspace',
-            createAWorkspaceCopy: 'Manage business expenses, issue cards, send invoices, and more.',
-            createAWorkspaceCTA: 'Get Started',
         },
         reimburse: {
             captureReceipts: 'Capture receipts',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 58fcad054a8d..3d855d2dc8d2 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1493,8 +1493,9 @@ export default {
             mustBeOnlineToViewMembers: 'Debes estar en línea para poder ver los miembros de este espacio de trabajo.',
         },
         emptyWorkspace: {
-            title: 'Crear un nuevo espacio de trabajo',
-            subtitle: 'En los espacios de trabajo es donde puedes chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas y mas — todo en un mismo lugar',
+            title: 'Crea un espacio de trabajo',
+            subtitle: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
+            createAWorkspaceCTA: 'Comenzar',
             features: {
                 trackAndCollect: 'Organiza recibos',
                 companyCards: 'Tarjetas de crédito corporativas',
@@ -1531,9 +1532,6 @@ export default {
             benefit4: 'Límites personalizables',
             addWorkEmail: 'Añadir correo electrónico de trabajo',
             checkingDomain: '¡Un momento! Estamos todavía trabajando para habilitar tu Tarjeta Expensify. Vuelve aquí en unos minutos.',
-            createAWorkspace: 'Crea un espacio de trabajo',
-            createAWorkspaceCopy: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.',
-            createAWorkspaceCTA: 'Comenzar',
         },
         reimburse: {
             captureReceipts: 'Captura recibos',
diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index 7915f8b4fb9d..c69ad8da7c8b 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -12,15 +12,15 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
 
     return (
         <Section
-            title={translate('workspace.card.createAWorkspace')}
+            title={translate('workspace.emptyWorkspace.title')}
             icon={Illustrations.HotDogStand}
             cardLayout={CARD_LAYOUT.ICON_ON_TOP}
-            subtitle={translate('workspace.card.createAWorkspaceCopy')}
+            subtitle={translate('workspace.emptyWorkspace.subtitle')}
             subtitleMuted
             containerStyles={[styles.highlightBG]}
         >
             <Button
-                text={translate('workspace.card.createAWorkspaceCTA')}
+                text={translate('workspace.emptyWorkspace.createAWorkspaceCTA')}
                 style={styles.mt5}
                 success
                 medium

From a136b74b3a7231a78d8d183c3fb5cb3e8d9c062d Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 00:14:09 +0200
Subject: [PATCH 098/244] Fix conflicts after merge

---
 .../Notification/LocalNotification/BrowserNotifications.ts     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.ts b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
index dd07ddbb5e33..35ebf4e0988d 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.ts
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
@@ -2,6 +2,7 @@
 import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as AppUpdate from '@userActions/AppUpdate';
+import * as ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage'
 import focusApp from './focusApp';
 import {PushParams, ReportCommentParams} from './types';
 
@@ -115,7 +116,7 @@ export default {
     pushModifiedExpenseNotification({reportAction, onClick}: ReportCommentParams, usesIcon = false) {
         push({
             title: reportAction.person?.map((f) => f.text).join(', ') ?? '',
-            body: ReportUtils.getModifiedExpenseMessage(reportAction),
+            body: ModifiedExpenseMessage.getForReportAction(reportAction),
             delay: 0,
             onClick,
             icon: usesIcon ? EXPENSIFY_ICON_URL : '',

From 262cb52236d4bc5689c951007ce69f0cc465002a Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 00:41:20 +0200
Subject: [PATCH 099/244] RUn prettier

---
 src/libs/Notification/LocalNotification/BrowserNotifications.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.ts b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
index 35ebf4e0988d..3a35a7812e1d 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.ts
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
@@ -1,8 +1,8 @@
 // Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
 import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
+import * as ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as AppUpdate from '@userActions/AppUpdate';
-import * as ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage'
 import focusApp from './focusApp';
 import {PushParams, ReportCommentParams} from './types';
 

From cd28c6173d7378e74776b3b48ec1cc4ce331448f Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 01:13:19 +0200
Subject: [PATCH 100/244] Performance test for ModifiedExpenseMessage

---
 .../ModifiedExpenseMessage.perf-test.ts       | 66 +++++++++++++++++++
 tests/perf-test/ReportUtils.perf-test.ts      | 24 -------
 2 files changed, 66 insertions(+), 24 deletions(-)
 create mode 100644 tests/perf-test/ModifiedExpenseMessage.perf-test.ts

diff --git a/tests/perf-test/ModifiedExpenseMessage.perf-test.ts b/tests/perf-test/ModifiedExpenseMessage.perf-test.ts
new file mode 100644
index 000000000000..19cccfb94126
--- /dev/null
+++ b/tests/perf-test/ModifiedExpenseMessage.perf-test.ts
@@ -0,0 +1,66 @@
+import {randAmount} from '@ngneat/falso';
+import Onyx from 'react-native-onyx';
+import {measureFunction} from 'reassure';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Policy, Report} from '@src/types/onyx';
+import ModifiedExpenseMessage from '../../src/libs/ModifiedExpenseMessage';
+import createCollection from '../utils/collections/createCollection';
+import createRandomPolicy from '../utils/collections/policies';
+import createRandomReportAction from '../utils/collections/reportActions';
+import createRandomReport from '../utils/collections/reports';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+const runs = CONST.PERFORMANCE_TESTS.RUNS;
+
+beforeAll(() =>
+    Onyx.init({
+        keys: ONYXKEYS,
+        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+    }),
+);
+
+// Clear out Onyx after each test so that each test starts with a clean state
+afterEach(() => {
+    Onyx.clear();
+});
+
+const getMockedReports = (length = 500) =>
+    createCollection<Report>(
+        (item) => `${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`,
+        (index) => createRandomReport(index),
+        length,
+    );
+
+const getMockedPolicies = (length = 500) =>
+    createCollection<Policy>(
+        (item) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`,
+        (index) => createRandomPolicy(index),
+        length,
+    );
+
+const mockedReportsMap = getMockedReports(5000) as Record<`${typeof ONYXKEYS.COLLECTION.REPORT}`, Report>;
+const mockedPoliciesMap = getMockedPolicies(5000) as Record<`${typeof ONYXKEYS.COLLECTION.POLICY}`, Policy>;
+
+test('[ModifiedExpenseMessage] getForReportAction on 5k reports and policies', async () => {
+    const reportAction = {
+        ...createRandomReportAction(1),
+        actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+        originalMessage: {
+            originalMessage: {
+                amount: randAmount(),
+                currency: CONST.CURRENCY.USD,
+                oldAmount: randAmount(),
+                oldCurrency: CONST.CURRENCY.USD,
+            },
+        },
+    };
+
+    await Onyx.multiSet({
+        ...mockedPoliciesMap,
+        ...mockedReportsMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => ModifiedExpenseMessage.getForReportAction(reportAction), {runs});
+});
diff --git a/tests/perf-test/ReportUtils.perf-test.ts b/tests/perf-test/ReportUtils.perf-test.ts
index ab6ee72a0082..b931ae85a7da 100644
--- a/tests/perf-test/ReportUtils.perf-test.ts
+++ b/tests/perf-test/ReportUtils.perf-test.ts
@@ -1,4 +1,3 @@
-import {randAmount} from '@ngneat/falso';
 import Onyx from 'react-native-onyx';
 import {measureFunction} from 'reassure';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -133,29 +132,6 @@ test('[ReportUtils] getReportPreviewMessage on 5k policies', async () => {
     await measureFunction(() => ReportUtils.getReportPreviewMessage(report, reportAction, shouldConsiderReceiptBeingScanned, isPreviewMessageForParentChatReport, policy), {runs});
 });
 
-test('[ReportUtils] getModifiedExpenseMessage on 5k reports and policies', async () => {
-    const reportAction = {
-        ...createRandomReportAction(1),
-        actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
-        originalMessage: {
-            originalMessage: {
-                amount: randAmount(),
-                currency: CONST.CURRENCY.USD,
-                oldAmount: randAmount(),
-                oldCurrency: CONST.CURRENCY.USD,
-            },
-        },
-    };
-
-    await Onyx.multiSet({
-        ...mockedPoliciesMap,
-        ...mockedReportsMap,
-    });
-
-    await waitForBatchedUpdates();
-    await measureFunction(() => ReportUtils.getModifiedExpenseMessage(reportAction), {runs});
-});
-
 test('[ReportUtils] getReportName on 1k participants', async () => {
     const report = {...createRandomReport(1), chatType: undefined, participantAccountIDs};
     const policy = createRandomPolicy(1);

From 5219b6a7d31c9e938234ae912f0f6360a4879ebc Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 01:34:21 +0200
Subject: [PATCH 101/244] Fix typecheck failures

---
 src/libs/ModifiedExpenseMessage.ts                             | 3 ++-
 .../Notification/LocalNotification/BrowserNotifications.ts     | 2 +-
 src/libs/ReportUtils.ts                                        | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index e0c4860c9d49..aa1604f9536a 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -7,6 +7,7 @@ import * as CurrencyUtils from './CurrencyUtils';
 import * as Localize from './Localize';
 import * as PolicyUtils from './PolicyUtils';
 import * as ReportUtils from './ReportUtils';
+import {ExpenseOriginalMessage} from './ReportUtils';
 
 let allPolicyTags: Record<string, PolicyTags | null> = {};
 Onyx.connect({
@@ -96,7 +97,7 @@ function getForReportAction(reportAction: ReportAction): string {
     if (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
         return '';
     }
-    const reportActionOriginalMessage = reportAction.originalMessage;
+    const reportActionOriginalMessage = reportAction.originalMessage as ExpenseOriginalMessage | undefined;
     const policyID = ReportUtils.getReportPolicyID(reportAction.reportID) ?? '';
     const policyTags = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
     const policyTagListName = PolicyUtils.getTagListName(policyTags) || Localize.translateLocal('common.tag');
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.ts b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
index 3a35a7812e1d..7e3142576f68 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.ts
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
@@ -1,6 +1,6 @@
 // Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
 import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
-import * as ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as AppUpdate from '@userActions/AppUpdate';
 import focusApp from './focusApp';
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 6b11234d93e0..038ce5f25111 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -4340,4 +4340,4 @@ export {
     shouldAutoFocusOnKeyPress,
 };
 
-export type {OptionData, OptimisticChatReport};
+export type {ExpenseOriginalMessage, OptionData, OptimisticChatReport};

From df908501cd5efec6efee5dd07af48fdc0f6fff78 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:03:35 +0200
Subject: [PATCH 102/244] Unit test for ModifiedExpenseMessage

---
 .../ModifiedExpenseMessage.perf-test.ts       | 10 ++-
 tests/unit/ModifiedExpenseMessageTest.ts      | 65 +++++++++++++++++++
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 tests/unit/ModifiedExpenseMessageTest.ts

diff --git a/tests/perf-test/ModifiedExpenseMessage.perf-test.ts b/tests/perf-test/ModifiedExpenseMessage.perf-test.ts
index 19cccfb94126..1997d55d8a05 100644
--- a/tests/perf-test/ModifiedExpenseMessage.perf-test.ts
+++ b/tests/perf-test/ModifiedExpenseMessage.perf-test.ts
@@ -47,12 +47,10 @@ test('[ModifiedExpenseMessage] getForReportAction on 5k reports and policies', a
         ...createRandomReportAction(1),
         actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
         originalMessage: {
-            originalMessage: {
-                amount: randAmount(),
-                currency: CONST.CURRENCY.USD,
-                oldAmount: randAmount(),
-                oldCurrency: CONST.CURRENCY.USD,
-            },
+            amount: randAmount(),
+            currency: CONST.CURRENCY.USD,
+            oldAmount: randAmount(),
+            oldCurrency: CONST.CURRENCY.USD,
         },
     };
 
diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
new file mode 100644
index 000000000000..65ba1238a302
--- /dev/null
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -0,0 +1,65 @@
+import {randAmount} from '@ngneat/falso';
+import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
+import CONST from '@src/CONST';
+import * as TransactionUtils from '../../src/libs/TransactionUtils';
+import type {Transaction} from '../../src/types/onyx';
+import createRandomReportAction from '../utils/collections/reportActions';
+
+function generateTransaction(values: Partial<Transaction> = {}): Transaction {
+    const reportID = '1';
+    const amount = 100;
+    const currency = 'USD';
+    const comment = '';
+    const created = '2023-10-01';
+    const baseValues = TransactionUtils.buildOptimisticTransaction(amount, currency, reportID, comment, created);
+
+    return {...baseValues, ...values};
+}
+
+describe('ModifiedExpenseMessage', () => {
+    describe('getForAction', () => {
+        describe('when the amount is changed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    amount: 1800,
+                    currency: CONST.CURRENCY.USD,
+                    oldAmount: 1255,
+                    oldCurrency: CONST.CURRENCY.USD,
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `changed the amount to $18.00 (previously $12.55).`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when the amount is changed and the description is removed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    amount: 1800,
+                    currency: CONST.CURRENCY.USD,
+                    oldAmount: 1255,
+                    oldCurrency: CONST.CURRENCY.USD,
+                    newComment: '',
+                    oldComment: 'this is for the shuttle',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55).' + '\nremoved the description (previously "this is for the shuttle").';
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+    });
+});

From db1f935d0ec6034824d56ae59ebff87508d5c383 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:08:39 +0200
Subject: [PATCH 103/244] More tests.

---
 tests/unit/ModifiedExpenseMessageTest.ts | 52 ++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
index 65ba1238a302..ec11d3ad9572 100644
--- a/tests/unit/ModifiedExpenseMessageTest.ts
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -61,5 +61,57 @@ describe('ModifiedExpenseMessage', () => {
                 expect(result).toEqual(expectedResult);
             });
         });
+
+        describe('when the amount is changed, the description is removed, and category is set', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    amount: 1800,
+                    currency: CONST.CURRENCY.USD,
+                    oldAmount: 1255,
+                    oldCurrency: CONST.CURRENCY.USD,
+                    newComment: '',
+                    oldComment: 'this is for the shuttle',
+                    category: 'Benefits',
+                    oldCategory: '',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55).' + '\nset the category to "Benefits".' + '\nremoved the description (previously "this is for the shuttle").';
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when the amount and merchant are changed, the description is removed, and category is set', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    merchant: 'Taco Bell',
+                    oldMerchant: 'Big Belly',
+                    amount: 1800,
+                    currency: CONST.CURRENCY.USD,
+                    oldAmount: 1255,
+                    oldCurrency: CONST.CURRENCY.USD,
+                    newComment: '',
+                    oldComment: 'this is for the shuttle',
+                    category: 'Benefits',
+                    oldCategory: '',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55) and the merchant to "Taco Bell" (previously "Big Belly").' + '\nset the category to "Benefits".' + '\nremoved the description (previously "this is for the shuttle").';
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
     });
 });

From 8babd0ea22e98ac5e4ca9cc04df98b0f206cb844 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:10:40 +0200
Subject: [PATCH 104/244] One more test

---
 tests/unit/ModifiedExpenseMessageTest.ts | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
index ec11d3ad9572..fc8e8cbbeef8 100644
--- a/tests/unit/ModifiedExpenseMessageTest.ts
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -87,6 +87,29 @@ describe('ModifiedExpenseMessage', () => {
             });
         });
 
+        describe('when the amount and merchant are changed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    merchant: 'Taco Bell',
+                    oldMerchant: 'Big Belly',
+                    amount: 1800,
+                    currency: CONST.CURRENCY.USD,
+                    oldAmount: 1255,
+                    oldCurrency: CONST.CURRENCY.USD,
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55) and the merchant to "Taco Bell" (previously "Big Belly").';
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
         describe('when the amount and merchant are changed, the description is removed, and category is set', () => {
             const reportAction = {
                 ...createRandomReportAction(1),

From 02c09f2a4c3fd22aa9322308beb5cdccd421cbae Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:13:03 +0200
Subject: [PATCH 105/244] One more test

---
 tests/unit/ModifiedExpenseMessageTest.ts | 25 ++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
index fc8e8cbbeef8..d30a429f759a 100644
--- a/tests/unit/ModifiedExpenseMessageTest.ts
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -136,5 +136,30 @@ describe('ModifiedExpenseMessage', () => {
                 expect(result).toEqual(expectedResult);
             });
         });
+
+        describe('when the amount, comment and merchant are changed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    merchant: 'Taco Bell',
+                    oldMerchant: 'Big Belly',
+                    amount: 1800,
+                    currency: CONST.CURRENCY.USD,
+                    oldAmount: 1255,
+                    oldCurrency: CONST.CURRENCY.USD,
+                    newComment: 'I bought it on the way',
+                    oldComment: 'from the business trip',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55), the description to "I bought it on the way" (previously "from the business trip"), and the merchant to "Taco Bell" (previously "Big Belly").';
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
     });
 });

From a6a28a658522f57c2bc1a32aa68d5a6c107b67f5 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:19:13 +0200
Subject: [PATCH 106/244] 3 more tests

---
 tests/unit/ModifiedExpenseMessageTest.ts | 63 ++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
index d30a429f759a..8ffc5eaa6dbd 100644
--- a/tests/unit/ModifiedExpenseMessageTest.ts
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -161,5 +161,68 @@ describe('ModifiedExpenseMessage', () => {
                 expect(result).toEqual(expectedResult);
             });
         });
+
+        describe('when the merchant is removed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    merchant: '',
+                    oldMerchant: 'Big Belly',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `removed the merchant (previously "Big Belly").`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when the merchant and the description are removed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    merchant: '',
+                    oldMerchant: 'Big Belly',
+                    newComment: '',
+                    oldComment: 'minishore',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `removed the description (previously "minishore") and the merchant (previously "Big Belly").`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when the merchant, the category and the description are removed', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    merchant: '',
+                    oldMerchant: 'Big Belly',
+                    newComment: '',
+                    oldComment: 'minishore',
+                    category: '',
+                    oldCategory: 'Benefits',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `removed the description (previously "minishore"), the merchant (previously "Big Belly"), and the category (previously "Benefits").`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
     });
 });

From 27945e8f5412cd307063979214c1dde5418aa448 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:22:23 +0200
Subject: [PATCH 107/244] 3 more tests

---
 tests/unit/ModifiedExpenseMessageTest.ts | 63 ++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
index 8ffc5eaa6dbd..63f88415a2a3 100644
--- a/tests/unit/ModifiedExpenseMessageTest.ts
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -224,5 +224,68 @@ describe('ModifiedExpenseMessage', () => {
                 expect(result).toEqual(expectedResult);
             });
         });
+
+        describe('when the merchant is set', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    oldMerchant: '',
+                    merchant: 'Big Belly',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `set the merchant to "Big Belly".`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when the merchant and the description are set', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    oldMerchant: '',
+                    merchant: 'Big Belly',
+                    oldComment: '',
+                    newComment: 'minishore',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `set the description to "minishore" and the merchant to "Big Belly".`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
+
+        describe('when the merchant, the category and the description are set', () => {
+            const reportAction = {
+                ...createRandomReportAction(1),
+                actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
+                originalMessage: {
+                    oldMerchant: '',
+                    merchant: 'Big Belly',
+                    oldComment: '',
+                    newComment: 'minishore',
+                    oldCategory: '',
+                    category: 'Benefits',
+                },
+            };
+
+            it('returns the correct text message', () => {
+                const expectedResult = `set the description to "minishore", the merchant to "Big Belly", and the category to "Benefits".`;
+
+                const result = ModifiedExpenseMessage.getForReportAction(reportAction);
+
+                expect(result).toEqual(expectedResult);
+            });
+        });
     });
 });

From 8aad9bd7d78e9303b67712897d1d611217946d70 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Thu, 14 Dec 2023 02:25:39 +0200
Subject: [PATCH 108/244] Make lint happy an run prettier

---
 tests/unit/ModifiedExpenseMessageTest.ts | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
index 63f88415a2a3..02990aa5c751 100644
--- a/tests/unit/ModifiedExpenseMessageTest.ts
+++ b/tests/unit/ModifiedExpenseMessageTest.ts
@@ -1,21 +1,7 @@
-import {randAmount} from '@ngneat/falso';
 import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage';
 import CONST from '@src/CONST';
-import * as TransactionUtils from '../../src/libs/TransactionUtils';
-import type {Transaction} from '../../src/types/onyx';
 import createRandomReportAction from '../utils/collections/reportActions';
 
-function generateTransaction(values: Partial<Transaction> = {}): Transaction {
-    const reportID = '1';
-    const amount = 100;
-    const currency = 'USD';
-    const comment = '';
-    const created = '2023-10-01';
-    const baseValues = TransactionUtils.buildOptimisticTransaction(amount, currency, reportID, comment, created);
-
-    return {...baseValues, ...values};
-}
-
 describe('ModifiedExpenseMessage', () => {
     describe('getForAction', () => {
         describe('when the amount is changed', () => {
@@ -54,7 +40,7 @@ describe('ModifiedExpenseMessage', () => {
             };
 
             it('returns the correct text message', () => {
-                const expectedResult = 'changed the amount to $18.00 (previously $12.55).' + '\nremoved the description (previously "this is for the shuttle").';
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55).\nremoved the description (previously "this is for the shuttle").';
 
                 const result = ModifiedExpenseMessage.getForReportAction(reportAction);
 
@@ -79,7 +65,7 @@ describe('ModifiedExpenseMessage', () => {
             };
 
             it('returns the correct text message', () => {
-                const expectedResult = 'changed the amount to $18.00 (previously $12.55).' + '\nset the category to "Benefits".' + '\nremoved the description (previously "this is for the shuttle").';
+                const expectedResult = 'changed the amount to $18.00 (previously $12.55).\nset the category to "Benefits".\nremoved the description (previously "this is for the shuttle").';
 
                 const result = ModifiedExpenseMessage.getForReportAction(reportAction);
 
@@ -129,7 +115,8 @@ describe('ModifiedExpenseMessage', () => {
             };
 
             it('returns the correct text message', () => {
-                const expectedResult = 'changed the amount to $18.00 (previously $12.55) and the merchant to "Taco Bell" (previously "Big Belly").' + '\nset the category to "Benefits".' + '\nremoved the description (previously "this is for the shuttle").';
+                const expectedResult =
+                    'changed the amount to $18.00 (previously $12.55) and the merchant to "Taco Bell" (previously "Big Belly").\nset the category to "Benefits".\nremoved the description (previously "this is for the shuttle").';
 
                 const result = ModifiedExpenseMessage.getForReportAction(reportAction);
 
@@ -154,7 +141,8 @@ describe('ModifiedExpenseMessage', () => {
             };
 
             it('returns the correct text message', () => {
-                const expectedResult = 'changed the amount to $18.00 (previously $12.55), the description to "I bought it on the way" (previously "from the business trip"), and the merchant to "Taco Bell" (previously "Big Belly").';
+                const expectedResult =
+                    'changed the amount to $18.00 (previously $12.55), the description to "I bought it on the way" (previously "from the business trip"), and the merchant to "Taco Bell" (previously "Big Belly").';
 
                 const result = ModifiedExpenseMessage.getForReportAction(reportAction);
 

From ce83d2b23c6f129546b2b43e27d32df41e3aa41d Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Thu, 14 Dec 2023 06:03:27 +0500
Subject: [PATCH 109/244] feat: add types for report fields

---
 src/ONYXKEYS.ts                            |  4 ++++
 src/types/onyx/PolicyReportField.ts        | 22 ++++++++++++++++++++++
 src/types/onyx/RecentlyUsedReportFields.ts |  3 +++
 src/types/onyx/Report.ts                   |  3 +++
 src/types/onyx/index.ts                    |  4 ++++
 5 files changed, 36 insertions(+)
 create mode 100644 src/types/onyx/PolicyReportField.ts
 create mode 100644 src/types/onyx/RecentlyUsedReportFields.ts

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 0cc7934ad007..76de820aedd6 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -254,6 +254,8 @@ const ONYXKEYS = {
         POLICY_RECENTLY_USED_CATEGORIES: 'policyRecentlyUsedCategories_',
         POLICY_TAGS: 'policyTags_',
         POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
+        POLICY_REPORT_FIELDS: 'policyReportFields_',
+        POLICY_RECENTLY_USED_REPORT_FIELDS: 'policyRecentlyUsedReportFields_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         WORKSPACE_INVITE_MESSAGE_DRAFT: 'workspaceInviteMessageDraft_',
         REPORT: 'report_',
@@ -443,6 +445,8 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
+    [ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS]: OnyxTypes.PolicyReportField;
+    [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: Record<string, number>;
     [ONYXKEYS.COLLECTION.REPORT]: OnyxTypes.Report;
diff --git a/src/types/onyx/PolicyReportField.ts b/src/types/onyx/PolicyReportField.ts
new file mode 100644
index 000000000000..855ca2d06870
--- /dev/null
+++ b/src/types/onyx/PolicyReportField.ts
@@ -0,0 +1,22 @@
+type PolicyReportFieldType = "text" | "date" | "dropdown";
+
+type PolicyReportField = {
+    /** Name of the field */
+    name: string;
+
+    /** Default value assigned to the field */
+    defaultValue: string;
+
+    /** Unique id of the field */
+    fieldId: string;
+
+    /** Position at which the field should show up relative to the other fields */
+    orderWeight: number;
+
+    /** Type of report field */
+    type: PolicyReportFieldType;
+};
+
+type PolicyReportFields = Record<string, PolicyReportField>;
+export default PolicyReportField;
+export type {PolicyReportFields};
diff --git a/src/types/onyx/RecentlyUsedReportFields.ts b/src/types/onyx/RecentlyUsedReportFields.ts
new file mode 100644
index 000000000000..2b3d046c8316
--- /dev/null
+++ b/src/types/onyx/RecentlyUsedReportFields.ts
@@ -0,0 +1,3 @@
+type RecentlyUsedReportFields = Record<string, string[]>;
+
+export default RecentlyUsedReportFields;
diff --git a/src/types/onyx/Report.ts b/src/types/onyx/Report.ts
index 25c544f6f5c3..bad6b6a942ea 100644
--- a/src/types/onyx/Report.ts
+++ b/src/types/onyx/Report.ts
@@ -157,6 +157,9 @@ type Report = {
     text?: string;
     privateNotes?: Record<number, Note>;
     isLoadingPrivateNotes?: boolean;
+
+    /** If the report contains reportFields, save the field id and its value */
+    reportFields?: Record<string, string>,
 };
 
 export default Report;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 110bdb024a8c..d105a21c6144 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -54,6 +54,8 @@ import WalletOnfido from './WalletOnfido';
 import WalletStatement from './WalletStatement';
 import WalletTerms from './WalletTerms';
 import WalletTransfer from './WalletTransfer';
+import PolicyReportField from './PolicyReportField';
+import RecentlyUsedReportFields from './RecentlyUsedReportFields';
 
 export type {
     Account,
@@ -124,4 +126,6 @@ export type {
     WalletTerms,
     WalletTransfer,
     ReportUserIsTyping,
+    PolicyReportField,
+    RecentlyUsedReportFields,
 };

From b9d80d156a426170fa9dd9a99505b825c19b362d Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 14 Dec 2023 12:42:14 +0700
Subject: [PATCH 110/244] fix infinite loading in iou report

---
 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 9d9330b9c720..71d16c118a7c 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -326,7 +326,7 @@ function ReportScreen({
                 !onyxReportID &&
                 prevReport.statusNum === CONST.REPORT.STATUS.OPEN &&
                 (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM))) ||
-            (ReportUtils.isMoneyRequest(prevReport) && _.isEqual(report, defaultProps.report))
+            ((ReportUtils.isMoneyRequest(prevReport.reportID) || ReportUtils.isMoneyRequestReport(prevReport.reportID)) && _.isEqual(report, defaultProps.report))
         ) {
             Navigation.dismissModal();
             if (Navigation.getTopmostReportId() === prevOnyxReportID) {

From 6c388cf4301dca3818ebd0e82692f9750f56f0e0 Mon Sep 17 00:00:00 2001
From: Shubham Agrawal <shubham.agra1206@gmail.com>
Date: Thu, 14 Dec 2023 13:18:46 +0530
Subject: [PATCH 111/244] fixed lhn avatars

---
 src/components/AvatarWithDisplayName.tsx      |  3 +--
 src/components/LHNOptionsList/OptionRowLHN.js |  3 +--
 src/components/OptionRow.js                   |  3 +--
 src/libs/ReportUtils.ts                       |  2 +-
 src/styles/index.ts                           | 24 +++++++++----------
 src/styles/utils/index.ts                     |  2 +-
 src/styles/variables.ts                       |  4 ++--
 7 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 5ea21502f2ca..b9bae33d7e23 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -65,7 +65,6 @@ function AvatarWithDisplayName({
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false);
     const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(report);
     const isExpenseRequest = ReportUtils.isExpenseRequest(report);
-    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : size;
     const avatarBorderColor = isAnonymous ? theme.highlightBG : theme.componentBG;
 
     const actorAccountID = useRef<number | null>(null);
@@ -118,7 +117,7 @@ function AvatarWithDisplayName({
                                 backgroundColor={avatarBorderColor}
                                 mainAvatar={icons[0]}
                                 secondaryAvatar={icons[1]}
-                                size={defaultSubscriptSize}
+                                size={size}
                             />
                         ) : (
                             <MultipleAvatars
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 9e50c4b1690a..88459e38dff2 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -116,7 +116,6 @@ function OptionRowLHN(props) {
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
-    const defaultSubscriptSize = optionItem.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
     const shouldShowGreenDotIndicator = !hasBrickError && ReportUtils.requiresAttentionFromCurrentUser(optionItem, optionItem.parentReportAction);
 
     /**
@@ -220,7 +219,7 @@ function OptionRowLHN(props) {
                                             backgroundColor={hovered && !props.isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
                                             mainAvatar={optionItem.icons[0]}
                                             secondaryAvatar={optionItem.icons[1]}
-                                            size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : defaultSubscriptSize}
+                                            size={props.viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     ) : (
                                         <MultipleAvatars
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 1a8c395ddd8b..6118523d813d 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -141,7 +141,6 @@ function OptionRow(props) {
             : props.backgroundColor;
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const isMultipleParticipant = lodashGet(props.option, 'participantsList.length', 0) > 1;
-    const defaultSubscriptSize = props.option.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
 
     // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
@@ -208,7 +207,7 @@ function OptionRow(props) {
                                             mainAvatar={props.option.icons[0]}
                                             secondaryAvatar={props.option.icons[1]}
                                             backgroundColor={hovered ? hoveredBackgroundColor : subscriptColor}
-                                            size={defaultSubscriptSize}
+                                            size={CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     ) : (
                                         <MultipleAvatars
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 63037416c923..5431292f1ab6 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -946,7 +946,7 @@ function hasOnlyDistanceRequestTransactions(iouReportID: string | undefined): bo
  * If the report is a thread and has a chat type set, it is a workspace chat.
  */
 function isWorkspaceThread(report: OnyxEntry<Report>): boolean {
-    return isThread(report) && !isDM(report);
+    return isThread(report) && isChatReport(report) && !isDM(report);
 }
 
 /**
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9e02335bde0d..162622c93bc8 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1963,14 +1963,14 @@ const styles = (theme: ThemeColors) =>
             height: 24,
             width: 24,
             backgroundColor: theme.icon,
-            borderRadius: 24,
+            borderRadius: 12,
         },
 
         singleAvatarSmall: {
-            height: 18,
-            width: 18,
+            height: 16,
+            width: 16,
             backgroundColor: theme.icon,
-            borderRadius: 18,
+            borderRadius: 8,
         },
 
         singleAvatarMedium: {
@@ -1984,17 +1984,17 @@ const styles = (theme: ThemeColors) =>
             position: 'absolute',
             right: -18,
             bottom: -18,
-            borderWidth: 3,
-            borderRadius: 30,
+            borderWidth: 2,
+            borderRadius: 14,
             borderColor: 'transparent',
         },
 
         secondAvatarSmall: {
             position: 'absolute',
-            right: -13,
-            bottom: -13,
-            borderWidth: 3,
-            borderRadius: 18,
+            right: -14,
+            bottom: -14,
+            borderWidth: 2,
+            borderRadius: 10,
             borderColor: 'transparent',
         },
 
@@ -2015,8 +2015,8 @@ const styles = (theme: ThemeColors) =>
 
         secondAvatarSubscriptCompact: {
             position: 'absolute',
-            bottom: -1,
-            right: -1,
+            bottom: -4,
+            right: -4,
         },
 
         secondAvatarSubscriptSmallNormal: {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c392e61f0814..91e8f5bcdf1a 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -118,7 +118,7 @@ const avatarFontSizes: Partial<Record<AvatarSizeName, number>> = {
 
 const avatarBorderWidths: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.DEFAULT]: 3,
-    [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 1,
+    [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: 2,
     [CONST.AVATAR_SIZE.MID_SUBSCRIPT]: 2,
     [CONST.AVATAR_SIZE.SUBSCRIPT]: 2,
     [CONST.AVATAR_SIZE.SMALL]: 2,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 65d7f6a0311d..f25c126310d9 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -39,9 +39,9 @@ export default {
     avatarSizeSmall: 28,
     avatarSizeSmaller: 24,
     avatarSizeSubscript: 20,
-    avatarSizeMidSubscript: 18,
+    avatarSizeMidSubscript: 16,
     avatarSizeMentionIcon: 16,
-    avatarSizeSmallSubscript: 14,
+    avatarSizeSmallSubscript: 12,
     defaultAvatarPreviewSize: 360,
     fabBottom: 25,
     fontSizeOnlyEmojis: 30,

From 98581124d2716816fc6ed48277c7095f9a14149c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 09:39:15 +0100
Subject: [PATCH 112/244] Post-merge type adjustments

---
 src/components/MenuItem.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 294c9512d3e0..b352c26895b7 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,4 +1,3 @@
-import IconType from '@types/Icon';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import React, {FC, ForwardedRef, forwardRef, ReactNode, useEffect, useMemo, useRef, useState} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
@@ -15,7 +14,7 @@ import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
-import AvatarType from '@src/types/onyx/Avatar';
+import {Icon as IconType} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
 import Badge from './Badge';
 import DisplayNames from './DisplayNames';
@@ -64,7 +63,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     descriptionTextStyle?: StyleProp<ViewStyle>;
 
     /** Icon to display on the left side of component */
-    icon?: ReactNode | string | AvatarType;
+    icon?: ReactNode | IconType | string;
 
     /** The fill color to pass into the icon. */
     iconFill?: string;
@@ -157,7 +156,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
 
     /** Avatars to show on the right of the menu item */
-    floatRightAvatars?: AvatarType[];
+    floatRightAvatars?: IconType[];
 
     /** Prop to represent the size of the float right avatar images to be shown */
     floatRightAvatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];

From ebdbc9fa81284ac0b4ed478ca4cc3afd739cee15 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 10:23:18 +0100
Subject: [PATCH 113/244] Adjust style typing

---
 src/components/MenuItem.tsx | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index b352c26895b7..b2761291d90b 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -54,8 +54,11 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Any additional styles to apply */
     wrapperStyle?: StyleProp<ViewStyle>;
 
+    /** Any additional styles to apply on the outer element */
+    containerStyle?: StyleProp<ViewStyle>;
+
     /** Used to apply styles specifically to the title */
-    titleStyle?: StyleProp<ViewStyle>;
+    titleStyle?: ViewStyle;
 
     /** Any adjustments to style when menu item is hovered or pressed */
     hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
@@ -119,6 +122,9 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     /** Error to display below the title */
     error?: string;
 
+    /** Error to display at the bottom of the component */
+    errorText?: string;
+
     /** A boolean flag that gives the icon a green fill if true */
     success?: boolean;
 
@@ -205,6 +211,7 @@ function MenuItem(
         badgeText,
         style,
         wrapperStyle,
+        containerStyle,
         titleStyle,
         hoverAndPressStyle,
         descriptionTextStyle,
@@ -227,6 +234,7 @@ function MenuItem(
         furtherDetails,
         description,
         error,
+        errorText,
         success = false,
         focused = false,
         disabled = false,
@@ -265,28 +273,27 @@ function MenuItem(
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
 
-    const isDeleted = _.contains(style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
-    const titleTextStyle = StyleUtils.combineStyles(
+    const combinedTitleTextStyle = StyleUtils.combineStyles(
         [
             styles.flexShrink1,
             styles.popoverMenuText,
-            icon && !Array.isArray(icon) && (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3),
-            shouldShowBasicTitle ? undefined : styles.textStrong,
+            // eslint-disable-next-line no-nested-ternary
+            icon && !Array.isArray(icon) ? (avatarSize === CONST.AVATAR_SIZE.SMALL ? styles.ml2 : styles.ml3) : {},
+            shouldShowBasicTitle ? {} : styles.textStrong,
             numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
-            interactive && disabled ? {...styles.userSelectNone} : undefined,
+            interactive && disabled ? {...styles.userSelectNone} : {},
             styles.ltr,
             styles.offlineFeedback.deleted,
-            titleTextStyle,
         ],
-        titleStyle,
+        titleStyle ?? {},
     );
     const descriptionTextStyles = StyleUtils.combineStyles([
         styles.textLabelSupporting,
-        icon && !Array.isArray(icon) && styles.ml3,
+        icon && !Array.isArray(icon) ? styles.ml3 : {},
         title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        descriptionTextStyle || styles.breakWord,
+        descriptionTextStyle as ViewStyle || styles.breakWord,
         styles.offlineFeedback.deleted,
     ]);
 
@@ -351,7 +358,7 @@ function MenuItem(
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}
-                    style={({pressed}: {pressed: PressableStateCallbackType}) => [
+                    style={({pressed}: PressableStateCallbackType) => [
                         containerStyle,
                         errorText ? styles.pb5 : {},
                         style,
@@ -360,7 +367,7 @@ function MenuItem(
                         (isHovered || pressed) && hoverAndPressStyle,
                         ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                         shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
-                    ]}
+                    ] as StyleProp<ViewStyle>}
                     disabled={disabled}
                     ref={ref}
                     role={CONST.ROLE.MENUITEM}
@@ -452,7 +459,7 @@ function MenuItem(
                                             )}
                                             {!shouldRenderAsHTML && !shouldParseTitle && Boolean(title) && (
                                                 <Text
-                                                    style={titleTextStyle}
+                                                    style={combinedTitleTextStyle}
                                                     numberOfLines={numberOfLinesTitle || undefined}
                                                     dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: interactive && disabled}}
                                                 >

From e12a6c50d2c6ef4d7cc6df23d61320463255dbc7 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 10:23:34 +0100
Subject: [PATCH 114/244] Use titleStyle and delete duplicated style

---
 .../settings/Profile/CustomStatus/StatusClearAfterPage.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
index a4f9c1c3a4e5..f4d3867eace6 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
@@ -202,7 +202,7 @@ function StatusClearAfterPage({currentUserPersonalDetails, customStatus}) {
                                 containerStyle={styles.pr2}
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_STATUS_CLEAR_AFTER_DATE)}
                                 errorText={customDateError}
-                                titleTextStyle={styles.flex1}
+                                titleStyle={styles.flex1}
                                 brickRoadIndicator={redBrickDateIndicator}
                             />
                             <MenuItemWithTopDescription
@@ -212,7 +212,7 @@ function StatusClearAfterPage({currentUserPersonalDetails, customStatus}) {
                                 containerStyle={styles.pr2}
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_STATUS_CLEAR_AFTER_TIME)}
                                 errorText={customTimeError}
-                                titleTextStyle={styles.flex1}
+                                titleStyle={styles.flex1}
                                 brickRoadIndicator={redBrickTimeIndicator}
                             />
                         </>

From 4a4317e1b5f4759ac573efc8c35ce95ea186df96 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 14 Dec 2023 16:41:46 +0700
Subject: [PATCH 115/244] fix issue

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

diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 71d16c118a7c..8889a59f6ab2 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -316,6 +316,7 @@ function ReportScreen({
         const onyxReportID = report.reportID;
         const prevOnyxReportID = prevReport.reportID;
         const routeReportID = getReportID(route);
+
         // Navigate to the Concierge chat if the room was removed from another device (e.g. user leaving a room or removed from a room)
         if (
             // non-optimistic case
@@ -326,7 +327,7 @@ function ReportScreen({
                 !onyxReportID &&
                 prevReport.statusNum === CONST.REPORT.STATUS.OPEN &&
                 (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM))) ||
-            ((ReportUtils.isMoneyRequest(prevReport.reportID) || ReportUtils.isMoneyRequestReport(prevReport.reportID)) && _.isEqual(report, defaultProps.report))
+            ((ReportUtils.isMoneyRequest(prevReport) || ReportUtils.isMoneyRequestReport(prevReport)) && _.isEqual(report, defaultProps.report))
         ) {
             Navigation.dismissModal();
             if (Navigation.getTopmostReportId() === prevOnyxReportID) {
@@ -351,7 +352,19 @@ function ReportScreen({
 
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
-    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, prevUserLeavingStatus, userLeavingStatus, prevReport.statusNum, prevReport.parentReportID, prevReport.chatType]);
+    }, [
+        route,
+        report,
+        errors,
+        fetchReportIfNeeded,
+        prevReport.reportID,
+        prevUserLeavingStatus,
+        userLeavingStatus,
+        prevReport.statusNum,
+        prevReport.parentReportID,
+        prevReport.chatType,
+        prevReport,
+    ]);
 
     useEffect(() => {
         if (!ReportUtils.isValidReportIDFromPath(reportID)) {

From d547223eeaa63a8381f1cfaae42f96817cb65703 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 14 Dec 2023 10:54:32 +0100
Subject: [PATCH 116/244] change code for auto focus input

---
 .../workspace/WorkspaceInviteMessagePage.js   | 39 ++++++-------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 164a2d6f2ffb..c6b88216a1ee 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -1,7 +1,7 @@
 import {isEmpty} from 'lodash';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useEffect, useRef} from 'react';
+import React from 'react';
 import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -17,10 +17,12 @@ import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigationFocus from '@components/withNavigationFocus';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import * as Link from '@userActions/Link';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
@@ -72,33 +74,11 @@ const defaultProps = {
 };
 
 function WorkspaceInviteMessagePage(props) {
-    const focusTimeoutRef = useRef();
-    const welcomeMessageInputRef = useRef(null);
+    const {inputCallbackRef} = useAutoFocusInput();
 
-    useEffect(
-        () => () => {
-            clearTimeout(focusTimeoutRef.current);
-        },
-        [],
-    );
-
-    const focusWelcomeMessageInput = () => {
-        focusTimeoutRef.current = setTimeout(() => {
-            welcomeMessageInputRef.current.focus();
-            // Below condition is needed for web, desktop and mweb only, for native cursor is set at end by default.
-            if (welcomeMessageInputRef.current.value && welcomeMessageInputRef.current.setSelectionRange) {
-                const length = welcomeMessageInputRef.current.value.length;
-                welcomeMessageInputRef.current.setSelectionRange(length, length);
-            }
-        }, CONST.ANIMATED_TRANSITION);
-    };
-
-    useEffect(() => {
-        if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
-            Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true);
-        }
-        focusWelcomeMessageInput();
-    }, [props.invitedEmailsToAccountIDsDraft, props.route.params.policyID]);
+    if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
+        Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true);
+    }
 
     const saveDraft = (newDraft) => {
         Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft);
@@ -209,7 +189,10 @@ function WorkspaceInviteMessagePage(props) {
                             onChangeText={(text) => {
                                 saveDraft(text);
                             }}
-                            ref={(el) => (welcomeMessageInputRef.current = el)}
+                            ref={(el) => {
+                                updateMultilineInputRange(el);
+                                inputCallbackRef(el);
+                            }}
                         />
                     </View>
                 </FormProvider>

From 1ed677c75c5bce7066dc750194b23fa9d30e363e Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 11:41:16 +0100
Subject: [PATCH 117/244] Migrate to TS

---
 src/components/MenuItem.tsx | 63 ++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index b2761291d90b..fe5bd4bb15ac 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,4 +1,5 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import _ from 'lodash';
 import React, {FC, ForwardedRef, forwardRef, ReactNode, useEffect, useMemo, useRef, useState} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import {AnimatedStyle} from 'react-native-reanimated';
@@ -8,6 +9,7 @@ import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
+import {AvatarSource} from '@libs/UserUtils';
 import useTheme from '@styles/themes/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -49,7 +51,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     badgeText?: string;
 
     /** Used to apply offline styles to child text components */
-    style?: StyleProp<ViewStyle>;
+    style?: ViewStyle;
 
     /** Any additional styles to apply */
     wrapperStyle?: StyleProp<ViewStyle>;
@@ -66,7 +68,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     descriptionTextStyle?: StyleProp<ViewStyle>;
 
     /** Icon to display on the left side of component */
-    icon?: ReactNode | IconType | string;
+    icon?: ((props: SrcProps) => ReactNode) | AvatarSource;
 
     /** The fill color to pass into the icon. */
     iconFill?: string;
@@ -93,19 +95,19 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
     fallbackIcon?: FC<SvgProps>;
 
     /** An icon to display under the main item */
-    furtherDetailsIcon?: IconType;
+    furtherDetailsIcon?: (props: SrcProps) => ReactNode;
 
     /** Boolean whether to display the title right icon */
     shouldShowTitleIcon?: boolean;
 
     /** Icon to display at right side of title */
-    titleIcon?: IconType;
+    titleIcon?: (props: SrcProps) => ReactNode;
 
     /** Boolean whether to display the right icon */
     shouldShowRightIcon?: boolean;
 
     /** Overrides the icon for shouldShowRightIcon */
-    iconRight?: IconType;
+    iconRight?: (props: SrcProps) => ReactNode;
 
     /** Should render component on the right */
     shouldShowRightComponent?: boolean;
@@ -268,7 +270,7 @@ function MenuItem(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const style = StyleUtils.combineStyles(style, styles.popoverMenuItem);
+    const combinedStyle = StyleUtils.combineStyles(style ?? {}, styles.popoverMenuItem);
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
@@ -293,9 +295,9 @@ function MenuItem(
         styles.textLabelSupporting,
         icon && !Array.isArray(icon) ? styles.ml3 : {},
         title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        descriptionTextStyle as ViewStyle || styles.breakWord,
+        (descriptionTextStyle as ViewStyle) || styles.breakWord,
         styles.offlineFeedback.deleted,
-    ]);
+    ]) as StyleProp<TextStyle>;
 
     useEffect(() => {
         if (!title || (titleRef.current.length && titleRef.current === title) || !shouldParseTitle) {
@@ -354,24 +356,27 @@ function MenuItem(
         <Hoverable>
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
-                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
+                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(() => onPressAction, isAnonymousAction) : () => onPressAction}
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}
-                    style={({pressed}: PressableStateCallbackType) => [
-                        containerStyle,
-                        errorText ? styles.pb5 : {},
-                        style,
-                        !interactive && styles.cursorDefault,
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true),
-                        (isHovered || pressed) && hoverAndPressStyle,
-                        ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
-                        shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
-                    ] as StyleProp<ViewStyle>}
+                    style={({pressed}: PressableStateCallbackType) =>
+                        [
+                            containerStyle,
+                            errorText ? styles.pb5 : {},
+                            combinedStyle,
+                            !interactive && styles.cursorDefault,
+                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true),
+                            (isHovered || pressed) && hoverAndPressStyle,
+                            ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
+                            shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
+                        ] as StyleProp<ViewStyle>
+                    }
                     disabled={disabled}
                     ref={ref}
                     role={CONST.ROLE.MENUITEM}
                     accessibilityLabel={title ? title.toString() : ''}
+                    accessible
                 >
                     {({pressed}) => (
                         <>
@@ -390,12 +395,12 @@ function MenuItem(
                                             size={avatarSize}
                                             secondAvatarStyle={[
                                                 StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
-                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
+                                                pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
+                                                isHovered && !pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
                                             ]}
                                         />
                                     )}
-                                    {Boolean(icon) && !Array.isArray(icon) && (
+                                    {Boolean(icon) && typeof icon === 'function' && (
                                         <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
                                             {iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
@@ -445,7 +450,7 @@ function MenuItem(
                                     <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
                                         {Boolean(description) && shouldShowDescriptionOnTop && (
                                             <Text
-                                                style={descriptionTextStyles}
+                                                style={descriptionTextStyles as TextStyle}
                                                 numberOfLines={2}
                                             >
                                                 {description}
@@ -466,7 +471,7 @@ function MenuItem(
                                                     {renderTitleContent()}
                                                 </Text>
                                             )}
-                                            {Boolean(shouldShowTitleIcon) && Boolean(titleIcon) && (
+                                            {Boolean(shouldShowTitleIcon) && titleIcon && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon
                                                         src={titleIcon}
@@ -488,7 +493,7 @@ function MenuItem(
                                                 <Text style={[styles.textLabelError]}>{error}</Text>
                                             </View>
                                         )}
-                                        {Boolean(furtherDetails) && (
+                                        {furtherDetailsIcon && Boolean(furtherDetails) && (
                                             <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
                                                 <Icon
                                                     src={furtherDetailsIcon}
@@ -517,7 +522,7 @@ function MenuItem(
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
                                 {(subtitle ?? subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, style]}>{subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, ...(combinedStyle as TextStyle[])]}>{subtitle}</Text>
                                     </View>
                                 )}
                                 {!_.isEmpty(floatRightAvatars) && (
@@ -536,7 +541,7 @@ function MenuItem(
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={props.brickRoadIndicator === 'error' ? theme.danger : theme.success}
+                                            fill={brickRoadIndicator === 'error' ? theme.danger : theme.success}
                                         />
                                     </View>
                                 )}
@@ -556,11 +561,11 @@ function MenuItem(
                                 {shouldShowRightComponent && rightComponent}
                                 {shouldShowSelectedState && <SelectCircle isChecked={isSelected} />}
                             </View>
-                            {Boolean(props.errorText) && (
+                            {Boolean(errorText) && (
                                 <FormHelpMessage
                                     isError
                                     shouldShowRedDotIndicator={false}
-                                    message={props.errorText}
+                                    message={errorText}
                                     style={styles.menuItemError}
                                 />
                             )}

From bbe82dc545778f2d8c353c300c961cf110e662fa Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 12:04:03 +0100
Subject: [PATCH 118/244] Discriminative union for icon types

---
 src/components/MenuItem.tsx | 225 +++++++++++++++++++-----------------
 1 file changed, 119 insertions(+), 106 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index fe5bd4bb15ac..2fd375698b13 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -46,165 +46,174 @@ type UnresponsiveProps = {
     interactive: false;
 };
 
-type MenuItemProps = (ResponsiveProps | UnresponsiveProps) & {
-    /** Text to be shown as badge near the right end. */
-    badgeText?: string;
+type IconProps = {
+    /** Flag to choose between avatar image or an icon */
+    iconType: typeof CONST.ICON_TYPE_ICON;
 
-    /** Used to apply offline styles to child text components */
-    style?: ViewStyle;
+    /** Icon to display on the left side of component */
+    icon: (props: SrcProps) => ReactNode;
+};
 
-    /** Any additional styles to apply */
-    wrapperStyle?: StyleProp<ViewStyle>;
+type AvatarProps = {
+    iconType: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
-    /** Any additional styles to apply on the outer element */
-    containerStyle?: StyleProp<ViewStyle>;
+    icon: AvatarSource;
+};
 
-    /** Used to apply styles specifically to the title */
-    titleStyle?: ViewStyle;
+type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
+    (IconProps | AvatarProps) & {
+        /** Text to be shown as badge near the right end. */
+        badgeText?: string;
 
-    /** Any adjustments to style when menu item is hovered or pressed */
-    hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
+        /** Used to apply offline styles to child text components */
+        style?: ViewStyle;
 
-    descriptionTextStyle?: StyleProp<ViewStyle>;
+        /** Any additional styles to apply */
+        wrapperStyle?: StyleProp<ViewStyle>;
 
-    /** Icon to display on the left side of component */
-    icon?: ((props: SrcProps) => ReactNode) | AvatarSource;
+        /** Any additional styles to apply on the outer element */
+        containerStyle?: StyleProp<ViewStyle>;
 
-    /** The fill color to pass into the icon. */
-    iconFill?: string;
+        /** Used to apply styles specifically to the title */
+        titleStyle?: ViewStyle;
 
-    /** Secondary icon to display on the left side of component, right of the icon */
-    secondaryIcon?: (props: SrcProps) => React.ReactNode;
+        /** Any adjustments to style when menu item is hovered or pressed */
+        hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
 
-    /** The fill color to pass into the secondary icon. */
-    secondaryIconFill?: string;
+        descriptionTextStyle?: StyleProp<ViewStyle>;
 
-    /** Flag to choose between avatar image or an icon */
-    iconType?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_ICON | typeof CONST.ICON_TYPE_WORKSPACE;
+        /** The fill color to pass into the icon. */
+        iconFill?: string;
 
-    /** Icon Width */
-    iconWidth?: number;
+        /** Secondary icon to display on the left side of component, right of the icon */
+        secondaryIcon?: (props: SrcProps) => React.ReactNode;
 
-    /** Icon Height */
-    iconHeight?: number;
+        /** The fill color to pass into the secondary icon. */
+        secondaryIconFill?: string;
 
-    /** Any additional styles to pass to the icon container. */
-    iconStyles?: StyleProp<ViewStyle>;
+        /** Icon Width */
+        iconWidth?: number;
 
-    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon?: FC<SvgProps>;
+        /** Icon Height */
+        iconHeight?: number;
 
-    /** An icon to display under the main item */
-    furtherDetailsIcon?: (props: SrcProps) => ReactNode;
+        /** Any additional styles to pass to the icon container. */
+        iconStyles?: StyleProp<ViewStyle>;
 
-    /** Boolean whether to display the title right icon */
-    shouldShowTitleIcon?: boolean;
+        /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+        fallbackIcon?: FC<SvgProps>;
 
-    /** Icon to display at right side of title */
-    titleIcon?: (props: SrcProps) => ReactNode;
+        /** An icon to display under the main item */
+        furtherDetailsIcon?: (props: SrcProps) => ReactNode;
 
-    /** Boolean whether to display the right icon */
-    shouldShowRightIcon?: boolean;
+        /** Boolean whether to display the title right icon */
+        shouldShowTitleIcon?: boolean;
 
-    /** Overrides the icon for shouldShowRightIcon */
-    iconRight?: (props: SrcProps) => ReactNode;
+        /** Icon to display at right side of title */
+        titleIcon?: (props: SrcProps) => ReactNode;
 
-    /** Should render component on the right */
-    shouldShowRightComponent?: boolean;
+        /** Boolean whether to display the right icon */
+        shouldShowRightIcon?: boolean;
 
-    /** Component to be displayed on the right */
-    rightComponent?: ReactNode;
+        /** Overrides the icon for shouldShowRightIcon */
+        iconRight?: (props: SrcProps) => ReactNode;
 
-    /** A description text to show under the title */
-    description?: string;
+        /** Should render component on the right */
+        shouldShowRightComponent?: boolean;
 
-    /** Should the description be shown above the title (instead of the other way around) */
-    shouldShowDescriptionOnTop?: boolean;
+        /** Component to be displayed on the right */
+        rightComponent?: ReactNode;
 
-    /** Error to display below the title */
-    error?: string;
+        /** A description text to show under the title */
+        description?: string;
 
-    /** Error to display at the bottom of the component */
-    errorText?: string;
+        /** Should the description be shown above the title (instead of the other way around) */
+        shouldShowDescriptionOnTop?: boolean;
 
-    /** A boolean flag that gives the icon a green fill if true */
-    success?: boolean;
+        /** Error to display below the title */
+        error?: string;
 
-    /** Whether item is focused or active */
-    focused?: boolean;
+        /** Error to display at the bottom of the component */
+        errorText?: string;
 
-    /** Should we disable this menu item? */
-    disabled?: boolean;
+        /** A boolean flag that gives the icon a green fill if true */
+        success?: boolean;
 
-    /** Text that appears above the title */
-    label?: string;
+        /** Whether item is focused or active */
+        focused?: boolean;
 
-    /** Label to be displayed on the right */
-    rightLabel?: string;
+        /** Should we disable this menu item? */
+        disabled?: boolean;
 
-    /** Text to display for the item */
-    title?: string;
+        /** Text that appears above the title */
+        label?: string;
 
-    /** A right-aligned subtitle for this menu option */
-    subtitle?: string | number;
+        /** Label to be displayed on the right */
+        rightLabel?: string;
 
-    /** Should the title show with normal font weight (not bold) */
-    shouldShowBasicTitle?: boolean;
+        /** Text to display for the item */
+        title?: string;
 
-    /** Should we make this selectable with a checkbox */
-    shouldShowSelectedState?: boolean;
+        /** A right-aligned subtitle for this menu option */
+        subtitle?: string | number;
 
-    /** Whether this item is selected */
-    isSelected?: boolean;
+        /** Should the title show with normal font weight (not bold) */
+        shouldShowBasicTitle?: boolean;
 
-    /** Prop to identify if we should load avatars vertically instead of diagonally */
-    shouldStackHorizontally: boolean;
+        /** Should we make this selectable with a checkbox */
+        shouldShowSelectedState?: boolean;
 
-    /** Prop to represent the size of the avatar images to be shown */
-    avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
+        /** Whether this item is selected */
+        isSelected?: boolean;
 
-    /** Avatars to show on the right of the menu item */
-    floatRightAvatars?: IconType[];
+        /** Prop to identify if we should load avatars vertically instead of diagonally */
+        shouldStackHorizontally: boolean;
 
-    /** Prop to represent the size of the float right avatar images to be shown */
-    floatRightAvatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
+        /** Prop to represent the size of the avatar images to be shown */
+        avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
 
-    viewMode?: (typeof CONST.OPTION_MODE)[keyof typeof CONST.OPTION_MODE];
+        /** Avatars to show on the right of the menu item */
+        floatRightAvatars?: IconType[];
 
-    numberOfLinesTitle?: number;
+        /** Prop to represent the size of the float right avatar images to be shown */
+        floatRightAvatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
 
-    /**  Whether we should use small avatar subscript sizing the for menu item */
-    isSmallAvatarSubscriptMenu?: boolean;
+        viewMode?: (typeof CONST.OPTION_MODE)[keyof typeof CONST.OPTION_MODE];
 
-    /** The type of brick road indicator to show. */
-    brickRoadIndicator?: (typeof CONST.BRICK_ROAD_INDICATOR_STATUS)[keyof typeof CONST.BRICK_ROAD_INDICATOR_STATUS];
+        numberOfLinesTitle?: number;
 
-    /** Should render the content in HTML format */
-    shouldRenderAsHTML?: boolean;
+        /**  Whether we should use small avatar subscript sizing the for menu item */
+        isSmallAvatarSubscriptMenu?: boolean;
 
-    /** Should we grey out the menu item when it is disabled? */
-    shouldGreyOutWhenDisabled?: boolean;
+        /** The type of brick road indicator to show. */
+        brickRoadIndicator?: (typeof CONST.BRICK_ROAD_INDICATOR_STATUS)[keyof typeof CONST.BRICK_ROAD_INDICATOR_STATUS];
 
-    /** The action accept for anonymous user or not */
-    isAnonymousAction?: boolean;
+        /** Should render the content in HTML format */
+        shouldRenderAsHTML?: boolean;
 
-    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
-    shouldBlockSelection?: boolean;
+        /** Should we grey out the menu item when it is disabled? */
+        shouldGreyOutWhenDisabled?: boolean;
 
-    shouldParseTitle?: false;
+        /** The action accept for anonymous user or not */
+        isAnonymousAction?: boolean;
 
-    /** Should check anonymous user in onPress function */
-    shouldCheckActionAllowedOnPress?: boolean;
+        /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
+        shouldBlockSelection?: boolean;
 
-    /** Text to display under the main item */
-    furtherDetails?: string;
+        shouldParseTitle?: false;
 
-    /** The function that should be called when this component is LongPressed or right-clicked. */
-    onSecondaryInteraction: () => void;
+        /** Should check anonymous user in onPress function */
+        shouldCheckActionAllowedOnPress?: boolean;
 
-    /** Array of objects that map display names to their corresponding tooltip */
-    titleWithTooltips: DisplayNameWithTooltip[];
-};
+        /** Text to display under the main item */
+        furtherDetails?: string;
+
+        /** The function that should be called when this component is LongPressed or right-clicked. */
+        onSecondaryInteraction: () => void;
+
+        /** Array of objects that map display names to their corresponding tooltip */
+        titleWithTooltips: DisplayNameWithTooltip[];
+    };
 
 function MenuItem(
     {
@@ -414,6 +423,10 @@ function MenuItem(
                                                     }
                                                 />
                                             )}
+                                        </View>
+                                    )}
+                                    {Boolean(icon) && typeof icon !== 'function' && (
+                                        <View>
                                             {iconType === CONST.ICON_TYPE_WORKSPACE && (
                                                 <Avatar
                                                     imageStyles={[styles.alignSelfCenter]}

From e5d8ea78afd2de6874e0f982c0a5a2ff61c6e91c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 13:52:42 +0100
Subject: [PATCH 119/244] Fix pressable types - drop invalid Children props

---
 .../types.ts                                  | 95 +++++++++----------
 1 file changed, 47 insertions(+), 48 deletions(-)

diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
index cf286afcb63a..dc24bd7f0d63 100644
--- a/src/components/PressableWithSecondaryInteraction/types.ts
+++ b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -2,53 +2,52 @@ import {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-nati
 import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps &
-    ChildrenProps & {
-        /** The function that should be called when this pressable is pressed */
-        onPress: (event?: GestureResponderEvent) => void;
-
-        /** The function that should be called when this pressable is pressedIn */
-        onPressIn?: (event?: GestureResponderEvent) => void;
-
-        /** The function that should be called when this pressable is pressedOut */
-        onPressOut?: (event?: GestureResponderEvent) => void;
-
-        /**
-         * The function that should be called when this pressable is LongPressed or right-clicked.
-         *
-         * This function should be stable, preferably wrapped in a `useCallback` so that it does not
-         * cause several re-renders.
-         */
-        onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void;
-
-        /** Prevent the default ContextMenu on web/Desktop */
-        preventDefaultContextMenu?: boolean;
-
-        /** Use Text instead of Pressable to create inline layout.
-         * It has few limitations in comparison to Pressable.
-         *
-         * - No support for delayLongPress.
-         * - No support for pressIn and pressOut events.
-         * - No support for opacity
-         *
-         * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web.
-         */
-        inline?: boolean;
-
-        /** Disable focus trap for the element on secondary interaction  */
-        withoutFocusOnSecondaryInteraction?: boolean;
-
-        /** Opacity to reduce to when active  */
-        activeOpacity?: number;
-
-        /** Used to apply styles to the Pressable */
-        style?: StyleProp<ViewStyle & TextStyle>;
-
-        /** Whether the long press with hover behavior is enabled */
-        enableLongPressWithHover?: boolean;
-
-        /** Whether the text has a gray highlights on press down (for IOS only) */
-        suppressHighlighting?: boolean;
-    };
+type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
+    /** The function that should be called when this pressable is pressed */
+    onPress: (event?: GestureResponderEvent) => void;
+
+    /** The function that should be called when this pressable is pressedIn */
+    onPressIn?: (event?: GestureResponderEvent) => void;
+
+    /** The function that should be called when this pressable is pressedOut */
+    onPressOut?: (event?: GestureResponderEvent) => void;
+
+    /**
+     * The function that should be called when this pressable is LongPressed or right-clicked.
+     *
+     * This function should be stable, preferably wrapped in a `useCallback` so that it does not
+     * cause several re-renders.
+     */
+    onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void;
+
+    /** Prevent the default ContextMenu on web/Desktop */
+    preventDefaultContextMenu?: boolean;
+
+    /** Use Text instead of Pressable to create inline layout.
+     * It has few limitations in comparison to Pressable.
+     *
+     * - No support for delayLongPress.
+     * - No support for pressIn and pressOut events.
+     * - No support for opacity
+     *
+     * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web.
+     */
+    inline?: boolean;
+
+    /** Disable focus trap for the element on secondary interaction  */
+    withoutFocusOnSecondaryInteraction?: boolean;
+
+    /** Opacity to reduce to when active  */
+    activeOpacity?: number;
+
+    /** Used to apply styles to the Pressable */
+    style?: StyleProp<ViewStyle & TextStyle>;
+
+    /** Whether the long press with hover behavior is enabled */
+    enableLongPressWithHover?: boolean;
+
+    /** Whether the text has a gray highlights on press down (for IOS only) */
+    suppressHighlighting?: boolean;
+};
 
 export default PressableWithSecondaryInteractionProps;

From ed74e29cf6b0be7b31ae6365dfaf7c3d81d42d39 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Thu, 14 Dec 2023 15:14:05 +0100
Subject: [PATCH 120/244] fix PR comments

---
 src/pages/home/report/LinkPreviewer.tsx | 92 ++++++++++++-------------
 1 file changed, 45 insertions(+), 47 deletions(-)

diff --git a/src/pages/home/report/LinkPreviewer.tsx b/src/pages/home/report/LinkPreviewer.tsx
index 9b2bd2c45dc2..cd5895c062dc 100644
--- a/src/pages/home/report/LinkPreviewer.tsx
+++ b/src/pages/home/report/LinkPreviewer.tsx
@@ -24,64 +24,62 @@ function LinkPreviewer({linkMetadata = [], maxAmountOfPreviews = -1}: LinkPrevie
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const uniqueLinks = linkMetadata.filter((link, index, self) => self.findIndex((t) => t.url === link.url) === index);
+    const uniqueLinks = linkMetadata.filter((link, index) => linkMetadata.findIndex(({url}) => url === link.url) === index);
     const maxAmmountOfLinks = maxAmountOfPreviews >= 0 ? Math.min(maxAmountOfPreviews, linkMetadata.length) : linkMetadata.length;
     const linksToShow = uniqueLinks.slice(0, maxAmmountOfLinks);
     return linksToShow.map((linkData) => {
-        if (Array.isArray(linkData)) {
+        if (!linkData && Array.isArray(linkData)) {
             return;
         }
         const {description, image, title, logo, publisher, url} = linkData;
         return (
-            linkData && (
-                <View
-                    style={styles.linkPreviewWrapper}
-                    key={url}
-                >
-                    <View style={styles.flexRow}>
-                        {logo && (
-                            <Image
-                                style={styles.linkPreviewLogoImage}
-                                source={{uri: logo.url}}
-                            />
-                        )}
-                        {publisher && (
-                            <Text
-                                fontSize={variables.fontSizeLabel}
-                                style={styles.pl2}
-                            >
-                                {publisher}
-                            </Text>
-                        )}
-                    </View>
-                    {title && url && (
-                        <TextLink
-                            fontSize={variables.fontSizeNormal}
-                            style={[styles.mv2, StyleUtils.getTextColorStyle(theme.link), styles.alignSelfStart]}
-                            href={url}
-                        >
-                            {title}
-                        </TextLink>
-                    )}
-                    {description && <Text fontSize={variables.fontSizeNormal}>{description}</Text>}
-                    {image?.type && IMAGE_TYPES.includes(image.type) && image.width && image.height && (
+            <View
+                style={styles.linkPreviewWrapper}
+                key={url}
+            >
+                <View style={styles.flexRow}>
+                    {logo && (
                         <Image
-                            style={[
-                                styles.linkPreviewImage,
-                                {
-                                    aspectRatio: image.width / image.height,
-                                    maxHeight: Math.min(image.height, MAX_IMAGE_HEIGHT),
-
-                                    // Calculate maximum width when image is too tall, so it doesn't move away from left
-                                    maxWidth: Math.min((Math.min(image.height, MAX_IMAGE_HEIGHT) / image.height) * image.width, MAX_IMAGE_WIDTH),
-                                },
-                            ]}
-                            resizeMode="contain"
-                            source={{uri: image.url}}
+                            style={styles.linkPreviewLogoImage}
+                            source={{uri: logo.url}}
                         />
                     )}
+                    {publisher && (
+                        <Text
+                            fontSize={variables.fontSizeLabel}
+                            style={styles.pl2}
+                        >
+                            {publisher}
+                        </Text>
+                    )}
                 </View>
-            )
+                {title && url && (
+                    <TextLink
+                        fontSize={variables.fontSizeNormal}
+                        style={[styles.mv2, StyleUtils.getTextColorStyle(theme.link), styles.alignSelfStart]}
+                        href={url}
+                    >
+                        {title}
+                    </TextLink>
+                )}
+                {description && <Text fontSize={variables.fontSizeNormal}>{description}</Text>}
+                {image?.type && IMAGE_TYPES.includes(image.type) && image.width && image.height && (
+                    <Image
+                        style={[
+                            styles.linkPreviewImage,
+                            {
+                                aspectRatio: image.width / image.height,
+                                maxHeight: Math.min(image.height, MAX_IMAGE_HEIGHT),
+
+                                // Calculate maximum width when image is too tall, so it doesn't move away from left
+                                maxWidth: Math.min((Math.min(image.height, MAX_IMAGE_HEIGHT) / image.height) * image.width, MAX_IMAGE_WIDTH),
+                            },
+                        ]}
+                        resizeMode="contain"
+                        source={{uri: image.url}}
+                    />
+                )}
+            </View>
         );
     });
 }

From c5da0d20a95e69a81f7f5df1b7c1fa343c5f5122 Mon Sep 17 00:00:00 2001
From: Viktoryia Kliushun <vikstash@gmail.com>
Date: Thu, 14 Dec 2023 17:11:29 +0100
Subject: [PATCH 121/244] Update isEmptyObject typing

---
 src/types/utils/EmptyObject.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/types/utils/EmptyObject.ts b/src/types/utils/EmptyObject.ts
index 8cb1ff6db2a2..aa8b538499cd 100644
--- a/src/types/utils/EmptyObject.ts
+++ b/src/types/utils/EmptyObject.ts
@@ -2,12 +2,14 @@ import Falsy from './Falsy';
 
 type EmptyObject = Record<string, never>;
 
+type EmptyValue = EmptyObject | null | undefined;
+
 // eslint-disable-next-line rulesdir/no-negated-variables
 function isNotEmptyObject<T extends Record<string, unknown> | Falsy>(arg: T | EmptyObject): arg is NonNullable<T> {
     return Object.keys(arg ?? {}).length > 0;
 }
 
-function isEmptyObject<T>(obj: T | EmptyObject | null | undefined): obj is EmptyObject {
+function isEmptyObject<T>(obj: T | EmptyValue): obj is EmptyValue {
     return Object.keys(obj ?? {}).length === 0;
 }
 

From cd85712455d4cfcd4d15eba170d8a4950db1f330 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 19:26:35 +0100
Subject: [PATCH 122/244] Change import path

---
 src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index c69ad8da7c8b..d8f94dfe244f 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -3,7 +3,7 @@ import Button from '@components/Button';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section, {CARD_LAYOUT} from '@components/Section';
 import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type WorkspaceCardCreateAWorkspaceProps = WithLocalizeProps;
 

From 9208c95e3c9b375897e7133696ffcdb07b67fb74 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 19:30:09 +0100
Subject: [PATCH 123/244] Merge branch 'main' into ts-migration/MenuItem

---
 .eslintrc.js                                  |   1 +
 .github/scripts/findUnusedKeys.sh             |  64 +++---
 .storybook/theme.js                           |   2 +-
 android/app/build.gradle                      |   4 +-
 desktop/package-lock.json                     |  20 +-
 desktop/package.json                          |   2 +-
 docs/_includes/floating-concierge-button.html |   5 -
 docs/_includes/platform.html                  |   5 -
 docs/_layouts/default.html                    |   3 -
 docs/_sass/_main.scss                         |  30 ---
 .../accounting-integrations/Certinia.md       | 150 ++++++++++++++
 .../accounting-integrations/FinancalForce.md  | 111 ----------
 .../get-paid-back/Referral-Program.md         |  52 ++---
 docs/index.html                               |   5 -
 ios/NewExpensify/Info.plist                   |   4 +-
 ios/NewExpensifyTests/Info.plist              |   4 +-
 package-lock.json                             |  66 +++---
 package.json                                  |   4 +-
 ...h => @react-navigation+native+6.1.8.patch} |  38 +---
 src/App.js                                    |  14 +-
 src/CONST.ts                                  |   8 +-
 src/components/AddPaymentMethodMenu.js        |  10 +-
 src/components/AddPlaidBankAccount.js         |   4 +-
 src/components/AddressForm.js                 |   2 +-
 .../AddressSearch/CurrentLocationButton.js    |   6 +-
 src/components/AddressSearch/index.js         |   6 +-
 src/components/AmountTextInput.js             |   4 +-
 .../AnchorForAttachmentsOnly/index.native.js  |   2 +-
 .../BaseAnchorForCommentsOnly.js              |   4 +-
 src/components/AnimatedStep/index.tsx         |   2 +-
 src/components/AnonymousReportFooter.tsx      |   2 +-
 src/components/ArchivedReportFooter.tsx       |   2 +-
 src/components/AttachmentModal.js             |   6 +-
 .../AttachmentPicker/index.native.js          |   2 +-
 .../AttachmentCarouselCellRenderer.js         |   2 +-
 .../AttachmentCarousel/CarouselButtons.js     |   4 +-
 .../AttachmentCarousel/CarouselItem.js        |   2 +-
 .../Pager/ImageTransformer.js                 |   2 +-
 .../AttachmentCarousel/Pager/ImageWrapper.js  |   2 +-
 .../AttachmentCarousel/Pager/index.js         |   2 +-
 .../Attachments/AttachmentCarousel/index.js   |   2 +-
 .../AttachmentCarousel/index.native.js        |   2 +-
 .../AttachmentViewImage/index.js              |   2 +-
 .../AttachmentViewImage/index.native.js       |   2 +-
 .../AttachmentViewPdf/index.android.js        |   2 +-
 .../Attachments/AttachmentView/index.js       |   9 +-
 .../BaseAutoCompleteSuggestions.tsx           |  31 +--
 .../AutoCompleteSuggestions/index.tsx         |   2 +-
 src/components/AutoEmailLink.js               |   2 +-
 src/components/AutoUpdateTime.js              |   2 +-
 src/components/Avatar.tsx                     |   6 +-
 .../AvatarCropModal/AvatarCropModal.js        |   6 +-
 .../AvatarCropModal/ImageCropView.js          |   4 +-
 src/components/AvatarCropModal/Slider.js      |   2 +-
 src/components/AvatarSkeleton.tsx             |   2 +-
 src/components/AvatarWithDisplayName.tsx      |   6 +-
 src/components/AvatarWithImagePicker.js       |   4 +-
 src/components/AvatarWithIndicator.tsx        |   2 +-
 src/components/Badge.tsx                      |   4 +-
 src/components/Banner.tsx                     |   4 +-
 src/components/BaseMiniContextMenuItem.tsx    |   4 +-
 src/components/BigNumberPad.tsx               |   2 +-
 src/components/BlockingViews/BlockingView.js  |   4 +-
 .../BlockingViews/FullPageNotFoundView.js     |   2 +-
 src/components/Button/index.tsx               |   4 +-
 src/components/ButtonWithDropdownMenu.js      |   6 +-
 src/components/CardPreview.tsx                |   2 +-
 src/components/CategoryPicker/index.js        |   2 +-
 src/components/Checkbox.tsx                   |   6 +-
 src/components/CheckboxWithLabel.js           |   2 +-
 src/components/CollapsibleSection/index.tsx   |   2 +-
 src/components/ColorSchemeWrapper/index.tsx   |   4 +-
 src/components/CommunicationsLink.js          |   2 +-
 src/components/Composer/index.android.js      |   4 +-
 src/components/Composer/index.ios.js          |   4 +-
 src/components/Composer/index.js              |  27 ++-
 src/components/ConfirmContent.js              |   2 +-
 src/components/ConfirmationPage.tsx           |   2 +-
 src/components/ConfirmedRoute.js              |   4 +-
 src/components/ConnectBankAccountButton.js    |   2 +-
 src/components/ContextMenuItem.js             |   4 +-
 src/components/CountrySelector.js             |   2 +-
 src/components/CurrencySymbolButton.js        |   2 +-
 .../index.tsx                                 |   6 +-
 src/components/CurrentWalletBalance.tsx       |   2 +-
 .../CustomStatusBarContext.tsx                |  11 -
 .../CustomStatusBarContextProvider.tsx        |  17 --
 src/components/CustomStatusBar/index.tsx      |  91 ---------
 .../CustomStatusBarAndBackgroundContext.tsx   |  11 +
 ...mStatusBarAndBackgroundContextProvider.tsx |  17 ++
 .../CustomStatusBarAndBackground/index.tsx    | 113 +++++++++++
 .../updateGlobalBackgroundColor/index.ts      |   5 +
 .../index.website.ts                          |   8 +
 .../updateGlobalBackgroundColor/types.ts      |   5 +
 .../index.android.ts                          |   0
 .../updateStatusBarAppearance/index.ios.ts    |   0
 .../updateStatusBarAppearance/index.ts        |   0
 .../updateStatusBarAppearance/types.ts        |   2 +-
 .../DatePicker/CalendarPicker/ArrowIcon.js    |   4 +-
 .../CalendarPicker/YearPickerModal.js         |   2 +-
 src/components/DatePicker/index.js            |   2 +-
 .../DeeplinkRedirectLoadingIndicator.js       |   4 +-
 .../DisplayNames/DisplayNamesTooltipItem.tsx  |   2 +-
 .../DisplayNames/DisplayNamesWithTooltip.tsx  |   2 +-
 .../DisplayNamesWithoutTooltip.tsx            |   2 +-
 src/components/DistanceEReceipt.js            |   4 +-
 .../DistanceMapView/index.android.js          |   4 +-
 .../DistanceRequest/DistanceRequestFooter.js  |   4 +-
 .../DistanceRequestRenderItem.js              |   2 +-
 src/components/DistanceRequest/index.js       |   2 +-
 src/components/DotIndicatorMessage.tsx        |   6 +-
 .../DragAndDrop/NoDropZone/index.tsx          |   2 +-
 src/components/DragAndDrop/Provider/index.tsx |   2 +-
 src/components/DraggableList/index.native.tsx |   2 +-
 src/components/DraggableList/index.tsx        |   2 +-
 src/components/EReceipt.js                    |   4 +-
 src/components/EReceiptThumbnail.js           |   4 +-
 .../EmojiPicker/CategoryShortcutBar.js        |   2 +-
 .../EmojiPicker/CategoryShortcutButton.js     |   6 +-
 src/components/EmojiPicker/EmojiPicker.js     |   4 +-
 .../EmojiPicker/EmojiPickerButton.js          |   4 +-
 .../EmojiPicker/EmojiPickerButtonDropdown.js  |   4 +-
 .../EmojiPicker/EmojiPickerMenu/index.js      |   4 +-
 .../EmojiPickerMenu/index.native.js           |   4 +-
 .../EmojiPicker/EmojiSkinToneList.js          |   2 +-
 src/components/EmojiSuggestions.tsx           |   4 +-
 src/components/EnvironmentBadge.tsx           |   2 +-
 src/components/ExceededCommentLength.js       |  46 +----
 src/components/ExpensifyWordmark.tsx          |   6 +-
 src/components/FeatureList.js                 |   2 +-
 src/components/FixedFooter.tsx                |   2 +-
 src/components/FocusModeNotification.js       |   4 +-
 src/components/Form.js                        |   2 +-
 src/components/Form/FormProvider.js           |   7 +-
 src/components/Form/FormWrapper.js            |   2 +-
 src/components/FormAlertWithSubmitButton.js   |   2 +-
 src/components/FormAlertWrapper.js            |   2 +-
 src/components/FormHelpMessage.tsx            |   4 +-
 src/components/FormScrollView.tsx             |   2 +-
 src/components/FullscreenLoadingIndicator.tsx |   4 +-
 .../GrowlNotificationContainer/index.js       |   2 +-
 .../index.native.js                           |   4 +-
 src/components/GrowlNotification/index.js     |   4 +-
 .../BaseHTMLEngineProvider.js                 |   4 +-
 .../HTMLRenderers/AnchorRenderer.js           |   2 +-
 .../HTMLRenderers/CodeRenderer.js             |   2 +-
 .../HTMLRenderers/EditedRenderer.js           |   7 +-
 .../HTMLRenderers/ImageRenderer.js            |   2 +-
 .../HTMLRenderers/MentionHereRenderer.js      |   2 +-
 .../HTMLRenderers/MentionUserRenderer.js      |   4 +-
 .../PreRenderer/BasePreRenderer.js            |   2 +-
 src/components/Header.tsx                     |   2 +-
 src/components/HeaderGap/index.desktop.js     |  25 ---
 src/components/HeaderGap/index.desktop.tsx    |  13 ++
 src/components/HeaderGap/index.js             |   6 -
 src/components/HeaderGap/index.tsx            |  10 +
 src/components/HeaderGap/types.ts             |  10 +
 src/components/HeaderPageLayout.js            |   6 +-
 src/components/HeaderWithBackButton/index.js  |   4 +-
 src/components/Icon/BankIcons.ts              |   2 +-
 src/components/Icon/svgs/LoungeAccessIcon.tsx |   2 +-
 src/components/IllustratedHeaderPageLayout.js |   4 +-
 src/components/ImageView/index.js             |   4 +-
 src/components/ImageView/index.native.js      |   2 +-
 src/components/ImageWithSizeCalculation.tsx   |   2 +-
 src/components/Indicator.tsx                  |   4 +-
 .../InlineCodeBlock/WrappedText.tsx           |   2 +-
 .../InlineCodeBlock/index.native.tsx          |   2 +-
 src/components/InlineSystemMessage.tsx        |   4 +-
 .../InvertedFlatList/index.native.js          |   2 +-
 src/components/KYCWall/BaseKYCWall.js         |   2 +
 src/components/KYCWall/kycWallPropTypes.js    |   4 +
 .../LHNOptionsList/LHNOptionsList.js          |   2 +-
 src/components/LHNOptionsList/OptionRowLHN.js |   6 +-
 src/components/LocalePicker.tsx               |   4 +-
 .../BaseLocationErrorMessage.js               |   6 +-
 src/components/Lottie/Lottie.tsx              |   2 +-
 src/components/MagicCodeInput.js              |   4 +-
 src/components/MapView/Direction.tsx          |   2 +-
 src/components/MapView/Direction.website.tsx  |   2 +-
 src/components/MapView/MapView.tsx            |   2 +-
 src/components/MapView/MapView.website.tsx    |   6 +-
 src/components/MapView/PendingMapView.tsx     |   2 +-
 src/components/MentionSuggestions.tsx         |   6 +-
 src/components/MenuItem.tsx                   |   6 +-
 src/components/MessagesRow.tsx                |   2 +-
 src/components/Modal/BaseModal.tsx            |   6 +-
 src/components/Modal/index.tsx                |   4 +-
 src/components/MoneyReportHeader.js           |   2 +-
 src/components/MoneyReportHeaderStatusBar.js  |   2 +-
 .../MoneyRequestConfirmationList.js           |   5 +-
 src/components/MoneyRequestHeader.js          |   2 +-
 src/components/MoneyRequestHeaderStatusBar.js |   2 +-
 src/components/MoneyRequestSkeletonView.tsx   |   4 +-
 ...oraryForRefactorRequestConfirmationList.js |   4 +-
 src/components/MultipleAvatars.tsx            |   6 +-
 src/components/OfflineIndicator.tsx           |   2 +-
 src/components/OfflineWithFeedback.tsx        |   4 +-
 src/components/Onfido/BaseOnfidoWeb.js        |   6 +-
 src/components/OptionRow.js                   |   6 +-
 src/components/OptionsList/BaseOptionsList.js |   2 +-
 src/components/PDFView/PDFInfoMessage.js      |   2 +-
 src/components/PDFView/PDFPasswordForm.js     |   2 +-
 src/components/ParentNavigationSubtitle.tsx   |   2 +-
 src/components/Picker/BasePicker.tsx          |   4 +-
 src/components/PinButton.js                   |   4 +-
 src/components/PopoverMenu/index.js           |   2 +-
 src/components/PopoverWithMeasuredContent.js  |   8 +-
 src/components/PopoverWithoutOverlay/index.js |   4 +-
 .../GenericPressable/BaseGenericPressable.tsx |   4 +-
 .../Pressable/PressableWithDelayToggle.tsx    |   4 +-
 .../index.tsx                                 |   4 +-
 src/components/QRCode.tsx                     |   2 +-
 src/components/QRShare/index.js               |   4 +-
 src/components/RNTextInput.tsx                |   4 +
 src/components/RadioButton.tsx                |   4 +-
 src/components/RadioButtonWithLabel.tsx       |   2 +-
 src/components/RadioButtons.tsx               |   2 +-
 src/components/Reactions/AddReactionBubble.js |   4 +-
 .../Reactions/EmojiReactionBubble.js          |   4 +-
 .../Reactions/MiniQuickEmojiReactions.js      |   4 +-
 .../BaseQuickEmojiReactions.js                |   2 +-
 .../Reactions/ReactionTooltipContent.js       |   2 +-
 .../ReportActionItemEmojiReactions.js         |   2 +-
 src/components/ReceiptEmptyState.js           |   2 +-
 .../ReimbursementAccountLoadingIndicator.js   |   2 +-
 .../ReportActionItem/ChronosOOOListActions.js |   2 +-
 .../ReportActionItem/MoneyReportView.js       |   6 +-
 .../ReportActionItem/MoneyRequestAction.js    |   2 +-
 .../ReportActionItem/MoneyRequestPreview.js   | 114 +++++------
 .../ReportActionItem/MoneyRequestView.js      |   6 +-
 .../ReportActionItem/RenameAction.js          |   2 +-
 .../ReportActionItem/ReportActionItemImage.js |   2 +-
 .../ReportActionItemImages.js                 |   6 +-
 .../ReportActionItem/ReportPreview.js         |   4 +-
 src/components/ReportActionItem/TaskAction.js |   2 +-
 .../ReportActionItem/TaskPreview.js           |   4 +-
 src/components/ReportActionItem/TaskView.js   |   4 +-
 .../SkeletonViewLines.tsx                     |   4 +-
 src/components/ReportHeaderSkeletonView.tsx   |   4 +-
 src/components/ReportWelcomeText.js           |   2 +-
 src/components/RoomHeaderAvatars.js           |   6 +-
 .../RoomNameInput/roomNameInputPropTypes.js   |   3 +-
 src/components/SAMLLoadingIndicator.js        |   9 +-
 src/components/SafeArea/index.ios.tsx         |   2 +-
 .../SafeAreaConsumer/index.android.tsx        |   2 +-
 src/components/SafeAreaConsumer/index.tsx     |   2 +-
 src/components/ScreenWrapper/index.js         |   2 +-
 src/components/Section.js                     |   2 +-
 src/components/SelectCircle.tsx               |   4 +-
 src/components/SelectionList/BaseListItem.js  |   6 +-
 .../SelectionList/BaseSelectionList.js        |   6 +-
 src/components/SelectionList/RadioListItem.js |   2 +-
 src/components/SelectionList/UserListItem.js  |   2 +-
 src/components/SettlementButton.js            |   6 +
 src/components/ShowMoreButton/index.js        |   4 +-
 .../AppleSignIn/index.desktop.js              |   2 +-
 .../GoogleSignIn/index.desktop.js             |   2 +-
 .../GoogleSignIn/index.website.js             |   2 +-
 src/components/SignInButtons/IconButton.js    |   2 +-
 src/components/SingleChoiceQuestion.tsx       |   2 +-
 src/components/SingleOptionSelector.js        |   2 +-
 src/components/SpacerView.js                  |   2 +-
 .../SplashScreenHider/index.native.tsx        |   6 +-
 src/components/SplashScreenHider/index.tsx    |   4 +-
 src/components/SplashScreenHider/types.ts     |   6 +-
 .../StatePicker/StateSelectorModal.js         |   2 +-
 src/components/StatePicker/index.js           |   2 +-
 src/components/SubscriptAvatar.tsx            |   6 +-
 src/components/Switch.tsx                     |   2 +-
 src/components/TabSelector/TabIcon.js         |   2 +-
 src/components/TabSelector/TabLabel.js        |   2 +-
 src/components/TabSelector/TabSelector.js     |   4 +-
 src/components/TabSelector/TabSelectorItem.js |   2 +-
 src/components/TagPicker/index.js             |   4 +-
 src/components/TaskHeaderActionButton.tsx     |   2 +-
 src/components/TestToolMenu.tsx               |   2 +-
 src/components/TestToolRow.tsx                |   2 +-
 src/components/TestToolsModal.tsx             |   2 +-
 src/components/Text.tsx                       |   4 +-
 .../TextInput/BaseTextInput/index.js          |   6 +-
 .../TextInput/BaseTextInput/index.native.js   |   6 +-
 .../TextInput/TextInputLabel/index.js         |   2 +-
 .../TextInput/TextInputLabel/index.native.js  |   2 +-
 src/components/TextInput/index.js             |   2 +-
 src/components/TextInput/index.native.js      |   2 +-
 src/components/TextLink.tsx                   |   2 +-
 src/components/TextWithEllipsis/index.tsx     |   2 +-
 .../ThemeIllustrationsProvider.tsx            |   9 +-
 .../themes => components}/ThemeProvider.tsx   |   8 +-
 .../ThemeStylesProvider.tsx                   |   8 +-
 src/components/ThreeDotsMenu/index.js         |   2 +-
 src/components/ThumbnailImage.tsx             |   4 +-
 src/components/TimePicker/TimePicker.js       |   4 +-
 .../Tooltip/TooltipRenderedOnPageBody.tsx     |   2 +-
 src/components/UnorderedList.tsx              |   2 +-
 src/components/UnreadActionIndicator.tsx      |   2 +-
 .../BaseUserDetailsTooltip.website.js         |   2 +-
 .../ValidateCode/ExpiredValidateCodeModal.js  |   4 +-
 .../ValidateCode/JustSignedInModal.js         |   4 +-
 .../ValidateCode/ValidateCodeModal.js         |   4 +-
 .../ValuePicker/ValueSelectorModal.js         |   2 +-
 src/components/ValuePicker/index.js           |   4 +-
 .../BaseVideoChatButtonAndMenu.js             |   4 +-
 src/components/WalletSection.tsx              |   2 +-
 src/components/WalletStatementModal/index.tsx |   2 +-
 src/components/withStyleUtils.tsx             |   2 +-
 src/components/withTheme.tsx                  |   4 +-
 src/components/withThemeStyles.tsx            |   4 +-
 src/components/withToggleVisibilityView.tsx   |   2 +-
 ...AutoFocusInput.js => useAutoFocusInput.ts} |  17 +-
 ...dInputFocus.js => useDelayedInputFocus.ts} |  12 +-
 src/hooks/useHandleExceedMaxCommentLength.ts  |  27 +++
 .../{index.js => index.ts}                    |  18 +-
 .../useIsScrollBarVisible/index.native.ts     |   7 +
 src/hooks/useIsScrollBarVisible/index.ts      |  28 +++
 src/{styles => hooks}/useStyleUtils.ts        |   2 +-
 .../{index.js => index.ts}                    |  23 ++-
 src/{styles/themes => hooks}/useTheme.ts      |   4 +-
 .../useThemeIllustrations.ts                  |   2 +-
 .../themes => hooks}/useThemePreference.ts    |  16 +-
 .../useThemePreferenceWithStaticOverride.ts   |   2 +-
 src/{styles => hooks}/useThemeStyles.ts       |   2 +-
 src/languages/en.ts                           |   2 +
 src/languages/es.ts                           |   2 +
 .../updateNumberOfLines/types.ts              |   2 +-
 .../Navigation/AppNavigator/AuthScreens.tsx   |   2 +-
 .../AppNavigator/ModalStackNavigators.tsx     |   5 +-
 .../BaseCentralPaneNavigator.tsx              |   2 +-
 .../AppNavigator/Navigators/Overlay.tsx       |   2 +-
 .../Navigators/RightModalNavigator.tsx        |   2 +-
 .../AppNavigator/RHPScreenOptions.ts          |   2 +-
 .../getRootNavigatorScreenOptions.ts          |   4 +-
 .../modalCardStyleInterpolator.ts             |   2 +-
 src/libs/Navigation/NavigationRoot.tsx        |   2 +-
 src/libs/NextStepUtils.ts                     |   6 +-
 src/libs/OptionsListUtils.js                  |   4 +-
 src/libs/PaymentUtils.ts                      |   2 +-
 src/libs/Permissions.ts                       |   5 +
 .../PopoverWithMeasuredContentUtils.ts}       |   8 +-
 src/libs/ReportActionsUtils.ts                |   2 +-
 src/libs/ReportUtils.ts                       |   3 +-
 src/libs/actions/IOU.js                       |  54 ++++-
 src/libs/actions/Report.ts                    |  29 +--
 src/libs/actions/Session/index.ts             |  33 +++
 src/libs/actions/SignInRedirect.ts            |  34 ----
 src/libs/actions/User.js                      |   3 -
 src/pages/AddPersonalBankAccountPage.js       |   2 +-
 src/pages/DetailsPage.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/EditRequestTagPage.js               |   2 +-
 .../EnablePayments/AdditionalDetailsStep.js   |   2 +-
 src/pages/EnablePayments/FailedKYC.js         |   2 +-
 src/pages/EnablePayments/IdologyQuestions.js  |   2 +-
 src/pages/EnablePayments/OnfidoPrivacy.js     |   2 +-
 .../EnablePayments/TermsPage/LongTermsForm.js |   2 +-
 .../TermsPage/ShortTermsForm.js               |   2 +-
 src/pages/EnablePayments/TermsStep.js         |   2 +-
 src/pages/ErrorPage/ErrorBodyText/index.js    |   2 +-
 src/pages/ErrorPage/GenericErrorPage.js       |   6 +-
 src/pages/FlagCommentPage.js                  |   2 +-
 src/pages/GetAssistancePage.js                |   2 +-
 src/pages/KeyboardShortcutsPage.js            |   2 +-
 src/pages/LogInWithShortLivedAuthTokenPage.js |   4 +-
 src/pages/NewChatPage.js                      |   2 +-
 .../PrivateNotes/PrivateNotesEditPage.js      |   2 +-
 .../PrivateNotes/PrivateNotesListPage.js      |   2 +-
 .../PrivateNotes/PrivateNotesViewPage.js      |   2 +-
 src/pages/ProfilePage.js                      |   2 +-
 src/pages/ReferralDetailsPage.js              |   4 +-
 .../ReimbursementAccount/ACHContractStep.js   |   2 +-
 src/pages/ReimbursementAccount/AddressForm.js |   2 +-
 .../BankAccountManualStep.js                  |   2 +-
 .../BankAccountPlaidStep.js                   |   2 +-
 .../ReimbursementAccount/BankAccountStep.js   |   4 +-
 src/pages/ReimbursementAccount/CompanyStep.js |   2 +-
 .../ContinueBankAccountSetup.js               |   2 +-
 .../ReimbursementAccount/Enable2FAPrompt.js   |   2 +-
 src/pages/ReimbursementAccount/EnableStep.js  |   2 +-
 .../ReimbursementAccount/ExampleCheck.js      |   4 +-
 .../ReimbursementAccount/IdentityForm.js      |   2 +-
 .../ReimbursementAccountPage.js               |   6 +-
 .../RequestorOnfidoStep.js                    |   2 +-
 .../ReimbursementAccount/RequestorStep.js     |   2 +-
 .../ReimbursementAccount/ValidationStep.js    |   2 +-
 src/pages/ReportDetailsPage.js                |   2 +-
 src/pages/ReportParticipantsPage.js           |   2 +-
 src/pages/ReportWelcomeMessagePage.js         |   2 +-
 src/pages/RoomInvitePage.js                   |   2 +-
 src/pages/RoomMembersPage.js                  |   2 +-
 .../TeachersUnite/ImTeacherUpdateEmailPage.js |   2 +-
 .../TeachersUnite/IntroSchoolPrincipalPage.js |   2 +-
 src/pages/TeachersUnite/KnowATeacherPage.js   |   2 +-
 src/pages/TeachersUnite/SaveTheWorldPage.js   |   4 +-
 src/pages/home/HeaderView.js                  |   4 +-
 src/pages/home/ReportScreen.js                |  14 +-
 .../report/AnimatedEmptyStateBackground.js    |   4 +-
 .../BaseReportActionContextMenu.js            |   2 +-
 .../MiniReportActionContextMenu/index.js      |   2 +-
 .../index.android.js                          |   2 +-
 .../FloatingMessageCounterContainer/index.js  |   2 +-
 .../report/FloatingMessageCounter/index.js    |   4 +-
 src/pages/home/report/LinkPreviewer.js        |   6 +-
 .../ListBoundaryLoader/ListBoundaryLoader.js  |   4 +-
 src/pages/home/report/ParticipantLocalTime.js |   2 +-
 .../report/ReactionList/BaseReactionList.js   |   2 +-
 .../report/ReactionList/HeaderReactionList.js |   4 +-
 .../AttachmentPickerWithMenuItems.js          |   2 +-
 .../ComposerWithSuggestions.js                |  13 +-
 .../ReportActionCompose.js                    |  11 +-
 .../report/ReportActionCompose/SendButton.js  |   4 +-
 src/pages/home/report/ReportActionItem.js     |   6 +-
 .../report/ReportActionItemBasicMessage.tsx   |   2 +-
 .../home/report/ReportActionItemCreated.js    |   4 +-
 src/pages/home/report/ReportActionItemDate.js |   2 +-
 .../home/report/ReportActionItemDraft.tsx     |   2 +-
 .../home/report/ReportActionItemFragment.js   |   2 +-
 .../home/report/ReportActionItemGrouped.tsx   |   2 +-
 .../home/report/ReportActionItemMessage.js    |   2 +-
 .../report/ReportActionItemMessageEdit.js     |  19 +-
 .../report/ReportActionItemParentAction.js    |   4 +-
 .../home/report/ReportActionItemSingle.js     |   6 +-
 .../home/report/ReportActionItemThread.js     |   2 +-
 src/pages/home/report/ReportActionsList.js    |   2 +-
 src/pages/home/report/ReportDropUI.js         |   2 +-
 src/pages/home/report/ReportFooter.js         |   2 +-
 .../home/report/ReportTypingIndicator.js      |   2 +-
 .../comment/AttachmentCommentFragment.js      |   2 +-
 .../report/comment/TextCommentFragment.js     |   7 +-
 .../home/sidebar/AvatarWithOptionalStatus.js  |   2 +-
 src/pages/home/sidebar/SidebarLinks.js        |   6 +-
 src/pages/home/sidebar/SidebarLinksData.js    |   2 +-
 .../SidebarScreen/BaseSidebarScreen.js        |   2 +-
 .../FloatingActionButtonAndPopover.js         |   2 +-
 src/pages/home/sidebar/SignInButton.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/ReceiptDropUI.js                |   2 +-
 src/pages/iou/ReceiptSelector/index.js        |   4 +-
 src/pages/iou/ReceiptSelector/index.native.js |   4 +-
 src/pages/iou/SplitBillDetailsPage.js         |   2 +-
 src/pages/iou/WaypointEditor.js               |   2 +-
 src/pages/iou/request/IOURequestStartPage.js  |   2 +-
 ...yForRefactorRequestParticipantsSelector.js |   2 +-
 .../request/step/IOURequestStepCategory.js    |   2 +-
 .../step/IOURequestStepConfirmation.js        |   2 +-
 .../iou/request/step/IOURequestStepDate.js    |   2 +-
 .../request/step/IOURequestStepDescription.js |   2 +-
 .../request/step/IOURequestStepDistance.js    |   4 +-
 .../request/step/IOURequestStepMerchant.js    |   2 +-
 .../request/step/IOURequestStepScan/index.js  |   4 +-
 .../step/IOURequestStepScan/index.native.js   |   4 +-
 .../iou/request/step/IOURequestStepTag.js     |   2 +-
 .../request/step/IOURequestStepWaypoint.js    |   2 +-
 .../step/StepScreenDragAndDropWrapper.js      |   5 +-
 .../iou/request/step/StepScreenWrapper.js     |   2 +-
 src/pages/iou/steps/MoneyRequestAmountForm.js |   2 +-
 .../iou/steps/MoneyRequestConfirmPage.js      |   2 +-
 .../MoneyRequestParticipantsPage.js           |   2 +-
 .../MoneyRequestParticipantsSelector.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/InitialSettingsPage.js     |   4 +-
 .../settings/Preferences/PreferencesPage.js   |  17 +-
 .../settings/Preferences/PriorityModePage.js  |   2 +-
 src/pages/settings/Preferences/ThemePage.js   |  29 ++-
 .../Profile/Contacts/ContactMethodsPage.js    |   2 +-
 .../Profile/Contacts/NewContactMethodPage.js  |   2 +-
 .../ValidateCodeForm/BaseValidateCodeForm.js  |   6 +-
 .../Profile/CustomStatus/SetDatePage.js       |   2 +-
 .../Profile/CustomStatus/SetTimePage.js       |   2 +-
 .../CustomStatus/StatusClearAfterPage.js      |   2 +-
 .../Profile/CustomStatus/StatusPage.js        |   6 +-
 src/pages/settings/Profile/DisplayNamePage.js |   2 +-
 .../settings/Profile/LoungeAccessPage.js      |   2 +-
 .../Profile/PersonalDetails/AddressPage.js    |   2 +-
 .../PersonalDetails/DateOfBirthPage.js        |   2 +-
 .../Profile/PersonalDetails/LegalNamePage.js  |   2 +-
 .../PersonalDetailsInitialPage.js             |   2 +-
 src/pages/settings/Profile/ProfilePage.js     |   2 +-
 src/pages/settings/Profile/PronounsPage.js    |   2 +-
 .../settings/Profile/TimezoneInitialPage.js   |   2 +-
 .../settings/Report/ReportSettingsPage.js     |   2 +-
 src/pages/settings/Report/RoomNamePage.js     |  21 +-
 .../settings/Security/CloseAccountPage.js     |   2 +-
 .../settings/Security/SecuritySettingsPage.js |   4 +-
 .../TwoFactorAuth/StepWrapper/StepWrapper.js  |   2 +-
 .../Security/TwoFactorAuth/Steps/CodesStep.js |   4 +-
 .../TwoFactorAuth/Steps/DisabledStep.js       |   2 +-
 .../TwoFactorAuth/Steps/EnabledStep.js        |   4 +-
 .../TwoFactorAuth/Steps/VerifyStep.js         |   2 +-
 .../Wallet/ActivatePhysicalCardPage.js        |   4 +-
 src/pages/settings/Wallet/AddDebitCardPage.js |   2 +-
 .../Wallet/Card/BaseGetPhysicalCard.js        |   2 +-
 .../Wallet/Card/GetPhysicalCardConfirm.js     |   2 +-
 .../Wallet/Card/GetPhysicalCardName.js        |   2 +-
 .../Wallet/Card/GetPhysicalCardPhone.js       |   2 +-
 .../Wallet/ChooseTransferAccountPage.js       |   2 +-
 .../settings/Wallet/ExpensifyCardPage.js      |   2 +-
 .../settings/Wallet/PaymentMethodList.js      |   4 +-
 .../settings/Wallet/RedDotCardSection.js      |   4 +-
 .../settings/Wallet/ReportCardLostPage.js     |   2 +-
 .../Wallet/ReportVirtualCardFraudPage.js      |   2 +-
 .../settings/Wallet/TransferBalancePage.js    |   2 +-
 src/pages/settings/Wallet/WalletEmptyState.js |   2 +-
 .../settings/Wallet/WalletPage/CardDetails.js |   2 +-
 .../settings/Wallet/WalletPage/WalletPage.js  |  58 +++---
 src/pages/signin/ChangeExpensifyLoginLink.js  |   2 +-
 src/pages/signin/ChooseSSOOrMagicCode.js      |   2 +-
 src/pages/signin/EmailDeliveryFailurePage.js  |   2 +-
 src/pages/signin/Licenses.js                  |   2 +-
 src/pages/signin/LoginForm/BaseLoginForm.js   |   2 +-
 src/pages/signin/SignInHeroCopy.js            |   4 +-
 src/pages/signin/SignInHeroImage.js           |   2 +-
 src/pages/signin/SignInModal.js               |   2 +-
 src/pages/signin/SignInPage.js                |  12 +-
 src/pages/signin/SignInPageHero.js            |   4 +-
 .../BackgroundImage/index.android.js          |   2 +-
 .../SignInPageLayout/BackgroundImage/index.js |   2 +-
 src/pages/signin/SignInPageLayout/Footer.js   |   6 +-
 .../SignInPageLayout/SignInPageContent.js     |   4 +-
 src/pages/signin/SignInPageLayout/index.js    |   6 +-
 src/pages/signin/Socials.js                   |   4 +-
 src/pages/signin/Terms.js                     |   2 +-
 src/pages/signin/ThirdPartySignInPage.js      |   2 +-
 src/pages/signin/UnlinkLoginForm.js           |   2 +-
 .../ValidateCodeForm/BaseValidateCodeForm.js  |   6 +-
 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 +-
 .../TaskShareDestinationSelectorModal.js      |   2 +-
 src/pages/tasks/TaskTitlePage.js              |   2 +-
 src/pages/workspace/WorkspaceInitialPage.js   |   2 +-
 src/pages/workspace/WorkspaceInvitePage.js    |   2 +-
 src/pages/workspace/WorkspaceMembersPage.js   |   2 +-
 src/pages/workspace/WorkspaceNewRoomPage.js   | 190 +++++++++++-------
 .../workspace/WorkspacePageWithSections.js    |   2 +-
 .../WorkspaceResetBankAccountModal.js         |   2 +-
 src/pages/workspace/WorkspaceSettingsPage.js  |   2 +-
 src/pages/workspace/WorkspacesListPage.js     |   4 +-
 .../bills/WorkspaceBillsFirstSection.js       |   2 +-
 .../bills/WorkspaceBillsNoVBAView.js          |   2 +-
 .../workspace/bills/WorkspaceBillsVBAView.js  |   2 +-
 .../workspace/card/WorkspaceCardNoVBAView.js  |   2 +-
 .../card/WorkspaceCardVBANoECardView.js       |   2 +-
 .../card/WorkspaceCardVBAWithECardView.js     |   2 +-
 .../invoices/WorkspaceInvoicesFirstSection.js |   2 +-
 .../invoices/WorkspaceInvoicesNoVBAView.js    |   2 +-
 .../invoices/WorkspaceInvoicesVBAView.js      |   2 +-
 .../reimburse/WorkspaceReimburseSection.js    |   4 +-
 .../reimburse/WorkspaceReimburseView.js       |   2 +-
 .../travel/WorkspaceTravelNoVBAView.js        |   2 +-
 .../travel/WorkspaceTravelVBAView.js          |   2 +-
 src/stories/CheckboxWithLabel.stories.js      |   8 +-
 src/stories/Composer.stories.js               |  24 +--
 src/stories/DragAndDrop.stories.js            |  10 +-
 src/stories/Form.stories.js                   |  16 +-
 src/stories/PopoverMenu.stories.js            |   3 +-
 src/stories/SelectionList.stories.js          |  14 +-
 .../ThemeIllustrationsContext.ts              |   7 -
 src/styles/{styles.ts => index.ts}            |  65 +++---
 src/styles/stylePropTypes.js                  |   4 +-
 src/styles/{ => theme}/colors.ts              |   2 +-
 .../{themes => theme/context}/ThemeContext.ts |   4 +-
 .../context/ThemeIllustrationsContext.ts      |   7 +
 .../{ => theme/context}/ThemeStylesContext.ts |   8 +-
 src/styles/theme/illustrations/index.ts       |  15 ++
 .../illustrations/themes}/dark.ts             |   4 +-
 .../illustrations/themes}/light.ts            |   4 +-
 src/styles/{ => theme}/illustrations/types.ts |   4 +-
 .../{themes/themes.ts => theme/index.ts}      |   6 +-
 .../default.ts => theme/themes/dark.ts}       |   4 +-
 src/styles/{ => theme}/themes/light.ts        |   4 +-
 src/styles/{themes => theme}/types.ts         |   4 +-
 .../addOutlineWidth/index.native.ts           |   0
 .../{ => utils}/addOutlineWidth/index.ts      |   0
 .../{ => utils}/addOutlineWidth/types.ts      |   2 +-
 src/styles/{utilities => utils}/borders.ts    |   0
 .../{ => utils}/cardStyles/index.native.ts    |   0
 src/styles/{ => utils}/cardStyles/index.ts    |   2 +-
 src/styles/{ => utils}/cardStyles/types.ts    |   0
 .../{ => utils}/codeStyles/index.android.ts   |   0
 .../{ => utils}/codeStyles/index.ios.ts       |   0
 src/styles/{ => utils}/codeStyles/index.ts    |   0
 src/styles/{ => utils}/codeStyles/types.ts    |   0
 .../containerComposeStyles/index.native.ts    |   0
 .../containerComposeStyles/index.ts           |   0
 .../containerComposeStyles/types.ts           |   2 +-
 .../cursor/index.native.ts                    |   0
 .../{utilities => utils}/cursor/index.ts      |   0
 .../{utilities => utils}/cursor/types.ts      |   0
 src/styles/{utilities => utils}/display.ts    |   0
 .../editedLabelStyles/index.native.ts         |   0
 .../{ => utils}/editedLabelStyles/index.ts    |   4 +-
 .../{ => utils}/editedLabelStyles/types.ts    |   0
 src/styles/{utilities => utils}/flex.ts       |   0
 .../fontFamily/bold/index.android.ts          |   0
 .../{ => utils}/fontFamily/bold/index.ios.ts  |   0
 .../{ => utils}/fontFamily/bold/index.ts      |   0
 .../{ => utils}/fontFamily/bold/types.ts      |   0
 .../{ => utils}/fontFamily/index.native.ts    |   0
 src/styles/{ => utils}/fontFamily/index.ts    |   0
 .../{ => utils}/fontFamily/multiFontFamily.ts |   0
 .../fontFamily/singleFontFamily.ts            |   0
 src/styles/{ => utils}/fontFamily/types.ts    |   0
 .../fontWeight/bold/index.android.ts          |   0
 .../{ => utils}/fontWeight/bold/index.ts      |   0
 .../{ => utils}/fontWeight/bold/types.ts      |   0
 .../utils/{ => generators}/ModalStyleUtils.ts |  18 +-
 .../ReportActionContextMenuStyleUtils.ts      |  11 +-
 .../{ => generators}/TooltipStyleUtils.ts     |  17 +-
 src/styles/utils/generators/types.ts          |   6 +
 .../getContextMenuItemStyles/index.native.ts  |   0
 .../getContextMenuItemStyles/index.ts         |   0
 .../getContextMenuItemStyles/types.ts         |   2 +-
 .../index.desktop.ts                          |   2 +-
 .../getNavigationModalCardStyles/index.ts     |   0
 .../index.website.ts                          |   2 +-
 .../getNavigationModalCardStyles/types.ts     |   0
 .../getPopOverVerticalOffset/index.desktop.ts |   0
 .../getPopOverVerticalOffset/index.ts         |   0
 .../getPopOverVerticalOffset/types.ts         |   0
 src/styles/utils/index.ts                     |  99 ++++-----
 .../{ => utils}/italic/index.android.ts       |   0
 src/styles/{ => utils}/italic/index.ts        |   0
 src/styles/{ => utils}/italic/types.ts        |   0
 src/styles/{utilities => utils}/objectFit.ts  |   0
 .../index.ios.ts                              |   0
 .../index.ts                                  |   0
 .../types.ts                                  |   0
 .../optionRowStyles/index.native.ts           |   0
 .../{ => utils}/optionRowStyles/index.ts      |   0
 .../{ => utils}/optionRowStyles/types.ts      |   2 +-
 src/styles/{utilities => utils}/overflow.ts   |   0
 .../overflowAuto/index.native.ts              |   0
 .../overflowAuto/index.ts                     |   0
 .../overflowAuto/types.ts                     |   0
 .../overflowXHidden/index.native.ts           |   0
 .../{ => utils}/overflowXHidden/index.ts      |   0
 .../{ => utils}/overflowXHidden/types.ts      |   0
 .../overscrollBehaviorContain/index.native.ts |   0
 .../overscrollBehaviorContain/index.ts        |   0
 .../overscrollBehaviorContain/types.ts        |   0
 .../pointerEventsAuto/index.native.ts         |   0
 .../{ => utils}/pointerEventsAuto/index.ts    |   0
 .../{ => utils}/pointerEventsAuto/types.ts    |   0
 .../pointerEventsBoxNone/index.native.ts      |   0
 .../{ => utils}/pointerEventsBoxNone/index.ts |   0
 .../{ => utils}/pointerEventsBoxNone/types.ts |   0
 .../pointerEventsNone/index.native.ts         |   0
 .../{ => utils}/pointerEventsNone/index.ts    |   0
 .../{ => utils}/pointerEventsNone/types.ts    |   0
 .../{utilities => utils}/positioning.ts       |   0
 src/styles/{utilities => utils}/sizing.ts     |   0
 src/styles/{utilities => utils}/spacing.ts    |   0
 .../textDecorationLine.ts                     |   0
 .../textUnderline/index.native.ts             |   0
 .../textUnderline/index.ts                    |   0
 .../textUnderline/types.ts                    |   0
 src/styles/utils/types.ts                     |  59 ++++++
 .../userSelect/index.native.ts                |   0
 .../{utilities => utils}/userSelect/index.ts  |   0
 .../{utilities => utils}/userSelect/types.ts  |   0
 .../visibility/index.native.ts                |   0
 .../{utilities => utils}/visibility/index.ts  |   0
 .../{utilities => utils}/visibility/types.ts  |   0
 .../whiteSpace/index.native.ts                |   0
 .../{utilities => utils}/whiteSpace/index.ts  |   0
 .../{utilities => utils}/whiteSpace/types.ts  |   0
 .../wordBreak/index.native.ts                 |   0
 .../{utilities => utils}/wordBreak/index.ts   |   0
 .../{utilities => utils}/wordBreak/types.ts   |   0
 .../{utilities => utils}/writingDirection.ts  |   0
 src/types/modules/material-top-tabs.d.ts      |   8 +
 tests/ui/UnreadIndicatorsTest.js              |   2 +-
 tests/unit/ReportActionsUtilsTest.js          |   3 +-
 688 files changed, 2017 insertions(+), 1772 deletions(-)
 delete mode 100644 docs/_includes/floating-concierge-button.html
 create mode 100644 docs/articles/expensify-classic/integrations/accounting-integrations/Certinia.md
 delete mode 100644 docs/articles/expensify-classic/integrations/accounting-integrations/FinancalForce.md
 rename patches/{@react-navigation+native+6.1.6.patch => @react-navigation+native+6.1.8.patch} (90%)
 delete mode 100644 src/components/CustomStatusBar/CustomStatusBarContext.tsx
 delete mode 100644 src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
 delete mode 100644 src/components/CustomStatusBar/index.tsx
 create mode 100644 src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx
 create mode 100644 src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx
 create mode 100644 src/components/CustomStatusBarAndBackground/index.tsx
 create mode 100644 src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts
 create mode 100644 src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts
 create mode 100644 src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts
 rename src/components/{CustomStatusBar => CustomStatusBarAndBackground}/updateStatusBarAppearance/index.android.ts (100%)
 rename src/components/{CustomStatusBar => CustomStatusBarAndBackground}/updateStatusBarAppearance/index.ios.ts (100%)
 rename src/components/{CustomStatusBar => CustomStatusBarAndBackground}/updateStatusBarAppearance/index.ts (100%)
 rename src/components/{CustomStatusBar => CustomStatusBarAndBackground}/updateStatusBarAppearance/types.ts (77%)
 delete mode 100644 src/components/HeaderGap/index.desktop.js
 create mode 100644 src/components/HeaderGap/index.desktop.tsx
 delete mode 100644 src/components/HeaderGap/index.js
 create mode 100644 src/components/HeaderGap/index.tsx
 create mode 100644 src/components/HeaderGap/types.ts
 rename src/{styles/illustrations => components}/ThemeIllustrationsProvider.tsx (58%)
 rename src/{styles/themes => components}/ThemeProvider.tsx (74%)
 rename src/{styles => components}/ThemeStylesProvider.tsx (75%)
 rename src/hooks/{useAutoFocusInput.js => useAutoFocusInput.ts} (73%)
 rename src/hooks/{useDelayedInputFocus.js => useDelayedInputFocus.ts} (62%)
 create mode 100644 src/hooks/useHandleExceedMaxCommentLength.ts
 rename src/hooks/useInitialWindowDimensions/{index.js => index.ts} (80%)
 create mode 100644 src/hooks/useIsScrollBarVisible/index.native.ts
 create mode 100644 src/hooks/useIsScrollBarVisible/index.ts
 rename src/{styles => hooks}/useStyleUtils.ts (83%)
 rename src/hooks/useTabNavigatorFocus/{index.js => index.ts} (83%)
 rename src/{styles/themes => hooks}/useTheme.ts (72%)
 rename src/{styles/illustrations => hooks}/useThemeIllustrations.ts (81%)
 rename src/{styles/themes => hooks}/useThemePreference.ts (51%)
 rename src/{styles/themes => hooks}/useThemePreferenceWithStaticOverride.ts (90%)
 rename src/{styles => hooks}/useThemeStyles.ts (83%)
 rename src/{styles/PopoverWithMeasuredContentStyleUtils.ts => libs/PopoverWithMeasuredContentUtils.ts} (88%)
 delete mode 100644 src/styles/illustrations/ThemeIllustrationsContext.ts
 rename src/styles/{styles.ts => index.ts} (98%)
 rename src/styles/{ => theme}/colors.ts (98%)
 rename src/styles/{themes => theme/context}/ThemeContext.ts (59%)
 create mode 100644 src/styles/theme/context/ThemeIllustrationsContext.ts
 rename src/styles/{ => theme/context}/ThemeStylesContext.ts (62%)
 create mode 100644 src/styles/theme/illustrations/index.ts
 rename src/styles/{illustrations => theme/illustrations/themes}/dark.ts (80%)
 rename src/styles/{illustrations => theme/illustrations/themes}/light.ts (80%)
 rename src/styles/{ => theme}/illustrations/types.ts (80%)
 rename src/styles/{themes/themes.ts => theme/index.ts} (69%)
 rename src/styles/{themes/default.ts => theme/themes/dark.ts} (98%)
 rename src/styles/{ => theme}/themes/light.ts (98%)
 rename src/styles/{themes => theme}/types.ts (94%)
 rename src/styles/{ => utils}/addOutlineWidth/index.native.ts (100%)
 rename src/styles/{ => utils}/addOutlineWidth/index.ts (100%)
 rename src/styles/{ => utils}/addOutlineWidth/types.ts (76%)
 rename src/styles/{utilities => utils}/borders.ts (100%)
 rename src/styles/{ => utils}/cardStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/cardStyles/index.ts (81%)
 rename src/styles/{ => utils}/cardStyles/types.ts (100%)
 rename src/styles/{ => utils}/codeStyles/index.android.ts (100%)
 rename src/styles/{ => utils}/codeStyles/index.ios.ts (100%)
 rename src/styles/{ => utils}/codeStyles/index.ts (100%)
 rename src/styles/{ => utils}/codeStyles/types.ts (100%)
 rename src/styles/{ => utils}/containerComposeStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/containerComposeStyles/index.ts (100%)
 rename src/styles/{ => utils}/containerComposeStyles/types.ts (75%)
 rename src/styles/{utilities => utils}/cursor/index.native.ts (100%)
 rename src/styles/{utilities => utils}/cursor/index.ts (100%)
 rename src/styles/{utilities => utils}/cursor/types.ts (100%)
 rename src/styles/{utilities => utils}/display.ts (100%)
 rename src/styles/{ => utils}/editedLabelStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/editedLabelStyles/index.ts (67%)
 rename src/styles/{ => utils}/editedLabelStyles/types.ts (100%)
 rename src/styles/{utilities => utils}/flex.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/index.android.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/index.ios.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/index.ts (100%)
 rename src/styles/{ => utils}/fontFamily/bold/types.ts (100%)
 rename src/styles/{ => utils}/fontFamily/index.native.ts (100%)
 rename src/styles/{ => utils}/fontFamily/index.ts (100%)
 rename src/styles/{ => utils}/fontFamily/multiFontFamily.ts (100%)
 rename src/styles/{ => utils}/fontFamily/singleFontFamily.ts (100%)
 rename src/styles/{ => utils}/fontFamily/types.ts (100%)
 rename src/styles/{ => utils}/fontWeight/bold/index.android.ts (100%)
 rename src/styles/{ => utils}/fontWeight/bold/index.ts (100%)
 rename src/styles/{ => utils}/fontWeight/bold/types.ts (100%)
 rename src/styles/utils/{ => generators}/ModalStyleUtils.ts (95%)
 rename src/styles/utils/{ => generators}/ReportActionContextMenuStyleUtils.ts (73%)
 rename src/styles/utils/{ => generators}/TooltipStyleUtils.ts (96%)
 create mode 100644 src/styles/utils/generators/types.ts
 rename src/styles/{ => utils}/getContextMenuItemStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/getContextMenuItemStyles/index.ts (100%)
 rename src/styles/{ => utils}/getContextMenuItemStyles/types.ts (77%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/index.desktop.ts (90%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/index.ts (100%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/index.website.ts (90%)
 rename src/styles/{ => utils}/getNavigationModalCardStyles/types.ts (100%)
 rename src/styles/{ => utils}/getPopOverVerticalOffset/index.desktop.ts (100%)
 rename src/styles/{ => utils}/getPopOverVerticalOffset/index.ts (100%)
 rename src/styles/{ => utils}/getPopOverVerticalOffset/types.ts (100%)
 rename src/styles/{ => utils}/italic/index.android.ts (100%)
 rename src/styles/{ => utils}/italic/index.ts (100%)
 rename src/styles/{ => utils}/italic/types.ts (100%)
 rename src/styles/{utilities => utils}/objectFit.ts (100%)
 rename src/styles/{ => utils}/optionAlternateTextPlatformStyles/index.ios.ts (100%)
 rename src/styles/{ => utils}/optionAlternateTextPlatformStyles/index.ts (100%)
 rename src/styles/{ => utils}/optionAlternateTextPlatformStyles/types.ts (100%)
 rename src/styles/{ => utils}/optionRowStyles/index.native.ts (100%)
 rename src/styles/{ => utils}/optionRowStyles/index.ts (100%)
 rename src/styles/{ => utils}/optionRowStyles/types.ts (76%)
 rename src/styles/{utilities => utils}/overflow.ts (100%)
 rename src/styles/{utilities => utils}/overflowAuto/index.native.ts (100%)
 rename src/styles/{utilities => utils}/overflowAuto/index.ts (100%)
 rename src/styles/{utilities => utils}/overflowAuto/types.ts (100%)
 rename src/styles/{ => utils}/overflowXHidden/index.native.ts (100%)
 rename src/styles/{ => utils}/overflowXHidden/index.ts (100%)
 rename src/styles/{ => utils}/overflowXHidden/types.ts (100%)
 rename src/styles/{utilities => utils}/overscrollBehaviorContain/index.native.ts (100%)
 rename src/styles/{utilities => utils}/overscrollBehaviorContain/index.ts (100%)
 rename src/styles/{utilities => utils}/overscrollBehaviorContain/types.ts (100%)
 rename src/styles/{ => utils}/pointerEventsAuto/index.native.ts (100%)
 rename src/styles/{ => utils}/pointerEventsAuto/index.ts (100%)
 rename src/styles/{ => utils}/pointerEventsAuto/types.ts (100%)
 rename src/styles/{ => utils}/pointerEventsBoxNone/index.native.ts (100%)
 rename src/styles/{ => utils}/pointerEventsBoxNone/index.ts (100%)
 rename src/styles/{ => utils}/pointerEventsBoxNone/types.ts (100%)
 rename src/styles/{ => utils}/pointerEventsNone/index.native.ts (100%)
 rename src/styles/{ => utils}/pointerEventsNone/index.ts (100%)
 rename src/styles/{ => utils}/pointerEventsNone/types.ts (100%)
 rename src/styles/{utilities => utils}/positioning.ts (100%)
 rename src/styles/{utilities => utils}/sizing.ts (100%)
 rename src/styles/{utilities => utils}/spacing.ts (100%)
 rename src/styles/{utilities => utils}/textDecorationLine.ts (100%)
 rename src/styles/{utilities => utils}/textUnderline/index.native.ts (100%)
 rename src/styles/{utilities => utils}/textUnderline/index.ts (100%)
 rename src/styles/{utilities => utils}/textUnderline/types.ts (100%)
 create mode 100644 src/styles/utils/types.ts
 rename src/styles/{utilities => utils}/userSelect/index.native.ts (100%)
 rename src/styles/{utilities => utils}/userSelect/index.ts (100%)
 rename src/styles/{utilities => utils}/userSelect/types.ts (100%)
 rename src/styles/{utilities => utils}/visibility/index.native.ts (100%)
 rename src/styles/{utilities => utils}/visibility/index.ts (100%)
 rename src/styles/{utilities => utils}/visibility/types.ts (100%)
 rename src/styles/{utilities => utils}/whiteSpace/index.native.ts (100%)
 rename src/styles/{utilities => utils}/whiteSpace/index.ts (100%)
 rename src/styles/{utilities => utils}/whiteSpace/types.ts (100%)
 rename src/styles/{utilities => utils}/wordBreak/index.native.ts (100%)
 rename src/styles/{utilities => utils}/wordBreak/index.ts (100%)
 rename src/styles/{utilities => utils}/wordBreak/types.ts (100%)
 rename src/styles/{utilities => utils}/writingDirection.ts (100%)
 create mode 100644 src/types/modules/material-top-tabs.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index b71338d0c1a5..85a4e86797b6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -174,6 +174,7 @@ module.exports = {
                 'rulesdir/prefer-underscore-method': 'off',
                 'rulesdir/prefer-import-module-contents': 'off',
                 'react/require-default-props': 'off',
+                'react/prop-types': 'off',
                 'no-restricted-syntax': [
                     'error',
                     {
diff --git a/.github/scripts/findUnusedKeys.sh b/.github/scripts/findUnusedKeys.sh
index 1411fffc8389..193149e609af 100755
--- a/.github/scripts/findUnusedKeys.sh
+++ b/.github/scripts/findUnusedKeys.sh
@@ -6,10 +6,11 @@ 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.ts"
-readonly UTILITIES_STYLES_FILE="${LIB_PATH}/src/styles/utilities"
+readonly STYLES_FILE="${LIB_PATH}/src/styles/index.ts"
+readonly UTILS_STYLES_FILE="${LIB_PATH}/src/styles/utils"
+readonly UTILS_STYLES_GENERATORS_FILE="${LIB_PATH}/src/styles/utils/generators"
 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 UTIL_STYLES_KEYS_FILE="${LIB_PATH}/scripts/util_keys_list_temp.txt"
 readonly REMOVAL_KEYS_FILE="${LIB_PATH}/scripts/removal_keys_list_temp.txt"
 readonly AMOUNT_LINES_TO_SHOW=3
 
@@ -29,7 +30,7 @@ ctrl_c() {
   delete_temp_files
   exit 1
 }
-  
+
 count_lines() {
   local file=$1
   if [[ -e "$file" ]]; then
@@ -43,11 +44,11 @@ count_lines() {
 show_unused_style_keywords() {
   while IFS=: read -r key file line_number; do
     title "File: $file:$line_number"
-    
+
     # Get lines before and after the error line
     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
@@ -84,14 +85,14 @@ lookfor_unused_keywords() {
 
     # Search for keywords starting with "styles"
     while IFS= read -r keyword; do
-        
+
         # Remove any [ ] characters from the keyword
         local clean_keyword="${keyword//[\[\]]/}"
         # skip styles. keyword that might be used in comments
         if [[ "$clean_keyword" == "styles." ]]; then
           continue
         fi
-        
+
         if ! remove_keyword "$clean_keyword" ; then
           # 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.
@@ -99,7 +100,7 @@ lookfor_unused_keywords() {
             # Keyword has more than two words, remove words after the second word
             local keyword_prefix="${clean_keyword%.*}"
             remove_keyword "$keyword_prefix"
-          fi        
+          fi
         fi
     done < <(grep -E -o '\bstyles\.[a-zA-Z0-9_.]*' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   done < <(find "${SRC_DIR}" -type f \( "${FILE_EXTENSIONS[@]}" \))
@@ -134,10 +135,10 @@ find_styles_object_and_store_keys() {
     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"    
+      echo "styles.${key}|...${key}|${base_name}.${key}:${file}:${line_number}" >> "$STYLES_KEYS_FILE"
     fi
   done < "$file"
 }
@@ -225,7 +226,7 @@ find_theme_style_and_store_keys() {
 
       continue
     fi
-    
+
     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%%:*}"
@@ -295,63 +296,64 @@ lookfor_unused_spread_keywords() {
   done < "$STYLES_FILE"
 }
 
-find_utility_styles_store_prefix() {
+find_util_styles_store_prefix() {
   # Loop through all files in the src folder
   while read -r file; do
     # Search for keywords starting with "styles"
     while IFS= read -r keyword; do
         local variable="${keyword##*/}"
         local variable_trimmed="${variable// /}"  # Trim spaces
-          
-        echo "$variable_trimmed" >> "$UTILITY_STYLES_KEYS_FILE"
-    done < <(grep -E -o './utilities/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
+
+        echo "$variable_trimmed" >> "$UTIL_STYLES_KEYS_FILE"
+    done < <(grep -E -o './utils/[a-zA-Z0-9_-]+' "$file" | grep -v '\/\/' | grep -vE '\/\*.*\*\/')
   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}"
+  sort -u -o "${UTIL_STYLES_KEYS_FILE}" "${UTIL_STYLES_KEYS_FILE}"
 }
 
-find_utility_usage_as_styles() {
+find_util_usage_as_styles() {
   while read -r file; do
     local root_key
     local parent_dir
 
-    # Get the folder name, given this utility files are index.js
+    # Get the folder name, given this util files are index.js
     parent_dir=$(dirname "$file")
     root_key=$(basename "${parent_dir}")
 
-    if [[ "${root_key}" == "utilities" ]]; then
+    if [[ "${root_key}" == "utils" ]]; then
       continue
     fi
 
     find_theme_style_and_store_keys "${file}" 0 "${root_key}"
-  done < <(find "${UTILITIES_STYLES_FILE}" -type f \( "${FILE_EXTENSIONS[@]}" \))
+  done < <(find "${UTILS_STYLES_FILE}" -type f \( -path "${UTILS_STYLES_GENERATORS_FILE}" -prune -o -name "${FILE_EXTENSIONS[@]}" \) -print)
+
 }
 
-lookfor_unused_utilities() {
-  # Read each utility keyword from the file
+lookfor_unused_utils() {
+  # Read each util keyword from the file
   while read -r keyword; do
-    # Creating a copy so later the replacement can reference it  
+    # Creating a copy so later the replacement can reference it
     local original_keyword="${keyword}"
 
     # Iterate through all files in "src/styles"
     while read -r file; do
       # Find all words that match "$keyword.[a-zA-Z0-9_-]+"
       while IFS= read -r match; do
-        # Replace the utility prefix with "styles"
+        # Replace the util prefix with "styles"
         local variable="${match/#$original_keyword/styles}"
         # Call the remove_keyword function with the variable
         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 < "$UTILITY_STYLES_KEYS_FILE"
+  done < "$UTIL_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 the name of the util files as keys
+find_util_styles_store_prefix
+find_util_usage_as_styles
 
 # Find and store keys from styles.ts
 find_styles_object_and_store_keys "$STYLES_FILE"
@@ -360,8 +362,8 @@ 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
+# Look for usages of utils into src/styles
+lookfor_unused_utils
 lookfor_unused_spread_keywords
 lookfor_unused_keywords
 
diff --git a/.storybook/theme.js b/.storybook/theme.js
index 67898fb00943..08d8b584d580 100644
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@@ -1,5 +1,5 @@
 import {create} from '@storybook/theming';
-import colors from '../src/styles/colors';
+import colors from '../src/styles/theme/colors';
 
 export default create({
     brandTitle: 'New Expensify UI Docs',
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 685e9f206eb4..dbc0935e9b76 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041200
-        versionName "1.4.12-0"
+        versionCode 1001041300
+        versionName "1.4.13-0"
     }
 
     flavorDimensions "default"
diff --git a/desktop/package-lock.json b/desktop/package-lock.json
index bfeb58ceec05..39b186beb022 100644
--- a/desktop/package-lock.json
+++ b/desktop/package-lock.json
@@ -9,7 +9,7 @@
       "dependencies": {
         "electron-context-menu": "^2.3.0",
         "electron-log": "^4.4.7",
-        "electron-serve": "^1.0.0",
+        "electron-serve": "^1.2.0",
         "electron-updater": "^6.1.6",
         "node-machine-id": "^1.1.12"
       }
@@ -145,9 +145,15 @@
       "integrity": "sha512-uFZQdgevOp9Fn5lDOrJMU/bmmYxDLZitbIHJM7VXN+cpB59ZnPt1FQL4bOf/Dl2gaIMPYJEfXx38GvJma5iV6A=="
     },
     "node_modules/electron-serve": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.1.0.tgz",
-      "integrity": "sha512-tQJBCbXKoKCfkBC143QCqnEtT1s8dNE2V+b/82NF6lxnGO/2Q3a3GSLHtKl3iEDQgdzTf9pH7p418xq2rXbz1Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.2.0.tgz",
+      "integrity": "sha512-zJG3wisMrDn2G/gnjrhyB074COvly1FnS0U7Edm8bfXLB8MYX7UtwR9/y2LkFreYjzQHm9nEbAfgCmF+9M9LHQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/electron-updater": {
       "version": "6.1.6",
@@ -530,9 +536,9 @@
       "integrity": "sha512-uFZQdgevOp9Fn5lDOrJMU/bmmYxDLZitbIHJM7VXN+cpB59ZnPt1FQL4bOf/Dl2gaIMPYJEfXx38GvJma5iV6A=="
     },
     "electron-serve": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.1.0.tgz",
-      "integrity": "sha512-tQJBCbXKoKCfkBC143QCqnEtT1s8dNE2V+b/82NF6lxnGO/2Q3a3GSLHtKl3iEDQgdzTf9pH7p418xq2rXbz1Q=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/electron-serve/-/electron-serve-1.2.0.tgz",
+      "integrity": "sha512-zJG3wisMrDn2G/gnjrhyB074COvly1FnS0U7Edm8bfXLB8MYX7UtwR9/y2LkFreYjzQHm9nEbAfgCmF+9M9LHQ=="
     },
     "electron-updater": {
       "version": "6.1.6",
diff --git a/desktop/package.json b/desktop/package.json
index a6b92bde81c4..7689c18f0dbd 100644
--- a/desktop/package.json
+++ b/desktop/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "electron-context-menu": "^2.3.0",
     "electron-log": "^4.4.7",
-    "electron-serve": "^1.0.0",
+    "electron-serve": "^1.2.0",
     "electron-updater": "^6.1.6",
     "node-machine-id": "^1.1.12"
   },
diff --git a/docs/_includes/floating-concierge-button.html b/docs/_includes/floating-concierge-button.html
deleted file mode 100644
index ed183058388f..000000000000
--- a/docs/_includes/floating-concierge-button.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{% include CONST.html %}
-
-<a id="{{ include.id }}" class="floating-concierge-button" href="{{ CONCIERGE_CHAT_URL }}" target="_blank">
-  <img src="/assets/images/concierge-avatar.svg" alt="Chat with concierge" />
-</a>
diff --git a/docs/_includes/platform.html b/docs/_includes/platform.html
index 6aa88f9208ae..a5653b89d7a8 100644
--- a/docs/_includes/platform.html
+++ b/docs/_includes/platform.html
@@ -10,9 +10,4 @@ <h1 class="title">{{ platform.hub-title }}</h1>
             {% include hub-card.html hub=hub platform=selectedPlatform %}
         {% endfor %}
     </div>
-
-    <div class="cards-group">
-        <!-- Concierge button anchored globally (rendered on narrow screens) -->
-        {% include floating-concierge-button.html id="floating-concierge-button-global" %}
-    </div>
 </div>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index de3fbc203243..7d98500ecf32 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -57,9 +57,6 @@
                 <div class="article-toc"></div>
             {% endif %}
         </div>
-
-        <!-- Concierge button anchored at the bottom of the LHN (rendered on wider screens) -->
-        {% include floating-concierge-button.html id="floating-concierge-button-lhn" %}
     </div>
 
     <div id="content-area">
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index eaaa1c63badb..9276443c3813 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -712,41 +712,11 @@ button {
     }
 }
 
-#floating-concierge-button-global {
-    position: fixed;
-    display: block;
-    @include breakpoint($breakpoint-tablet) {
-        display: none;
-    }
-}
-
-#floating-concierge-button-lhn {
-    position: absolute;
-    display: none;
-    @include breakpoint($breakpoint-tablet) {
-        display: block;
-    }
-}
-
 .get-help {
     flex-wrap: wrap;
     margin-top: 40px;
 }
 
-.floating-concierge-button {
-    bottom: 2rem;
-    right: 2rem;
-
-    img {
-        width: 4rem;
-        height: 4rem;
-
-        &:hover {
-            filter: saturate(2);
-        }
-    }
-}
-
 .disable-scrollbar {
     @media screen and (max-width: $breakpoint-tablet) {
         overflow: hidden;
diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/Certinia.md b/docs/articles/expensify-classic/integrations/accounting-integrations/Certinia.md
new file mode 100644
index 000000000000..65361ba1af9a
--- /dev/null
+++ b/docs/articles/expensify-classic/integrations/accounting-integrations/Certinia.md
@@ -0,0 +1,150 @@
+---
+title: Certinia
+description: Guide to connecting Expensify and Certinia FFA and PSA/SRP (formerly known as FinancialForce)
+---
+# Overview
+[Cetinia](https://use.expensify.com/financialforce) (Formerly known as FinancialForce)is a cloud-based software solution that provides a range of financial management and accounting applications built on the Salesforce platform. There are two versions: PSA/SRP and FFA and we support both. 
+
+# Before connecting to Certinia
+Install the Expensify bundle in Certinia using the relevant installer:
+* [PSA/SRP](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t2M000002J0BHD%252Fpackaging%252FinstallPackage.apexp%253Fp0%253D04t2M000002J0BH)
+* [FFA](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t4p000001UQVj)
+
+## Check contact details in Certinia 
+First, make sure you have a user and contact in Certinia that match your main email in Expensify. Then, create contacts for all employees who will be sending expense reports. Ensure that each contact's email matches the one they use in their Expensify account.
+
+## If you use PSA/SRP
+Each report approver needs both a User and a Contact. The user does not need to have a SalesForce license. These can be free chatter users.
+Set permission controls in Certinia for your user for each contact/resource. 
+* Go to Permission Controls
+  - Create a new permission control
+  - Set yourself (exporter) as the user 
+  - Select the resource (report submitter)
+  - Grant all available permissions
+* Set permissions on any project you are exporting to
+  - Go to **Projects** > _select a project_ > **Project Attributes** > **Allow Expenses Without Assignment**
+  - Select the project > **Edit**
+  - Under the Project Attributes section, check **Allow Expenses Without Assignment**
+* Set up Expense Types (categories in Expensify - _SRP only_)
+  - Go to **Main Menu** > _+ symbol_ > **Expense Type GLA Mappings**
+  - Click **New** to add new mappings
+
+# How to connect to Certinia
+1. Go to **Settings** > **Workspaces** > **Groups** > _[Workspace Name]_ > **Connections** in Expensify
+2. Click **Create a New Certinia (FinancialForce) Connection**
+3. Log into your Certinia account
+4. Expensify and Certinia will begin to sync (in Expensify)
+
+# How to configure export settings for Certinia
+## Preferred Exporter
+The preferred exporter is the user who will be the main exporter of reports. This person will receive the notifications for errors.
+
+## Payable Invoice Status and Date
+Reports can be exported as Complete or In Progress, using date of last expense, submitted date or exported date.
+
+## Reimbursable and non-reimbursable exports
+Both reimbursable and non-reimbursable reports are exported as payable invoices (FFA) or expense reports (PSA/SRP). If you have both Reimbursable and Non-Reimbursable expenses on a single report, we will create a separate payable invoice/expense report for each type. 
+
+## Default Vendor (FFA)
+Choose from the full list of vendors from your Certinia FFA account, this will be applied to the non-reimbursable payable invoices.
+
+# How to Configure coding for Certinia
+## Company
+Select which FinancialForce company to import from/export to.
+
+## Chart of Accounts (FFA)
+Prepaid Expense Type and Profit & Loss accounts are imported to be used as categories on each expense. 
+
+## Expense Type GLA Mappings (PSA/SRP)
+Your Expense Type GLA Mappings are enabled in Expensify to use as categories on each expense when using both PSA and SRP; however, PSA will not import or export categories, while SRP will.
+
+## Dimensions (FFA)
+We import four dimension levels and each has three options to select from:
+
+* Do not map: FinancialForce defaults will apply to the payable invoice, without importing into Expensify
+* Tags: These are shown in the Tag section of your workspace, and employees can select them on each expense created
+* Report fields: These will show in the Reports section of your workspace. Employees can select one to be applied at the header level i.e. the entire report. 
+
+## Projects, Assignments, or Projects & Assignments (PSA/SRP)
+These can be imported as tags with **Milestones** being optional. When selecting to import only projects, we will derive the account from the project. If an assignment is selected, we will derive both the account and project from the assignment. 
+
+Note: If you are using a project that does not have an assignment, the box **Allow Expenses Without Assignment** must be checked on the project in FinancialForce.
+
+## Tax
+Import tax rates from Certinia to apply to expenses.
+
+# How to configure advanced settings for Certinia
+## Auto Sync
+Auto Sync in Certinia performs daily updates to your coding. Additionally, it automatically exports reports after they receive final approval. For Non-Reimbursable expenses, syncing happens immediately upon final approval of the report. In the case of Reimbursable expenses, syncing occurs as soon as the report is reimbursed or marked as reimbursed.
+
+## Export tax as non-billable
+When exporting Billable expenses, this dictates whether you will also bill the tax component to your clients/customers.
+
+# Deep Dive
+## Multi-Currency in Certinia PSA/SRP
+When exporting to Certinia PSA/SRP you may see up to three different currencies on the expense report in Certinia, if employees are submitting expenses in more than one original currency.
+* Summary Total Reimbursement Amount: this currency is derived from the currency of the project selected on the expense.
+* Amount field on the Expense line: this currency is derived from the Expensify workspace default report currency.
+* Reimbursable Amount on the Expense line: this currency is derived from the currency of the resource with an email matching the report submitter.
+
+# FAQ
+## What happens if the report can’t be exported to Certinia?
+* The preferred exporter will receive an email outlining the issue and any specific error messages
+* Any error messages preventing the export from taking place will be recorded in the report’s history
+* The report will be listed in the exporter’s Expensify Inbox as awaiting export.
+
+## If I enable Auto Sync, what happens to existing approved and reimbursed reports?
+You can activate Auto Sync without worry because it relies on Final Approval to trigger auto-export. Existing Approved reports won't be affected. However, for Approved reports that haven't been exported to Certinia, you'll need to either manually export them or mark them as manually entered.
+
+## How do I export tax?
+Tax rates are created in Expensify through the tax tracking feature under **Settings** > **Workspaces** > **Groups** > _[Workspace Name]_ > **Tax**. We export the tax amount calculated on the expenses. 
+
+## How do reports map to Payable Invoices in Certinia FFA?
+* Account Name - Account associated with Expensify submitter’s email address
+* Reference 1 - Report URL
+* Invoice Description - Report title
+
+## How do reports map to Expense Reports in Certinia PSA/SRP?
+* Expense report name - Report title
+* Resource - User associated with Expensify submitter’s email address
+* Description - Report URL
+* Approver - Expensify report approver
+
+# Sync and Export Errors
+
+## ExpensiError FF0047: You must have an Ops Edit permission to edit approved records.
+This error indicates that the permission control setup between the connected user and the report submitter or region is missing Ops Edit permission.
+
+In Certinia go to Permission Controls and click the one you need to edit. Make sure that Expense Ops Edit is selected under Permissions.
+
+## ExpensiError FF0076: Could not find employee in Certinia
+Go to Contacts in Certinia and add the report creator/submitter's Expensify email address to their employee record, or create a record with that email listed.
+
+If a record already exists then search for their email address to confirm it is not associated with multiple records.
+
+## ExpensiError FF0089: Expense Reports for this Project require an Assignment
+This error indicates that the project needs to have the permissions adjusted in Certinia
+
+Go to Projects > [project name] > Project Attributes and check Allow Expense Without Assignment. 
+
+## ExpensiError FF0091: Bad Field Name — [field] is invalid for [object]
+This means the field in question is not accessible to the user profile in Certinia for the user whose credentials were used to make the connection within Expensify. 
+
+To correct this:
+* Go to Setup > Build > expand Create > Object within Certinia
+* Then go to Payable Invoice > Custom Fields and Relationships
+* Click View Field Accessibility 
+* Find the employee profile in the list and select Hidden
+* Make sure both checkboxes for Visible are selected
+
+Once this step has been completed, sync the connection within Expensify by going to **Settings** > **Workspaces** > **Groups** > _[Workspace Name]_ > **Connections** > **Sync Now** and then attempt to export the report again. 
+
+## ExpensiError FF0132: Insufficient access. Make sure you are connecting to Certinia with a user that has the 'Modify All Data' permission
+
+Log into Certinia and go to Setup > Manage Users > Users and find the user whose credentials made the connection. 
+
+* Click on their profile on the far right side of the page
+* Go to System > System Permissions
+* Enable Modify All Data and save
+
+Sync the connection within Expensify by going to **Settings** > **Workspaces** > **Groups** > _[Workspace Name]_ > **Connections** > **Sync Now** and then attempt to export the report again
diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/FinancalForce.md b/docs/articles/expensify-classic/integrations/accounting-integrations/FinancalForce.md
deleted file mode 100644
index 18c78ac7fc10..000000000000
--- a/docs/articles/expensify-classic/integrations/accounting-integrations/FinancalForce.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Financial Force
-description: Guide to connecting Expensify and FinancialForce FFA and PSA/SRP
----
-# Overview
-[FinancialForce](https://use.expensify.com/financialforce) is a cloud-based software solution that provides a range of financial management and accounting applications built on the Salesforce platform. There are two versions: PSA/SRP and FFA and we support both. 
-
-# Before connecting to FinancialForce
-Install the Expensify bundle in SalesForce using the relevant installer:
-* [PSA/SRP](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t2M000002J0BHD%252Fpackaging%252FinstallPackage.apexp%253Fp0%253D04t2M000002J0BH)
-* [FFA](https://login.salesforce.com/packaging/installPackage.apexp?p0=04t4p000001UQVj)
-
-## Check contact details in FF 
-First, make sure you have a user and contact in FinancialForce that match your main email in Expensify. Then, create contacts for all employees who will be sending expense reports. Ensure that each contact's email matches the one they use in their Expensify account.
-
-## If you use PSA/SRP
-Each report approver needs both a User and a Contact. The user does not need to have a SalesForce license. These can be free chatter users.
-Set permission controls in FinancialForce for your user for each contact/resource. 
-* Go to Permission Controls
-  - Create a new permission control
-  - Set yourself (exporter) as the user 
-  - Select the resource (report submitter)
-  - Grant all available permissions
-* Set permissions on any project you are exporting to
-  - Go to **Projects** > _select a project_ > **Project Attributes** > **Allow Expenses Without Assignment**
-  - Select the project > **Edit**
-  - Under the Project Attributes section, check **Allow Expenses Without Assignment**
-* Set up Expense Types (categories in Expensify - _SRP only_)
-  - Go to **Main Menu** > _+ symbol_ > **Expense Type GLA Mappings**
-  - Click **New** to add new mappings
-
-# How to connect to FinancialForce
-1. Go to **Settings** > **Policies** > **Groups** > _[Policy Name]_ > **Connections in Expensify**
-2. Click **Create a New FinancialForce Connection**
-3. Log into your FinancialForce account
-4. Expensify and FinancialForce will begin to sync (in Expensify)
-
-# How to configure export settings for FinancialForce
-## Preferred Exporter
-The preferred exporter is the user who will be the main exporter of reports. This person will receive the notifications for errors.
-
-## Payable Invoice Status and Date
-Reports can be exported as Complete or In Progress, using date of last expense, submitted date or exported date.
-
-## Reimbursable and non-reimbursable exports
-Both reimbursable and non-reimbursable reports are exported as payable invoices (FFA) or expense reports (PSA/SRP). If you have both Reimbursable and Non-Reimbursable expenses on a single report, we will create a separate payable invoice/expense report for each type. 
-
-## Default Vendor (FFA)
-Choose from the full list of vendors from your FinancialForce FFA account, this will be applied to the non-reimbursable payable invoices.
-
-# How to Configure coding for Financial Force
-## Company
-Select which FinancialForce company to import from/export to.
-
-## Chart of Accounts (FFA)
-Prepaid Expense Type and Profit & Loss accounts are imported to be used as categories on each expense. 
-
-## Expense Type GLA Mappings (PSA/SRP)
-Your Expense Type GLA Mappings are enabled in Expensify to use as categories on each expense when using both PSA and SRP; however, PSA will not import or export categories, while SRP will.
-
-## Dimensions (FFA)
-We import four dimension levels and each has three options to select from:
-
-* Do not map: FinancialForce defaults will apply to the payable invoice, without importing into Expensify
-* Tags: These are shown in the Tag section of your policy, and employees can select them on each expense created
-* Report fields: These will show in the Reports section of your policy. Employees can select one to be applied at the header level i.e. the entire report. 
-
-## Projects, Assignments, or Projects & Assignments (PSA/SRP)
-These can be imported as tags with **Milestones** being optional. When selecting to import only projects, we will derive the account from the project. If an assignment is selected, we will derive both the account and project from the assignment. 
-
-Note: If you are using a project that does not have an assignment, the box **Allow Expenses Without Assignment** must be checked on the project in FinancialForce.
-
-## Tax
-Import tax rates from FinancialForce to apply to expenses.
-
-# How to configure advanced settings for Financial Force
-## Auto Sync
-Auto Sync in FinancialForce performs daily updates to your coding. Additionally, it automatically exports reports after they receive final approval. For Non-Reimbursable expenses, syncing happens immediately upon final approval of the report. In the case of Reimbursable expenses, syncing occurs as soon as the report is reimbursed or marked as reimbursed.
-
-## Export tax as non-billable
-When exporting Billable expenses, this dictates whether you will also bill the tax component to your clients/customers.
-
-# Deep Dive
-## Multi-Currency in FinancialForce PSA/SRP
-When exporting to FinancialForce PSA/SRP you may see up to three different currencies on the expense report in FinancialForce, if employees are submitting expenses in more than one original currency.
-* Summary Total Reimbursement Amount: this currency is derived from the currency of the project selected on the expense.
-* Amount field on the Expense line: this currency is derived from the Expensify policy default report currency.
-* Reimbursable Amount on the Expense line: this currency is derived from the currency of the resource with an email matching the report submitter.
-
-# FAQ
-## What happens if the report can’t be exported to FinancialForce?
-* The preferred exporter will receive an email outlining the issue and any specific error messages
-* Any error messages preventing the export from taking place will be recorded in the report’s history
-* The report will be listed in the exporter’s Expensify Inbox as awaiting export.
-
-## If I enable Auto Sync, what happens to existing approved and reimbursed reports?
-You can activate Auto Sync without worry because it relies on Final Approval to trigger auto-export. Existing Approved reports won't be affected. However, for Approved reports that haven't been exported to FinancialForce, you'll need to either manually export them or mark them as manually entered.
-
-## How do I export tax?
-Tax rates are created in Expensify through the tax tracking feature under **Settings** > **Policies** > **Group** > _[Policy Name]_ > **Tax**. We export the tax amount calculated on the expenses. 
-
-## How do reports map to Payable Invoices in FinancialForce FFA?
-* Account Name - Account associated with Expensify submitter’s email address
-* Reference 1 - Report URL
-* Invoice Description - Report title
-
-## How do reports map to Expense Reports in FinancialForce PSA/SRP?
-* Expense report name - Report title
-* Resource - User associated with Expensify submitter’s email address
-* Description - Report URL
-* Approver - Expensify report approver
diff --git a/docs/articles/new-expensify/get-paid-back/Referral-Program.md b/docs/articles/new-expensify/get-paid-back/Referral-Program.md
index 683e93d0277a..34a35f5dc7c8 100644
--- a/docs/articles/new-expensify/get-paid-back/Referral-Program.md
+++ b/docs/articles/new-expensify/get-paid-back/Referral-Program.md
@@ -1,53 +1,53 @@
 ---
-title: Expensify Referral Program
-description: Send your joining link, submit a receipt or invoice, and we'll pay you if your referral adopts Expensify.
+title: New Expensify Referral Program
+description: Share your invite link with a friend, start a chat with a coworker, request money from your boss -- we'll pay you $250 if your referral adopts New Expensify.
 ---
 <!-- The lines above are required by Jekyll to process the .md file -->
 
 # About
 
-Expensify has grown thanks to our users who love Expensify so much that they tell their friends, colleagues, managers, and fellow business founders to use it, too. 
+[New Expensify](https://new.expensify.com/) is growing thanks to members like you who love it so much that they tell their friends, family, colleagues, managers, and fellow business founders to use it, too. 
 
-As a thank you, every time you bring a new user into the platform who directly or indirectly leads to the adoption of a paid annual plan on Expensify, you will earn $250. 
+As a thank you, every time you bring a new customer into New Expensify, you'll get $250. Here's how it works. 
 
-# How to get paid for referring people to Expensify
+# How to get paid to refer anyone to New Expensify
 
-1. Submit a report or invoice, or share your referral link with anyone you know who is spending too much time on expenses, or works at a company that could benefit from using Expensify. 
+The sky's the limit for this referral program! Your referral can be anyone - a friend, family member, boss, coworker, neighbor, or even social media follower. We're making it as easy as possible to get that cold hard referral $$$.
 
-2. You will get $250 for any referred business that commits to an annual subscription, has 2 or more active users, and makes two monthly payments.
+1. There are a bunch of different ways to kick off a referral in New Expensify:
+   - Start a chat
+   - Request money
+   - Send money
+   - @ mention someone
+   - Add them to a workspace
+     
+2. You'll get $250 for each referral as long as:
+   - You're the first to refer them to Expensify
+   - They start an annual subscription with two or more active users
+   - They make two payments toward that annual subscription
 
-That’s right! You can refer anyone working at any company you know. 
-
-If their company goes on to become an Expensify customer with an annual subscription, and you are the earliest recorded referrer of a user on that company’s paid Expensify Policy, you'll get paid a referral reward. 
-
-The best way to start is to submit any receipt to your manager (you'll get paid back and set yourself up for $250 if they start a subscription: win-win!)
-
-Referral rewards for the Spring/Summer 2023 campaign will be paid by direct deposit.
+For now, referral rewards will be paid via direct deposit into bank accounts that are connected to Expensify. 
 
 # FAQ
 
-- **How will I know if I am the first person to refer a company to Expensify?**
+- **How will I know if I'm the first person to refer a company to Expensify?**
 
-Successful referrers are notified after their referral pays for 2 months of an annual subscription.  We will check for the earliest recorded referrer of a user on the policy, and if that is you, then we will let you know. 
+Successful referrers are notified after their referral pays for two months of an annual Expensify subscription.  We'll check for the earliest recorded referrer of a member on the workspace, and if that's you, we'll let you know. 
 
 - **How will you pay me if I am successful?**
 
-In the Spring 2023 campaign, Expensify will be paying successful referrers via direct deposit to the Deposit-Only account you have on file. Referral payouts will happen once a month for the duration of the campaign. If you do not have a Deposit-Only account at the time of your referral payout, your deposit will be processed in the next batch. 
+For now, Expensify will pay successful referrers via direct deposit to the Deposit-Only bank account you have on file. Referral payouts will happen once a month. If you don't have a Deposit-Only bank account connected to Expensify at the time of your referral payout, your deposit will be processed in the next batch. 
 
-Learn how to add a Deposit-Only account [here](https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-account-both-personal-and-business).
+Learn how to add a Deposit-Only bank account [here](https://community.expensify.com/discussion/4641/how-to-add-a-deposit-only-bank-account-both-personal-and-business).
 
 - **I’m outside of the US, how do I get paid?**
 
-While our referral payouts are in USD, you will be able to get paid via a Wise Borderless account. Learn more [here](https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees).
+While our referral payouts are in USD, you'll be able to get paid via a Wise Borderless account. Learn more [here](https://community.expensify.com/discussion/5940/how-to-get-reimbursed-outside-the-us-with-wise-for-non-us-employees).
 
 - **My referral wasn’t counted! How can I appeal?**
 
-Expensify reserves the right to modify the terms of the referral program at any time, and pays out referral bonuses for eligible companies at its own discretion.
-
-Please send a message to concierge@expensify.com with the billing owner of the company you have referred and our team will review the referral and get back to you.
-
-- **Where can I find my referral link?**
+Expensify reserves the right to modify the terms of the referral program at any time, and pays out referral bonuses for eligible members at its own discretion. If you think there's been a mistake, please send a message to concierge@expensify.com with the email of your referral and our team will review your case.
 
-Expensify members who are opted-in for our newsletters will have received an email containing their unique referral link. 
+- **Where can I find my referral link?** 
 
-On the mobile app, go to **Settings** > **Invite a Friend** > **Share Invite Link** to retrieve your referral link.
+In New Expensify, go to **Settings** > **Share code** > **Get $250** to retrieve your invite link.
diff --git a/docs/index.html b/docs/index.html
index 70bd5f31545a..ceea63cb398a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,9 +12,4 @@ <h1 class="title">{{ site.data.routes.home.title }}</h1>
             {% include platform-card.html href=platform.platform_href %}
         {% endfor %}
     </div>
-
-    <div class="cards-group">
-        <!-- Concierge button anchored globally (rendered on narrow screens) -->
-        {% include floating-concierge-button.html id="floating-concierge-button-global" %}
-    </div>
 </div>
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index f4ef6d22bea6..a917b6a4499c 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.12</string>
+	<string>1.4.13</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.12.0</string>
+	<string>1.4.13.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index c7fb13979540..b1e7c2a22e26 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.12</string>
+	<string>1.4.13</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.12.0</string>
+	<string>1.4.13.0</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 05d9221a3f58..86c0950a0b12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.12-0",
+  "version": "1.4.13-0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.12-0",
+      "version": "1.4.13-0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -35,7 +35,7 @@
         "@react-native-google-signin/google-signin": "^10.0.1",
         "@react-native-picker/picker": "^2.4.3",
         "@react-navigation/material-top-tabs": "^6.6.3",
-        "@react-navigation/native": "6.1.6",
+        "@react-navigation/native": "6.1.8",
         "@react-navigation/stack": "6.3.16",
         "@react-ng/bounds-observer": "^0.2.1",
         "@rnmapbox/maps": "^10.0.11",
@@ -8563,16 +8563,16 @@
       }
     },
     "node_modules/@react-navigation/core": {
-      "version": "6.4.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz",
-      "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
+      "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==",
       "dependencies": {
-        "@react-navigation/routers": "^6.1.8",
+        "@react-navigation/routers": "^6.1.9",
         "escape-string-regexp": "^4.0.0",
         "nanoid": "^3.1.23",
         "query-string": "^7.1.3",
         "react-is": "^16.13.0",
-        "use-latest-callback": "^0.1.5"
+        "use-latest-callback": "^0.1.7"
       },
       "peerDependencies": {
         "react": "*"
@@ -8608,11 +8608,11 @@
       }
     },
     "node_modules/@react-navigation/native": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
-      "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz",
+      "integrity": "sha512-0alti852nV+8oCVm9H80G6kZvrHoy51+rXBvVCRUs2rNDDozC/xPZs8tyeCJkqdw3cpxZDK8ndXF22uWq28+0Q==",
       "dependencies": {
-        "@react-navigation/core": "^6.4.8",
+        "@react-navigation/core": "^6.4.9",
         "escape-string-regexp": "^4.0.0",
         "fast-deep-equal": "^3.1.3",
         "nanoid": "^3.1.23"
@@ -8623,9 +8623,9 @@
       }
     },
     "node_modules/@react-navigation/routers": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz",
-      "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
       "dependencies": {
         "nanoid": "^3.1.23"
       }
@@ -50723,9 +50723,9 @@
       }
     },
     "node_modules/use-latest-callback": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
-      "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
       "peerDependencies": {
         "react": ">=16.8"
       }
@@ -58884,16 +58884,16 @@
       }
     },
     "@react-navigation/core": {
-      "version": "6.4.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.8.tgz",
-      "integrity": "sha512-klZ9Mcf/P2j+5cHMoGyIeurEzyBM2Uq9+NoSFrF6sdV5iCWHLFhrCXuhbBiQ5wVLCKf4lavlkd/DDs47PXs9RQ==",
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
+      "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==",
       "requires": {
-        "@react-navigation/routers": "^6.1.8",
+        "@react-navigation/routers": "^6.1.9",
         "escape-string-regexp": "^4.0.0",
         "nanoid": "^3.1.23",
         "query-string": "^7.1.3",
         "react-is": "^16.13.0",
-        "use-latest-callback": "^0.1.5"
+        "use-latest-callback": "^0.1.7"
       }
     },
     "@react-navigation/devtools": {
@@ -58915,20 +58915,20 @@
       }
     },
     "@react-navigation/native": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.6.tgz",
-      "integrity": "sha512-14PmSy4JR8HHEk04QkxQ0ZLuqtiQfb4BV9kkMXD2/jI4TZ+yc43OnO6fQ2o9wm+Bq8pY3DxyerC2AjNUz+oH7Q==",
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.8.tgz",
+      "integrity": "sha512-0alti852nV+8oCVm9H80G6kZvrHoy51+rXBvVCRUs2rNDDozC/xPZs8tyeCJkqdw3cpxZDK8ndXF22uWq28+0Q==",
       "requires": {
-        "@react-navigation/core": "^6.4.8",
+        "@react-navigation/core": "^6.4.9",
         "escape-string-regexp": "^4.0.0",
         "fast-deep-equal": "^3.1.3",
         "nanoid": "^3.1.23"
       }
     },
     "@react-navigation/routers": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.8.tgz",
-      "integrity": "sha512-CEge+ZLhb1HBrSvv4RwOol7EKLW1QoqVIQlE9TN5MpxS/+VoQvP+cLbuz0Op53/iJfYhtXRFd1ZAd3RTRqto9w==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
       "requires": {
         "nanoid": "^3.1.23"
       }
@@ -89240,9 +89240,9 @@
       }
     },
     "use-latest-callback": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
-      "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
       "requires": {}
     },
     "use-memo-one": {
diff --git a/package.json b/package.json
index 3d3bcf99a2cd..a3dd3776d125 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.12-0",
+  "version": "1.4.13-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -83,7 +83,7 @@
     "@react-native-google-signin/google-signin": "^10.0.1",
     "@react-native-picker/picker": "^2.4.3",
     "@react-navigation/material-top-tabs": "^6.6.3",
-    "@react-navigation/native": "6.1.6",
+    "@react-navigation/native": "6.1.8",
     "@react-navigation/stack": "6.3.16",
     "@react-ng/bounds-observer": "^0.2.1",
     "@rnmapbox/maps": "^10.0.11",
diff --git a/patches/@react-navigation+native+6.1.6.patch b/patches/@react-navigation+native+6.1.8.patch
similarity index 90%
rename from patches/@react-navigation+native+6.1.6.patch
rename to patches/@react-navigation+native+6.1.8.patch
index eb933683c850..c461d7e510fe 100644
--- a/patches/@react-navigation+native+6.1.6.patch
+++ b/patches/@react-navigation+native+6.1.8.patch
@@ -133,7 +133,7 @@ index 0000000..16da117
 +//# sourceMappingURL=findFocusedRouteKey.js.map
 \ No newline at end of file
 diff --git a/node_modules/@react-navigation/native/lib/module/useLinking.js b/node_modules/@react-navigation/native/lib/module/useLinking.js
-index 5bf2a88..a4318ef 100644
+index 6f0ac51..a77b608 100644
 --- a/node_modules/@react-navigation/native/lib/module/useLinking.js
 +++ b/node_modules/@react-navigation/native/lib/module/useLinking.js
 @@ -2,6 +2,7 @@ import { findFocusedRoute, getActionFromState as getActionFromStateDefault, getP
@@ -144,37 +144,7 @@ index 5bf2a88..a4318ef 100644
  import ServerContext from './ServerContext';
  /**
   * Find the matching navigation state that changed between 2 navigation states
-@@ -34,32 +35,52 @@ const findMatchingState = (a, b) => {
- /**
-  * Run async function in series as it's called.
-  */
--const series = cb => {
--  // Whether we're currently handling a callback
--  let handling = false;
--  let queue = [];
--  const callback = async () => {
--    try {
--      if (handling) {
--        // If we're currently handling a previous event, wait before handling this one
--        // Add the callback to the beginning of the queue
--        queue.unshift(callback);
--        return;
--      }
--      handling = true;
--      await cb();
--    } finally {
--      handling = false;
--      if (queue.length) {
--        // If we have queued items, handle the last one
--        const last = queue.pop();
--        last === null || last === void 0 ? void 0 : last();
--      }
--    }
-+const series = (cb) => {
-+  let queue = Promise.resolve();
-+  const callback = () => {
-+    queue = queue.then(cb);
-   };
+@@ -42,6 +43,44 @@ export const series = cb => {
    return callback;
  };
  let linkingHandlers = [];
@@ -219,7 +189,7 @@ index 5bf2a88..a4318ef 100644
  export default function useLinking(ref, _ref) {
    let {
      independent,
-@@ -251,6 +272,9 @@ export default function useLinking(ref, _ref) {
+@@ -231,6 +270,9 @@ export default function useLinking(ref, _ref) {
        // Otherwise it's likely a change triggered by `popstate`
        path !== pendingPath) {
          const historyDelta = (focusedState.history ? focusedState.history.length : focusedState.routes.length) - (previousFocusedState.history ? previousFocusedState.history.length : previousFocusedState.routes.length);
@@ -229,7 +199,7 @@ index 5bf2a88..a4318ef 100644
          if (historyDelta > 0) {
            // If history length is increased, we should pushState
            // Note that path might not actually change here, for example, drawer open should pushState
-@@ -262,34 +286,55 @@ export default function useLinking(ref, _ref) {
+@@ -242,34 +284,55 @@ export default function useLinking(ref, _ref) {
            // If history length is decreased, i.e. entries were removed, we want to go back
  
            const nextIndex = history.backIndex({
diff --git a/src/App.js b/src/App.js
index e273dcce1e47..3553900bbc7f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,14 +8,17 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
 import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
-import CustomStatusBar from './components/CustomStatusBar';
-import CustomStatusBarContextProvider from './components/CustomStatusBar/CustomStatusBarContextProvider';
+import CustomStatusBarAndBackground from './components/CustomStatusBarAndBackground';
+import CustomStatusBarAndBackgroundContextProvider from './components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider';
 import ErrorBoundary from './components/ErrorBoundary';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
 import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';
 import SafeArea from './components/SafeArea';
+import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider';
+import ThemeProvider from './components/ThemeProvider';
+import ThemeStylesProvider from './components/ThemeStylesProvider';
 import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
 import {KeyboardStateProvider} from './components/withKeyboardState';
@@ -26,9 +29,6 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
-import ThemeIllustrationsProvider from './styles/illustrations/ThemeIllustrationsProvider';
-import ThemeProvider from './styles/themes/ThemeProvider';
-import ThemeStylesProvider from './styles/ThemeStylesProvider';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {
@@ -68,10 +68,10 @@ function App() {
                     ReportAttachmentsProvider,
                     PickerStateProvider,
                     EnvironmentProvider,
-                    CustomStatusBarContextProvider,
+                    CustomStatusBarAndBackgroundContextProvider,
                 ]}
             >
-                <CustomStatusBar />
+                <CustomStatusBarAndBackground />
                 <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
                     <ColorSchemeWrapper>
                         <Expensify />
diff --git a/src/CONST.ts b/src/CONST.ts
index d3f24b3fbacd..c0e3d64b5eee 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -255,6 +255,7 @@ const CONST = {
         BETA_COMMENT_LINKING: 'commentLinking',
         POLICY_ROOMS: 'policyRooms',
         VIOLATIONS: 'violations',
+        REPORT_FIELDS: 'reportFields',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',
@@ -706,9 +707,10 @@ const CONST = {
         DEFAULT: 'default',
     },
     THEME: {
-        DEFAULT: 'dark',
-        LIGHT: 'light',
+        DEFAULT: 'system',
+        FALLBACK: 'dark',
         DARK: 'dark',
+        LIGHT: 'light',
         SYSTEM: 'system',
     },
     COLOR_SCHEME: {
@@ -2961,7 +2963,7 @@ const CONST = {
             SHARE_CODE: 'shareCode',
         },
         REVENUE: 250,
-        LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/billing-and-plan-types/Referral-Program',
+        LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/get-paid-back/Referral-Program',
         LINK: 'https://join.my.expensify.com',
     },
 
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
index 4d01fa108e2a..4abe5655e307 100644
--- a/src/components/AddPaymentMethodMenu.js
+++ b/src/components/AddPaymentMethodMenu.js
@@ -48,6 +48,9 @@ const propTypes = {
         /** Currently logged in user accountID */
         accountID: PropTypes.number,
     }),
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -59,9 +62,10 @@ const defaultProps = {
     },
     anchorRef: () => {},
     session: {},
+    shouldShowPersonalBankAccountOption: false,
 };
 
-function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session}) {
+function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, shouldShowPersonalBankAccountOption}) {
     const {translate} = useLocalize();
 
     // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
@@ -70,6 +74,8 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
         ReportUtils.isExpenseReport(iouReport) ||
         (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0)));
 
+    const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || ReportUtils.isIOUReport(iouReport);
+
     return (
         <PopoverMenu
             isVisible={isVisible}
@@ -79,7 +85,7 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
             anchorRef={anchorRef}
             onItemSelected={onClose}
             menuItems={[
-                ...(ReportUtils.isIOUReport(iouReport)
+                ...(canUsePersonalBankAccount
                     ? [
                           {
                               text: translate('common.personalBankAccount'),
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 68d529c4a78d..6e3d0e2f0d68 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
index 1621328d388f..68d451e5c7c8 100644
--- a/src/components/AddressForm.js
+++ b/src/components/AddressForm.js
@@ -5,9 +5,9 @@ import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 90d2c15733f1..06541565f567 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -5,10 +5,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import colors from '@styles/colors';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import colors from '@styles/theme/colors';
 
 const propTypes = {
     /** Callback that runs when location button is clicked */
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 2fed1d153947..3c764b36f3eb 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -10,13 +10,13 @@ import networkPropTypes from '@components/networkPropTypes';
 import {withNetwork} from '@components/OnyxProvider';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import * as GooglePlacesUtils from '@libs/GooglePlacesUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import CurrentLocationButton from './CurrentLocationButton';
diff --git a/src/components/AmountTextInput.js b/src/components/AmountTextInput.js
index 63e59d7eef4a..25e1ce6f05ec 100644
--- a/src/components/AmountTextInput.js
+++ b/src/components/AmountTextInput.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import refPropTypes from './refPropTypes';
 import TextInput from './TextInput';
diff --git a/src/components/AnchorForAttachmentsOnly/index.native.js b/src/components/AnchorForAttachmentsOnly/index.native.js
index e3c7a71f2304..3277d51ec058 100644
--- a/src/components/AnchorForAttachmentsOnly/index.native.js
+++ b/src/components/AnchorForAttachmentsOnly/index.native.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as anchorForAttachmentsOnlyPropTypes from './anchorForAttachmentsOnlyPropTypes';
 import BaseAnchorForAttachmentsOnly from './BaseAnchorForAttachmentsOnly';
 
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index c056f68fa16c..4d32b4427d92 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -7,12 +7,12 @@ import _ from 'underscore';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
 
diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
index 1a87592cba9b..e2b9952c0617 100644
--- a/src/components/AnimatedStep/index.tsx
+++ b/src/components/AnimatedStep/index.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import {AnimationDirection} from './AnimatedStepContext';
diff --git a/src/components/AnonymousReportFooter.tsx b/src/components/AnonymousReportFooter.tsx
index 65dc813a829d..877ca9444661 100644
--- a/src/components/AnonymousReportFooter.tsx
+++ b/src/components/AnonymousReportFooter.tsx
@@ -3,7 +3,7 @@ import {Text, View} from 'react-native';
 import {OnyxCollection} from 'react-native-onyx';
 import {OnyxEntry} from 'react-native-onyx/lib/types';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx
index 712ef6be769e..7dadd86debfe 100644
--- a/src/components/ArchivedReportFooter.tsx
+++ b/src/components/ArchivedReportFooter.tsx
@@ -2,10 +2,10 @@ import lodashEscape from 'lodash/escape';
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx';
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 79be536945ac..13b3b9f1e836 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -8,6 +8,9 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
@@ -19,9 +22,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useNativeDriver from '@libs/useNativeDriver';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
index 5b955ee69dd3..59928b80c4b1 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.js
@@ -12,9 +12,9 @@ import Popover from '@components/Popover';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps as baseDefaultProps, propTypes as basePropTypes} from './attachmentPickerPropTypes';
 import launchCamera from './launchCamera';
diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
index dd2713a38b2b..f4cbffc0e1e4 100644
--- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
+++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {PixelRatio, View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Cell Container styles */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index 14a6ea268468..1847d30ede22 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Where the arrows should be visible */
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
index 1642fa32734a..e1fcc86e12a5 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
@@ -8,8 +8,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
index cc1e20cb44e0..4bce03b6f25e 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageTransformer.js
@@ -15,7 +15,7 @@ import Animated, {
     withDecay,
     withSpring,
 } from 'react-native-reanimated';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 import ImageWrapper from './ImageWrapper';
 
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
index b0a8b1f0d083..b639eb291bb1 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/ImageWrapper.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const imageWrapperPropTypes = {
     children: PropTypes.node.isRequired,
diff --git a/src/components/Attachments/AttachmentCarousel/Pager/index.js b/src/components/Attachments/AttachmentCarousel/Pager/index.js
index 6913941ed726..15c98ece62cb 100644
--- a/src/components/Attachments/AttachmentCarousel/Pager/index.js
+++ b/src/components/Attachments/AttachmentCarousel/Pager/index.js
@@ -6,7 +6,7 @@ import PagerView from 'react-native-pager-view';
 import Animated, {runOnJS, useAnimatedProps, useAnimatedReaction, useEvent, useHandler, useSharedValue} from 'react-native-reanimated';
 import _ from 'underscore';
 import refPropTypes from '@components/refPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentCarouselPagerContext from './AttachmentCarouselPagerContext';
 
 const AnimatedPagerView = Animated.createAnimatedComponent(createNativeWrapper(PagerView));
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index fb31e32de91c..8f225d426dca 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -6,10 +6,10 @@ import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index ea45509d6ce3..374b2d47d12d 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -5,9 +5,9 @@ import _ from 'underscore';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import * as Illustrations from '@components/Icon/Illustrations';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
index 3b080e47e4d1..78b69be077aa 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.js
@@ -2,8 +2,8 @@ import React, {memo} from 'react';
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
 
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
index a61adcf04043..fd709c82a2e2 100755
--- a/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewImage/index.native.js
@@ -3,8 +3,8 @@ import AttachmentCarouselPage from '@components/Attachments/AttachmentCarousel/P
 import ImageView from '@components/ImageView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {attachmentViewImageDefaultProps, attachmentViewImagePropTypes} from './propTypes';
 
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
index b9dd65e2716b..308d3cf2c0ba 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
@@ -3,7 +3,7 @@ import {StyleSheet, View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
index 6e1ed651ae06..79d1b6f407b9 100755
--- a/src/components/Attachments/AttachmentView/index.js
+++ b/src/components/Attachments/AttachmentView/index.js
@@ -12,13 +12,12 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import compose from '@libs/compose';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
-import cursor from '@styles/utilities/cursor';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentViewImage from './AttachmentViewImage';
@@ -141,7 +140,7 @@ function AttachmentView({
                     onScaleChanged={onScaleChanged}
                     onToggleKeyboard={onToggleKeyboard}
                     onLoadComplete={() => !loadComplete && setLoadComplete(true)}
-                    errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]}
+                    errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}
                     style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
                 />
             </View>
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 07db455968a3..c2320f7c0202 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -4,9 +4,10 @@ import {View} from 'react-native';
 // We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import viewForwardedRef from '@src/types/utils/viewForwardedRef';
 import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
@@ -84,18 +85,20 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
             style={[styles.autoCompleteSuggestionsContainer, animatedStyles]}
             exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))}
         >
-            <FlashList
-                estimatedItemSize={CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT}
-                ref={scrollRef}
-                keyboardShouldPersistTaps="handled"
-                data={suggestions}
-                renderItem={renderItem}
-                renderScrollComponent={ScrollView}
-                keyExtractor={keyExtractor}
-                removeClippedSubviews={false}
-                showsVerticalScrollIndicator={innerHeight > rowHeight.value}
-                extraData={highlightedSuggestionIndex}
-            />
+            <ColorSchemeWrapper>
+                <FlashList
+                    estimatedItemSize={CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT}
+                    ref={scrollRef}
+                    keyboardShouldPersistTaps="handled"
+                    data={suggestions}
+                    renderItem={renderItem}
+                    renderScrollComponent={ScrollView}
+                    keyExtractor={keyExtractor}
+                    removeClippedSubviews={false}
+                    showsVerticalScrollIndicator={innerHeight > rowHeight.value}
+                    extraData={highlightedSuggestionIndex}
+                />
+            </ColorSchemeWrapper>
         </Animated.View>
     );
 }
diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx
index 3ccbb4efaf5a..baca4011a177 100644
--- a/src/components/AutoCompleteSuggestions/index.tsx
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import type {AutoCompleteSuggestionsProps} from './types';
 
diff --git a/src/components/AutoEmailLink.js b/src/components/AutoEmailLink.js
index bffd2493aa5d..af581525ab69 100644
--- a/src/components/AutoEmailLink.js
+++ b/src/components/AutoEmailLink.js
@@ -2,7 +2,7 @@ import {CONST} from 'expensify-common/lib/CONST';
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 import TextLink from './TextLink';
 
diff --git a/src/components/AutoUpdateTime.js b/src/components/AutoUpdateTime.js
index 1970839ec320..b9aa3446fa12 100644
--- a/src/components/AutoUpdateTime.js
+++ b/src/components/AutoUpdateTime.js
@@ -5,8 +5,8 @@
 import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index f801cb11e9df..978d2f097cbf 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,11 +1,11 @@
 import React, {useEffect, useState} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
 import {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index 419891d9bdef..a39daeb78ba7 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -15,11 +15,11 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import cropOrRotateImage from '@libs/cropOrRotateImage';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ImageCropView from './ImageCropView';
 import Slider from './Slider';
diff --git a/src/components/AvatarCropModal/ImageCropView.js b/src/components/AvatarCropModal/ImageCropView.js
index 94289b24d6ca..3f6263cf7b95 100644
--- a/src/components/AvatarCropModal/ImageCropView.js
+++ b/src/components/AvatarCropModal/ImageCropView.js
@@ -5,9 +5,9 @@ import {PanGestureHandler} from 'react-native-gesture-handler';
 import Animated, {interpolate, useAnimatedStyle} from 'react-native-reanimated';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 
 const propTypes = {
diff --git a/src/components/AvatarCropModal/Slider.js b/src/components/AvatarCropModal/Slider.js
index 9df6ac3c0498..ba2e1471ce9e 100644
--- a/src/components/AvatarCropModal/Slider.js
+++ b/src/components/AvatarCropModal/Slider.js
@@ -5,8 +5,8 @@ import {PanGestureHandler} from 'react-native-gesture-handler';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
-import useThemeStyles from '@styles/useThemeStyles';
 import gestureHandlerPropTypes from './gestureHandlerPropTypes';
 
 const propTypes = {
diff --git a/src/components/AvatarSkeleton.tsx b/src/components/AvatarSkeleton.tsx
index d2706447f756..0887830aa07a 100644
--- a/src/components/AvatarSkeleton.tsx
+++ b/src/components/AvatarSkeleton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Circle} from 'react-native-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@hooks/useTheme';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
 function AvatarSkeleton() {
diff --git a/src/components/AvatarWithDisplayName.tsx b/src/components/AvatarWithDisplayName.tsx
index 3cc39f9e815f..5ea21502f2ca 100644
--- a/src/components/AvatarWithDisplayName.tsx
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -2,12 +2,12 @@ import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
 import {ValueOf} from 'type-fest';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 9b061ba5c670..325d4706da71 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -4,12 +4,12 @@ import React, {useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
diff --git a/src/components/AvatarWithIndicator.tsx b/src/components/AvatarWithIndicator.tsx
index 3ae9507350c8..2fd733d4b072 100644
--- a/src/components/AvatarWithIndicator.tsx
+++ b/src/components/AvatarWithIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import Avatar from './Avatar';
 import AvatarSkeleton from './AvatarSkeleton';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index b670921dff4c..70aebc30ee83 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 3eb2316aa9d0..7ceb3deb9e63 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -1,9 +1,9 @@
 import React, {memo} from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
 import Icon from './Icon';
diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx
index 082c0e20801a..8d115a37cba7 100644
--- a/src/components/BaseMiniContextMenuItem.tsx
+++ b/src/components/BaseMiniContextMenuItem.tsx
@@ -1,10 +1,10 @@
 import React, {ForwardedRef} from 'react';
 import {PressableStateCallbackType, View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip/PopoverAnchorTooltip';
diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 3204b39cb19c..8b840f9d1b57 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
-import useThemeStyles from '@styles/useThemeStyles';
 import Button from './Button';
 
 type BigNumberPadProps = {
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index aec414cdeb74..44f6b7100509 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index b82474aa0694..ce76b96c0eb0 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ROUTES from '@src/ROUTES';
 import BlockingView from './BlockingView';
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 06577c3ac813..af8ec33683de 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -9,9 +9,9 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import HapticFeedback from '@libs/HapticFeedback';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import validateSubmitShortcut from './validateSubmitShortcut';
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index a5f311740f19..0291143a9dbc 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
 import Icon from './Icon';
diff --git a/src/components/CardPreview.tsx b/src/components/CardPreview.tsx
index 6dc8abfb80ef..e3ddbd54b892 100644
--- a/src/components/CardPreview.tsx
+++ b/src/components/CardPreview.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {PrivatePersonalDetails, Session} from '@src/types/onyx';
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index 36cf9b1deadc..d170def12276 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -4,8 +4,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './categoryPickerPropTypes';
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 5dd3164eadcc..23bc068e8fe0 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,8 +1,8 @@
 import React, {ForwardedRef, forwardRef, KeyboardEvent as ReactKeyboardEvent} from 'react';
 import {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Icon from './Icon';
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 92cd7ea38eea..24f61c305dda 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Checkbox from './Checkbox';
 import FormHelpMessage from './FormHelpMessage';
diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx
index 04574c5fd057..bc7bf6e89dba 100644
--- a/src/components/CollapsibleSection/index.tsx
+++ b/src/components/CollapsibleSection/index.tsx
@@ -4,7 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Collapsible from './Collapsible';
diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx
index 2909f1ffbe9f..0a1ccc5e5d67 100644
--- a/src/components/ColorSchemeWrapper/index.tsx
+++ b/src/components/ColorSchemeWrapper/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
     const theme = useTheme();
diff --git a/src/components/CommunicationsLink.js b/src/components/CommunicationsLink.js
index dbbe5737b3aa..01ae0354a66d 100644
--- a/src/components/CommunicationsLink.js
+++ b/src/components/CommunicationsLink.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
-import useThemeStyles from '@styles/useThemeStyles';
 import ContextMenuItem from './ContextMenuItem';
 import * as Expensicons from './Icon/Expensicons';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index 698c68cc78e9..af64831df117 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index 9852e607562b..c9947999b273 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -3,9 +3,9 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 4bb3df5c1b85..3af22b63ed69 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -8,6 +8,10 @@ import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
+import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -15,9 +19,6 @@ import * as ComposerUtils from '@libs/ComposerUtils';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -86,6 +87,9 @@ const propTypes = {
     /** Whether the sull composer is open */
     isComposerFullSize: PropTypes.bool,
 
+    /** Should make the input only scroll inside the element avoid scroll out to parent */
+    shouldContainScroll: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -113,6 +117,7 @@ const defaultProps = {
     checkComposerVisibility: () => false,
     isReportActionCompose: false,
     isComposerFullSize: false,
+    shouldContainScroll: false,
 };
 
 /**
@@ -164,6 +169,7 @@ function Composer({
     selection: selectionProp,
     isReportActionCompose,
     isComposerFullSize,
+    shouldContainScroll,
     ...props
 }) {
     const theme = useTheme();
@@ -180,6 +186,7 @@ function Composer({
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
     const [textInputWidth, setTextInputWidth] = useState('');
+    const isScrollBarVisible = useIsScrollBarVisible(textInput, value);
 
     useEffect(() => {
         if (!shouldClear) {
@@ -418,18 +425,26 @@ function Composer({
         </View>
     );
 
-    const inputStyleMemo = useMemo(
-        () => [
+    const scrollStyleMemo = useMemo(() => {
+        if (shouldContainScroll) {
+            return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden;
+        }
+        return [
             // We are hiding the scrollbar to prevent it from reducing the text input width,
             // so we can get the correct scroll height while calculating the number of lines.
             numberOfLines < maxLines ? styles.overflowHidden : {},
+        ];
+    }, [shouldContainScroll, isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
 
+    const inputStyleMemo = useMemo(
+        () => [
             StyleSheet.flatten([style, {outline: 'none'}]),
             StyleUtils.getComposeTextAreaPadding(numberOfLines, isComposerFullSize),
             Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {},
+            scrollStyleMemo,
         ],
 
-        [numberOfLines, maxLines, styles.overflowHidden, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize],
+        [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize],
     );
 
     return (
diff --git a/src/components/ConfirmContent.js b/src/components/ConfirmContent.js
index ff8ee4f861a4..8574cc02014e 100644
--- a/src/components/ConfirmContent.js
+++ b/src/components/ConfirmContent.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Button from './Button';
 import Header from './Header';
diff --git a/src/components/ConfirmationPage.tsx b/src/components/ConfirmationPage.tsx
index 12e8b40a0f25..21813edd693d 100644
--- a/src/components/ConfirmationPage.tsx
+++ b/src/components/ConfirmationPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
 import FixedFooter from './FixedFooter';
 import Lottie from './Lottie';
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 79b97b38194a..3abec6d0d1f4 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -5,9 +5,9 @@ import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ConnectBankAccountButton.js b/src/components/ConnectBankAccountButton.js
index 6afd3d57d4e6..f036918d9429 100644
--- a/src/components/ConnectBankAccountButton.js
+++ b/src/components/ConnectBankAccountButton.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
 import Button from './Button';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index 2cabd71b11cb..307cfcde9b10 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useImperativeHandle} from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
 import MenuItem from './MenuItem';
diff --git a/src/components/CountrySelector.js b/src/components/CountrySelector.js
index b138bc949937..68a6486bce48 100644
--- a/src/components/CountrySelector.js
+++ b/src/components/CountrySelector.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ROUTES from '@src/ROUTES';
 import FormHelpMessage from './FormHelpMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
diff --git a/src/components/CurrencySymbolButton.js b/src/components/CurrencySymbolButton.js
index 47c25a43ad11..d03834fc1fd6 100644
--- a/src/components/CurrencySymbolButton.js
+++ b/src/components/CurrencySymbolButton.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
index 6f6daddc51b8..02c308705994 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.tsx
@@ -3,9 +3,9 @@ import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/components/CurrentWalletBalance.tsx b/src/components/CurrentWalletBalance.tsx
index 9a5b2cd0227b..28a83fb1ae50 100644
--- a/src/components/CurrentWalletBalance.tsx
+++ b/src/components/CurrentWalletBalance.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleProp, TextStyle} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import UserWallet from '@src/types/onyx/UserWallet';
 import Text from './Text';
diff --git a/src/components/CustomStatusBar/CustomStatusBarContext.tsx b/src/components/CustomStatusBar/CustomStatusBarContext.tsx
deleted file mode 100644
index b2c317b05c25..000000000000
--- a/src/components/CustomStatusBar/CustomStatusBarContext.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {createContext} from 'react';
-
-type CustomStatusBarContextType = {
-    isRootStatusBarDisabled: boolean;
-    disableRootStatusBar: (isDisabled: boolean) => void;
-};
-
-const CustomStatusBarContext = createContext<CustomStatusBarContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
-
-export default CustomStatusBarContext;
-export {type CustomStatusBarContextType};
diff --git a/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx b/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
deleted file mode 100644
index 27a5cac5d8cc..000000000000
--- a/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import CustomStatusBarContext from './CustomStatusBarContext';
-
-function CustomStatusBarContextProvider({children}: React.PropsWithChildren) {
-    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
-    const value = useMemo(
-        () => ({
-            isRootStatusBarDisabled,
-            disableRootStatusBar,
-        }),
-        [isRootStatusBarDisabled],
-    );
-
-    return <CustomStatusBarContext.Provider value={value}>{children}</CustomStatusBarContext.Provider>;
-}
-
-export default CustomStatusBarContextProvider;
diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
deleted file mode 100644
index 3b5022c60898..000000000000
--- a/src/components/CustomStatusBar/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native';
-import PropTypes from 'prop-types';
-import React, {useCallback, useContext, useEffect} from 'react';
-import {navigationRef} from '@libs/Navigation/Navigation';
-import StatusBar from '@libs/StatusBar';
-import useTheme from '@styles/themes/useTheme';
-import CustomStatusBarContext from './CustomStatusBarContext';
-import updateStatusBarAppearance from './updateStatusBarAppearance';
-
-type CustomStatusBarProps = {
-    isNested: boolean;
-};
-
-const propTypes = {
-    /** Whether the CustomStatusBar is nested within another CustomStatusBar.
-     *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
-    isNested: PropTypes.bool,
-};
-
-type CustomStatusBarType = {
-    (props: CustomStatusBarProps): React.ReactNode;
-    displayName: string;
-    propTypes: typeof propTypes;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
-    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
-    const theme = useTheme();
-
-    const isDisabled = !isNested && isRootStatusBarDisabled;
-
-    useEffect(() => {
-        if (isNested) {
-            disableRootStatusBar(true);
-        }
-
-        return () => {
-            if (!isNested) {
-                return;
-            }
-            disableRootStatusBar(false);
-        };
-    }, [disableRootStatusBar, isNested]);
-
-    const updateStatusBarStyle = useCallback<EventListenerCallback<NavigationContainerEventMap, 'state'>>(() => {
-        if (isDisabled) {
-            return;
-        }
-
-        // Set the status bar colour depending on the current route.
-        // If we don't have any colour defined for a route, fall back to
-        // appBG color.
-        const currentRoute = navigationRef.getCurrentRoute();
-
-        let currentScreenBackgroundColor = theme.appBG;
-        let statusBarStyle = theme.statusBarStyle;
-        if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
-            const screenTheme = theme.PAGE_THEMES[currentRoute.name];
-            currentScreenBackgroundColor = screenTheme.backgroundColor;
-            statusBarStyle = screenTheme.statusBarStyle;
-        }
-
-        updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle});
-    }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
-
-    useEffect(() => {
-        navigationRef.addListener('state', updateStatusBarStyle);
-
-        return () => navigationRef.removeListener('state', updateStatusBarStyle);
-    }, [updateStatusBarStyle]);
-
-    useEffect(() => {
-        if (isDisabled) {
-            return;
-        }
-
-        updateStatusBarAppearance({statusBarStyle: theme.statusBarStyle});
-    }, [isDisabled, theme.statusBarStyle]);
-
-    if (isDisabled) {
-        return null;
-    }
-
-    return <StatusBar />;
-};
-
-CustomStatusBar.displayName = 'CustomStatusBar';
-CustomStatusBar.propTypes = propTypes;
-
-export default CustomStatusBar;
diff --git a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx
new file mode 100644
index 000000000000..4a1a1cd2f964
--- /dev/null
+++ b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContext.tsx
@@ -0,0 +1,11 @@
+import {createContext} from 'react';
+
+type CustomStatusBarAndBackgroundContextType = {
+    isRootStatusBarDisabled: boolean;
+    disableRootStatusBar: (isDisabled: boolean) => void;
+};
+
+const CustomStatusBarAndBackgroundContext = createContext<CustomStatusBarAndBackgroundContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
+
+export default CustomStatusBarAndBackgroundContext;
+export {type CustomStatusBarAndBackgroundContextType};
diff --git a/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx
new file mode 100644
index 000000000000..b4d553b60d0f
--- /dev/null
+++ b/src/components/CustomStatusBarAndBackground/CustomStatusBarAndBackgroundContextProvider.tsx
@@ -0,0 +1,17 @@
+import React, {useMemo, useState} from 'react';
+import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext';
+
+function CustomStatusBarAndBackgroundContextProvider({children}: React.PropsWithChildren) {
+    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
+    const value = useMemo(
+        () => ({
+            isRootStatusBarDisabled,
+            disableRootStatusBar,
+        }),
+        [isRootStatusBarDisabled],
+    );
+
+    return <CustomStatusBarAndBackgroundContext.Provider value={value}>{children}</CustomStatusBarAndBackgroundContext.Provider>;
+}
+
+export default CustomStatusBarAndBackgroundContextProvider;
diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx
new file mode 100644
index 000000000000..b84f9c6a6630
--- /dev/null
+++ b/src/components/CustomStatusBarAndBackground/index.tsx
@@ -0,0 +1,113 @@
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import useTheme from '@hooks/useTheme';
+import {navigationRef} from '@libs/Navigation/Navigation';
+import StatusBar from '@libs/StatusBar';
+import CustomStatusBarAndBackgroundContext from './CustomStatusBarAndBackgroundContext';
+import updateGlobalBackgroundColor from './updateGlobalBackgroundColor';
+import updateStatusBarAppearance from './updateStatusBarAppearance';
+
+type CustomStatusBarAndBackgroundProps = {
+    /** Whether the CustomStatusBar is nested within another CustomStatusBar.
+     *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
+    isNested: boolean;
+};
+
+function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBackgroundProps) {
+    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarAndBackgroundContext);
+    const theme = useTheme();
+    const [statusBarStyle, setStatusBarStyle] = useState(theme.statusBarStyle);
+
+    const isDisabled = !isNested && isRootStatusBarDisabled;
+
+    // Disable the root status bar when a nested status bar is rendered
+    useEffect(() => {
+        if (isNested) {
+            disableRootStatusBar(true);
+        }
+
+        return () => {
+            if (!isNested) {
+                return;
+            }
+            disableRootStatusBar(false);
+        };
+    }, [disableRootStatusBar, isNested]);
+
+    const listenerCount = useRef(0);
+    const updateStatusBarStyle = useCallback(
+        (listenerId?: number) => {
+            // Check if this function is either called through the current navigation listener or the general useEffect which listens for theme changes.
+            if (listenerId !== undefined && listenerId !== listenerCount.current) {
+                return;
+            }
+
+            // Set the status bar colour depending on the current route.
+            // If we don't have any colour defined for a route, fall back to
+            // appBG color.
+            let currentRoute: ReturnType<typeof navigationRef.getCurrentRoute> | undefined;
+            if (navigationRef.isReady()) {
+                currentRoute = navigationRef.getCurrentRoute();
+            }
+
+            let currentScreenBackgroundColor = theme.appBG;
+            let newStatusBarStyle = theme.statusBarStyle;
+            if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
+                const screenTheme = theme.PAGE_THEMES[currentRoute.name];
+                currentScreenBackgroundColor = screenTheme.backgroundColor;
+                newStatusBarStyle = screenTheme.statusBarStyle;
+            }
+
+            // Don't update the status bar style if it's the same as the current one, to prevent flashing.
+            if (newStatusBarStyle === statusBarStyle) {
+                updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor});
+            } else {
+                updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle: newStatusBarStyle});
+                setStatusBarStyle(newStatusBarStyle);
+            }
+        },
+        [statusBarStyle, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle],
+    );
+
+    // Add navigation state listeners to update the status bar every time the route changes
+    // We have to pass a count as the listener id, because "react-navigation" somehow doesn't remove listeners properyl
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        const listenerId = ++listenerCount.current;
+        const listener = () => updateStatusBarStyle(listenerId);
+
+        navigationRef.addListener('state', listener);
+        return () => navigationRef.removeListener('state', listener);
+    }, [isDisabled, theme.appBG, updateStatusBarStyle]);
+
+    // Update the status bar style everytime the theme changes
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        updateStatusBarStyle();
+    }, [isDisabled, theme, updateStatusBarStyle]);
+
+    // Update the global background (on web) everytime the theme changes.
+    // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web.
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        updateGlobalBackgroundColor(theme);
+    }, [isDisabled, theme]);
+
+    if (isDisabled) {
+        return null;
+    }
+
+    return <StatusBar />;
+}
+
+CustomStatusBarAndBackground.displayName = 'CustomStatusBarAndBackground';
+
+export default CustomStatusBarAndBackground;
diff --git a/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts
new file mode 100644
index 000000000000..dac994ba8597
--- /dev/null
+++ b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.ts
@@ -0,0 +1,5 @@
+import type UpdateGlobalBackgroundColor from './types';
+
+const updateGlobalBackgroundColor: UpdateGlobalBackgroundColor = () => undefined;
+
+export default updateGlobalBackgroundColor;
diff --git a/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts
new file mode 100644
index 000000000000..481d866dbe4f
--- /dev/null
+++ b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/index.website.ts
@@ -0,0 +1,8 @@
+import UpdateGlobalBackgroundColor from './types';
+
+const updateGlobalBackgroundColor: UpdateGlobalBackgroundColor = (theme) => {
+    const htmlElement = document.getElementsByTagName('html')[0];
+    htmlElement.style.setProperty('background-color', theme.appBG);
+};
+
+export default updateGlobalBackgroundColor;
diff --git a/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts
new file mode 100644
index 000000000000..83bd36a9428a
--- /dev/null
+++ b/src/components/CustomStatusBarAndBackground/updateGlobalBackgroundColor/types.ts
@@ -0,0 +1,5 @@
+import {ThemeColors} from '@styles/theme/types';
+
+type UpdateGlobalBackgroundColor = (theme: ThemeColors) => void;
+
+export default UpdateGlobalBackgroundColor;
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.android.ts
similarity index 100%
rename from src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts
rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.android.ts
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ios.ts
similarity index 100%
rename from src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts
rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ios.ts
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ts
similarity index 100%
rename from src/components/CustomStatusBar/updateStatusBarAppearance/index.ts
rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/index.ts
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/types.ts
similarity index 77%
rename from src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
rename to src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/types.ts
index 3d16b5944a31..823f0059eccf 100644
--- a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
+++ b/src/components/CustomStatusBarAndBackground/updateStatusBarAppearance/types.ts
@@ -1,4 +1,4 @@
-import {StatusBarStyle} from '@styles/styles';
+import {StatusBarStyle} from '@styles/index';
 
 type UpdateStatusBarAppearanceProps = {
     backgroundColor?: string;
diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.js b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
index a03e18085706..793aca9e7635 100644
--- a/src/components/DatePicker/CalendarPicker/ArrowIcon.js
+++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
@@ -3,8 +3,8 @@ import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/DatePicker/CalendarPicker/YearPickerModal.js b/src/components/DatePicker/CalendarPicker/YearPickerModal.js
index f51d869efbac..e8883648051c 100644
--- a/src/components/DatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/DatePicker/CalendarPicker/YearPickerModal.js
@@ -7,7 +7,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import {radioListItemPropTypes} from '@components/SelectionList/selectionListPropTypes';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
index ac6454d25975..8af550c9dc66 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -8,7 +8,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import TextInput from '@components/TextInput';
 import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import CalendarPicker from './CalendarPicker';
 
diff --git a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
index 3c7366949ac1..622767b8a5f8 100644
--- a/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
+++ b/src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js
@@ -8,10 +8,10 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx
index 82f9c5799b78..440457d22965 100644
--- a/src/components/DisplayNames/DisplayNamesTooltipItem.tsx
+++ b/src/components/DisplayNames/DisplayNamesTooltipItem.tsx
@@ -2,8 +2,8 @@ import React, {RefObject, useCallback} from 'react';
 import {Text as RNText, StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {AvatarSource} from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 
 type DisplayNamesTooltipItemProps = {
     index?: number;
diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
index 8c8720c7c99f..43061ada9a94 100644
--- a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
+++ b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx
@@ -2,7 +2,7 @@ import React, {Fragment, useCallback, useRef} from 'react';
 import {Text as RNText, View} from 'react-native';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
 import DisplayNamesProps from './types';
 
diff --git a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
index 1854ebe2353d..761b0b66ee2c 100644
--- a/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
+++ b/src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type DisplayNamesWithoutTooltipProps = {
     /** The full title of the DisplayNames component (not split up) */
diff --git a/src/components/DistanceEReceipt.js b/src/components/DistanceEReceipt.js
index cbf25fd2753b..7d1d3c99f48d 100644
--- a/src/components/DistanceEReceipt.js
+++ b/src/components/DistanceEReceipt.js
@@ -5,13 +5,13 @@ import _ from 'underscore';
 import EReceiptBackground from '@assets/images/eReceipt_background.svg';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PendingMapView from './MapView/PendingMapView';
diff --git a/src/components/DistanceMapView/index.android.js b/src/components/DistanceMapView/index.android.js
index 532d42ac0be5..fa40bd50673e 100644
--- a/src/components/DistanceMapView/index.android.js
+++ b/src/components/DistanceMapView/index.android.js
@@ -6,8 +6,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MapView from '@components/MapView';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as distanceMapViewPropTypes from './distanceMapViewPropTypes';
 
 function DistanceMapView(props) {
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index d374f90a1b6c..d2813c152a64 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -10,9 +10,9 @@ import DistanceMapView from '@components/DistanceMapView';
 import * as Expensicons from '@components/Icon/Expensicons';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/components/DistanceRequest/DistanceRequestRenderItem.js b/src/components/DistanceRequest/DistanceRequestRenderItem.js
index 1735e244a347..2aa2ac58f379 100644
--- a/src/components/DistanceRequest/DistanceRequestRenderItem.js
+++ b/src/components/DistanceRequest/DistanceRequestRenderItem.js
@@ -5,7 +5,7 @@ import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@hooks/useTheme';
 
 const propTypes = {
     /** The waypoints for the distance request */
diff --git a/src/components/DistanceRequest/index.js b/src/components/DistanceRequest/index.js
index be34a42ead5e..b2fd16cb7d97 100644
--- a/src/components/DistanceRequest/index.js
+++ b/src/components/DistanceRequest/index.js
@@ -14,12 +14,12 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as MapboxToken from '@userActions/MapboxToken';
 import * as Transaction from '@userActions/Transaction';
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index 6a7d78768ed7..65afe8c7e4eb 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/DragAndDrop/NoDropZone/index.tsx b/src/components/DragAndDrop/NoDropZone/index.tsx
index 9f2c700b8918..4760a16fd20b 100644
--- a/src/components/DragAndDrop/NoDropZone/index.tsx
+++ b/src/components/DragAndDrop/NoDropZone/index.tsx
@@ -1,7 +1,7 @@
 import React, {useRef} from 'react';
 import {View} from 'react-native';
 import useDragAndDrop from '@hooks/useDragAndDrop';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type NoDropZoneProps from './types';
 
 function NoDropZone({children}: NoDropZoneProps) {
diff --git a/src/components/DragAndDrop/Provider/index.tsx b/src/components/DragAndDrop/Provider/index.tsx
index 761c512497ac..a5da9cc45a36 100644
--- a/src/components/DragAndDrop/Provider/index.tsx
+++ b/src/components/DragAndDrop/Provider/index.tsx
@@ -3,7 +3,7 @@ import Str from 'expensify-common/lib/str';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import useDragAndDrop from '@hooks/useDragAndDrop';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {DragAndDropContextParams, DragAndDropProviderProps, SetOnDropHandlerCallback} from './types';
 
 const DragAndDropContext = React.createContext<DragAndDropContextParams>({});
diff --git a/src/components/DraggableList/index.native.tsx b/src/components/DraggableList/index.native.tsx
index e7ff058234b7..f532b21720da 100644
--- a/src/components/DraggableList/index.native.tsx
+++ b/src/components/DraggableList/index.native.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import {FlatList} from 'react-native-gesture-handler';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {DraggableListProps} from './types';
 
 function DraggableList<T>({renderClone, shouldUsePortal, ...viewProps}: DraggableListProps<T>, ref: React.ForwardedRef<FlatList<T>>) {
diff --git a/src/components/DraggableList/index.tsx b/src/components/DraggableList/index.tsx
index 28128002c589..b92691075424 100644
--- a/src/components/DraggableList/index.tsx
+++ b/src/components/DraggableList/index.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback} from 'react';
 import {DragDropContext, Draggable, Droppable, type OnDragEndResponder} from 'react-beautiful-dnd';
 import {ScrollView} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {DraggableListProps} from './types';
 import useDraggableInPortal from './useDraggableInPortal';
 
diff --git a/src/components/EReceipt.js b/src/components/EReceipt.js
index f5e5b7f2f6b3..12cea0df04ac 100644
--- a/src/components/EReceipt.js
+++ b/src/components/EReceipt.js
@@ -3,11 +3,11 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EReceiptThumbnail.js b/src/components/EReceiptThumbnail.js
index 1f719862412b..7c782a0aa327 100644
--- a/src/components/EReceiptThumbnail.js
+++ b/src/components/EReceiptThumbnail.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EmojiPicker/CategoryShortcutBar.js b/src/components/EmojiPicker/CategoryShortcutBar.js
index c0c9fb8ea161..facafea13a70 100644
--- a/src/components/EmojiPicker/CategoryShortcutBar.js
+++ b/src/components/EmojiPicker/CategoryShortcutBar.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CategoryShortcutButton from './CategoryShortcutButton';
 
 const propTypes = {
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index 1fcbe7e863e4..a7dc0d7bf564 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -4,10 +4,10 @@ import Icon from '@components/Icon';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 96d7ee88b816..6c05a4b6a5b5 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -4,10 +4,10 @@ import {Dimensions} from 'react-native';
 import _ from 'underscore';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import calculateAnchorPosition from '@libs/calculateAnchorPosition';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import EmojiPickerMenu from './EmojiPickerMenu';
 
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 165646d4795d..869fe1edbfe5 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -5,9 +5,9 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 
 const propTypes = {
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index 5dc43ef47699..43687ec4b7a8 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -7,9 +7,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
 
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 263f5929d567..36594dabcd30 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -11,6 +11,8 @@ import EmojiSkinToneList from '@components/EmojiPicker/EmojiSkinToneList';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
@@ -18,8 +20,6 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import * as ReportUtils from '@libs/ReportUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
index eb8217bb5633..6ad93538c83b 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.js
@@ -12,11 +12,11 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/EmojiPicker/EmojiSkinToneList.js b/src/components/EmojiPicker/EmojiSkinToneList.js
index 69690fa882c9..2b574b0b533f 100644
--- a/src/components/EmojiPicker/EmojiSkinToneList.js
+++ b/src/components/EmojiPicker/EmojiSkinToneList.js
@@ -6,7 +6,7 @@ import * as Emojis from '@assets/emojis';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import EmojiPickerMenuItem from './EmojiPickerMenuItem';
 import getSkinToneEmojiFromIndex from './getSkinToneEmojiFromIndex';
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index 01f840677e5e..2fcf8e827b4e 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -1,10 +1,10 @@
 import React, {ReactElement, useCallback} from 'react';
 import {View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
 
diff --git a/src/components/EnvironmentBadge.tsx b/src/components/EnvironmentBadge.tsx
index a3f321072988..6babbf119445 100644
--- a/src/components/EnvironmentBadge.tsx
+++ b/src/components/EnvironmentBadge.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Environment from '@libs/Environment/Environment';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import pkg from '../../package.json';
 import Badge from './Badge';
diff --git a/src/components/ExceededCommentLength.js b/src/components/ExceededCommentLength.js
index 6353bdf40283..3fd6688944f7 100644
--- a/src/components/ExceededCommentLength.js
+++ b/src/components/ExceededCommentLength.js
@@ -1,52 +1,23 @@
-import {debounce} from 'lodash';
 import PropTypes from 'prop-types';
-import React, {useEffect, useMemo, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import React from 'react';
 import useLocalize from '@hooks/useLocalize';
-import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import Text from './Text';
 
 const propTypes = {
-    /** Report ID to get the comment from (used in withOnyx) */
-    // eslint-disable-next-line react/no-unused-prop-types
-    reportID: PropTypes.string.isRequired,
-
-    /** Text Comment */
-    comment: PropTypes.string,
-
-    /** Update UI on parent when comment length is exceeded */
-    onExceededMaxCommentLength: PropTypes.func.isRequired,
+    shouldShowError: PropTypes.bool.isRequired,
 };
 
-const defaultProps = {
-    comment: '',
-};
+const defaultProps = {};
 
 function ExceededCommentLength(props) {
     const styles = useThemeStyles();
     const {numberFormat, translate} = useLocalize();
-    const [commentLength, setCommentLength] = useState(0);
-    const updateCommentLength = useMemo(
-        () =>
-            debounce((comment, onExceededMaxCommentLength) => {
-                const newCommentLength = ReportUtils.getCommentLength(comment);
-                setCommentLength(newCommentLength);
-                onExceededMaxCommentLength(newCommentLength > CONST.MAX_COMMENT_LENGTH);
-            }, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME),
-        [],
-    );
-
-    useEffect(() => {
-        updateCommentLength(props.comment, props.onExceededMaxCommentLength);
-    }, [props.comment, props.onExceededMaxCommentLength, updateCommentLength]);
 
-    if (commentLength <= CONST.MAX_COMMENT_LENGTH) {
+    if (!props.shouldShowError) {
         return null;
     }
-
     return (
         <Text
             style={[styles.textMicro, styles.textDanger, styles.chatItemComposeSecondaryRow, styles.mlAuto, styles.pl2]}
@@ -61,9 +32,4 @@ ExceededCommentLength.propTypes = propTypes;
 ExceededCommentLength.defaultProps = defaultProps;
 ExceededCommentLength.displayName = 'ExceededCommentLength';
 
-export default withOnyx({
-    comment: {
-        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
-        initialValue: '',
-    },
-})(ExceededCommentLength);
+export default ExceededCommentLength;
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index 49559d1cc6d5..b1ef7c093e29 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -5,9 +5,9 @@ import DevLogo from '@assets/images/expensify-logo--dev.svg';
 import StagingLogo from '@assets/images/expensify-logo--staging.svg';
 import ProductionLogo from '@assets/images/expensify-wordmark.svg';
 import useEnvironment from '@hooks/useEnvironment';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import withWindowDimensions from './withWindowDimensions';
diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 7b0c70372579..bf0852d179f1 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import MenuItem from './MenuItem';
 import menuItemPropTypes from './menuItemPropTypes';
 import Text from './Text';
diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 4b32e1b8ce81..7fd6811c1df6 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -1,6 +1,6 @@
 import React, {ReactNode} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type FixedFooterProps = {
     /** Children to wrap in FixedFooter. */
diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js
index ea6db244091a..e846c1f188e2 100644
--- a/src/components/FocusModeNotification.js
+++ b/src/components/FocusModeNotification.js
@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
@@ -10,9 +10,9 @@ import Text from './Text';
 import TextLinkWithRef from './TextLink';
 
 function FocusModeNotification() {
+    const styles = useThemeStyles();
     const {environmentURL} = useEnvironment();
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     useEffect(() => {
         User.updateChatPriorityMode(CONST.PRIORITY_MODE.GSD, true);
     }, []);
diff --git a/src/components/Form.js b/src/components/Form.js
index e129ad7f9209..7b6f587e7bd1 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -4,13 +4,13 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo,
 import {Keyboard, ScrollView, StyleSheet} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import FormAlertWithSubmitButton from './FormAlertWithSubmitButton';
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index 0d6dcb001091..50b24e368fc6 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -126,7 +126,7 @@ const FormProvider = forwardRef(
                 }
                 FormActions.setErrorFields(formID, null);
 
-                const validateErrors = validate(values) || {};
+                const validateErrors = validate(trimmedStringValues) || {};
 
                 // Validate the input for html tags. It should supercede any other error
                 _.each(trimmedStringValues, (inputValue, inputID) => {
@@ -155,6 +155,11 @@ const FormProvider = forwardRef(
                             }
                         }
                     }
+
+                    if (isMatch && leadingSpaceIndex === -1) {
+                        return;
+                    }
+
                     // Add a validation error here because it is a string value that contains HTML characters
                     validateErrors[inputID] = 'common.error.invalidCharacter';
                 });
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
index 638b6e5f8d19..da34262a8af8 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -8,9 +8,9 @@ import FormSubmit from '@components/FormSubmit';
 import refPropTypes from '@components/refPropTypes';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import errorsPropType from './errorsPropType';
 
 const propTypes = {
diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 6886b6fdcaaf..86e88c27b388 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
 import FormAlertWrapper from './FormAlertWrapper';
 
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
index d6612f6ae688..6062ea8f7803 100644
--- a/src/components/FormAlertWrapper.js
+++ b/src/components/FormAlertWrapper.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import FormHelpMessage from './FormHelpMessage';
 import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
diff --git a/src/components/FormHelpMessage.tsx b/src/components/FormHelpMessage.tsx
index 3d0b2df443f2..43709b51db44 100644
--- a/src/components/FormHelpMessage.tsx
+++ b/src/components/FormHelpMessage.tsx
@@ -1,9 +1,9 @@
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/FormScrollView.tsx b/src/components/FormScrollView.tsx
index c2f01e1d0511..4646a534e750 100644
--- a/src/components/FormScrollView.tsx
+++ b/src/components/FormScrollView.tsx
@@ -1,6 +1,6 @@
 import React, {ForwardedRef} from 'react';
 import {ScrollView, ScrollViewProps} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type FormScrollViewProps = ScrollViewProps & {
     /** Form elements */
diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx
index fc0687f6da18..2b5f7b3ada72 100644
--- a/src/components/FullscreenLoadingIndicator.tsx
+++ b/src/components/FullscreenLoadingIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {ActivityIndicator, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type FullScreenLoadingIndicatorProps = {
     style?: StyleProp<ViewStyle>;
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
index 82672edb14c2..ccc404d415d7 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Animated} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
 
 const propTypes = {
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 457a9dce66d9..207033f8fac2 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Animated} from 'react-native';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
 
 const propTypes = {
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index faf1ec9cfa16..bcb4a8703b94 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -5,10 +5,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Growl from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 9a2d7c673c5b..86ddf0a52bb3 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import convertToLTR from '@libs/convertToLTR';
-import singleFontFamily from '@styles/fontFamily/singleFontFamily';
-import useThemeStyles from '@styles/useThemeStyles';
+import singleFontFamily from '@styles/utils/fontFamily/singleFontFamily';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 49642308a357..8fd907470c19 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -6,8 +6,8 @@ import AnchorForCommentsOnly from '@components/AnchorForCommentsOnly';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@hooks/useThemeStyles';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
index 9d101b8a5190..1932eaaf8a4f 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/CodeRenderer.js
@@ -3,7 +3,7 @@ import {splitBoxModelStyle} from 'react-native-render-html';
 import _ from 'underscore';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import InlineCodeBlock from '@components/InlineCodeBlock';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function CodeRenderer(props) {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
index e97d01808a6e..9ff5fdecae13 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -2,9 +2,8 @@ import React from 'react';
 import _ from 'underscore';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import editedLabelStyles from '@styles/editedLabelStyles';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
@@ -32,7 +31,7 @@ function EditedRenderer(props) {
                 {...defaultRendererProps}
                 fontSize={variables.fontSizeSmall}
                 color={theme.textSupporting}
-                style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
+                style={[styles.editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
             >
                 {props.translate('reportActionCompose.edited')}
             </Text>
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index f5ecc106d629..05016a25394a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
@@ -5,10 +5,10 @@ import PressableWithoutFocus from '@components/Pressable/PressableWithoutFocus';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import ThumbnailImage from '@components/ThumbnailImage';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index 82769598d84a..93ede229876d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
 import Text from '@components/Text';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function MentionHereRenderer(props) {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index 14580bf90bfb..11ffabe4fe6a 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -8,13 +8,13 @@ import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
index ea8d3858c49b..07954cc97a00 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
@@ -6,8 +6,8 @@ import htmlRendererPropTypes from '@components/HTMLEngineProvider/HTMLRenderers/
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 46fe1a25c920..c02f21d7c6f2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import React, {ReactElement} from 'react';
 import {StyleProp, TextStyle, View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import EnvironmentBadge from './EnvironmentBadge';
 import Text from './Text';
 
diff --git a/src/components/HeaderGap/index.desktop.js b/src/components/HeaderGap/index.desktop.js
deleted file mode 100644
index 07ea1ea6f48d..000000000000
--- a/src/components/HeaderGap/index.desktop.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {memo} from 'react';
-import {View} from 'react-native';
-import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
-import compose from '@libs/compose';
-
-const propTypes = {
-    /** Styles to apply to the HeaderGap */
-    // eslint-disable-next-line react/forbid-prop-types
-    styles: PropTypes.arrayOf(PropTypes.object),
-    ...withThemeStylesPropTypes,
-};
-
-const defaultProps = {
-    styles: [],
-};
-
-function HeaderGap(props) {
-    return <View style={[props.themeStyles.headerGap, ...props.styles]} />;
-}
-
-HeaderGap.displayName = 'HeaderGap';
-HeaderGap.propTypes = propTypes;
-HeaderGap.defaultProps = defaultProps;
-export default compose(memo, withThemeStyles)(HeaderGap);
diff --git a/src/components/HeaderGap/index.desktop.tsx b/src/components/HeaderGap/index.desktop.tsx
new file mode 100644
index 000000000000..3687bb2e6b02
--- /dev/null
+++ b/src/components/HeaderGap/index.desktop.tsx
@@ -0,0 +1,13 @@
+import React, {memo} from 'react';
+import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {HeaderGapProps, HeaderGapReturnType} from './types';
+
+function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {
+    const themeStyles = useThemeStyles();
+    return <View style={[themeStyles.headerGap, styles]} />;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+
+export default memo(HeaderGap);
diff --git a/src/components/HeaderGap/index.js b/src/components/HeaderGap/index.js
deleted file mode 100644
index 35e6bf92fb5d..000000000000
--- a/src/components/HeaderGap/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function HeaderGap() {
-    return null;
-}
-
-HeaderGap.displayName = 'HeaderGap';
-export default HeaderGap;
diff --git a/src/components/HeaderGap/index.tsx b/src/components/HeaderGap/index.tsx
new file mode 100644
index 000000000000..191923efd7c8
--- /dev/null
+++ b/src/components/HeaderGap/index.tsx
@@ -0,0 +1,10 @@
+import type {HeaderGapProps, HeaderGapReturnType} from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function HeaderGap({styles}: HeaderGapProps): HeaderGapReturnType {
+    return null;
+}
+
+HeaderGap.displayName = 'HeaderGap';
+
+export default HeaderGap;
diff --git a/src/components/HeaderGap/types.ts b/src/components/HeaderGap/types.ts
new file mode 100644
index 000000000000..55a202c2e48c
--- /dev/null
+++ b/src/components/HeaderGap/types.ts
@@ -0,0 +1,10 @@
+import {ReactNode} from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+
+type HeaderGapProps = {
+    styles?: StyleProp<ViewStyle>;
+};
+
+type HeaderGapReturnType = ReactNode;
+
+export type {HeaderGapProps, HeaderGapReturnType};
diff --git a/src/components/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 27c9656abd1a..9ef5d4f83a06 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -3,11 +3,11 @@ import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import FixedFooter from './FixedFooter';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 9de8bd6a22c7..5c76d1665310 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -10,12 +10,12 @@ import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import headerWithBackButtonPropTypes from './headerWithBackButtonPropTypes';
diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index 5e4c0192ca86..5a843af6690b 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,7 +1,7 @@
 import {SvgProps} from 'react-native-svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
diff --git a/src/components/Icon/svgs/LoungeAccessIcon.tsx b/src/components/Icon/svgs/LoungeAccessIcon.tsx
index 48b140da3bc8..e57573c439f1 100644
--- a/src/components/Icon/svgs/LoungeAccessIcon.tsx
+++ b/src/components/Icon/svgs/LoungeAccessIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Svg, {G, Path, Polygon} from 'react-native-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@hooks/useTheme';
 
 type LoungeAccessIconProps = {
     /** The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'. */
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 0557c7a6ca7b..9980d8a7879a 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
 import Lottie from './Lottie';
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 7ec5b0c33432..0db1f87cd704 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -4,9 +4,9 @@ import {View} from 'react-native';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ImageView/index.native.js b/src/components/ImageView/index.native.js
index 5ebd03170d92..6c04a1c83ee5 100644
--- a/src/components/ImageView/index.native.js
+++ b/src/components/ImageView/index.native.js
@@ -5,8 +5,8 @@ import ImageZoom from 'react-native-image-pan-zoom';
 import _ from 'underscore';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Image from '@components/Image';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 /**
diff --git a/src/components/ImageWithSizeCalculation.tsx b/src/components/ImageWithSizeCalculation.tsx
index 82b4b4759112..cffbc8941388 100644
--- a/src/components/ImageWithSizeCalculation.tsx
+++ b/src/components/ImageWithSizeCalculation.tsx
@@ -2,8 +2,8 @@ import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {OnLoadEvent} from 'react-native-fast-image';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
-import useThemeStyles from '@styles/useThemeStyles';
 import FullscreenLoadingIndicator from './FullscreenLoadingIndicator';
 import Image from './Image';
 import RESIZE_MODES from './Image/resizeModes';
diff --git a/src/components/Indicator.tsx b/src/components/Indicator.tsx
index 5332c4bd984f..7b7eae97fd86 100644
--- a/src/components/Indicator.tsx
+++ b/src/components/Indicator.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import {OnyxCollection, withOnyx} from 'react-native-onyx';
 import {OnyxEntry} from 'react-native-onyx/lib/types';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BankAccountList, FundList, LoginList, Policy, PolicyMembers, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
diff --git a/src/components/InlineCodeBlock/WrappedText.tsx b/src/components/InlineCodeBlock/WrappedText.tsx
index 6dbd17f18e2a..f0bb4e3ffd53 100644
--- a/src/components/InlineCodeBlock/WrappedText.tsx
+++ b/src/components/InlineCodeBlock/WrappedText.tsx
@@ -1,7 +1,7 @@
 import React, {Fragment} from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
diff --git a/src/components/InlineCodeBlock/index.native.tsx b/src/components/InlineCodeBlock/index.native.tsx
index 308b88e76e88..3a70308fa0cc 100644
--- a/src/components/InlineCodeBlock/index.native.tsx
+++ b/src/components/InlineCodeBlock/index.native.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {TText} from 'react-native-render-html';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type InlineCodeBlockProps from './types';
 import WrappedText from './WrappedText';
 
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index 6e6423a19a35..bef4c21289d5 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
diff --git a/src/components/InvertedFlatList/index.native.js b/src/components/InvertedFlatList/index.native.js
index d52d5a6d08f7..59810cba62c4 100644
--- a/src/components/InvertedFlatList/index.native.js
+++ b/src/components/InvertedFlatList/index.native.js
@@ -1,5 +1,5 @@
 import React, {forwardRef} from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import CellRendererComponent from './CellRendererComponent';
 
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index e9eb1e4c54c8..5ad25d23f484 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -42,6 +42,7 @@ function KYCWall({
     source,
     userWallet,
     walletTerms,
+    shouldShowPersonalBankAccountOption,
 }) {
     const anchorRef = useRef(null);
     const transferBalanceButtonRef = useRef(null);
@@ -213,6 +214,7 @@ function KYCWall({
                     setShouldShowAddPaymentMenu(false);
                     selectPaymentMethod(item);
                 }}
+                shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
             />
             {children(continueAction, anchorRef)}
         </>
diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js
index 58db2c1c1940..2f14f1e12e11 100644
--- a/src/components/KYCWall/kycWallPropTypes.js
+++ b/src/components/KYCWall/kycWallPropTypes.js
@@ -62,6 +62,9 @@ const propTypes = {
 
     /** Callback for when a payment method has been selected */
     onSelectPaymentMethod: PropTypes.func,
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -82,6 +85,7 @@ const defaultProps = {
     },
     shouldIncludeDebitCard: true,
     onSelectPaymentMethod: () => {},
+    shouldShowPersonalBankAccountOption: false,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 8febd7f247d6..71b14b6fadcd 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -8,13 +8,13 @@ import _ from 'underscore';
 import participantPropTypes from '@components/participantPropTypes';
 import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 9b7141249180..9e50c4b1690a 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -15,6 +15,9 @@ import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
@@ -24,9 +27,6 @@ import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManag
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx
index c04b0131744f..46adb1a4895e 100644
--- a/src/components/LocalePicker.tsx
+++ b/src/components/LocalePicker.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as App from '@userActions/App';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
index 5c0552e6bce7..14601c7c4ba2 100644
--- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
+++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -8,9 +8,9 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import colors from '@styles/colors';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
 import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
 
diff --git a/src/components/Lottie/Lottie.tsx b/src/components/Lottie/Lottie.tsx
index 868eaf8cb95e..2bf7df056c4d 100644
--- a/src/components/Lottie/Lottie.tsx
+++ b/src/components/Lottie/Lottie.tsx
@@ -3,7 +3,7 @@ import React, {ForwardedRef, forwardRef} from 'react';
 import {View} from 'react-native';
 import DotLottieAnimation from '@components/LottieAnimations/types';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type Props = {
     source: DotLottieAnimation;
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 91430602a115..55a65237a691 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -4,10 +4,10 @@ import {StyleSheet, View} from 'react-native';
 import {TapGestureHandler} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import FormHelpMessage from './FormHelpMessage';
 import networkPropTypes from './networkPropTypes';
diff --git a/src/components/MapView/Direction.tsx b/src/components/MapView/Direction.tsx
index ca4b26f2f2db..b3162149a48d 100644
--- a/src/components/MapView/Direction.tsx
+++ b/src/components/MapView/Direction.tsx
@@ -1,5 +1,5 @@
 import Mapbox from '@rnmapbox/maps';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
diff --git a/src/components/MapView/Direction.website.tsx b/src/components/MapView/Direction.website.tsx
index 9e5af2aa2b1d..f85bda125473 100644
--- a/src/components/MapView/Direction.website.tsx
+++ b/src/components/MapView/Direction.website.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {DirectionProps} from './MapViewTypes';
 
 function Direction({coordinates}: DirectionProps) {
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 91f9d9930079..7b3d73479dde 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -3,10 +3,10 @@ import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps';
 import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import setUserLocation from '@libs/actions/UserLocation';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index ecdb62efbe15..7910d7f93a29 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -9,9 +9,9 @@ import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState
 import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
index 2acdb59d3782..0af816785e9a 100644
--- a/src/components/MapView/PendingMapView.tsx
+++ b/src/components/MapView/PendingMapView.tsx
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import {PendingMapViewProps} from './MapViewTypes';
 
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index b42540bacb13..f1daaaa229be 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,9 +1,9 @@
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getStyledTextArray from '@libs/GetStyledTextArray';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {Icon} from '@src/types/onyx/OnyxCommon';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 2fd375698b13..6dde0a70168f 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -10,9 +10,9 @@ import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/MessagesRow.tsx b/src/components/MessagesRow.tsx
index c0b0a7807deb..e019bd1aef30 100644
--- a/src/components/MessagesRow.tsx
+++ b/src/components/MessagesRow.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import DotIndicatorMessage from './DotIndicatorMessage';
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 1ea284b55280..89640c56f5ef 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -4,12 +4,12 @@ import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index bfc899f9c278..4269420dcd7f 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import StatusBar from '@libs/StatusBar';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 import BaseModal from './BaseModal';
 import BaseModalProps from './types';
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
index 9a1f59d64efa..f73ddef0dfa0 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -5,6 +5,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -12,7 +13,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
index e693ce5e502b..687bc92ffbcd 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.js
@@ -1,9 +1,9 @@
 import React, {useMemo} from 'react';
 import {Text, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import RenderHTML from './RenderHTML';
 
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 1bd7b71c5aa3..fc3e4b095873 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -9,6 +9,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
@@ -22,8 +24,6 @@ import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -521,6 +521,7 @@ function MoneyRequestConfirmationList(props) {
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                 }}
+                shouldShowPersonalBankAccountOption
             />
         ) : (
             <ButtonWithDropdownMenu
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 178163f6569f..488630dd0590 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as HeaderUtils from '@libs/HeaderUtils';
@@ -13,7 +14,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MoneyRequestHeaderStatusBar.js b/src/components/MoneyRequestHeaderStatusBar.js
index e50b69cca1fe..530524af12b0 100644
--- a/src/components/MoneyRequestHeaderStatusBar.js
+++ b/src/components/MoneyRequestHeaderStatusBar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 
 const propTypes = {
diff --git a/src/components/MoneyRequestSkeletonView.tsx b/src/components/MoneyRequestSkeletonView.tsx
index 3e175f000acd..e11e7bcecc07 100644
--- a/src/components/MoneyRequestSkeletonView.tsx
+++ b/src/components/MoneyRequestSkeletonView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Rect} from 'react-native-svg';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import SkeletonViewContentLoader from './SkeletonViewContentLoader';
 
diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index a85322978b33..5c7ea712e772 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -7,6 +7,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
@@ -19,8 +21,6 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index a7b22a663e08..997e63cb022f 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -1,10 +1,10 @@
 import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
index b402caa2c750..739befa7d081 100644
--- a/src/components/OfflineIndicator.tsx
+++ b/src/components/OfflineIndicator.tsx
@@ -2,8 +2,8 @@ import React, {useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 78c93c250f84..5fcf1fe7442b 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -1,9 +1,9 @@
 import React, {useCallback} from 'react';
 import {ImageStyle, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 7a3b90945a5c..09ec96cf5b1e 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -3,10 +3,10 @@ import * as OnfidoSDK from 'onfido-sdk-ui';
 import React, {forwardRef, useEffect} from 'react';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import Log from '@libs/Log';
-import fontFamily from '@styles/fontFamily';
-import fontWeightBold from '@styles/fontWeight/bold';
-import useTheme from '@styles/themes/useTheme';
+import fontFamily from '@styles/utils/fontFamily';
+import fontWeightBold from '@styles/utils/fontWeight/bold';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import './index.css';
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 24f109112679..1a8c395ddd8b 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {InteractionManager, StyleSheet, View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Button from './Button';
 import DisplayNames from './DisplayNames';
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index 31bc4d4070af..d22df00bd0b3 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -7,7 +7,7 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import SectionList from '@components/SectionList';
 import Text from '@components/Text';
 import usePrevious from '@hooks/usePrevious';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {defaultProps as optionsListDefaultProps, propTypes as optionsListPropTypes} from './optionsListPropTypes';
diff --git a/src/components/PDFView/PDFInfoMessage.js b/src/components/PDFView/PDFInfoMessage.js
index 9ec53b2ae375..7c234b19daa5 100644
--- a/src/components/PDFView/PDFInfoMessage.js
+++ b/src/components/PDFView/PDFInfoMessage.js
@@ -6,7 +6,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 2c33d8d93a31..42d2ebbb771e 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -6,10 +6,10 @@ import Button from '@components/Button';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PDFInfoMessage from './PDFInfoMessage';
 
diff --git a/src/components/ParentNavigationSubtitle.tsx b/src/components/ParentNavigationSubtitle.tsx
index c12cefe6bead..b3f1653fda1a 100644
--- a/src/components/ParentNavigationSubtitle.tsx
+++ b/src/components/ParentNavigationSubtitle.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {ParentNavigationSummaryParams} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx
index dfb2d6332da5..6f587f350b79 100644
--- a/src/components/Picker/BasePicker.tsx
+++ b/src/components/Picker/BasePicker.tsx
@@ -7,8 +7,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useScrollContext from '@hooks/useScrollContext';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {BasePickerHandle, BasePickerProps} from './types';
 
 type IconToRender = () => ReactElement;
diff --git a/src/components/PinButton.js b/src/components/PinButton.js
index 4b336b1d71d4..182e49054100 100644
--- a/src/components/PinButton.js
+++ b/src/components/PinButton.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js
index 2106efb9d31e..1bb50dfbd89e 100644
--- a/src/components/PopoverMenu/index.js
+++ b/src/components/PopoverMenu/index.js
@@ -9,8 +9,8 @@ import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps as createMenuDefaultProps, propTypes as createMenuPropTypes} from './popoverMenuPropTypes';
 
diff --git a/src/components/PopoverWithMeasuredContent.js b/src/components/PopoverWithMeasuredContent.js
index b2c94c81770f..7de5be113e53 100644
--- a/src/components/PopoverWithMeasuredContent.js
+++ b/src/components/PopoverWithMeasuredContent.js
@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import PopoverWithMeasuredContentStyleUtils from '@styles/PopoverWithMeasuredContentStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import PopoverWithMeasuredContentUtils from '@libs/PopoverWithMeasuredContentUtils';
 import CONST from '@src/CONST';
 import Popover from './Popover';
 import {defaultProps as defaultPopoverProps, propTypes as popoverPropTypes} from './Popover/popoverPropTypes';
@@ -128,8 +128,8 @@ function PopoverWithMeasuredContent(props) {
         };
     }, [props.anchorPosition, props.anchorAlignment, popoverWidth, popoverHeight]);
 
-    const horizontalShift = PopoverWithMeasuredContentStyleUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
-    const verticalShift = PopoverWithMeasuredContentStyleUtils.computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight);
+    const horizontalShift = PopoverWithMeasuredContentUtils.computeHorizontalShift(adjustedAnchorPosition.left, popoverWidth, windowWidth);
+    const verticalShift = PopoverWithMeasuredContentUtils.computeVerticalShift(adjustedAnchorPosition.top, popoverHeight, windowHeight);
     const shiftedAnchorPosition = {
         left: adjustedAnchorPosition.left + horizontalShift,
         bottom: windowHeight - (adjustedAnchorPosition.top + popoverHeight) - verticalShift,
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index c13d9e1a0931..43ca1c0de818 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -5,8 +5,8 @@ import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
index 0d0ed33d5138..0a9f544bcee1 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -2,11 +2,11 @@ import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from '
 // eslint-disable-next-line no-restricted-imports
 import {GestureResponderEvent, Pressable, View} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableProps, {PressableRef} from './types';
 
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index ec9e54c83b7e..e768f0d0b3fa 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -6,10 +6,10 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps, {PressableRef} from './GenericPressable/types';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
diff --git a/src/components/PressableWithSecondaryInteraction/index.tsx b/src/components/PressableWithSecondaryInteraction/index.tsx
index 437123dbe952..0cb53e40325a 100644
--- a/src/components/PressableWithSecondaryInteraction/index.tsx
+++ b/src/components/PressableWithSecondaryInteraction/index.tsx
@@ -2,9 +2,9 @@ import React, {forwardRef, useEffect, useRef} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import PressableWithSecondaryInteractionProps from './types';
 
 /** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index 5363281ddc67..99a3a1f64118 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -1,7 +1,7 @@
 import React, {Ref} from 'react';
 import {ImageSourcePropType} from 'react-native';
 import QRCodeLibrary from 'react-native-qrcode-svg';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@hooks/useTheme';
 import CONST from '@src/CONST';
 
 type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO;
diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
index f7bb5cb5f788..f644db844e53 100644
--- a/src/components/QRShare/index.js
+++ b/src/components/QRShare/index.js
@@ -4,8 +4,8 @@ import _ from 'underscore';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import QRCode from '@components/QRCode';
 import Text from '@components/Text';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import {qrShareDefaultProps, qrSharePropTypes} from './propTypes';
 
diff --git a/src/components/RNTextInput.tsx b/src/components/RNTextInput.tsx
index 28555abe3266..ff812e7c799b 100644
--- a/src/components/RNTextInput.tsx
+++ b/src/components/RNTextInput.tsx
@@ -2,16 +2,20 @@ import React, {ForwardedRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {TextInput, TextInputProps} from 'react-native';
 import Animated, {AnimatedProps} from 'react-native-reanimated';
+import useTheme from '@hooks/useTheme';
 
 // Convert the underlying TextInput into an Animated component so that we can take an animated ref and pass it to a worklet
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function RNTextInputWithRef(props: TextInputProps, ref: ForwardedRef<React.Component<AnimatedProps<TextInputProps>>>) {
+    const theme = useTheme();
+
     return (
         <AnimatedTextInput
             allowFontScaling={false}
             textBreakStrategy="simple"
+            keyboardAppearance={theme.colorScheme}
             ref={(refHandle) => {
                 if (typeof ref !== 'function') {
                     return;
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
index 68fcda6677c8..2d18ccb480b8 100644
--- a/src/components/RadioButton.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/RadioButtonWithLabel.tsx b/src/components/RadioButtonWithLabel.tsx
index 7d8df23bae49..4c223262ac50 100644
--- a/src/components/RadioButtonWithLabel.tsx
+++ b/src/components/RadioButtonWithLabel.tsx
@@ -1,6 +1,6 @@
 import React, {ComponentType} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormHelpMessage from './FormHelpMessage';
 import * as Pressables from './Pressable';
 import RadioButton from './RadioButton';
diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx
index b83710bd85bf..8aa3ef7e8ffe 100644
--- a/src/components/RadioButtons.tsx
+++ b/src/components/RadioButtons.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
 type Choice = {
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 128eafd51ee8..61ad4ce76d64 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -7,9 +7,9 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 7ec72468ee91..3fd22a758f67 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -4,8 +4,8 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar
 import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 92913a7c4c5e..34d336887031 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -8,11 +8,11 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
index 9d32b0240a23..c932632f7bff 100644
--- a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
+++ b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js
@@ -7,8 +7,8 @@ import AddReactionBubble from '@components/Reactions/AddReactionBubble';
 import EmojiReactionBubble from '@components/Reactions/EmojiReactionBubble';
 import EmojiReactionsPropTypes from '@components/Reactions/EmojiReactionsPropTypes';
 import Tooltip from '@components/Tooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
index 1a7a06e9487d..bb6b03c5918b 100644
--- a/src/components/Reactions/ReactionTooltipContent.js
+++ b/src/components/Reactions/ReactionTooltipContent.js
@@ -5,8 +5,8 @@ import _ from 'underscore';
 import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /**
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.js b/src/components/Reactions/ReportActionItemEmojiReactions.js
index 7c504e35cb9f..547f4089857f 100644
--- a/src/components/Reactions/ReportActionItemEmojiReactions.js
+++ b/src/components/Reactions/ReportActionItemEmojiReactions.js
@@ -7,11 +7,11 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Tooltip from '@components/Tooltip';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
-import useThemeStyles from '@styles/useThemeStyles';
 import AddReactionBubble from './AddReactionBubble';
 import EmojiReactionBubble from './EmojiReactionBubble';
 import EmojiReactionsPropTypes from './EmojiReactionsPropTypes';
diff --git a/src/components/ReceiptEmptyState.js b/src/components/ReceiptEmptyState.js
index 6af1cadd48c5..371518dd9a77 100644
--- a/src/components/ReceiptEmptyState.js
+++ b/src/components/ReceiptEmptyState.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index 72bf3ce1896d..bc0e70e64419 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import HeaderWithBackButton from './HeaderWithBackButton';
diff --git a/src/components/ReportActionItem/ChronosOOOListActions.js b/src/components/ReportActionItem/ChronosOOOListActions.js
index 7c918b6a2d9c..f90ae67796b9 100644
--- a/src/components/ReportActionItem/ChronosOOOListActions.js
+++ b/src/components/ReportActionItem/ChronosOOOListActions.js
@@ -7,9 +7,9 @@ import Button from '@components/Button';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Chronos from '@userActions/Chronos';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/MoneyReportView.js b/src/components/ReportActionItem/MoneyReportView.js
index c52d4abe371c..c12659e94673 100644
--- a/src/components/ReportActionItem/MoneyReportView.js
+++ b/src/components/ReportActionItem/MoneyReportView.js
@@ -7,13 +7,13 @@ import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/MoneyRequestAction.js b/src/components/ReportActionItem/MoneyRequestAction.js
index 040682990d2c..e0a3152a41b4 100644
--- a/src/components/ReportActionItem/MoneyRequestAction.js
+++ b/src/components/ReportActionItem/MoneyRequestAction.js
@@ -8,6 +8,7 @@ import {withNetwork} from '@components/OnyxProvider';
 import refPropTypes from '@components/refPropTypes';
 import RenderHTML from '@components/RenderHTML';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -17,7 +18,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 210a0575a310..12c6d0629370 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -14,9 +14,11 @@ import refPropTypes from '@components/refPropTypes';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -28,9 +30,8 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import iouReportPropTypes from '@pages/iouReportPropTypes';
+import reportPropTypes from '@pages/reportPropTypes';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -64,20 +65,11 @@ const propTypes = {
 
     /* Onyx Props */
 
-    /** Active IOU Report for current report */
-    iouReport: PropTypes.shape({
-        /** Account ID of the manager in this iou report */
-        managerID: PropTypes.number,
+    /** chatReport associated with iouReport */
+    chatReport: reportPropTypes,
 
-        /** Account ID of the creator of this iou report */
-        ownerAccountID: PropTypes.number,
-
-        /** Outstanding amount in cents of this transaction */
-        total: PropTypes.number,
-
-        /** Currency of outstanding amount of this transaction */
-        currency: PropTypes.string,
-    }),
+    /** IOU report data object */
+    iouReport: iouReportPropTypes,
 
     /** True if this is this IOU is a split instead of a 1:1 request */
     isBillSplit: PropTypes.bool.isRequired,
@@ -112,8 +104,6 @@ const propTypes = {
 
     /** Whether a message is a whisper */
     isWhisper: PropTypes.bool,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -124,6 +114,7 @@ const defaultProps = {
     checkIfContextMenuActive: () => {},
     containerStyles: [],
     walletTerms: {},
+    chatReport: {},
     isHovered: false,
     personalDetails: {},
     session: {
@@ -138,6 +129,7 @@ function MoneyRequestPreview(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
     const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
 
     if (_.isEmpty(props.iouReport) && !props.isBillSplit) {
@@ -179,14 +171,9 @@ function MoneyRequestPreview(props) {
 
     const getSettledMessage = () => {
         if (isExpensifyCardTransaction) {
-            return props.translate('common.done');
-        }
-        switch (lodashGet(props.action, 'originalMessage.paymentType', '')) {
-            case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
-                return props.translate('iou.settledExpensify');
-            default:
-                return props.translate('iou.settledElsewhere');
+            return translate('common.done');
         }
+        return translate('iou.settledExpensify');
     };
 
     const showContextMenu = (event) => {
@@ -195,43 +182,43 @@ function MoneyRequestPreview(props) {
 
     const getPreviewHeaderText = () => {
         if (isDistanceRequest) {
-            return props.translate('common.distance');
+            return translate('common.distance');
         }
 
         if (isScanning) {
-            return props.translate('common.receipt');
+            return translate('common.receipt');
         }
 
         if (props.isBillSplit) {
-            return props.translate('iou.split');
+            return translate('iou.split');
         }
 
         if (isExpensifyCardTransaction) {
-            let message = props.translate('iou.card');
+            let message = translate('iou.card');
             if (TransactionUtils.isPending(props.transaction)) {
-                message += ` • ${props.translate('iou.pending')}`;
+                message += ` • ${translate('iou.pending')}`;
             }
             return message;
         }
 
-        let message = props.translate('iou.cash');
+        let message = translate('iou.cash');
         if (ReportUtils.isGroupPolicyExpenseReport(props.iouReport) && ReportUtils.isReportApproved(props.iouReport) && !ReportUtils.isSettled(props.iouReport)) {
-            message += ` • ${props.translate('iou.approved')}`;
+            message += ` • ${translate('iou.approved')}`;
         } else if (props.iouReport.isWaitingOnBankAccount) {
-            message += ` • ${props.translate('iou.pending')}`;
+            message += ` • ${translate('iou.pending')}`;
         } else if (props.iouReport.isCancelledIOU) {
-            message += ` • ${props.translate('iou.canceled')}`;
+            message += ` • ${translate('iou.canceled')}`;
         }
         return message;
     };
 
     const getDisplayAmountText = () => {
         if (isDistanceRequest) {
-            return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : props.translate('common.tbd');
+            return requestAmount && !hasPendingWaypoints ? CurrencyUtils.convertToDisplayString(requestAmount, props.transaction.currency) : translate('common.tbd');
         }
 
         if (isScanning) {
-            return props.translate('iou.receiptScanning');
+            return translate('iou.receiptScanning');
         }
 
         if (TransactionUtils.hasMissingSmartscanFields(props.transaction)) {
@@ -331,14 +318,14 @@ function MoneyRequestPreview(props) {
                             {shouldShowMerchant && !props.isBillSplit && (
                                 <View style={[styles.flexRow]}>
                                     <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>
-                                        {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, props.translate('common.tbd')) : requestMerchant}
+                                        {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, translate('common.tbd')) : requestMerchant}
                                     </Text>
                                 </View>
                             )}
                             <View style={[styles.flexRow, styles.mt1]}>
                                 <View style={[styles.flex1]}>
                                     {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                        <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                        <Text style={[styles.textLabel, styles.colorMuted]}>{translate('iou.pendingConversionMessage')}</Text>
                                     )}
                                     {(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && (
                                         <Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>
@@ -346,7 +333,7 @@ function MoneyRequestPreview(props) {
                                 </View>
                                 {props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && (
                                     <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
-                                        {props.translate('iou.amountEach', {
+                                        {translate('iou.amountEach', {
                                             amount: CurrencyUtils.convertToDisplayString(
                                                 IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
                                                 requestCurrency,
@@ -374,7 +361,7 @@ function MoneyRequestPreview(props) {
             onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
-            accessibilityLabel={props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')}
+            accessibilityLabel={props.isBillSplit ? translate('iou.split') : translate('iou.cash')}
             accessibilityHint={CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}
             style={[styles.moneyRequestPreviewBox, ...props.containerStyles, shouldDisableOnPress && styles.cursorDefault]}
         >
@@ -387,26 +374,23 @@ MoneyRequestPreview.propTypes = propTypes;
 MoneyRequestPreview.defaultProps = defaultProps;
 MoneyRequestPreview.displayName = 'MoneyRequestPreview';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        chatReport: {
-            key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-        },
-        iouReport: {
-            key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
-        },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        transaction: {
-            key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
-        },
-        walletTerms: {
-            key: ONYXKEYS.WALLET_TERMS,
-        },
-    }),
-)(MoneyRequestPreview);
+export default withOnyx({
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+    chatReport: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
+    },
+    iouReport: {
+        key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
+    },
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    transaction: {
+        key: ({action}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${(action && action.originalMessage && action.originalMessage.IOUTransactionID) || 0}`,
+    },
+    walletTerms: {
+        key: ONYXKEYS.WALLET_TERMS,
+    },
+})(MoneyRequestPreview);
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 1afc909b54df..817c88d456db 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -17,6 +17,9 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
@@ -32,9 +35,6 @@ import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateB
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/RenameAction.js b/src/components/ReportActionItem/RenameAction.js
index b4f4b23c9ebf..52039b7b593b 100644
--- a/src/components/ReportActionItem/RenameAction.js
+++ b/src/components/ReportActionItem/RenameAction.js
@@ -4,9 +4,9 @@ import React from 'react';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** All the data of the action */
diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
index 534a92dae830..2c5ef22b1b8e 100644
--- a/src/components/ReportActionItem/ReportActionItemImage.js
+++ b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -10,9 +10,9 @@ import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import ThumbnailImage from '@components/ThumbnailImage';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
index b20513d63fe3..96f919aea750 100644
--- a/src/components/ReportActionItem/ReportActionItemImages.js
+++ b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -5,9 +5,9 @@ import {Polygon, Svg} from 'react-native-svg';
 import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
 
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index e6b387f362ef..aa3c02b76fc0 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -14,6 +14,8 @@ import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -25,8 +27,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ReportActionItem/TaskAction.js b/src/components/ReportActionItem/TaskAction.js
index d79bb6f78b93..5825d623a5ca 100644
--- a/src/components/ReportActionItem/TaskAction.js
+++ b/src/components/ReportActionItem/TaskAction.js
@@ -3,8 +3,8 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TaskUtils from '@libs/TaskUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Name of the reportAction action */
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 3b04364ee69a..ed875bb04af2 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -14,6 +14,8 @@ import RenderHTML from '@components/RenderHTML';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -23,8 +25,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TaskUtils from '@libs/TaskUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index ea02dba705a6..bb8945495018 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -17,6 +17,8 @@ import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import getButtonState from '@libs/getButtonState';
@@ -24,8 +26,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
index 3451e13298b3..c4c2a3f43eb3 100644
--- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
+++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 type SkeletonViewLinesProps = {
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index fc739b5d06d8..91adb26faff5 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import {Circle, Rect} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import Icon from './Icon';
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 6613517b2ed2..a204d0c59aaf 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -4,13 +4,13 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index a51219122e0a..5a6363d4a642 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
 import Avatar from './Avatar';
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 7f8292f0123e..60be8430b056 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import refPropTypes from '@components/refPropTypes';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -14,7 +15,7 @@ const propTypes = {
     errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
 
     /** A ref forwarded to the TextInput */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** The ID used to uniquely identify the input in a Form */
     inputID: PropTypes.string,
diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
index d6d061122eff..84f9098e564f 100644
--- a/src/components/SAMLLoadingIndicator.js
+++ b/src/components/SAMLLoadingIndicator.js
@@ -1,16 +1,17 @@
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import themeColors from '@styles/themes/default';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import * as Illustrations from './Icon/Illustrations';
 import Text from './Text';
 
 function SAMLLoadingIndicator() {
-    const {translate} = useLocalize();
+    const theme = useTheme();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     return (
         <View style={[StyleSheet.absoluteFillObject, styles.deeplinkWrapperContainer]}>
             <View style={styles.deeplinkWrapperMessage}>
@@ -30,7 +31,7 @@ function SAMLLoadingIndicator() {
                 <Icon
                     width={154}
                     height={34}
-                    fill={themeColors.success}
+                    fill={theme.success}
                     src={Expensicons.ExpensifyWordmark}
                 />
             </View>
diff --git a/src/components/SafeArea/index.ios.tsx b/src/components/SafeArea/index.ios.tsx
index 194919b3eef4..1b2e1881ade3 100644
--- a/src/components/SafeArea/index.ios.tsx
+++ b/src/components/SafeArea/index.ios.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import SafeAreaProps from './types';
 
 function SafeArea({children}: SafeAreaProps) {
diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx
index 5117000627cf..4e6c9bbd3528 100644
--- a/src/components/SafeAreaConsumer/index.android.tsx
+++ b/src/components/SafeAreaConsumer/index.android.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import useStyleUtils from '@hooks/useStyleUtils';
 import StatusBar from '@libs/StatusBar';
-import useStyleUtils from '@styles/useStyleUtils';
 import SafeAreaConsumerProps from './types';
 
 /**
diff --git a/src/components/SafeAreaConsumer/index.tsx b/src/components/SafeAreaConsumer/index.tsx
index 54c5d984be5f..c05e836a2348 100644
--- a/src/components/SafeAreaConsumer/index.tsx
+++ b/src/components/SafeAreaConsumer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
 import SafeAreaConsumerProps from './types';
 
 /**
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 6af67c51ffaf..bd277ffa1ab8 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -14,9 +14,9 @@ import useEnvironment from '@hooks/useEnvironment';
 import useInitialDimensions from '@hooks/useInitialWindowDimensions';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './propTypes';
diff --git a/src/components/Section.js b/src/components/Section.js
index ad52bf0e3509..a59476fb0c05 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Icon from './Icon';
 import MenuItemList from './MenuItemList';
 import menuItemPropTypes from './menuItemPropTypes';
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index 7a7e23388722..637c06f4d35f 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index 39bd10ca5a9d..ac679f32d103 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -7,9 +7,9 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import RadioListItem from './RadioListItem';
 import {baseListItemPropTypes} from './selectionListPropTypes';
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 4f88b3ddc78a..454127612e0d 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -17,10 +17,10 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar
 import useActiveElement from '@hooks/useActiveElement';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
diff --git a/src/components/SelectionList/RadioListItem.js b/src/components/SelectionList/RadioListItem.js
index 6d69b01e5d5e..2de0c96932ea 100644
--- a/src/components/SelectionList/RadioListItem.js
+++ b/src/components/SelectionList/RadioListItem.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {radioListItemPropTypes} from './selectionListPropTypes';
 
 function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}) {
diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js
index 0b4b6b52e0ac..39b7e02df3eb 100644
--- a/src/components/SelectionList/UserListItem.js
+++ b/src/components/SelectionList/UserListItem.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import {userListItemPropTypes} from './selectionListPropTypes';
 
 function UserListItem({item, textStyles, alternateTextStyles, showTooltip}) {
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 1ffdfd78664d..0c8e193af4cc 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -81,6 +81,9 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -110,6 +113,7 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, // caret for dropdown is at right, so horizontal anchor is at RIGHT
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    shouldShowPersonalBankAccountOption: false,
 };
 
 function SettlementButton({
@@ -132,6 +136,7 @@ function SettlementButton({
     shouldHidePaymentOptions,
     shouldShowApproveButton,
     style,
+    shouldShowPersonalBankAccountOption,
 }) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -220,6 +225,7 @@ function SettlementButton({
             chatReportID={chatReportID}
             iouReport={iouReport}
             anchorAlignment={kycWallAnchorAlignment}
+            shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
         >
             {(triggerKYCFlow, buttonRef) => (
                 <ButtonWithDropdownMenu
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index 5f1620ac7c88..34b55fa5dcf1 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -5,10 +5,10 @@ import _ from 'underscore';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Additional styles for container */
diff --git a/src/components/SignInButtons/AppleSignIn/index.desktop.js b/src/components/SignInButtons/AppleSignIn/index.desktop.js
index f5dd4512c7c1..cc7ae5b623a5 100644
--- a/src/components/SignInButtons/AppleSignIn/index.desktop.js
+++ b/src/components/SignInButtons/AppleSignIn/index.desktop.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import IconButton from '@components/SignInButtons/IconButton';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/SignInButtons/GoogleSignIn/index.desktop.js b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
index aec0b0a5eef7..9284a5332e3d 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.desktop.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import IconButton from '@components/SignInButtons/IconButton';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/components/SignInButtons/GoogleSignIn/index.website.js b/src/components/SignInButtons/GoogleSignIn/index.website.js
index 7a909c5b1658..8f8a977bdb09 100644
--- a/src/components/SignInButtons/GoogleSignIn/index.website.js
+++ b/src/components/SignInButtons/GoogleSignIn/index.website.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
diff --git a/src/components/SignInButtons/IconButton.js b/src/components/SignInButtons/IconButton.js
index ddfde61d6a07..19a5bd9b27b8 100644
--- a/src/components/SignInButtons/IconButton.js
+++ b/src/components/SignInButtons/IconButton.js
@@ -4,7 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/SingleChoiceQuestion.tsx b/src/components/SingleChoiceQuestion.tsx
index 6a3a3d87ee8a..5b4ea54e4436 100644
--- a/src/components/SingleChoiceQuestion.tsx
+++ b/src/components/SingleChoiceQuestion.tsx
@@ -1,7 +1,7 @@
 import React, {ForwardedRef, forwardRef} from 'react';
 import {Text as RNText} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {MaybePhraseKey} from '@libs/Localize';
-import useThemeStyles from '@styles/useThemeStyles';
 import FormHelpMessage from './FormHelpMessage';
 import RadioButtons, {Choice} from './RadioButtons';
 import Text from './Text';
diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js
index 5ef9d0398555..15cf83116bd1 100644
--- a/src/components/SingleOptionSelector.js
+++ b/src/components/SingleOptionSelector.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SelectCircle from './SelectCircle';
diff --git a/src/components/SpacerView.js b/src/components/SpacerView.js
index b9705a15b5f3..6b3ece2d476f 100644
--- a/src/components/SpacerView.js
+++ b/src/components/SpacerView.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/SplashScreenHider/index.native.tsx b/src/components/SplashScreenHider/index.native.tsx
index 29b5ae710dda..9585d0d5abeb 100644
--- a/src/components/SplashScreenHider/index.native.tsx
+++ b/src/components/SplashScreenHider/index.native.tsx
@@ -2,11 +2,11 @@ import {useCallback, useRef} from 'react';
 import {StyleSheet, ViewStyle} from 'react-native';
 import Reanimated, {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Logo from '@assets/images/new-expensify-dark.svg';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BootSplash from '@libs/BootSplash';
-import useThemeStyles from '@styles/useThemeStyles';
-import type SplashScreenHiderProps from './types';
+import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     const styles = useThemeStyles();
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
     const navigationBarHeight = BootSplash.navigationBarHeight || 0;
diff --git a/src/components/SplashScreenHider/index.tsx b/src/components/SplashScreenHider/index.tsx
index d3f5c52c1e3e..5710055b80ed 100644
--- a/src/components/SplashScreenHider/index.tsx
+++ b/src/components/SplashScreenHider/index.tsx
@@ -1,8 +1,8 @@
 import {useEffect} from 'react';
 import BootSplash from '@libs/BootSplash';
-import type SplashScreenHiderProps from './types';
+import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     useEffect(() => {
         BootSplash.hide().then(() => onHide());
     }, [onHide]);
diff --git a/src/components/SplashScreenHider/types.ts b/src/components/SplashScreenHider/types.ts
index 4ea25da93290..ff7b2beb1520 100644
--- a/src/components/SplashScreenHider/types.ts
+++ b/src/components/SplashScreenHider/types.ts
@@ -1,6 +1,10 @@
+import {ReactNode} from 'react';
+
 type SplashScreenHiderProps = {
     /** Splash screen has been hidden */
     onHide: () => void;
 };
 
-export default SplashScreenHiderProps;
+type SplashScreenHiderReturnType = ReactNode;
+
+export type {SplashScreenHiderProps, SplashScreenHiderReturnType};
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index 908bb5eb5b2a..003211478529 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -7,9 +7,9 @@ import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import searchCountryOptions from '@libs/searchCountryOptions';
 import StringUtils from '@libs/StringUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/StatePicker/index.js b/src/components/StatePicker/index.js
index d9c137ac9dc1..6fa60fbba947 100644
--- a/src/components/StatePicker/index.js
+++ b/src/components/StatePicker/index.js
@@ -7,7 +7,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import refPropTypes from '@components/refPropTypes';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StateSelectorModal from './StateSelectorModal';
 
 const propTypes = {
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index 7fa2900eaffb..9a0aa934ff1b 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -1,10 +1,10 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
 import {ValueOf} from 'type-fest';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {AvatarSource} from '@libs/UserUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {AvatarType} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index 5195c0040add..fd9d9ae315ff 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 import {Animated} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
diff --git a/src/components/TabSelector/TabIcon.js b/src/components/TabSelector/TabIcon.js
index 76217b69e9f3..d96ae19897f4 100644
--- a/src/components/TabSelector/TabIcon.js
+++ b/src/components/TabSelector/TabIcon.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@hooks/useTheme';
 
 const propTypes = {
     /** Icon to display on tab */
diff --git a/src/components/TabSelector/TabLabel.js b/src/components/TabSelector/TabLabel.js
index 5dc050731fc5..fdf204011152 100644
--- a/src/components/TabSelector/TabLabel.js
+++ b/src/components/TabSelector/TabLabel.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet, Text, View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** Title of the tab */
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index e968226e83fa..444bb62263d9 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
 
diff --git a/src/components/TabSelector/TabSelectorItem.js b/src/components/TabSelector/TabSelectorItem.js
index 116b5db02d2c..88aa98766fae 100644
--- a/src/components/TabSelector/TabSelectorItem.js
+++ b/src/components/TabSelector/TabSelectorItem.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {Animated, StyleSheet} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import TabIcon from './TabIcon';
 import TabLabel from './TabLabel';
 
diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
index 334ca3e38370..cb3d9bf260e6 100644
--- a/src/components/TagPicker/index.js
+++ b/src/components/TagPicker/index.js
@@ -4,10 +4,10 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './tagPickerPropTypes';
diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
index 5f8461d8e324..47975fd7fc1e 100644
--- a/src/components/TaskHeaderActionButton.tsx
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 53953b861d7d..82b597f77268 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Network from '@userActions/Network';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx
index 4999866b27ee..4ed1aa126002 100644
--- a/src/components/TestToolRow.tsx
+++ b/src/components/TestToolRow.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 
 type TestToolRowProps = {
diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx
index f555c2b0b4fe..4138df64adc2 100644
--- a/src/components/TestToolsModal.tsx
+++ b/src/components/TestToolsModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {OnyxEntry, withOnyx} from 'react-native-onyx';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index ae2f6ba99392..0d201bd253c4 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -1,8 +1,8 @@
 import React, {ForwardedRef} from 'react';
 import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
 import type {TextStyle} from 'react-native';
-import fontFamily from '@styles/fontFamily';
-import useTheme from '@styles/themes/useTheme';
+import useTheme from '@hooks/useTheme';
+import fontFamily from '@styles/utils/fontFamily';
 import variables from '@styles/variables';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index bd33cac02f17..67776d6c7e91 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -13,12 +13,12 @@ import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index b9bbf567f9cb..2151af206149 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -13,12 +13,12 @@ import Text from '@components/Text';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
 import withLocalize from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
diff --git a/src/components/TextInput/TextInputLabel/index.js b/src/components/TextInput/TextInputLabel/index.js
index dbd6fa765503..61af88fe317b 100644
--- a/src/components/TextInput/TextInputLabel/index.js
+++ b/src/components/TextInput/TextInputLabel/index.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useRef} from 'react';
 import {Animated} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './TextInputLabelPropTypes';
 
diff --git a/src/components/TextInput/TextInputLabel/index.native.js b/src/components/TextInput/TextInputLabel/index.native.js
index afc2aa09c84e..eb0f8b17e8b7 100644
--- a/src/components/TextInput/TextInputLabel/index.native.js
+++ b/src/components/TextInput/TextInputLabel/index.native.js
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import {Animated} from 'react-native';
 import * as styleConst from '@components/TextInput/styleConst';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TextInputLabelPropTypes from './TextInputLabelPropTypes';
 
 function TextInputLabel(props) {
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 27ca1d524eda..87db18754ed8 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -1,9 +1,9 @@
 import React, {useEffect, useRef} from 'react';
 import _ from 'underscore';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import DomUtils from '@libs/DomUtils';
 import Visibility from '@libs/Visibility';
-import useThemeStyles from '@styles/useThemeStyles';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './BaseTextInput/baseTextInputPropTypes';
 import * as styleConst from './styleConst';
diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.native.js
index 14591167a425..e5aba76957ad 100644
--- a/src/components/TextInput/index.native.js
+++ b/src/components/TextInput/index.native.js
@@ -1,6 +1,6 @@
 import React, {forwardRef, useEffect} from 'react';
 import {AppState, Keyboard} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './BaseTextInput/baseTextInputPropTypes';
 
diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx
index 95c456ddc8e3..1a67e7bc4c5f 100644
--- a/src/components/TextLink.tsx
+++ b/src/components/TextLink.tsx
@@ -1,7 +1,7 @@
 import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler} from 'react';
 import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native';
 import useEnvironment from '@hooks/useEnvironment';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import Text, {TextProps} from './Text';
diff --git a/src/components/TextWithEllipsis/index.tsx b/src/components/TextWithEllipsis/index.tsx
index ee2ec72d1248..fda0d5ab576e 100644
--- a/src/components/TextWithEllipsis/index.tsx
+++ b/src/components/TextWithEllipsis/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 type TextWithEllipsisProps = {
     /** Leading text before the ellipsis */
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/components/ThemeIllustrationsProvider.tsx
similarity index 58%
rename from src/styles/illustrations/ThemeIllustrationsProvider.tsx
rename to src/components/ThemeIllustrationsProvider.tsx
index 423e0c1866b1..3b83a00960a4 100644
--- a/src/styles/illustrations/ThemeIllustrationsProvider.tsx
+++ b/src/components/ThemeIllustrationsProvider.tsx
@@ -1,8 +1,7 @@
 import React, {useMemo} from 'react';
-import useThemePreference from '@styles/themes/useThemePreference';
-import DarkIllustrations from './dark';
-import LightIllustrations from './light';
-import ThemeIllustrationsContext from './ThemeIllustrationsContext';
+import useThemePreference from '@hooks/useThemePreference';
+import ThemeIllustrationsContext from '@styles/theme/context/ThemeIllustrationsContext';
+import Illustrations from '@styles/theme/illustrations';
 
 type ThemeIllustrationsProviderProps = {
     children: React.ReactNode;
@@ -11,7 +10,7 @@ type ThemeIllustrationsProviderProps = {
 function ThemeIllustrationsProvider({children}: ThemeIllustrationsProviderProps) {
     const themePreference = useThemePreference();
 
-    const illustrations = useMemo(() => (themePreference === 'dark' ? DarkIllustrations : LightIllustrations), [themePreference]);
+    const illustrations = useMemo(() => Illustrations[themePreference], [themePreference]);
 
     return <ThemeIllustrationsContext.Provider value={illustrations}>{children}</ThemeIllustrationsContext.Provider>;
 }
diff --git a/src/styles/themes/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
similarity index 74%
rename from src/styles/themes/ThemeProvider.tsx
rename to src/components/ThemeProvider.tsx
index 0d302b5ae056..34bc32be9c99 100644
--- a/src/styles/themes/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -1,10 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import ThemeContext from './ThemeContext';
-import themes from './themes';
-import {ThemePreferenceWithoutSystem} from './types';
-import useThemePreferenceWithStaticOverride from './useThemePreferenceWithStaticOverride';
+import useThemePreferenceWithStaticOverride from '@hooks/useThemePreferenceWithStaticOverride';
+import themes from '@styles/theme';
+import ThemeContext from '@styles/theme/context/ThemeContext';
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 
 const propTypes = {
     /** Rendered child component */
diff --git a/src/styles/ThemeStylesProvider.tsx b/src/components/ThemeStylesProvider.tsx
similarity index 75%
rename from src/styles/ThemeStylesProvider.tsx
rename to src/components/ThemeStylesProvider.tsx
index 766cb00bd09b..f0d25d9e4dde 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/components/ThemeStylesProvider.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
-import stylesGenerator from './styles';
-import useTheme from './themes/useTheme';
-import ThemeStylesContext from './ThemeStylesContext';
-import createStyleUtils from './utils';
+import useTheme from '@hooks/useTheme';
+import stylesGenerator from '@styles/index';
+import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext';
+import createStyleUtils from '@styles/utils';
 
 type ThemeStylesProviderProps = React.PropsWithChildren;
 
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index 341ac6e5eb9a..0e84b4beeb7c 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -8,8 +8,8 @@ import PopoverMenu from '@components/PopoverMenu';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
 
diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
index a4a200d96082..08b269e45f62 100644
--- a/src/components/ThumbnailImage.tsx
+++ b/src/components/ThumbnailImage.tsx
@@ -1,10 +1,10 @@
 import lodashClamp from 'lodash/clamp';
 import React, {useCallback, useState} from 'react';
 import {Dimensions, StyleProp, View, ViewStyle} from 'react-native';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 
 type ThumbnailImageProps = {
diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
index 7da6084b5312..5b49739150cc 100644
--- a/src/components/TimePicker/TimePicker.js
+++ b/src/components/TimePicker/TimePicker.js
@@ -10,11 +10,11 @@ import refPropTypes from '@components/refPropTypes';
 import Text from '@components/Text';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import setSelection from './setSelection';
 
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.tsx b/src/components/Tooltip/TooltipRenderedOnPageBody.tsx
index 2ed885c9d3d7..4549f48501bf 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.tsx
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.tsx
@@ -2,8 +2,8 @@ import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'reac
 import ReactDOM from 'react-dom';
 import {Animated, View} from 'react-native';
 import Text from '@components/Text';
+import useStyleUtils from '@hooks/useStyleUtils';
 import Log from '@libs/Log';
-import useStyleUtils from '@styles/useStyleUtils';
 import textRef from '@src/types/utils/textRef';
 import viewRef from '@src/types/utils/viewRef';
 import TooltipProps from './types';
diff --git a/src/components/UnorderedList.tsx b/src/components/UnorderedList.tsx
index a51cefce9ce6..a2b836bd4d80 100644
--- a/src/components/UnorderedList.tsx
+++ b/src/components/UnorderedList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Text from './Text';
 
 type UnorderedListProps = {
diff --git a/src/components/UnreadActionIndicator.tsx b/src/components/UnreadActionIndicator.tsx
index b34f962e57bd..f422ae24bd4f 100755
--- a/src/components/UnreadActionIndicator.tsx
+++ b/src/components/UnreadActionIndicator.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import Text from './Text';
 
diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js
index b689f2b73de9..5e88a7994e51 100644
--- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js
+++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip.website.js
@@ -7,10 +7,10 @@ import Avatar from '@components/Avatar';
 import {usePersonalDetails} from '@components/OnyxProvider';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './userDetailsTooltipPropTypes';
 
diff --git a/src/components/ValidateCode/ExpiredValidateCodeModal.js b/src/components/ValidateCode/ExpiredValidateCodeModal.js
index caeef8a14a0a..cb880a0a2844 100644
--- a/src/components/ValidateCode/ExpiredValidateCodeModal.js
+++ b/src/components/ValidateCode/ExpiredValidateCodeModal.js
@@ -5,8 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/JustSignedInModal.js b/src/components/ValidateCode/JustSignedInModal.js
index 0ae4c882784c..fedb92c49ee3 100644
--- a/src/components/ValidateCode/JustSignedInModal.js
+++ b/src/components/ValidateCode/JustSignedInModal.js
@@ -6,8 +6,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/components/ValidateCode/ValidateCodeModal.js b/src/components/ValidateCode/ValidateCodeModal.js
index 58f9b24e3c91..a2fea513f851 100644
--- a/src/components/ValidateCode/ValidateCodeModal.js
+++ b/src/components/ValidateCode/ValidateCodeModal.js
@@ -10,8 +10,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js
index b70bcc5cbbb7..edc5a48d0bb3 100644
--- a/src/components/ValuePicker/ValueSelectorModal.js
+++ b/src/components/ValuePicker/ValueSelectorModal.js
@@ -5,7 +5,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/components/ValuePicker/index.js b/src/components/ValuePicker/index.js
index 6eb20d1bde6a..b5ddaa7dcb73 100644
--- a/src/components/ValuePicker/index.js
+++ b/src/components/ValuePicker/index.js
@@ -5,8 +5,8 @@ import {View} from 'react-native';
 import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import refPropTypes from '@components/refPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ValueSelectorModal from './ValueSelectorModal';
 
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index 3d1488ec8521..54e7309ee48b 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -12,9 +12,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/components/WalletSection.tsx b/src/components/WalletSection.tsx
index c0c02877828e..224734089810 100644
--- a/src/components/WalletSection.tsx
+++ b/src/components/WalletSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {SvgProps} from 'react-native-svg';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Section from './Section';
 
diff --git a/src/components/WalletStatementModal/index.tsx b/src/components/WalletStatementModal/index.tsx
index 0f1d1804df60..d6120b842ddc 100644
--- a/src/components/WalletStatementModal/index.tsx
+++ b/src/components/WalletStatementModal/index.tsx
@@ -2,8 +2,8 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/components/withStyleUtils.tsx b/src/components/withStyleUtils.tsx
index 6ea044fce70c..821587a1ae43 100644
--- a/src/components/withStyleUtils.tsx
+++ b/src/components/withStyleUtils.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import useStyleUtils from '@styles/useStyleUtils';
 import {StyleUtilsType} from '@styles/utils';
 
 const withStyleUtilsPropTypes = {
diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
index 59380110904a..93349e8e2ba4 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
+import useTheme from '@hooks/useTheme';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {type ThemeColors} from '@styles/themes/types';
-import useTheme from '@styles/themes/useTheme';
+import {type ThemeColors} from '@styles/theme/types';
 
 const withThemePropTypes = {
     theme: PropTypes.object.isRequired,
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index d811573d1730..0ae960bd4351 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {type ThemeStyles} from '@styles/styles';
-import useThemeStyles from '@styles/useThemeStyles';
+import {type ThemeStyles} from '@styles/index';
 
 const withThemeStylesPropTypes = {
     themeStyles: PropTypes.object.isRequired,
diff --git a/src/components/withToggleVisibilityView.tsx b/src/components/withToggleVisibilityView.tsx
index 0e3e91d09bf2..974ce3b7f855 100644
--- a/src/components/withToggleVisibilityView.tsx
+++ b/src/components/withToggleVisibilityView.tsx
@@ -1,8 +1,8 @@
 import React, {ComponentType, ForwardedRef, ReactElement, RefAttributes} from 'react';
 import {View} from 'react-native';
 import {SetOptional} from 'type-fest';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import useThemeStyles from '@styles/useThemeStyles';
 
 type ToggleVisibilityViewProps = {
     /** Whether the content is visible. */
diff --git a/src/hooks/useAutoFocusInput.js b/src/hooks/useAutoFocusInput.ts
similarity index 73%
rename from src/hooks/useAutoFocusInput.js
rename to src/hooks/useAutoFocusInput.ts
index b65b5242fa32..ad66a01b157d 100644
--- a/src/hooks/useAutoFocusInput.js
+++ b/src/hooks/useAutoFocusInput.ts
@@ -1,24 +1,29 @@
 import {useFocusEffect} from '@react-navigation/native';
 import {useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {InteractionManager} from 'react-native';
+import {InteractionManager, TextInput} from 'react-native';
 import CONST from '@src/CONST';
 import * as Expensify from '@src/Expensify';
 
-export default function useAutoFocusInput() {
+type UseAutoFocusInput = {
+    inputCallbackRef: (ref: TextInput | null) => void;
+};
+
+export default function useAutoFocusInput(): UseAutoFocusInput {
     const [isInputInitialized, setIsInputInitialized] = useState(false);
     const [isScreenTransitionEnded, setIsScreenTransitionEnded] = useState(false);
 
+    // @ts-expect-error TODO: Remove this when Expensify.js is migrated.
     const {isSplashHidden} = useContext(Expensify.SplashScreenHiddenContext);
 
-    const inputRef = useRef(null);
-    const focusTimeoutRef = useRef(null);
+    const inputRef = useRef<TextInput | null>(null);
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     useEffect(() => {
         if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || !isSplashHidden) {
             return;
         }
         InteractionManager.runAfterInteractions(() => {
-            inputRef.current.focus();
+            inputRef.current?.focus();
             setIsScreenTransitionEnded(false);
         });
     }, [isScreenTransitionEnded, isInputInitialized, isSplashHidden]);
@@ -38,7 +43,7 @@ export default function useAutoFocusInput() {
         }, []),
     );
 
-    const inputCallbackRef = (ref) => {
+    const inputCallbackRef = (ref: TextInput | null) => {
         inputRef.current = ref;
         setIsInputInitialized(true);
     };
diff --git a/src/hooks/useDelayedInputFocus.js b/src/hooks/useDelayedInputFocus.ts
similarity index 62%
rename from src/hooks/useDelayedInputFocus.js
rename to src/hooks/useDelayedInputFocus.ts
index 7a4a64104e48..d062f8a03d25 100644
--- a/src/hooks/useDelayedInputFocus.js
+++ b/src/hooks/useDelayedInputFocus.ts
@@ -1,19 +1,17 @@
 import {useFocusEffect} from '@react-navigation/native';
-import {useCallback, useRef} from 'react';
+import {MutableRefObject, useCallback, useRef} from 'react';
+import {TextInput} from 'react-native';
 import CONST from '@src/CONST';
 
 /**
  * Focus a text input when a screen is navigated to, after the specified time delay has elapsed.
- *
- * @param {Object} inputRef
- * @param {Number} [delay]
  */
-export default function useDelayedInputFocus(inputRef, delay = CONST.ANIMATED_TRANSITION) {
-    const timeoutRef = useRef(null);
+export default function useDelayedInputFocus(inputRef: MutableRefObject<TextInput>, delay: number = CONST.ANIMATED_TRANSITION) {
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     useFocusEffect(
         useCallback(() => {
-            timeoutRef.current = setTimeout(() => inputRef.current && inputRef.current.focus(), delay);
+            timeoutRef.current = setTimeout(() => inputRef.current?.focus(), delay);
             return () => {
                 if (!timeoutRef.current) {
                     return;
diff --git a/src/hooks/useHandleExceedMaxCommentLength.ts b/src/hooks/useHandleExceedMaxCommentLength.ts
new file mode 100644
index 000000000000..9700999bb004
--- /dev/null
+++ b/src/hooks/useHandleExceedMaxCommentLength.ts
@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import {useCallback, useMemo, useState} from 'react';
+import * as ReportUtils from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+
+const useHandleExceedMaxCommentLength = () => {
+    const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
+
+    const handleValueChange = useCallback(
+        (value: string) => {
+            if (ReportUtils.getCommentLength(value) <= CONST.MAX_COMMENT_LENGTH) {
+                if (hasExceededMaxCommentLength) {
+                    setHasExceededMaxCommentLength(false);
+                }
+                return;
+            }
+            setHasExceededMaxCommentLength(true);
+        },
+        [hasExceededMaxCommentLength],
+    );
+
+    const validateCommentMaxLength = useMemo(() => _.debounce(handleValueChange, 1500), [handleValueChange]);
+
+    return {hasExceededMaxCommentLength, validateCommentMaxLength};
+};
+
+export default useHandleExceedMaxCommentLength;
diff --git a/src/hooks/useInitialWindowDimensions/index.js b/src/hooks/useInitialWindowDimensions/index.ts
similarity index 80%
rename from src/hooks/useInitialWindowDimensions/index.js
rename to src/hooks/useInitialWindowDimensions/index.ts
index 5878c8b3371f..e0882e820e9b 100644
--- a/src/hooks/useInitialWindowDimensions/index.js
+++ b/src/hooks/useInitialWindowDimensions/index.ts
@@ -1,14 +1,24 @@
 // eslint-disable-next-line no-restricted-imports
 import {useEffect, useState} from 'react';
-import {Dimensions} from 'react-native';
+import {Dimensions, type ScaledSize} from 'react-native';
+
+type InitialWindowDimensions = {
+    initialWidth: number;
+    initialHeight: number;
+};
+
+type NewDimensions = {
+    window: ScaledSize;
+    screen: ScaledSize;
+};
 
 /**
  * A convenience hook that provides initial size (width and height).
  * An initial height allows to know the real height of window,
  * while the standard useWindowDimensions hook return the height minus Virtual keyboard height
- * @returns {Object} with information about initial width and height
+ * @returns with information about initial width and height
  */
-export default function () {
+export default function (): InitialWindowDimensions {
     const [dimensions, setDimensions] = useState(() => {
         const window = Dimensions.get('window');
         const screen = Dimensions.get('screen');
@@ -22,7 +32,7 @@ export default function () {
     });
 
     useEffect(() => {
-        const onDimensionChange = (newDimensions) => {
+        const onDimensionChange = (newDimensions: NewDimensions) => {
             const {window, screen} = newDimensions;
 
             setDimensions((oldState) => {
diff --git a/src/hooks/useIsScrollBarVisible/index.native.ts b/src/hooks/useIsScrollBarVisible/index.native.ts
new file mode 100644
index 000000000000..a461e1b7b074
--- /dev/null
+++ b/src/hooks/useIsScrollBarVisible/index.native.ts
@@ -0,0 +1,7 @@
+/**
+ * Native doesn't have the DOM, so we just return null.
+ *
+ */
+const useIsScrollBarVisible = () => null;
+
+export default useIsScrollBarVisible;
diff --git a/src/hooks/useIsScrollBarVisible/index.ts b/src/hooks/useIsScrollBarVisible/index.ts
new file mode 100644
index 000000000000..4ab3a7bb24db
--- /dev/null
+++ b/src/hooks/useIsScrollBarVisible/index.ts
@@ -0,0 +1,28 @@
+import {useCallback, useEffect, useState} from 'react';
+
+const useIsScrollBarVisible = (ref: React.RefObject<HTMLDivElement | HTMLTextAreaElement>, value: string) => {
+    const [isScrollBarVisible, setIsScrollBarVisible] = useState(false);
+
+    const handleResize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const {scrollHeight, clientHeight} = ref.current;
+        setIsScrollBarVisible(scrollHeight > clientHeight);
+    }, [ref]);
+
+    useEffect(() => {
+        if (!ref.current || !('ResizeObserver' in (window || {}))) {
+            return;
+        }
+
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [handleResize, ref, value]);
+    return isScrollBarVisible;
+};
+
+export default useIsScrollBarVisible;
diff --git a/src/styles/useStyleUtils.ts b/src/hooks/useStyleUtils.ts
similarity index 83%
rename from src/styles/useStyleUtils.ts
rename to src/hooks/useStyleUtils.ts
index aadb3f884220..8e6ad31396d5 100644
--- a/src/styles/useStyleUtils.ts
+++ b/src/hooks/useStyleUtils.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from './ThemeStylesContext';
+import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext';
 
 function useStyleUtils() {
     const themeStylesContext = useContext(ThemeStylesContext);
diff --git a/src/hooks/useTabNavigatorFocus/index.js b/src/hooks/useTabNavigatorFocus/index.ts
similarity index 83%
rename from src/hooks/useTabNavigatorFocus/index.js
rename to src/hooks/useTabNavigatorFocus/index.ts
index f83ec5bd9270..9138cbbdab48 100644
--- a/src/hooks/useTabNavigatorFocus/index.js
+++ b/src/hooks/useTabNavigatorFocus/index.ts
@@ -1,8 +1,17 @@
 import {useTabAnimation} from '@react-navigation/material-top-tabs';
 import {useIsFocused} from '@react-navigation/native';
 import {useEffect, useState} from 'react';
+import {Animated} from 'react-native';
 import DomUtils from '@libs/DomUtils';
 
+type UseTabNavigatorFocusParams = {
+    tabIndex: number;
+};
+
+type PositionAnimationListenerCallback = {
+    value: number;
+};
+
 /**
  * Custom React hook to determine the focus status of a tab in a Material Top Tab Navigator.
  * It evaluates whether the current tab is focused based on the tab's animation position and
@@ -17,15 +26,16 @@ import DomUtils from '@libs/DomUtils';
  * might not be used within a Material Top Tabs Navigator context. Proper usage should ensure that
  * this hook is only used where appropriate.
  *
- * @param {Object} params - The parameters object.
- * @param {Number} params.tabIndex - The index of the tab for which focus status is being determined.
- * @returns {Boolean} Returns `true` if the tab is both animation-focused and screen-focused, otherwise `false`.
+ * @param params - The parameters object.
+ * @param params.tabIndex - The index of the tab for which focus status is being determined.
+ * @returns Returns `true` if the tab is both animation-focused and screen-focused, otherwise `false`.
  *
  * @example
  * const isTabFocused = useTabNavigatorFocus({ tabIndex: 1 });
  */
-function useTabNavigatorFocus({tabIndex}) {
-    let tabPositionAnimation = null;
+function useTabNavigatorFocus({tabIndex}: UseTabNavigatorFocusParams): boolean {
+    let tabPositionAnimation: Animated.AnimatedInterpolation<number> | null = null;
+
     try {
         // Retrieve the animation value from the tab navigator, which ranges from 0 to the total number of pages displayed.
         // Even a minimal scroll towards the camera page (e.g., a value of 0.001 at start) should activate the camera for immediate responsiveness.
@@ -46,7 +56,7 @@ function useTabNavigatorFocus({tabIndex}) {
         }
         const index = Number(tabIndex);
 
-        const listenerId = tabPositionAnimation.addListener(({value}) => {
+        const listenerId = tabPositionAnimation.addListener(({value}: PositionAnimationListenerCallback) => {
             // Activate camera as soon the index is animating towards the `tabIndex`
             DomUtils.requestAnimationFrame(() => {
                 setIsTabFocused(value > index - 1 && value < index + 1);
@@ -56,6 +66,7 @@ function useTabNavigatorFocus({tabIndex}) {
         // We need to get the position animation value on component initialization to determine
         // if the tab is focused or not. Since it's an Animated.Value the only synchronous way
         // to retrieve the value is to use a private method.
+        // @ts-expect-error -- __getValue is a private method
         // eslint-disable-next-line no-underscore-dangle
         const initialTabPositionValue = tabPositionAnimation.__getValue();
 
diff --git a/src/styles/themes/useTheme.ts b/src/hooks/useTheme.ts
similarity index 72%
rename from src/styles/themes/useTheme.ts
rename to src/hooks/useTheme.ts
index adeaffbcae8a..966e9b499e2f 100644
--- a/src/styles/themes/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,6 +1,6 @@
 import {useContext} from 'react';
-import ThemeContext from './ThemeContext';
-import {type ThemeColors} from './types';
+import ThemeContext from '@styles/theme/context/ThemeContext';
+import {type ThemeColors} from '@styles/theme/types';
 
 function useTheme(): ThemeColors {
     const theme = useContext(ThemeContext);
diff --git a/src/styles/illustrations/useThemeIllustrations.ts b/src/hooks/useThemeIllustrations.ts
similarity index 81%
rename from src/styles/illustrations/useThemeIllustrations.ts
rename to src/hooks/useThemeIllustrations.ts
index 32f986dc655a..5bc07185f882 100644
--- a/src/styles/illustrations/useThemeIllustrations.ts
+++ b/src/hooks/useThemeIllustrations.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeIllustrationsContext from './ThemeIllustrationsContext';
+import ThemeIllustrationsContext from '@styles/theme/context/ThemeIllustrationsContext';
 
 function useThemeIllustrations() {
     const illustrations = useContext(ThemeIllustrationsContext);
diff --git a/src/styles/themes/useThemePreference.ts b/src/hooks/useThemePreference.ts
similarity index 51%
rename from src/styles/themes/useThemePreference.ts
rename to src/hooks/useThemePreference.ts
index ac87e2488b31..5d3ec4c3a860 100644
--- a/src/styles/themes/useThemePreference.ts
+++ b/src/hooks/useThemePreference.ts
@@ -1,26 +1,20 @@
 import {useContext, useEffect, useState} from 'react';
-import {Appearance, ColorSchemeName} from 'react-native';
+import {useColorScheme} from 'react-native';
 import {PreferredThemeContext} from '@components/OnyxProvider';
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 import CONST from '@src/CONST';
-import {ThemePreferenceWithoutSystem} from './types';
 
 function useThemePreference() {
-    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.DEFAULT);
-    const [systemTheme, setSystemTheme] = useState<ColorSchemeName>();
+    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.FALLBACK);
     const preferredThemeFromStorage = useContext(PreferredThemeContext);
-
-    useEffect(() => {
-        // This is used for getting the system theme, that can be set in the OS's theme settings. This will always return either "light" or "dark" and will update automatically if the OS theme changes.
-        const systemThemeSubscription = Appearance.addChangeListener(({colorScheme}) => setSystemTheme(colorScheme));
-        return () => systemThemeSubscription.remove();
-    }, []);
+    const systemTheme = useColorScheme();
 
     useEffect(() => {
         const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT;
 
         // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme
         if (theme === CONST.THEME.SYSTEM) {
-            setThemePreference(systemTheme ?? CONST.THEME.DEFAULT);
+            setThemePreference(systemTheme ?? CONST.THEME.FALLBACK);
         } else {
             setThemePreference(theme);
         }
diff --git a/src/styles/themes/useThemePreferenceWithStaticOverride.ts b/src/hooks/useThemePreferenceWithStaticOverride.ts
similarity index 90%
rename from src/styles/themes/useThemePreferenceWithStaticOverride.ts
rename to src/hooks/useThemePreferenceWithStaticOverride.ts
index b447740a0de1..4619da1966ce 100644
--- a/src/styles/themes/useThemePreferenceWithStaticOverride.ts
+++ b/src/hooks/useThemePreferenceWithStaticOverride.ts
@@ -1,4 +1,4 @@
-import {ThemePreferenceWithoutSystem} from './types';
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 import useThemePreference from './useThemePreference';
 
 const useThemePreferenceWithStaticOverride = (staticThemePreference: ThemePreferenceWithoutSystem | undefined) => {
diff --git a/src/styles/useThemeStyles.ts b/src/hooks/useThemeStyles.ts
similarity index 83%
rename from src/styles/useThemeStyles.ts
rename to src/hooks/useThemeStyles.ts
index 164806a908e4..05f36ff52cc5 100644
--- a/src/styles/useThemeStyles.ts
+++ b/src/hooks/useThemeStyles.ts
@@ -1,5 +1,5 @@
 import {useContext} from 'react';
-import ThemeStylesContext from './ThemeStylesContext';
+import ThemeStylesContext from '@styles/theme/context/ThemeStylesContext';
 
 function useThemeStyles() {
     const themeStylesContext = useContext(ThemeStylesContext);
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 00191eb0a7d8..644655bf4e9f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1492,6 +1492,8 @@ export default {
                 companyCards: 'Company credit cards',
                 reimbursements: 'Easy reimbursements',
             },
+            notFound: 'No workspace found',
+            description: 'Rooms are a great place to discuss and work with multiple people. To begin collaborating, create or join a workspace',
         },
         new: {
             newWorkspace: 'New workspace',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 0f14b6e6d02a..6ecde0f44c55 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1515,6 +1515,8 @@ export default {
                 companyCards: 'Tarjetas de crédito corporativas',
                 reimbursements: 'Reembolsos fáciles',
             },
+            notFound: 'No se encontró ningún espacio de trabajo',
+            description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para comenzar a colaborar, cree o únase a un espacio de trabajo',
         },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index 5e109afe8959..c121eaaef319 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,6 +1,6 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: ThemeStyles) => void;
 
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 008015db7a90..f6572c84709d 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,6 +1,7 @@
 import React, {memo, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Onyx, {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
@@ -14,7 +15,6 @@ import DemoSetupPage from '@pages/DemoSetupPage';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
 import SearchInputManager from '@pages/workspace/SearchInputManager';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Download from '@userActions/Download';
 import * as Modal from '@userActions/Modal';
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index ebdfe849327e..256ea6d4eceb 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -1,6 +1,7 @@
 import {ParamListBase} from '@react-navigation/routers';
 import {CardStyleInterpolators, createStackNavigator, StackNavigationOptions} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {
     AddPersonalBankAccountNavigatorParamList,
     DetailsNavigatorParamList,
@@ -28,7 +29,6 @@ import type {
     TeachersUniteNavigatorParamList,
     WalletStatementNavigatorParamList,
 } from '@navigation/types';
-import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 import type {Screen} from '@src/SCREENS';
 
@@ -197,8 +197,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType,
     [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require('../../../pages/settings/Preferences/PriorityModePage').default as React.ComponentType,
     [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require('../../../pages/settings/Preferences/LanguagePage').default as React.ComponentType,
-    // Will be uncommented as part of https://github.com/Expensify/App/issues/21670
-    // [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType,
+    [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType,
     [SCREENS.SETTINGS.CLOSE]: () => require('../../../pages/settings/Security/CloseAccountPage').default as React.ComponentType,
     [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType,
     [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType,
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
index 228ea6bd3dce..f2cdd140f7d8 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx
@@ -1,9 +1,9 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
-import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator<CentralPaneNavigatorParamList>();
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx
index 09099cb493f6..065de8da578b 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {Animated, View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 type OverlayProps = {
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 10b8129bc3e7..bd790589c8d1 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -2,11 +2,11 @@ import {createStackNavigator, StackScreenProps} from '@react-navigation/stack';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
 import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
-import useThemeStyles from '@styles/useThemeStyles';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
 import Overlay from './Overlay';
diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
index 6cae31a219f9..814c61ad32a3 100644
--- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts
@@ -1,5 +1,5 @@
 import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/stack';
-import {ThemeStyles} from '@styles/styles';
+import {ThemeStyles} from '@styles/index';
 
 /**
  * RHP stack navigator screen options generator function
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index b294e6d7ab11..379c5281b78f 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -1,6 +1,6 @@
 import {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
-import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
-import {ThemeStyles} from '@styles/styles';
+import {ThemeStyles} from '@styles/index';
+import getNavigationModalCardStyle from '@styles/utils/getNavigationModalCardStyles';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
index f7e772148e79..eff88422cc5c 100644
--- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
+++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts
@@ -1,6 +1,6 @@
 import type {StackCardInterpolatedStyle, StackCardInterpolationProps} from '@react-navigation/stack';
 import {Animated} from 'react-native';
-import getCardStyles from '@styles/cardStyles';
+import getCardStyles from '@styles/utils/cardStyles';
 import variables from '@styles/variables';
 
 export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => {
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index 7c0b9ef4fc8c..48523162ba2e 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -2,9 +2,9 @@ import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} fr
 import React, {useEffect, useMemo, useRef} from 'react';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
+import useTheme from '@hooks/useTheme';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
-import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
 import Navigation, {navigationRef} from './Navigation';
diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index ac5c999d5388..b58f2af1eeac 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -15,9 +15,9 @@ function parseMessage(messages: Message[] | undefined) {
     });
 
     const formattedHtml = nextStepHTML
-        .replace(/%expenses/g, 'this expense')
-        .replace(/%Expenses/g, 'This expense')
-        .replace(/%tobe/g, 'is');
+        .replace(/%expenses/g, 'these expenses')
+        .replace(/%Expenses/g, 'These expenses')
+        .replace(/%tobe/g, 'are');
 
     return `<next-steps>${formattedHtml}</next-steps>`;
 }
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 95a8c52649d3..4da344c3608b 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -390,14 +390,14 @@ function getLastMessageTextForReport(report) {
         lastMessageTextFromReport = ReportUtils.formatReportLastMessageText(properSchemaForMoneyRequestMessage);
     } else if (ReportActionUtils.isReportPreviewAction(lastReportAction)) {
         const iouReport = ReportUtils.getReport(ReportActionUtils.getIOUReportIDFromReportActionPreview(lastReportAction));
-        const lastIOUMoneyReport = _.find(
+        const lastIOUMoneyReportAction = _.find(
             allSortedReportActions[iouReport.reportID],
             (reportAction, key) =>
                 ReportActionUtils.shouldReportActionBeVisible(reportAction, key) &&
                 reportAction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
                 ReportActionUtils.isMoneyRequestAction(reportAction),
         );
-        lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true, ReportUtils.isChatReport(report));
+        lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReportAction, true, ReportUtils.isChatReport(report));
     } else if (ReportActionUtils.isReimbursementQueuedAction(lastReportAction)) {
         lastMessageTextFromReport = ReportUtils.getReimbursementQueuedActionMessage(lastReportAction, report);
     } else if (ReportActionUtils.isReimbursementDeQueuedAction(lastReportAction)) {
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index ee7a293f6ad1..e41b3295a2c5 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,5 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 43e7ef9fbbc8..9cde613ebb5a 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -18,6 +18,10 @@ function canUseCommentLinking(betas: OnyxEntry<Beta[]>): boolean {
     return !!betas?.includes(CONST.BETAS.BETA_COMMENT_LINKING) || canUseAllBetas(betas);
 }
 
+function canUseReportFields(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas);
+}
+
 /**
  * We're requiring you to be added to the policy rooms beta on dev,
  * since contributors have been reporting a number of false issues related to the feature being under development.
@@ -45,4 +49,5 @@ export default {
     canUsePolicyRooms,
     canUseLinkPreviews,
     canUseViolations,
+    canUseReportFields,
 };
diff --git a/src/styles/PopoverWithMeasuredContentStyleUtils.ts b/src/libs/PopoverWithMeasuredContentUtils.ts
similarity index 88%
rename from src/styles/PopoverWithMeasuredContentStyleUtils.ts
rename to src/libs/PopoverWithMeasuredContentUtils.ts
index 94a0fb77d8bb..b932249211be 100644
--- a/src/styles/PopoverWithMeasuredContentStyleUtils.ts
+++ b/src/libs/PopoverWithMeasuredContentUtils.ts
@@ -1,5 +1,5 @@
-import roundToNearestMultipleOfFour from './utils/roundToNearestMultipleOfFour';
-import variables from './variables';
+import roundToNearestMultipleOfFour from '@styles/utils/roundToNearestMultipleOfFour';
+import variables from '@styles/variables';
 
 /**
  * Compute the amount that the Context menu's Anchor needs to be horizontally shifted
@@ -50,6 +50,6 @@ function computeVerticalShift(anchorTopEdge: number, menuHeight: number, windowH
     return 0;
 }
 
-const PopoverWithMeasuredContentStyleUtils = {computeHorizontalShift, computeVerticalShift};
+const PopoverWithMeasuredContentUtils = {computeHorizontalShift, computeVerticalShift};
 
-export default PopoverWithMeasuredContentStyleUtils;
+export default PopoverWithMeasuredContentUtils;
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 21c382346e57..9a3099ba6c02 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -375,7 +375,7 @@ function shouldReportActionBeVisible(reportAction: OnyxEntry<ReportAction>, key:
 
     // All other actions are displayed except thread parents, deleted, or non-pending actions
     const isDeleted = isDeletedAction(reportAction);
-    const isPending = !!reportAction.pendingAction;
+    const isPending = !!reportAction.pendingAction && !(!isNetworkOffline && reportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
     return !isDeleted || isPending || isDeletedParentAction(reportAction) || isReversedTransaction(reportAction);
 }
 
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 63037416c923..8729bb1bf957 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1211,7 +1211,8 @@ function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC<SvgProps> {
 
 function getWorkspaceAvatar(report: OnyxEntry<Report>): UserUtils.AvatarSource {
     const workspaceName = getPolicyName(report, false, allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]);
-    return allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatar ?? getDefaultWorkspaceAvatar(workspaceName);
+    const avatar = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatar ?? '';
+    return !isEmpty(avatar) ? avatar : getDefaultWorkspaceAvatar(workspaceName);
 }
 
 /**
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index f0a7f0848850..7513989d08c4 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -938,6 +938,30 @@ function getUpdateMoneyRequestParams(transactionID, transactionThreadReportID, t
         },
     });
 
+    // Update recently used categories if the category is changed
+    if (_.has(transactionChanges, 'category')) {
+        const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.SET,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedCategories,
+            });
+        }
+    }
+
+    // Update recently used categories if the tag is changed
+    if (_.has(transactionChanges, 'tag')) {
+        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedTags,
+            });
+        }
+    }
+
     // Clear out the error fields and loading states on success
     successData.push({
         onyxMethod: Onyx.METHOD.MERGE,
@@ -2040,8 +2064,6 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
         updatedChatReport.lastMessageHtml = messageText;
     }
 
-    const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
-
     const isScanning = TransactionUtils.hasReceipt(updatedTransaction) && TransactionUtils.isReceiptBeingScanned(updatedTransaction);
 
     // STEP 4: Compose the optimistic data
@@ -2101,12 +2123,28 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
             : []),
     ];
 
-    if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
-        optimisticData.push({
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
-            value: optimisticPolicyRecentlyUsedTags,
-        });
+    // Update recently used categories if the category is changed
+    if (_.has(transactionChanges, 'category')) {
+        const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, transactionChanges.category);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedCategories)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.SET,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedCategories,
+            });
+        }
+    }
+
+    // Update recently used categories if the tag is changed
+    if (_.has(transactionChanges, 'tag')) {
+        const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
+        if (!_.isEmpty(optimisticPolicyRecentlyUsedTags)) {
+            optimisticData.push({
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`,
+                value: optimisticPolicyRecentlyUsedTags,
+            });
+        }
     }
 
     const successData = [
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index bea4ab8aed77..9977693896ee 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -2054,29 +2054,22 @@ function leaveRoom(reportID: string, isWorkspaceMemberLeavingWorkspaceRoom = fal
     // If a workspace member is leaving a workspace room, they don't actually lose the room from Onyx.
     // Instead, their notification preference just gets set to "hidden".
     const optimisticData: OnyxUpdate[] = [
-        isWorkspaceMemberLeavingWorkspaceRoom
-            ? {
-                  onyxMethod: Onyx.METHOD.MERGE,
-                  key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-                  value: {
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: isWorkspaceMemberLeavingWorkspaceRoom
+                ? {
                       notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
-                  },
-              }
-            : {
-                  onyxMethod: Onyx.METHOD.SET,
-                  key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-                  value: {
-                      reportID,
+                  }
+                : {
+                      reportID: null,
                       stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
                       statusNum: CONST.REPORT.STATUS.CLOSED,
-                      chatType: report.chatType,
-                      parentReportID: report.parentReportID,
-                      parentReportActionID: report.parentReportActionID,
-                      policyID: report.policyID,
-                      type: report.type,
+                      notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
                   },
-              },
+        },
     ];
+
     const successData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index 82b51651cacc..82d371e16bed 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -4,14 +4,20 @@ import {ChannelAuthorizationCallback} from 'pusher-js/with-encryption';
 import {Linking} from 'react-native';
 import Onyx, {OnyxUpdate} from 'react-native-onyx';
 import {ValueOf} from 'type-fest';
+import * as PersistedRequests from '@libs/actions/PersistedRequests';
 import * as API from '@libs/API';
 import * as Authentication from '@libs/Authentication';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import HttpUtils from '@libs/HttpUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
+import navigationRef from '@libs/Navigation/navigationRef';
+import * as MainQueue from '@libs/Network/MainQueue';
 import * as NetworkStore from '@libs/Network/NetworkStore';
+import NetworkConnection from '@libs/NetworkConnection';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportUtils from '@libs/ReportUtils';
+import * as SessionUtils from '@libs/SessionUtils';
 import Timers from '@libs/Timers';
 import {hideContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as Device from '@userActions/Device';
@@ -23,6 +29,7 @@ import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import SCREENS from '@src/SCREENS';
 import Credentials from '@src/types/onyx/Credentials';
 import {AutoAuthState} from '@src/types/onyx/Session';
 import clearCache from './clearCache';
@@ -583,14 +590,40 @@ function clearSignInData() {
     });
 }
 
+/**
+ * Reset all current params of the Home route
+ */
+function resetHomeRouteParams() {
+    Navigation.isNavigationReady().then(() => {
+        const routes = navigationRef.current?.getState().routes;
+        const homeRoute = routes?.find((route) => route.name === SCREENS.HOME);
+
+        const emptyParams: Record<string, undefined> = {};
+        Object.keys(homeRoute?.params ?? {}).forEach((paramKey) => {
+            emptyParams[paramKey] = undefined;
+        });
+
+        Navigation.setParams(emptyParams, homeRoute?.key ?? '');
+        Onyx.set(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, false);
+    });
+}
+
 /**
  * Put any logic that needs to run when we are signed out here. This can be triggered when the current tab or another tab signs out.
+ * - Cancels pending network calls - any lingering requests are discarded to prevent unwanted storage writes
+ * - Clears all current params of the Home route - the login page URL should not contain any parameter
  */
 function cleanupSession() {
     Pusher.disconnect();
     Timers.clearAll();
     Welcome.resetReadyCheck();
     PriorityMode.resetHasReadRequiredDataFromStorage();
+    MainQueue.clear();
+    HttpUtils.cancelPendingRequests();
+    PersistedRequests.clear();
+    NetworkConnection.clearReconnectionCallbacks();
+    SessionUtils.resetDidUserLogInDuringSession();
+    resetHomeRouteParams();
 }
 
 function clearAccountMessages() {
diff --git a/src/libs/actions/SignInRedirect.ts b/src/libs/actions/SignInRedirect.ts
index 9ca4e6813567..6c9e7f55d887 100644
--- a/src/libs/actions/SignInRedirect.ts
+++ b/src/libs/actions/SignInRedirect.ts
@@ -1,14 +1,6 @@
 import Onyx from 'react-native-onyx';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import HttpUtils from '@libs/HttpUtils';
-import Navigation from '@libs/Navigation/Navigation';
-import navigationRef from '@libs/Navigation/navigationRef';
-import * as MainQueue from '@libs/Network/MainQueue';
-import NetworkConnection from '@libs/NetworkConnection';
-import * as SessionUtils from '@libs/SessionUtils';
 import ONYXKEYS, {OnyxKey} from '@src/ONYXKEYS';
-import SCREENS from '@src/SCREENS';
-import * as PersistedRequests from './PersistedRequests';
 
 let currentIsOffline: boolean | undefined;
 let currentShouldForceOffline: boolean | undefined;
@@ -45,42 +37,16 @@ function clearStorageAndRedirect(errorMessage?: string) {
     });
 }
 
-/**
- * Reset all current params of the Home route
- */
-function resetHomeRouteParams() {
-    Navigation.isNavigationReady().then(() => {
-        const routes = navigationRef.current?.getState().routes;
-        const homeRoute = routes?.find((route) => route.name === SCREENS.HOME);
-
-        const emptyParams: Record<string, undefined> = {};
-        Object.keys(homeRoute?.params ?? {}).forEach((paramKey) => {
-            emptyParams[paramKey] = undefined;
-        });
-
-        Navigation.setParams(emptyParams, homeRoute?.key ?? '');
-        Onyx.set(ONYXKEYS.IS_CHECKING_PUBLIC_ROOM, false);
-    });
-}
-
 /**
  * Cleanup actions resulting in the user being redirected to the Sign-in page
  * - Clears the Onyx store - removing the authToken redirects the user to the Sign-in page
- * - Cancels pending network calls - any lingering requests are discarded to prevent unwanted storage writes
- * - Clears all current params of the Home route - the login page URL should not contain any parameter
  *
  * Normally this method would live in Session.js, but that would cause a circular dependency with Network.js.
  *
  * @param [errorMessage] error message to be displayed on the sign in page
  */
 function redirectToSignIn(errorMessage?: string) {
-    MainQueue.clear();
-    HttpUtils.cancelPendingRequests();
-    PersistedRequests.clear();
-    NetworkConnection.clearReconnectionCallbacks();
     clearStorageAndRedirect(errorMessage);
-    resetHomeRouteParams();
-    SessionUtils.resetDidUserLogInDuringSession();
 }
 
 export default redirectToSignIn;
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index 8e24a2a92310..b1e46ec40861 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -17,7 +17,6 @@ import * as OnyxUpdates from './OnyxUpdates';
 import * as PersonalDetails from './PersonalDetails';
 import * as Report from './Report';
 import * as Session from './Session';
-import redirectToSignIn from './SignInRedirect';
 
 let currentUserAccountID = '';
 let currentEmail = '';
@@ -69,8 +68,6 @@ function closeAccount(message) {
             ],
         },
     );
-    // Run cleanup actions to prevent reconnection callbacks from blocking logging in again
-    redirectToSignIn();
 }
 
 /**
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index a4d75a7c73a0..09b73ea158f9 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -9,9 +9,9 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index 9145459e42d1..b0362a69b4d6 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -20,10 +20,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/EditRequestCategoryPage.js b/src/pages/EditRequestCategoryPage.js
index 290c05f0c494..205b4bf66dfa 100644
--- a/src/pages/EditRequestCategoryPage.js
+++ b/src/pages/EditRequestCategoryPage.js
@@ -5,8 +5,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Transaction default category value */
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index c2b05d9e6dfa..fbe1b3c782a7 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -5,7 +5,7 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const propTypes = {
diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
index 3a895d2b09f5..9b2a9e465746 100644
--- a/src/pages/EditRequestDescriptionPage.js
+++ b/src/pages/EditRequestDescriptionPage.js
@@ -8,9 +8,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
index af6ff89296f1..5fa14d850f45 100644
--- a/src/pages/EditRequestMerchantPage.js
+++ b/src/pages/EditRequestMerchantPage.js
@@ -8,7 +8,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/EditRequestReceiptPage.js b/src/pages/EditRequestReceiptPage.js
index 03c0aa777d5e..1525ec162963 100644
--- a/src/pages/EditRequestReceiptPage.js
+++ b/src/pages/EditRequestReceiptPage.js
@@ -5,8 +5,8 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ReceiptSelector from './iou/ReceiptSelector';
 
 const propTypes = {
diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js
index 74cf69944f2c..8ecc4a953065 100644
--- a/src/pages/EditRequestTagPage.js
+++ b/src/pages/EditRequestTagPage.js
@@ -5,8 +5,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TagPicker from '@components/TagPicker';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Transaction default tag value */
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index 9ed85447a3b3..f6ba2bb509fb 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -15,10 +15,10 @@ import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import AddressForm from '@pages/ReimbursementAccount/AddressForm';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
diff --git a/src/pages/EnablePayments/FailedKYC.js b/src/pages/EnablePayments/FailedKYC.js
index de170bec4070..fc54ea9c1074 100644
--- a/src/pages/EnablePayments/FailedKYC.js
+++ b/src/pages/EnablePayments/FailedKYC.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js
index 9e4f9d697fca..8f21d68abe4f 100644
--- a/src/pages/EnablePayments/IdologyQuestions.js
+++ b/src/pages/EnablePayments/IdologyQuestions.js
@@ -9,7 +9,7 @@ import SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/EnablePayments/OnfidoPrivacy.js b/src/pages/EnablePayments/OnfidoPrivacy.js
index c542df0196cf..77b884fb2934 100644
--- a/src/pages/EnablePayments/OnfidoPrivacy.js
+++ b/src/pages/EnablePayments/OnfidoPrivacy.js
@@ -10,9 +10,9 @@ import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 import walletOnfidoDataPropTypes from './walletOnfidoDataPropTypes';
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 2ed7854ee6ba..d95f80e99673 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -6,8 +6,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const termsData = [
diff --git a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
index 898aec9b2c16..77f77f3cb34b 100644
--- a/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/ShortTermsForm.js
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Localize from '@libs/Localize';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index 368f92f0db27..8297ca54c2b4 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -7,9 +7,9 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 import LongTermsForm from './TermsPage/LongTermsForm';
diff --git a/src/pages/ErrorPage/ErrorBodyText/index.js b/src/pages/ErrorPage/ErrorBodyText/index.js
index d3436a2fc0a8..47b765f8f5e8 100644
--- a/src/pages/ErrorPage/ErrorBodyText/index.js
+++ b/src/pages/ErrorPage/ErrorBodyText/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index 01c4990cbc62..85d49a8b9074 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -9,9 +9,9 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 3695896ea473..6c6421593837 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -10,11 +10,11 @@ import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index 08c9a6bf6815..a880637ca100 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -10,9 +10,9 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js
index c44c6213d3a5..809d2ce6dc07 100644
--- a/src/pages/KeyboardShortcutsPage.js
+++ b/src/pages/KeyboardShortcutsPage.js
@@ -6,8 +6,8 @@ import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 function KeyboardShortcutsPage() {
diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index 16d0c3909d62..1fe9b67eef16 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -10,9 +10,9 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 2bbd0556aad8..6f45c0b33f5a 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -11,13 +11,13 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index 88bf2ac569c2..c62fbe3edcb5 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -23,7 +24,6 @@ import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index e9a4f11a7202..a34eb0ce596d 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -13,12 +13,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/PrivateNotes/PrivateNotesViewPage.js b/src/pages/PrivateNotes/PrivateNotesViewPage.js
index 76057d3d74bc..1406dfd76748 100644
--- a/src/pages/PrivateNotes/PrivateNotesViewPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesViewPage.js
@@ -10,12 +10,12 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 3e5e8863bf22..3772b8127ef7 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -23,12 +23,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import * as Report from '@userActions/Report';
diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
index 73e1ac393615..e05b6c5b0553 100644
--- a/src/pages/ReferralDetailsPage.js
+++ b/src/pages/ReferralDetailsPage.js
@@ -11,9 +11,9 @@ import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 4161932b35b6..d10d440a0af5 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -12,8 +12,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/AddressForm.js b/src/pages/ReimbursementAccount/AddressForm.js
index e18a5ae04ab7..d1d43f6a4108 100644
--- a/src/pages/ReimbursementAccount/AddressForm.js
+++ b/src/pages/ReimbursementAccount/AddressForm.js
@@ -5,7 +5,7 @@ import AddressSearch from '@components/AddressSearch';
 import InputWrapper from '@components/Form/InputWrapper';
 import StatePicker from '@components/StatePicker';
 import TextInput from '@components/TextInput';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 7103d650b2fb..8e79a492bfe3 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -11,9 +11,9 @@ import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 298862570271..c235a31f626f 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index e60830054376..408c0e46a47d 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -15,10 +15,10 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 51fd467c28ff..957965f9ed7d 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -18,9 +18,9 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import withLocalize from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 45c503494c3d..d1ac0989ae38 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -13,8 +13,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index d91c8df7bed0..90752a57c50b 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -6,8 +6,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index e7bdcf4082d2..d8d76d6cfb2f 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -15,10 +15,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import userPropTypes from '@pages/settings/userPropTypes';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as BankAccounts from '@userActions/ReimbursementAccount';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReimbursementAccount/ExampleCheck.js b/src/pages/ReimbursementAccount/ExampleCheck.js
index aa32caf8144d..47bb59af1050 100644
--- a/src/pages/ReimbursementAccount/ExampleCheck.js
+++ b/src/pages/ReimbursementAccount/ExampleCheck.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import {Image} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
-import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 function ExampleCheckImage() {
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index bab1a0bca81e..c1ee79f56a14 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import DatePicker from '@components/DatePicker';
 import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressForm from './AddressForm';
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index de1c02cd1dbd..81d4af93d86c 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -13,6 +13,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import BankAccount from '@libs/models/BankAccount';
@@ -20,7 +21,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import shouldReopenOnfido from '@libs/shouldReopenOnfido';
 import withPolicy from '@pages/workspace/withPolicy';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -159,7 +159,7 @@ function getRouteForCurrentStep(currentStep) {
 }
 
 function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, policy, account, isLoadingApp, session, plaidLinkToken, plaidCurrentEvent, reimbursementAccountDraft}) {
-    /**  
+    /**
         The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
         user left off. This view will refer to the achData as the single source of truth to determine which route to
         display. We can also specify a specific route to navigate to via route params when the component first
@@ -235,7 +235,7 @@ function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, pol
         return achData.state === BankAccount.STATE.PENDING || _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''], getStepToOpenFromRouteParams(route));
     }
 
-    /** 
+    /**
         When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx
         or could be partially loaded such that `reimbursementAccount.achData.currentStep` is unavailable.
         Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index dc6cff300b09..b149e28d7f11 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -8,8 +8,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Onfido from '@components/Onfido';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Growl from '@libs/Growl';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 31f5f0f4d315..e5e0c36aeaa2 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -10,8 +10,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 00b6e6928c7c..f1dfc944a24c 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -18,11 +18,11 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import BankAccount from '@libs/models/BankAccount';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import WorkspaceResetBankAccountModal from '@pages/workspace/WorkspaceResetBankAccountModal';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index fcc497111b92..dc8b77db4ac8 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -16,12 +16,12 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import RoomHeaderAvatars from '@components/RoomHeaderAvatars';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index ceaa53a41a6b..4ec31b29f914 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -9,13 +9,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import OptionsList from '@components/OptionsList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
index a17e1efe6a0c..ae8a4635a98e 100644
--- a/src/pages/ReportWelcomeMessagePage.js
+++ b/src/pages/ReportWelcomeMessagePage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js
index 9b5b4f461652..cb72b2f8b08a 100644
--- a/src/pages/RoomInvitePage.js
+++ b/src/pages/RoomInvitePage.js
@@ -10,6 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js
index a48ab08408f2..d8e7dbdaf76e 100644
--- a/src/pages/RoomMembersPage.js
+++ b/src/pages/RoomMembersPage.js
@@ -13,6 +13,7 @@ import SelectionList from '@components/SelectionList';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
@@ -21,7 +22,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
index 2dad59fc01b7..e9564bfffe0b 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.js
@@ -6,8 +6,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
index f44356347273..3e2a2a2775a3 100644
--- a/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
+++ b/src/pages/TeachersUnite/IntroSchoolPrincipalPage.js
@@ -12,10 +12,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import TeachersUnite from '@userActions/TeachersUnite';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/TeachersUnite/KnowATeacherPage.js b/src/pages/TeachersUnite/KnowATeacherPage.js
index f2a5732b6a0a..61e03017b7ea 100644
--- a/src/pages/TeachersUnite/KnowATeacherPage.js
+++ b/src/pages/TeachersUnite/KnowATeacherPage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import TeachersUnite from '@userActions/TeachersUnite';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index d179b7d1db95..36e03f0b4716 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -8,9 +8,9 @@ import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index f5f50244d274..0647310940bd 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -20,6 +20,8 @@ import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import * as HeaderUtils from '@libs/HeaderUtils';
@@ -28,8 +30,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 50d6531096fc..c910f170cc2b 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -16,7 +16,9 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -26,7 +28,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportMetadataPropTypes from '@pages/reportMetadataPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as ComposerActions from '@userActions/Composer';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -152,6 +153,7 @@ function ReportScreen({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const {isOffline} = useNetwork();
 
     const firstRenderRef = useRef(true);
     const flatListRef = useRef();
@@ -166,8 +168,11 @@ function ReportScreen({
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- need to re-filter the report actions when network status changes
+    const filteredReportActions = useMemo(() => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true), [isOffline, reportActions]);
+
     // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
-    const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions;
+    const isLoadingInitialReportActions = _.isEmpty(filteredReportActions) && reportMetadata.isLoadingInitialReportActions;
 
     const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.CLOSED;
 
@@ -422,7 +427,7 @@ function ReportScreen({
                             >
                                 {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && (
                                     <ReportActionsView
-                                        reportActions={reportActions}
+                                        reportActions={filteredReportActions}
                                         report={report}
                                         isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
                                         isLoadingNewerReportActions={reportMetadata.isLoadingNewerReportActions}
@@ -440,7 +445,7 @@ function ReportScreen({
                                 {isReportReadyForDisplay ? (
                                     <ReportFooter
                                         pendingAction={addWorkspaceRoomOrChatPendingAction}
-                                        reportActions={reportActions}
+                                        reportActions={filteredReportActions}
                                         report={report}
                                         isComposerFullSize={isComposerFullSize}
                                         onSubmitComment={onSubmitComment}
@@ -475,7 +480,6 @@ export default compose(
             reportActions: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`,
                 canEvict: false,
-                selector: (reportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true),
             },
             report: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`,
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 0ff401a9d3f4..7e259b7473cf 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as NumberUtils from '@libs/NumberUtils';
-import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
-import useStyleUtils from '@styles/useStyleUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
index 33adfa4b35f9..0a9941072df7 100755
--- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -11,8 +11,8 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
 import compose from '@libs/compose';
-import useStyleUtils from '@styles/useStyleUtils';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
index f5a688e9d8ed..d858206cdfc3 100644
--- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
+++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
 import BaseReportActionContextMenu from '@pages/home/report/ContextMenu/BaseReportActionContextMenu';
 import {
     defaultProps as GenericReportActionContextMenuDefaultProps,
     propTypes as genericReportActionContextMenuPropTypes,
 } from '@pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
index 873e7fa243af..700a2fb399e4 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.android.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated, View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
 
 function FloatingMessageCounterContainer(props) {
diff --git a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
index 0b721067631c..19123e65cbf2 100644
--- a/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/FloatingMessageCounterContainer/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import floatingMessageCounterContainerPropTypes from './floatingMessageCounterContainerPropTypes';
 
 function FloatingMessageCounterContainer(props) {
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index fe0a343e973b..07138104bf74 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -6,9 +6,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useNativeDriver from '@libs/useNativeDriver';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
diff --git a/src/pages/home/report/LinkPreviewer.js b/src/pages/home/report/LinkPreviewer.js
index 5c16d5596774..f62295a6fb71 100644
--- a/src/pages/home/report/LinkPreviewer.js
+++ b/src/pages/home/report/LinkPreviewer.js
@@ -5,9 +5,9 @@ import {Image, View} from 'react-native';
 import _ from 'underscore';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const IMAGE_TYPES = ['jpg', 'jpeg', 'png'];
diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
index 7184944d5902..77bcc7bdd38e 100644
--- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
+++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
@@ -3,8 +3,8 @@ import React from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import useNetwork from '@hooks/useNetwork';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index 5efd53fe6ae7..1992953c959e 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/src/pages/home/report/ParticipantLocalTime.js
@@ -4,9 +4,9 @@ import {View} from 'react-native';
 import participantPropTypes from '@components/participantPropTypes';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import Timers from '@libs/Timers';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReactionList/BaseReactionList.js b/src/pages/home/report/ReactionList/BaseReactionList.js
index f94f6cdfde0d..2d881d080c31 100755
--- a/src/pages/home/report/ReactionList/BaseReactionList.js
+++ b/src/pages/home/report/ReactionList/BaseReactionList.js
@@ -6,9 +6,9 @@ import {FlatList} from 'react-native';
 import OptionRow from '@components/OptionRow';
 import participantPropTypes from '@components/participantPropTypes';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as UserUtils from '@libs/UserUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index 1b1751e32eef..04b124f969a9 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -4,10 +4,10 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
index 31a5a0857577..1aeae46c252f 100644
--- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
+++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
@@ -9,11 +9,11 @@ import PopoverMenu from '@components/PopoverMenu';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Report from '@userActions/Report';
 import * as Task from '@userActions/Task';
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index f5a321f72799..8def3a53ca0d 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -9,7 +9,11 @@ import withKeyboardState from '@components/withKeyboardState';
 import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -26,9 +30,6 @@ import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import willBlurTextInputOnTapOutsideFunc from '@libs/willBlurTextInputOnTapOutside';
 import SilentCommentUpdater from '@pages/home/report/ReportActionCompose/SilentCommentUpdater';
 import Suggestions from '@pages/home/report/ReportActionCompose/Suggestions';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
 import * as Report from '@userActions/Report';
@@ -76,6 +77,7 @@ function ComposerWithSuggestions({
     // Focus
     onFocus,
     onBlur,
+    onValueChange,
     // Composer
     isComposerFullSize,
     isMenuVisible,
@@ -515,6 +517,10 @@ function ComposerWithSuggestions({
         [blur, focus, prepareCommentAndResetComposer, replaceSelectionWithText],
     );
 
+    useEffect(() => {
+        onValueChange(value);
+    }, [onValueChange, value]);
+
     return (
         <>
             <View style={[StyleUtils.getContainerComposeStyles(), styles.textInputComposeBorder]}>
@@ -556,6 +562,7 @@ function ComposerWithSuggestions({
                         setComposerHeight(composerLayoutHeight);
                     }}
                     onScroll={hideSuggestionMenu}
+                    shouldContainScroll={Browser.isMobileSafari()}
                 />
             </View>
 
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index 2632324a963f..396e94d9cf9d 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -13,7 +13,9 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
@@ -28,7 +30,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import ReportDropUI from '@pages/home/report/ReportDropUI';
 import ReportTypingIndicator from '@pages/home/report/ReportTypingIndicator';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerActions from '@userActions/EmojiPickerAction';
 import * as Report from '@userActions/Report';
 import * as User from '@userActions/User';
@@ -144,7 +145,7 @@ function ReportActionCompose({
      * Updates the composer when the comment length is exceeded
      * Shows red borders and prevents the comment from being sent
      */
-    const [hasExceededMaxCommentLength, setExceededMaxCommentLength] = useState(false);
+    const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength();
 
     const suggestionsRef = useRef(null);
     const composerRef = useRef(null);
@@ -408,6 +409,7 @@ function ReportActionCompose({
                                         onBlur={onBlur}
                                         measureParentContainer={measureContainer}
                                         listHeight={listHeight}
+                                        onValueChange={validateCommentMaxLength}
                                     />
                                     <ReportDropUI
                                         onDrop={(e) => {
@@ -444,10 +446,7 @@ function ReportActionCompose({
                     >
                         {!isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />}
                         <ReportTypingIndicator reportID={reportID} />
-                        <ExceededCommentLength
-                            reportID={reportID}
-                            onExceededMaxCommentLength={setExceededMaxCommentLength}
-                        />
+                        <ExceededCommentLength shouldShowError={hasExceededMaxCommentLength} />
                     </View>
                 </OfflineWithFeedback>
             </View>
diff --git a/src/pages/home/report/ReportActionCompose/SendButton.js b/src/pages/home/report/ReportActionCompose/SendButton.js
index fde40998fa8c..d0b0453ace2f 100644
--- a/src/pages/home/report/ReportActionCompose/SendButton.js
+++ b/src/pages/home/report/ReportActionCompose/SendButton.js
@@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 3e4eebffe48f..2e888a5471b8 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -32,6 +32,9 @@ import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
@@ -46,9 +49,6 @@ import SelectionScraper from '@libs/SelectionScraper';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as store from '@userActions/ReimbursementAccount/store';
diff --git a/src/pages/home/report/ReportActionItemBasicMessage.tsx b/src/pages/home/report/ReportActionItemBasicMessage.tsx
index bf53ee16450d..63e6d2424a7c 100644
--- a/src/pages/home/report/ReportActionItemBasicMessage.tsx
+++ b/src/pages/home/report/ReportActionItemBasicMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type ReportActionItemBasicMessageProps = ChildrenProps & {
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index 633701f0b375..e5ec3e4b8744 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -10,12 +10,12 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import ReportWelcomeText from '@components/ReportWelcomeText';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/home/report/ReportActionItemDate.js b/src/pages/home/report/ReportActionItemDate.js
index a65bdd4aa7d7..58471a88061f 100644
--- a/src/pages/home/report/ReportActionItemDate.js
+++ b/src/pages/home/report/ReportActionItemDate.js
@@ -3,8 +3,8 @@ import React, {memo} from 'react';
 import {withCurrentDate} from '@components/OnyxProvider';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** UTC timestamp for when the action was created */
diff --git a/src/pages/home/report/ReportActionItemDraft.tsx b/src/pages/home/report/ReportActionItemDraft.tsx
index b46af5401ee4..de4458d7b39f 100644
--- a/src/pages/home/report/ReportActionItemDraft.tsx
+++ b/src/pages/home/report/ReportActionItemDraft.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
 function ReportActionItemDraft({children}: ChildrenProps) {
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index c5097bdfc4a5..f05b3decc6d7 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -7,10 +7,10 @@ import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AttachmentCommentFragment from './comment/AttachmentCommentFragment';
 import TextCommentFragment from './comment/TextCommentFragment';
diff --git a/src/pages/home/report/ReportActionItemGrouped.tsx b/src/pages/home/report/ReportActionItemGrouped.tsx
index 5e49f7af9d10..2dff5b81c6a7 100644
--- a/src/pages/home/report/ReportActionItemGrouped.tsx
+++ b/src/pages/home/report/ReportActionItemGrouped.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type ReportActionItemGroupedProps = ChildrenProps & {
diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
index 46e0438f250a..b47d941f40b5 100644
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ b/src/pages/home/report/ReportActionItemMessage.js
@@ -4,9 +4,9 @@ import React from 'react';
 import {Text, View} from 'react-native';
 import _ from 'underscore';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import TextCommentFragment from './comment/TextCommentFragment';
 import ReportActionItemFragment from './ReportActionItemFragment';
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index fc03c67d70a0..3da0fad72f0a 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -13,9 +13,13 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import refPropTypes from '@components/refPropTypes';
 import Tooltip from '@components/Tooltip';
+import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useReportScrollManager from '@hooks/useReportScrollManager';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -27,9 +31,6 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as InputFocus from '@userActions/InputFocus';
 import * as Report from '@userActions/Report';
@@ -116,7 +117,7 @@ function ReportActionItemMessageEdit(props) {
     });
     const [selection, setSelection] = useState(getInitialSelection);
     const [isFocused, setIsFocused] = useState(false);
-    const [hasExceededMaxCommentLength, setHasExceededMaxCommentLength] = useState(false);
+    const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength();
     const [modal, setModal] = useState(false);
     const [onyxFocused, setOnyxFocused] = useState(false);
 
@@ -369,6 +370,10 @@ function ReportActionItemMessageEdit(props) {
      */
     const focus = focusComposerWithDelay(textInputRef.current);
 
+    useEffect(() => {
+        validateCommentMaxLength(draft);
+    }, [draft, validateCommentMaxLength]);
+
     return (
         <>
             <View style={[styles.chatItemMessage, styles.flexRow]}>
@@ -470,11 +475,7 @@ function ReportActionItemMessageEdit(props) {
                     </View>
                 </View>
             </View>
-            <ExceededCommentLength
-                comment={draft}
-                reportID={props.reportID}
-                onExceededMaxCommentLength={(hasExceeded) => setHasExceededMaxCommentLength(hasExceeded)}
-            />
+            <ExceededCommentLength shouldShowError={hasExceededMaxCommentLength} />
         </>
     );
 }
diff --git a/src/pages/home/report/ReportActionItemParentAction.js b/src/pages/home/report/ReportActionItemParentAction.js
index 4a125d1d5633..c11200ccc4db 100644
--- a/src/pages/home/report/ReportActionItemParentAction.js
+++ b/src/pages/home/report/ReportActionItemParentAction.js
@@ -6,11 +6,11 @@ import {withOnyx} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import withLocalize from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 2c4df44d8b57..81827073aa49 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -13,6 +13,9 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ControlSelection from '@libs/ControlSelection';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,9 +23,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
diff --git a/src/pages/home/report/ReportActionItemThread.js b/src/pages/home/report/ReportActionItemThread.js
index a3da95147020..35ef49dc97fd 100644
--- a/src/pages/home/report/ReportActionItemThread.js
+++ b/src/pages/home/report/ReportActionItemThread.js
@@ -6,8 +6,8 @@ import MultipleAvatars from '@components/MultipleAvatars';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 55995a8059e7..46abbfc71b84 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -12,12 +12,12 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useReportScrollManager from '@hooks/useReportScrollManager';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/ReportDropUI.js b/src/pages/home/report/ReportDropUI.js
index 2f4c81313ec2..c1c3b8e506ab 100644
--- a/src/pages/home/report/ReportDropUI.js
+++ b/src/pages/home/report/ReportDropUI.js
@@ -6,7 +6,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** Callback to execute when a file is dropped. */
diff --git a/src/pages/home/report/ReportFooter.js b/src/pages/home/report/ReportFooter.js
index e5dd5da19ad5..48bfd5d18bcc 100644
--- a/src/pages/home/report/ReportFooter.js
+++ b/src/pages/home/report/ReportFooter.js
@@ -9,10 +9,10 @@ import participantPropTypes from '@components/participantPropTypes';
 import SwipeableView from '@components/SwipeableView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
index 3a2c611ac358..74778b364db1 100755
--- a/src/pages/home/report/ReportTypingIndicator.js
+++ b/src/pages/home/report/ReportTypingIndicator.js
@@ -7,8 +7,8 @@ import {withNetwork} from '@components/OnyxProvider';
 import Text from '@components/Text';
 import TextWithEllipsis from '@components/TextWithEllipsis';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.js b/src/pages/home/report/comment/AttachmentCommentFragment.js
index ec75edd18a35..30c131b57060 100644
--- a/src/pages/home/report/comment/AttachmentCommentFragment.js
+++ b/src/pages/home/report/comment/AttachmentCommentFragment.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import useThemeStyles from '@hooks/useThemeStyles';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
-import useThemeStyles from '@styles/useThemeStyles';
 import RenderCommentHTML from './RenderCommentHTML';
 
 const propTypes = {
diff --git a/src/pages/home/report/comment/TextCommentFragment.js b/src/pages/home/report/comment/TextCommentFragment.js
index 403c470dfc9d..3d6482344450 100644
--- a/src/pages/home/report/comment/TextCommentFragment.js
+++ b/src/pages/home/report/comment/TextCommentFragment.js
@@ -5,15 +5,14 @@ import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import ZeroWidthView from '@components/ZeroWidthView';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import reportActionFragmentPropTypes from '@pages/home/report/reportActionFragmentPropTypes';
 import reportActionSourcePropType from '@pages/home/report/reportActionSourcePropType';
-import editedLabelStyles from '@styles/editedLabelStyles';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import RenderCommentHTML from './RenderCommentHTML';
@@ -103,7 +102,7 @@ function TextCommentFragment(props) {
                     <Text
                         fontSize={variables.fontSizeSmall}
                         color={theme.textSupporting}
-                        style={[editedLabelStyles, styleAsDeleted ? styles.offlineFeedback.deleted : undefined, ...props.style]}
+                        style={[styles.editedLabelStyles, styleAsDeleted ? styles.offlineFeedback.deleted : undefined, ...props.style]}
                     >
                         {props.translate('reportActionCompose.edited')}
                     </Text>
diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.js b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
index 487514ce199f..0bad9e845e9c 100644
--- a/src/pages/home/sidebar/AvatarWithOptionalStatus.js
+++ b/src/pages/home/sidebar/AvatarWithOptionalStatus.js
@@ -6,8 +6,8 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import PressableAvatarWithIndicator from './PressableAvatarWithIndicator';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 6f860010e9d7..eb4f9000d2b4 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -12,6 +12,9 @@ import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
@@ -19,9 +22,6 @@ import onyxSubscribe from '@libs/onyxSubscribe';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.js
index 97f119bbd2e8..dbc77a41817b 100644
--- a/src/pages/home/sidebar/SidebarLinksData.js
+++ b/src/pages/home/sidebar/SidebarLinksData.js
@@ -10,10 +10,10 @@ import {withNetwork} from '@components/OnyxProvider';
 import withCurrentReportID from '@components/withCurrentReportID';
 import withNavigationFocus from '@components/withNavigationFocus';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import SidebarUtils from '@libs/SidebarUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import SidebarLinks, {basePropTypes} from './SidebarLinks';
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
index 5b7a126a4655..a6853316b582 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
@@ -1,10 +1,10 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import Performance from '@libs/Performance';
 import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData';
-import useThemeStyles from '@styles/useThemeStyles';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import sidebarPropTypes from './sidebarPropTypes';
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 1da45bc71777..65b79ed5af78 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -11,10 +11,10 @@ import withNavigation from '@components/withNavigation';
 import withNavigationFocus from '@components/withNavigationFocus';
 import withWindowDimensions from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.js
index f820298b0a22..9edcc9584dbd 100644
--- a/src/pages/home/sidebar/SignInButton.js
+++ b/src/pages/home/sidebar/SignInButton.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import Button from '@components/Button';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js
index 7f3bf7985ba6..ceb2152d2b49 100644
--- a/src/pages/iou/MoneyRequestCategoryPage.js
+++ b/src/pages/iou/MoneyRequestCategoryPage.js
@@ -7,10 +7,10 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 8121bb381f32..b7d1c4002da1 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -8,9 +8,9 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 2d3e7d887e60..fe3100b8c3bd 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -11,12 +11,12 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as IOU from '@libs/actions/IOU';
 import * as Browser from '@libs/Browser';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index be57f0b6c534..bf799cd0957b 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -11,8 +11,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index ee4ee88d7008..e367709cb010 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -11,6 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
@@ -19,7 +20,6 @@ import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index d16a7aa6679c..60e40d665580 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -9,11 +9,11 @@ import TagPicker from '@components/TagPicker';
 import tagPropTypes from '@components/tagPropTypes';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/ReceiptDropUI.js b/src/pages/iou/ReceiptDropUI.js
index 18ad31e036e4..67330860a052 100644
--- a/src/pages/iou/ReceiptDropUI.js
+++ b/src/pages/iou/ReceiptDropUI.js
@@ -4,7 +4,7 @@ import {Text, View} from 'react-native';
 import ReceiptUpload from '@assets/images/receipt-upload.svg';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/iou/ReceiptSelector/index.js b/src/pages/iou/ReceiptSelector/index.js
index e9e734ddf2f8..adbfc0618de7 100644
--- a/src/pages/iou/ReceiptSelector/index.js
+++ b/src/pages/iou/ReceiptSelector/index.js
@@ -15,6 +15,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -22,8 +24,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 0073725a2c50..109e7ebdaa71 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -13,13 +13,13 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index dd9e7ce93cc6..94c2f1c31242 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -11,6 +11,7 @@ import MoneyRequestHeaderStatusBar from '@components/MoneyRequestHeaderStatusBar
 import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -19,7 +20,6 @@ import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import withReportAndReportActionOrNotFound from '@pages/home/report/withReportAndReportActionOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 3c0d8802c5d0..e8d3c8520ca8 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -15,11 +15,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Transaction from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/IOURequestStartPage.js b/src/pages/iou/request/IOURequestStartPage.js
index c24e4f4e9e5f..6572e154ee14 100644
--- a/src/pages/iou/request/IOURequestStartPage.js
+++ b/src/pages/iou/request/IOURequestStartPage.js
@@ -13,6 +13,7 @@ import TabSelector from '@components/TabSelector/TabSelector';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,7 +21,6 @@ import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index daa874488980..8d7d5cfceb77 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -10,6 +10,7 @@ import OptionsSelector from '@components/OptionsSelector';
 import refPropTypes from '@components/refPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/iou/request/step/IOURequestStepCategory.js b/src/pages/iou/request/step/IOURequestStepCategory.js
index 7614683f1e1e..2218262e1877 100644
--- a/src/pages/iou/request/step/IOURequestStepCategory.js
+++ b/src/pages/iou/request/step/IOURequestStepCategory.js
@@ -3,10 +3,10 @@ import CategoryPicker from '@components/CategoryPicker';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ROUTES from '@src/ROUTES';
 import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.js b/src/pages/iou/request/step/IOURequestStepConfirmation.js
index cb90103c6ffc..1f458ef37f01 100644
--- a/src/pages/iou/request/step/IOURequestStepConfirmation.js
+++ b/src/pages/iou/request/step/IOURequestStepConfirmation.js
@@ -11,6 +11,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
@@ -22,7 +23,6 @@ import * as TransactionUtils from '@libs/TransactionUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import {policyPropTypes} from '@pages/workspace/withPolicy';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/iou/request/step/IOURequestStepDate.js b/src/pages/iou/request/step/IOURequestStepDate.js
index 58c67b26052a..c90779af47ee 100644
--- a/src/pages/iou/request/step/IOURequestStepDate.js
+++ b/src/pages/iou/request/step/IOURequestStepDate.js
@@ -5,10 +5,10 @@ import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepDescription.js b/src/pages/iou/request/step/IOURequestStepDescription.js
index 6cf9f86068a6..849f3276667e 100644
--- a/src/pages/iou/request/step/IOURequestStepDescription.js
+++ b/src/pages/iou/request/step/IOURequestStepDescription.js
@@ -7,11 +7,11 @@ import InputWrapperWithRef from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js
index 39e9d6f03afa..a4b1e97425ee 100644
--- a/src/pages/iou/request/step/IOURequestStepDistance.js
+++ b/src/pages/iou/request/step/IOURequestStepDistance.js
@@ -11,12 +11,12 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as IOU from '@userActions/IOU';
 import * as MapboxToken from '@userActions/MapboxToken';
@@ -51,9 +51,9 @@ function IOURequestStepDistance({
     },
     transaction,
 }) {
+    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [optimisticWaypoints, setOptimisticWaypoints] = useState(null);
     const [hasError, setHasError] = useState(false);
diff --git a/src/pages/iou/request/step/IOURequestStepMerchant.js b/src/pages/iou/request/step/IOURequestStepMerchant.js
index 2dbb6f8473b9..3234b6046f31 100644
--- a/src/pages/iou/request/step/IOURequestStepMerchant.js
+++ b/src/pages/iou/request/step/IOURequestStepMerchant.js
@@ -7,9 +7,9 @@ import TextInput from '@components/TextInput';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.js b/src/pages/iou/request/step/IOURequestStepScan/index.js
index e4c50ff25b5c..c51727f0143b 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.js
@@ -13,6 +13,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -24,8 +26,6 @@ import StepScreenDragAndDropWrapper from '@pages/iou/request/step/StepScreenDrag
 import withFullTransactionOrNotFound from '@pages/iou/request/step/withFullTransactionOrNotFound';
 import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.native.js b/src/pages/iou/request/step/IOURequestStepScan/index.native.js
index e80fbbce0676..8745600924e8 100644
--- a/src/pages/iou/request/step/IOURequestStepScan/index.native.js
+++ b/src/pages/iou/request/step/IOURequestStepScan/index.native.js
@@ -11,6 +11,8 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import Log from '@libs/Log';
@@ -20,8 +22,6 @@ import StepScreenWrapper from '@pages/iou/request/step/StepScreenWrapper';
 import withFullTransactionOrNotFound from '@pages/iou/request/step/withFullTransactionOrNotFound';
 import withWritableReportOrNotFound from '@pages/iou/request/step/withWritableReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepTag.js b/src/pages/iou/request/step/IOURequestStepTag.js
index 12e5dc8f9dab..7e2ccbe1a9dd 100644
--- a/src/pages/iou/request/step/IOURequestStepTag.js
+++ b/src/pages/iou/request/step/IOURequestStepTag.js
@@ -6,11 +6,11 @@ import tagPropTypes from '@components/tagPropTypes';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.js b/src/pages/iou/request/step/IOURequestStepWaypoint.js
index 7af58a7e0352..dc5b9f7d6275 100644
--- a/src/pages/iou/request/step/IOURequestStepWaypoint.js
+++ b/src/pages/iou/request/step/IOURequestStepWaypoint.js
@@ -16,12 +16,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Transaction from '@userActions/Transaction';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
index a369775d7110..ceb0d5a44351 100644
--- a/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
+++ b/src/pages/iou/request/step/StepScreenDragAndDropWrapper.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** The things to display inside the screenwrapper */
@@ -32,9 +32,10 @@ const defaultProps = {
 };
 
 function StepScreenDragAndDropWrapper({testID, headerTitle, onBackButtonPress, onEntryTransitionEnd, children, shouldShowWrapper}) {
-    const [isDraggingOver, setIsDraggingOver] = useState(false);
     const styles = useThemeStyles();
 
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+
     if (!shouldShowWrapper) {
         return children;
     }
diff --git a/src/pages/iou/request/step/StepScreenWrapper.js b/src/pages/iou/request/step/StepScreenWrapper.js
index 5131a9c60dc6..eae542f0f6f9 100644
--- a/src/pages/iou/request/step/StepScreenWrapper.js
+++ b/src/pages/iou/request/step/StepScreenWrapper.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** The things to display inside the screenwrapper */
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
index a8e56f7a41e8..c9075d896deb 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.js
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -9,13 +9,13 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import refPropTypes from '@components/refPropTypes';
 import TextInputWithCurrencySymbol from '@components/TextInputWithCurrencySymbol';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 03ebb9bdb562..3476b2304875 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -13,6 +13,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize from '@components/withLocalize';
 import useInitialValue from '@hooks/useInitialValue';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
@@ -22,7 +23,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index d44c40db209f..7826643d4283 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -10,13 +10,13 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useInitialValue from '@hooks/useInitialValue';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index a8b4dae0facc..d8d644479270 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -10,6 +10,7 @@ import OptionsSelector from '@components/OptionsSelector';
 import refPropTypes from '@components/refPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/iou/steps/NewRequestAmountPage.js b/src/pages/iou/steps/NewRequestAmountPage.js
index bf92c420e82c..569e2ce693ee 100644
--- a/src/pages/iou/steps/NewRequestAmountPage.js
+++ b/src/pages/iou/steps/NewRequestAmountPage.js
@@ -9,13 +9,13 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as IOUUtils from '@libs/IOUUtils';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index c192abf84e43..16ae590cf86b 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -11,13 +11,13 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import * as Environment from '@libs/Environment/Environment';
 import Navigation from '@libs/Navigation/Navigation';
 import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index 182a25a121b5..471a38b039b2 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -7,11 +7,11 @@ import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 2af5b145caab..ede356f3bb02 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -21,6 +21,8 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import * as CardUtils from '@libs/CardUtils';
 import compose from '@libs/compose';
@@ -34,8 +36,6 @@ import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActi
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 6fa3e2df3474..e98cd2b19c39 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -11,9 +11,9 @@ import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -24,6 +24,9 @@ const propTypes = {
     /** The chat priority mode */
     priorityMode: PropTypes.string,
 
+    /** The app's color theme */
+    preferredTheme: PropTypes.string,
+
     /** The details about the user that is signed in */
     user: PropTypes.shape({
         /** Whether or not the user is subscribed to news updates */
@@ -33,6 +36,7 @@ const propTypes = {
 
 const defaultProps = {
     priorityMode: CONST.PRIORITY_MODE.DEFAULT,
+    preferredTheme: CONST.DEFAULT_THEME,
     user: {},
 };
 
@@ -80,6 +84,12 @@ function PreferencesPage(props) {
                     description={translate('languagePage.language')}
                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
                 />
+                <MenuItemWithTopDescription
+                    shouldShowRightIcon
+                    title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
+                    description={translate('themePage.theme')}
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
+                />
                 {/* Enable additional test features in non-production environments */}
                 {!isProduction && (
                     <View style={[styles.ml5, styles.mr8, styles.mt6]}>
@@ -102,4 +112,7 @@ export default withOnyx({
     user: {
         key: ONYXKEYS.USER,
     },
+    preferredTheme: {
+        key: ONYXKEYS.PREFERRED_THEME,
+    },
 })(PreferencesPage);
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 0778394d2b28..2a9d9c5b0d9e 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -7,8 +7,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
index f4acd10a7230..453bf0a72aa8 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.js
@@ -6,18 +6,15 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** The theme of the app */
     preferredTheme: PropTypes.string,
 };
@@ -28,9 +25,10 @@ const defaultProps = {
 
 function ThemePage(props) {
     const styles = useThemeStyles();
-    const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT')), (theme) => ({
+    const {translate} = useLocalize();
+    const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT', 'FALLBACK')), (theme) => ({
         value: theme,
-        text: props.translate(`themePage.themes.${theme}.label`),
+        text: translate(`themePage.themes.${theme}.label`),
         keyForList: theme,
         isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === theme,
     }));
@@ -41,13 +39,13 @@ function ThemePage(props) {
             testID={ThemePage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('themePage.theme')}
+                title={translate('themePage.theme')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)}
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
             />
 
-            <Text style={[styles.mh5, styles.mv4]}>{props.translate('themePage.chooseThemeBelowOrSync')}</Text>
+            <Text style={[styles.mh5, styles.mv4]}>{translate('themePage.chooseThemeBelowOrSync')}</Text>
 
             <SelectionList
                 sections={[{data: localesToThemes}]}
@@ -62,11 +60,8 @@ ThemePage.displayName = 'ThemePage';
 ThemePage.propTypes = propTypes;
 ThemePage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        preferredTheme: {
-            key: ONYXKEYS.PREFERRED_THEME,
-        },
-    }),
-)(ThemePage);
+export default withOnyx({
+    preferredTheme: {
+        key: ONYXKEYS.PREFERRED_THEME,
+    },
+})(ThemePage);
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index a17dd8f2c17e..34399daf55e3 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -14,9 +14,9 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 4623d359de4d..8f6982e24b98 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 60c9b46748f6..d15405f8029c 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -13,12 +13,12 @@ import {withNetwork} from '@components/OnyxProvider';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Profile/CustomStatus/SetDatePage.js b/src/pages/settings/Profile/CustomStatus/SetDatePage.js
index 30bd89b60177..8839f1289490 100644
--- a/src/pages/settings/Profile/CustomStatus/SetDatePage.js
+++ b/src/pages/settings/Profile/CustomStatus/SetDatePage.js
@@ -6,12 +6,12 @@ import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as User from '@libs/actions/User';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Profile/CustomStatus/SetTimePage.js b/src/pages/settings/Profile/CustomStatus/SetTimePage.js
index 9e48b5826e7d..3cdf739ac7b9 100644
--- a/src/pages/settings/Profile/CustomStatus/SetTimePage.js
+++ b/src/pages/settings/Profile/CustomStatus/SetTimePage.js
@@ -8,11 +8,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TimePicker from '@components/TimePicker/TimePicker';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as User from '@libs/actions/User';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
index f4d3867eace6..8dda0ea0025d 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
@@ -13,13 +13,13 @@ import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as User from '@libs/actions/User';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index 1bf4165c15c5..bf21d3cd2b54 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -15,12 +15,12 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index 5c13bfe72d5f..8ea471283004 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -12,11 +12,11 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/LoungeAccessPage.js b/src/pages/settings/Profile/LoungeAccessPage.js
index f6b6968372d1..60cb0896a4eb 100644
--- a/src/pages/settings/Profile/LoungeAccessPage.js
+++ b/src/pages/settings/Profile/LoungeAccessPage.js
@@ -5,11 +5,11 @@ import LottieAnimations from '@components/LottieAnimations';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index fa22a3b22f9e..6c883e7fa9d8 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -8,8 +8,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 10a6d8807afc..393e95cb35fe 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -10,10 +10,10 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index a9005c39534d..365ea62184ab 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -12,11 +12,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index 4fc2bbb17428..cf6887b7e04c 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -11,10 +11,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index fc6c38f96335..89dfa4f0e419 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -13,11 +13,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as UserUtils from '@libs/UserUtils';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 40f2562724ef..20022f22523a 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -10,9 +10,9 @@ import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 463b20029745..bf86e8a5a077 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -8,9 +8,9 @@ import Switch from '@components/Switch';
 import Text from '@components/Text';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PersonalDetails from '@userActions/PersonalDetails';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
index 0676f0875932..c7cfd9c7850d 100644
--- a/src/pages/settings/Report/ReportSettingsPage.js
+++ b/src/pages/settings/Report/ReportSettingsPage.js
@@ -14,13 +14,13 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index 7916043c7e20..5f64faca50fc 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -4,11 +4,13 @@ import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -16,7 +18,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -42,13 +43,8 @@ const defaultProps = {
     policy: {},
 };
 
-function RoomNamePage(props) {
+function RoomNamePage({policy, report, reports, translate}) {
     const styles = useThemeStyles();
-    const policy = props.policy;
-    const report = props.report;
-    const reports = props.reports;
-    const translate = props.translate;
-
     const roomNameInputRef = useRef(null);
     const isFocused = useIsFocused();
 
@@ -91,7 +87,7 @@ function RoomNamePage(props) {
                     title={translate('newRoomPage.roomName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))}
                 />
-                <Form
+                <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.ROOM_NAME_FORM}
                     onSubmit={(values) => Report.updatePolicyRoomNameAndNavigate(report, values.roomName)}
@@ -100,14 +96,15 @@ function RoomNamePage(props) {
                     enabledWhenOffline
                 >
                     <View style={styles.mb4}>
-                        <RoomNameInput
-                            ref={(ref) => (roomNameInputRef.current = ref)}
+                        <InputWrapper
+                            InputComponent={RoomNameInput}
+                            ref={roomNameInputRef}
                             inputID="roomName"
                             defaultValue={report.reportName}
                             isFocused={isFocused}
                         />
                     </View>
-                </Form>
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 2c55c5e73f0c..9aad345d7b3d 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -12,10 +12,10 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CloseAccount from '@userActions/CloseAccount';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index 95a0efa2fc39..392a264977c6 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -8,11 +8,11 @@ import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index 69d662ba6e81..ba899a0e2d20 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -4,7 +4,7 @@ import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepCont
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import StepWrapperPropTypes from './StepWrapperPropTypes';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index 86d218ec63ae..420d976dcd26 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -11,14 +11,14 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import Section from '@components/Section';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
 import localFileDownload from '@libs/localFileDownload';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
index 9de25ecb8f4b..db64a805d088 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
@@ -4,8 +4,8 @@ import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import * as Illustrations from '@components/Icon/Illustrations';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
index e0f90c57f350..27f9c0f04404 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/EnabledStep.js
@@ -5,10 +5,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
index 8a2b4c6fdf6c..e5f809204bd6 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -11,12 +11,12 @@ import QRCode from '@components/QRCode';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
 import {defaultAccount, TwoFactorAuthPropTypes} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index 788c571d9e7d..bfc8583998b6 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -12,14 +12,14 @@ import MagicCodeInput from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CardUtils from '@libs/CardUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CardSettings from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 1f824fed5293..0704bf6bf3b8 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -14,9 +14,9 @@ import TextInput from '@components/TextInput';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
index 4176393e92dd..1d1ce906189b 100644
--- a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
+++ b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
@@ -6,6 +6,7 @@ import _ from 'underscore';
 import Form from '@components/Form';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as FormActions from '@libs/actions/FormActions';
 import * as Wallet from '@libs/actions/Wallet';
 import * as CardUtils from '@libs/CardUtils';
@@ -13,7 +14,6 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import assignedCardPropTypes from '@pages/settings/Wallet/assignedCardPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
index 0ae83cd28b5c..9f364c32c075 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
@@ -5,10 +5,10 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormUtils from '@libs/FormUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
index 3c87bed424ba..0040dac8b75f 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
@@ -4,9 +4,9 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
index 82b684332491..3d4c7f4ac6fb 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
@@ -6,8 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import FormUtils from '@libs/FormUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
index 2ffbf12f52c2..815d2e883cf0 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.js
@@ -6,9 +6,9 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.js
index b469027e6a57..513da42b9011 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.js
@@ -13,13 +13,13 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Card from '@userActions/Card';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 4f6d0331f3b4..6e424a918b7e 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -16,13 +16,13 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/RedDotCardSection.js b/src/pages/settings/Wallet/RedDotCardSection.js
index 65c700575340..7025cf7bf1a2 100644
--- a/src/pages/settings/Wallet/RedDotCardSection.js
+++ b/src/pages/settings/Wallet/RedDotCardSection.js
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     title: PropTypes.string.isRequired,
diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.js
index aa313b73a6bd..b01dc99cb485 100644
--- a/src/pages/settings/Wallet/ReportCardLostPage.js
+++ b/src/pages/settings/Wallet/ReportCardLostPage.js
@@ -12,11 +12,11 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CardActions from '@userActions/Card';
 import * as FormActions from '@userActions/FormActions';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
index 01d3c272ad8b..fa88e01d8b41 100644
--- a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
+++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
@@ -9,11 +9,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Card from '@userActions/Card';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index 2414edb29087..303baa4b4b13 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -15,12 +15,12 @@ import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js
index f4609bdc8534..7a3a9e9ce6b7 100644
--- a/src/pages/settings/Wallet/WalletEmptyState.js
+++ b/src/pages/settings/Wallet/WalletEmptyState.js
@@ -6,8 +6,8 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
 import Navigation from '@libs/Navigation/Navigation';
-import useTheme from '@styles/themes/useTheme';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 
diff --git a/src/pages/settings/Wallet/WalletPage/CardDetails.js b/src/pages/settings/Wallet/WalletPage/CardDetails.js
index a51c4c5fad6f..b51c34e89d17 100644
--- a/src/pages/settings/Wallet/WalletPage/CardDetails.js
+++ b/src/pages/settings/Wallet/WalletPage/CardDetails.js
@@ -8,10 +8,10 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 6f452eed3629..e0577930b73d 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -1,11 +1,11 @@
 import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {ActivityIndicator, InteractionManager, ScrollView, View} from 'react-native';
+import {ActivityIndicator, ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import Button from '@components/Button';
-import ConfirmContent from '@components/ConfirmContent';
+import ConfirmModal from '@components/ConfirmModal';
 import CurrentWalletBalance from '@components/CurrentWalletBalance';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -20,6 +20,8 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import WalletSection from '@components/WalletSection';
 import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
@@ -27,8 +29,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
 import WalletEmptyState from '@pages/settings/Wallet/WalletEmptyState';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
@@ -62,7 +62,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
         anchorPositionTop: 0,
         anchorPositionRight: 0,
     });
-    const [showConfirmDeleteContent, setShowConfirmDeleteContent] = useState(false);
+    const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
 
     const hasBankAccount = !_.isEmpty(bankAccountList) || !_.isEmpty(fundList);
     const hasWallet = !_.isEmpty(userWallet);
@@ -215,10 +215,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
      */
     const hideDefaultDeleteMenu = useCallback(() => {
         setShouldShowDefaultDeleteMenu(false);
-        InteractionManager.runAfterInteractions(() => {
-            setShowConfirmDeleteContent(false);
-        });
-    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteContent]);
+        setShowConfirmDeleteModal(false);
+    }, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);
 
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
@@ -487,11 +485,9 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                             top: anchorPosition.anchorPositionTop,
                             right: anchorPosition.anchorPositionRight,
                         }}
-                        withoutOverlay
                         anchorRef={paymentMethodButtonRef}
-                        onModalHide={resetSelectedPaymentMethodData}
                     >
-                        {!showConfirmDeleteContent ? (
+                        {!showConfirmDeleteModal && (
                             <View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
                                 {isPopoverBottomMount && (
                                     <MenuItem
@@ -512,34 +508,28 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                                     />
                                 )}
                                 <Button
-                                    onPress={() => {
-                                        setShowConfirmDeleteContent(true);
-                                    }}
+                                    onPress={() => setShowConfirmDeleteModal(true)}
                                     style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
                                     text={translate('common.delete')}
                                     danger
                                 />
                             </View>
-                        ) : (
-                            <ConfirmContent
-                                onConfirm={() => {
-                                    deletePaymentMethod();
-                                    hideDefaultDeleteMenu();
-                                }}
-                                onCancel={hideDefaultDeleteMenu}
-                                contentStyles={!isSmallScreenWidth ? [styles.sidebarPopover, styles.willChangeTransform] : undefined}
-                                title={translate('walletPage.deleteAccount')}
-                                prompt={translate('walletPage.deleteConfirmation')}
-                                confirmText={translate('common.delete')}
-                                cancelText={translate('common.cancel')}
-                                anchorPosition={{
-                                    top: anchorPosition.anchorPositionTop,
-                                    right: anchorPosition.anchorPositionRight,
-                                }}
-                                shouldShowCancelButton
-                                danger
-                            />
                         )}
+                        <ConfirmModal
+                            isVisible={showConfirmDeleteModal}
+                            onConfirm={() => {
+                                deletePaymentMethod();
+                                hideDefaultDeleteMenu();
+                            }}
+                            onCancel={hideDefaultDeleteMenu}
+                            title={translate('walletPage.deleteAccount')}
+                            prompt={translate('walletPage.deleteConfirmation')}
+                            confirmText={translate('common.delete')}
+                            cancelText={translate('common.cancel')}
+                            shouldShowCancelButton
+                            danger
+                            onModalHide={resetSelectedPaymentMethodData}
+                        />
                     </Popover>
                 </ScreenWrapper>
             )}
diff --git a/src/pages/signin/ChangeExpensifyLoginLink.js b/src/pages/signin/ChangeExpensifyLoginLink.js
index 0fee34f988a1..6ba9b7fcd0f5 100755
--- a/src/pages/signin/ChangeExpensifyLoginLink.js
+++ b/src/pages/signin/ChangeExpensifyLoginLink.js
@@ -6,8 +6,8 @@ import _ from 'underscore';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/signin/ChooseSSOOrMagicCode.js b/src/pages/signin/ChooseSSOOrMagicCode.js
index bfb704b71f6d..db985e525545 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.js
+++ b/src/pages/signin/ChooseSSOOrMagicCode.js
@@ -8,10 +8,10 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/signin/EmailDeliveryFailurePage.js b/src/pages/signin/EmailDeliveryFailurePage.js
index fe39618e79df..9996374cc6cd 100644
--- a/src/pages/signin/EmailDeliveryFailurePage.js
+++ b/src/pages/signin/EmailDeliveryFailurePage.js
@@ -8,7 +8,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import redirectToSignIn from '@userActions/SignInRedirect';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/signin/Licenses.js b/src/pages/signin/Licenses.js
index ef9cd8548a2d..605cfed328b5 100644
--- a/src/pages/signin/Licenses.js
+++ b/src/pages/signin/Licenses.js
@@ -4,7 +4,7 @@ import LocalePicker from '@components/LocalePicker';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 const currentYear = new Date().getFullYear();
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index e7ac249582a9..81c2e985f8da 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -18,6 +18,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -27,7 +28,6 @@ import * as LoginUtils from '@libs/LoginUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import Visibility from '@libs/Visibility';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as CloseAccount from '@userActions/CloseAccount';
 import * as MemoryOnlyKeys from '@userActions/MemoryOnlyKeys/MemoryOnlyKeys';
 import * as Session from '@userActions/Session';
diff --git a/src/pages/signin/SignInHeroCopy.js b/src/pages/signin/SignInHeroCopy.js
index 75c53c6b2344..847de3868cee 100644
--- a/src/pages/signin/SignInHeroCopy.js
+++ b/src/pages/signin/SignInHeroCopy.js
@@ -4,9 +4,9 @@ import {View} from 'react-native';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index 302e09a7afbc..c665a09932c2 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/src/pages/signin/SignInHeroImage.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js
index 9784eb0b67a1..1bb8b6065a15 100644
--- a/src/pages/signin/SignInModal.js
+++ b/src/pages/signin/SignInModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import SignInPage from './SignInPage';
 
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index dbad6324c922..8cb0ef9907af 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -5,19 +5,19 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
-import CustomStatusBar from '@components/CustomStatusBar';
+import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackground';
+import ThemeProvider from '@components/ThemeProvider';
+import ThemeStylesProvider from '@components/ThemeStylesProvider';
 import useLocalize from '@hooks/useLocalize';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
-import ThemeProvider from '@styles/themes/ThemeProvider';
-import ThemeStylesProvider from '@styles/ThemeStylesProvider';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
@@ -288,7 +288,7 @@ function SignInPage(props) {
         <ThemeProvider theme={CONST.THEME.DARK}>
             <ThemeStylesProvider>
                 <ColorSchemeWrapper>
-                    <CustomStatusBar isNested />
+                    <CustomStatusBarAndBackground isNested />
                     <SignInPageInner
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...props}
diff --git a/src/pages/signin/SignInPageHero.js b/src/pages/signin/SignInPageHero.js
index a7bc13785764..81415452451e 100644
--- a/src/pages/signin/SignInPageHero.js
+++ b/src/pages/signin/SignInPageHero.js
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import SignInHeroCopy from './SignInHeroCopy';
 import SignInHeroImage from './SignInHeroImage';
diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js
index 4185bba88149..b6d9e82726f0 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.android.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import AndroidBackgroundImage from '@assets/images/home-background--android.svg';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import defaultPropTypes from './propTypes';
 
 function BackgroundImage(props) {
diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.js
index 872ce7139317..ac93ceeb4e2c 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.js
+++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile.svg';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import defaultPropTypes from './propTypes';
 
 const defaultProps = {
diff --git a/src/pages/signin/SignInPageLayout/Footer.js b/src/pages/signin/SignInPageLayout/Footer.js
index 261f0473a6e5..3837914a79bd 100644
--- a/src/pages/signin/SignInPageLayout/Footer.js
+++ b/src/pages/signin/SignInPageLayout/Footer.js
@@ -8,11 +8,11 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
index fd48ebecf066..5865c235335a 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageContent.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -7,11 +7,11 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 
 const propTypes = {
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 667f873c572e..bc171dd1dc12 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -5,12 +5,12 @@ import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import BackgroundImage from './BackgroundImage';
 import Footer from './Footer';
diff --git a/src/pages/signin/Socials.js b/src/pages/signin/Socials.js
index f5cbbd81e2d8..a5747402d16e 100644
--- a/src/pages/signin/Socials.js
+++ b/src/pages/signin/Socials.js
@@ -4,8 +4,8 @@ import _ from 'underscore';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index 44e024208fc8..75db2e5debd1 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -2,7 +2,7 @@ import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 function Terms(props) {
diff --git a/src/pages/signin/ThirdPartySignInPage.js b/src/pages/signin/ThirdPartySignInPage.js
index f0d0f8d42e93..35297e22e665 100644
--- a/src/pages/signin/ThirdPartySignInPage.js
+++ b/src/pages/signin/ThirdPartySignInPage.js
@@ -9,9 +9,9 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/signin/UnlinkLoginForm.js b/src/pages/signin/UnlinkLoginForm.js
index 1ae9b1fd79c6..851a984407e1 100644
--- a/src/pages/signin/UnlinkLoginForm.js
+++ b/src/pages/signin/UnlinkLoginForm.js
@@ -11,8 +11,8 @@ import {withNetwork} from '@components/OnyxProvider';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import redirectToSignIn from '@userActions/SignInRedirect';
 import CONST from '@src/CONST';
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 4e9bf4c3b506..03db6d3436cf 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -14,15 +14,15 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrevious from '@hooks/usePrevious';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import ChangeExpensifyLoginLink from '@pages/signin/ChangeExpensifyLoginLink';
 import Terms from '@pages/signin/Terms';
-import useTheme from '@styles/themes/useTheme';
-import useStyleUtils from '@styles/useStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 30908b2de79b..b11e7c163755 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -10,11 +10,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index f04b837d85b6..3dab58dfad04 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -10,11 +10,11 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 24bdb39d5bff..1c4c3f58b0a1 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -11,13 +11,13 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 48c9d9126297..7bf6065625c0 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -9,10 +9,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index c61990b1c347..dbc7c262cd93 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -13,12 +13,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 4e963a22b749..c5dab0dc2f94 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -11,6 +11,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -19,7 +20,6 @@ import StringUtils from '@libs/StringUtils';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index 914afa34bd85..b0b6dac15d69 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -10,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
@@ -17,7 +18,6 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 6dff0e3d8f7e..9b3d28a0d032 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -10,12 +10,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 3c73687ca813..80813c847239 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -18,6 +18,7 @@ import Tooltip from '@components/Tooltip';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useSingleExecution from '@hooks/useSingleExecution';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
@@ -26,7 +27,6 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 3528224f39b9..7a28558ee587 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -11,12 +11,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 59993087c44c..9834d4e9e1c0 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -19,6 +19,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
@@ -28,7 +29,6 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as UserUtils from '@libs/UserUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index c7fc9de2571f..6f86e871e8ae 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -3,8 +3,12 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import BlockingView from '@components/BlockingViews/BlockingView';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import Button from '@components/Button';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import * as Illustrations from '@components/Icon/Illustrations';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -17,6 +21,7 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -25,12 +30,11 @@ import Permissions from '@libs/Permissions';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
-import * as App from '@userActions/App';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -190,7 +194,15 @@ function WorkspaceNewRoomPage(props) {
         [props.reports],
     );
 
-    const workspaceOptions = useMemo(() => _.map(PolicyUtils.getActivePolicies(props.policies), (policy) => ({label: policy.name, key: policy.id, value: policy.id})), [props.policies]);
+    const workspaceOptions = useMemo(
+        () =>
+            _.map(PolicyUtils.getActivePolicies(props.policies), (policy) => ({
+                label: policy.name,
+                key: policy.id,
+                value: policy.id,
+            })),
+        [props.policies],
+    );
 
     const writeCapabilityOptions = useMemo(
         () =>
@@ -216,13 +228,28 @@ function WorkspaceNewRoomPage(props) {
 
     const {inputCallbackRef} = useAutoFocusInput();
 
+    const renderEmptyWorkspaceView = () => (
+        <>
+            <BlockingView
+                icon={Illustrations.ToddBehindCloud}
+                iconWidth={variables.modalTopIconWidth}
+                iconHeight={variables.modalTopIconHeight}
+                title={translate('workspace.emptyWorkspace.notFound')}
+                subtitle={translate('workspace.emptyWorkspace.description')}
+                shouldShowLink={false}
+            />
+            <Button
+                success
+                text={translate('footer.learnMore')}
+                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                style={[styles.mh5, styles.mb5]}
+            />
+            {isSmallScreenWidth && <OfflineIndicator />}
+        </>
+    );
+
     return (
-        <FullPageNotFoundView
-            shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}
-            shouldShowBackButton={false}
-            linkKey="workspace.emptyWorkspace.title"
-            onLinkPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
-        >
+        <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas)}>
             <ScreenWrapper
                 shouldEnableKeyboardAvoidingView={false}
                 includeSafeAreaPaddingBottom={isOffline}
@@ -231,76 +258,85 @@ function WorkspaceNewRoomPage(props) {
                 shouldEnablePickerAvoiding={false}
                 testID={WorkspaceNewRoomPage.displayName}
             >
-                {({insets}) => (
-                    <KeyboardAvoidingView
-                        style={styles.h100}
-                        behavior="padding"
-                        // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
-                        // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                        keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
-                    >
-                        <Form
-                            formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                            submitButtonText={translate('newRoomPage.createRoom')}
-                            style={[styles.mh5, styles.flexGrow1]}
-                            validate={validate}
-                            onSubmit={submit}
-                            enabledWhenOffline
+                {({insets}) =>
+                    workspaceOptions.length === 0 ? (
+                        renderEmptyWorkspaceView()
+                    ) : (
+                        <KeyboardAvoidingView
+                            style={styles.h100}
+                            behavior="padding"
+                            // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
+                            // This is because when wrapping whole screen the screen was freezing when changing Tabs.
+                            keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                         >
-                            <View style={styles.mb5}>
-                                <RoomNameInput
-                                    ref={inputCallbackRef}
-                                    inputID="roomName"
-                                    isFocused={props.isFocused}
-                                    shouldDelayFocus
-                                    autoFocus
-                                />
-                            </View>
-                            <View style={styles.mb5}>
-                                <TextInput
-                                    inputID="welcomeMessage"
-                                    label={translate('welcomeMessagePage.welcomeMessageOptional')}
-                                    accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
-                                    role={CONST.ROLE.PRESENTATION}
-                                    autoGrowHeight
-                                    maxLength={CONST.MAX_COMMENT_LENGTH}
-                                    autoCapitalize="none"
-                                    containerStyles={[styles.autoGrowHeightMultilineInput]}
-                                />
-                            </View>
-                            <View style={[styles.mhn5]}>
-                                <ValuePicker
-                                    inputID="policyID"
-                                    label={translate('workspace.common.workspace')}
-                                    items={workspaceOptions}
-                                    onValueChange={setPolicyID}
-                                />
-                            </View>
-                            {isPolicyAdmin && (
-                                <View style={styles.mhn5}>
-                                    <ValuePicker
-                                        inputID="writeCapability"
-                                        label={translate('writeCapabilityPage.label')}
-                                        items={writeCapabilityOptions}
-                                        value={writeCapability}
-                                        onValueChange={setWriteCapability}
+                            <FormProvider
+                                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                                submitButtonText={translate('newRoomPage.createRoom')}
+                                style={[styles.mh5, styles.flexGrow1]}
+                                validate={validate}
+                                onSubmit={submit}
+                                enabledWhenOffline
+                            >
+                                <View style={styles.mb5}>
+                                    <InputWrapper
+                                        InputComponent={RoomNameInput}
+                                        ref={inputCallbackRef}
+                                        inputID="roomName"
+                                        isFocused={props.isFocused}
+                                        shouldDelayFocus
+                                        autoFocus
+                                    />
+                                </View>
+                                <View style={styles.mb5}>
+                                    <InputWrapper
+                                        InputComponent={TextInput}
+                                        inputID="welcomeMessage"
+                                        label={translate('welcomeMessagePage.welcomeMessageOptional')}
+                                        accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
+                                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                                        autoGrowHeight
+                                        maxLength={CONST.MAX_COMMENT_LENGTH}
+                                        autoCapitalize="none"
+                                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                                    />
+                                </View>
+                                <View style={[styles.mhn5]}>
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
+                                        inputID="policyID"
+                                        label={translate('workspace.common.workspace')}
+                                        items={workspaceOptions}
+                                        onValueChange={setPolicyID}
+                                    />
+                                </View>
+                                {isPolicyAdmin && (
+                                    <View style={styles.mhn5}>
+                                        <InputWrapper
+                                            InputComponent={ValuePicker}
+                                            inputID="writeCapability"
+                                            label={translate('writeCapabilityPage.label')}
+                                            items={writeCapabilityOptions}
+                                            value={writeCapability}
+                                            onValueChange={setWriteCapability}
+                                        />
+                                    </View>
+                                )}
+                                <View style={[styles.mb1, styles.mhn5]}>
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
+                                        inputID="visibility"
+                                        label={translate('newRoomPage.visibility')}
+                                        items={visibilityOptions}
+                                        onValueChange={setVisibility}
+                                        value={visibility}
                                     />
                                 </View>
-                            )}
-                            <View style={[styles.mb1, styles.mhn5]}>
-                                <ValuePicker
-                                    inputID="visibility"
-                                    label={translate('newRoomPage.visibility')}
-                                    items={visibilityOptions}
-                                    onValueChange={setVisibility}
-                                    value={visibility}
-                                />
-                            </View>
-                            <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </Form>
-                        {isSmallScreenWidth && <OfflineIndicator />}
-                    </KeyboardAvoidingView>
-                )}
+                                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+                            </FormProvider>
+                            {isSmallScreenWidth && <OfflineIndicator />}
+                        </KeyboardAvoidingView>
+                    )
+                }
             </ScreenWrapper>
         </FullPageNotFoundView>
     );
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index bea94ed3ef4e..6b5c179a2e51 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -9,13 +9,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import BankAccount from '@libs/models/BankAccount';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
diff --git a/src/pages/workspace/WorkspaceResetBankAccountModal.js b/src/pages/workspace/WorkspaceResetBankAccountModal.js
index 19e15a2828bc..f4ad662ebb75 100644
--- a/src/pages/workspace/WorkspaceResetBankAccountModal.js
+++ b/src/pages/workspace/WorkspaceResetBankAccountModal.js
@@ -5,9 +5,9 @@ import {withOnyx} from 'react-native-onyx';
 import ConfirmModal from '@components/ConfirmModal';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index d121134f26da..9bc4b755fce9 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -16,12 +16,12 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index cf258b462285..cac0d1bd71a6 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -12,6 +12,8 @@ import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -19,8 +21,6 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import policyMemberPropType from '@pages/policyMemberPropType';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
index 8221beb23fcf..3f7f59180c8b 100644
--- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
+++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js
@@ -10,9 +10,9 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import ONYXKEYS from '@src/ONYXKEYS';
 
diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
index 51faa2710208..8211f70163d5 100644
--- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 
 const propTypes = {
diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
index 065c3fbaa84d..dd9c1c7fbaf6 100644
--- a/src/pages/workspace/bills/WorkspaceBillsVBAView.js
+++ b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
 
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
index cf920571495f..3233f8ea7e23 100644
--- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js
+++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -7,7 +7,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** The policy ID currently being configured */
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
index 2b4925ff20bd..970cd9105368 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
@@ -8,9 +8,9 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import userPropTypes from '@pages/settings/userPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
diff --git a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
index 278f6d01319c..40ecd80b8e6e 100644
--- a/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
+++ b/src/pages/workspace/card/WorkspaceCardVBAWithECardView.js
@@ -6,7 +6,7 @@ import Section from '@components/Section';
 import Text from '@components/Text';
 import UnorderedList from '@components/UnorderedList';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 
 const propTypes = {
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
index 749e6b28b11b..b33311021e61 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesFirstSection.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 
 const propTypes = {
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
index 9be8994bc5a7..25a97ac93442 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 
 const propTypes = {
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
index 0c6ea7103990..c5e047f6291b 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import WorkspaceInvoicesFirstSection from './WorkspaceInvoicesFirstSection';
 
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
index bf9111775f18..7cf17c9d498c 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseSection.js
@@ -9,10 +9,10 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import networkPropTypes from '@components/networkPropTypes';
 import Section from '@components/Section';
 import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import BankAccount from '@libs/models/BankAccount';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index 752639c33d3a..23136064fc2b 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -14,11 +14,11 @@ import {withNetwork} from '@components/OnyxProvider';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Link from '@userActions/Link';
 import * as Policy from '@userActions/Policy';
diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
index 64269084aad4..d8154955a5d7 100644
--- a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -6,7 +6,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 const propTypes = {
     /** The policy ID currently being configured */
diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
index b6424e918037..5228f9185852 100644
--- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js
+++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -5,7 +5,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
+import useThemeStyles from '@hooks/useThemeStyles';
 import * as Link from '@userActions/Link';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
diff --git a/src/stories/CheckboxWithLabel.stories.js b/src/stories/CheckboxWithLabel.stories.js
index e8d45f434b16..2da4713e81b3 100644
--- a/src/stories/CheckboxWithLabel.stories.js
+++ b/src/stories/CheckboxWithLabel.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -34,9 +34,9 @@ WithLabelComponent.args = {
     onInputChange: () => {},
     LabelComponent: () => (
         <>
-            <Text style={[styles.textLarge]}>Test</Text>
-            <Text style={[styles.textMicroBold]}> Test </Text>
-            <Text style={[styles.textMicroSupporting]}>Test</Text>
+            <Text style={[defaultStyles.textLarge]}>Test</Text>
+            <Text style={[defaultStyles.textMicroBold]}> Test </Text>
+            <Text style={[defaultStyles.textMicroSupporting]}>Test</Text>
         </>
     ),
 };
diff --git a/src/stories/Composer.stories.js b/src/stories/Composer.stories.js
index 799012e1c051..04fa9be7de86 100644
--- a/src/stories/Composer.stories.js
+++ b/src/stories/Composer.stories.js
@@ -5,9 +5,9 @@ import Composer from '@components/Composer';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
-import useStyleUtils from '@styles/useStyleUtils';
+import useStyleUtils from '@hooks/useStyleUtils';
+import {defaultStyles} from '@styles/index';
+import {defaultTheme} from '@styles/theme';
 import CONST from '@src/CONST';
 
 const ComposerWithNavigation = withNavigationFallback(Composer);
@@ -32,29 +32,29 @@ function Default(args) {
 
     return (
         <View>
-            <View style={[styles.border, styles.p4]}>
+            <View style={[defaultStyles.border, defaultStyles.p4]}>
                 <ComposerWithNavigation
                     // eslint-disable-next-line react/jsx-props-no-spreading
                     {...args}
                     multiline
                     onChangeText={setComment}
                     onPasteFile={setPastedFile}
-                    style={[styles.textInputCompose, styles.w100, styles.verticalAlignTop]}
+                    style={[defaultStyles.textInputCompose, defaultStyles.w100, defaultStyles.verticalAlignTop]}
                 />
             </View>
-            <View style={[styles.flexRow, styles.mv5, styles.flexWrap, styles.w100]}>
+            <View style={[defaultStyles.flexRow, defaultStyles.mv5, defaultStyles.flexWrap, defaultStyles.w100]}>
                 <View
-                    style={[styles.border, styles.noLeftBorderRadius, styles.noRightBorderRadius, styles.p5, styles.flex1]}
+                    style={[defaultStyles.border, defaultStyles.noLeftBorderRadius, defaultStyles.noRightBorderRadius, defaultStyles.p5, defaultStyles.flex1]}
                     id={CONST.REPORT.DROP_NATIVE_ID}
                 >
-                    <Text style={[styles.mb2, styles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>
+                    <Text style={[defaultStyles.mb2, defaultStyles.textLabelSupporting]}>Entered Comment (Drop Enabled)</Text>
                     <Text>{comment}</Text>
                 </View>
-                <View style={[styles.p5, styles.borderBottom, styles.borderRight, styles.borderTop, styles.flex1]}>
-                    <Text style={[styles.mb2, styles.textLabelSupporting]}>Rendered Comment</Text>
+                <View style={[defaultStyles.p5, defaultStyles.borderBottom, defaultStyles.borderRight, defaultStyles.borderTop, defaultStyles.flex1]}>
+                    <Text style={[defaultStyles.mb2, defaultStyles.textLabelSupporting]}>Rendered Comment</Text>
                     {Boolean(renderedHTML) && <RenderHTML html={renderedHTML} />}
                     {Boolean(pastedFile) && (
-                        <View style={styles.mv3}>
+                        <View style={defaultStyles.mv3}>
                             <Image
                                 source={{uri: URL.createObjectURL(pastedFile)}}
                                 resizeMode="contain"
@@ -71,7 +71,7 @@ function Default(args) {
 Default.args = {
     autoFocus: true,
     placeholder: 'Compose Text Here',
-    placeholderTextColor: themeColors.placeholderText,
+    placeholderTextColor: defaultTheme.placeholderText,
     defaultValue: `Composer can do the following:
 
      * It can contain MD e.g. *bold* _italic_
diff --git a/src/stories/DragAndDrop.stories.js b/src/stories/DragAndDrop.stories.js
index c594d059b396..8e540dcd2a42 100644
--- a/src/stories/DragAndDrop.stories.js
+++ b/src/stories/DragAndDrop.stories.js
@@ -4,7 +4,7 @@ import {Image, View} from 'react-native';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -26,12 +26,12 @@ function Default() {
                     height: 500,
                     backgroundColor: 'beige',
                 },
-                styles.alignItemsCenter,
-                styles.justifyContentCenter,
+                defaultStyles.alignItemsCenter,
+                defaultStyles.justifyContentCenter,
             ]}
         >
             <DragAndDropProvider>
-                <View style={[styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                <View style={[defaultStyles.w100, defaultStyles.h100, defaultStyles.justifyContentCenter, defaultStyles.alignItemsCenter]}>
                     {fileURL ? (
                         <Image
                             source={{uri: fileURL}}
@@ -54,7 +54,7 @@ function Default() {
                         }
                     }}
                 >
-                    <View style={[styles.w100, styles.h100, styles.alignItemsCenter, styles.justifyContentCenter, {backgroundColor: 'white'}]}>
+                    <View style={[defaultStyles.w100, defaultStyles.h100, defaultStyles.alignItemsCenter, defaultStyles.justifyContentCenter, {backgroundColor: 'white'}]}>
                         <Text color="black">Release to upload file</Text>
                     </View>
                 </DragAndDropConsumer>
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index 1edc860a4871..a937c6732e9b 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import NetworkConnection from '@libs/NetworkConnection';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 
@@ -60,26 +60,26 @@ function Template(args) {
                 label="Account number"
                 accessibilityLabel="Account number"
                 inputID="accountNumber"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
             />
             <InputWrapper
                 InputComponent={AddressSearch}
                 label="Street"
                 inputID="street"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
                 hint="No PO box"
             />
             <DatePicker
                 inputID="dob"
                 label="Date of Birth"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
             />
             <View>
                 <InputWrapper
                     InputComponent={Picker}
                     label="Fruit"
                     inputID="pickFruit"
-                    containerStyles={[styles.mt4]}
+                    containerStyles={[defaultStyles.mt4]}
                     shouldSaveDraft
                     items={[
                         {
@@ -101,7 +101,7 @@ function Template(args) {
                 InputComponent={Picker}
                 label="Another Fruit"
                 inputID="pickAnotherFruit"
-                containerStyles={[styles.mt4]}
+                containerStyles={[defaultStyles.mt4]}
                 items={[
                     {
                         label: 'Select a Fruit',
@@ -117,7 +117,7 @@ function Template(args) {
                     },
                 ]}
             />
-            <View style={styles.mt4}>
+            <View style={defaultStyles.mt4}>
                 <InputWrapper
                     InputComponent={StatePicker}
                     inputID="state"
@@ -127,7 +127,7 @@ function Template(args) {
             <InputWrapper
                 InputComponent={CheckboxWithLabel}
                 inputID="checkbox"
-                style={[styles.mb4, styles.mt5]}
+                style={[defaultStyles.mb4, defaultStyles.mt5]}
                 LabelComponent={() => <Text>I accept the Expensify Terms of Service</Text>}
             />
         </FormProvider>
diff --git a/src/stories/PopoverMenu.stories.js b/src/stories/PopoverMenu.stories.js
index b860a8343309..c03a554741f1 100644
--- a/src/stories/PopoverMenu.stories.js
+++ b/src/stories/PopoverMenu.stories.js
@@ -3,7 +3,8 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import PopoverMenu from '@components/PopoverMenu';
-import themeColors from '@styles/themes/default';
+// eslint-disable-next-line no-restricted-imports
+import themeColors from '@styles/theme/themes/dark';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
diff --git a/src/stories/SelectionList.stories.js b/src/stories/SelectionList.stories.js
index ec80a8e908ac..c08ef2df783a 100644
--- a/src/stories/SelectionList.stories.js
+++ b/src/stories/SelectionList.stories.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import SelectionList from '@components/SelectionList';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import {defaultStyles} from '@styles/index';
 import CONST from '@src/CONST';
 
 /**
@@ -228,8 +228,8 @@ function MultipleSelection(args) {
                     accountID: item.keyForList,
                     login: item.text,
                     rightElement: isAdmin && (
-                        <View style={[styles.badge, styles.peopleBadge]}>
-                            <Text style={styles.peopleBadgeText}>Admin</Text>
+                        <View style={[defaultStyles.badge, defaultStyles.peopleBadge]}>
+                            <Text style={defaultStyles.peopleBadgeText}>Admin</Text>
                         </View>
                     ),
                 };
@@ -290,8 +290,8 @@ function WithSectionHeader(args) {
                     accountID: item.keyForList,
                     login: item.text,
                     rightElement: isAdmin && (
-                        <View style={[styles.badge, styles.peopleBadge]}>
-                            <Text style={styles.peopleBadgeText}>Admin</Text>
+                        <View style={[defaultStyles.badge, defaultStyles.peopleBadge]}>
+                            <Text style={defaultStyles.peopleBadgeText}>Admin</Text>
                         </View>
                     ),
                 };
@@ -350,8 +350,8 @@ function WithConfirmButton(args) {
                     accountID: item.keyForList,
                     login: item.text,
                     rightElement: isAdmin && (
-                        <View style={[styles.badge, styles.peopleBadge]}>
-                            <Text style={styles.peopleBadgeText}>Admin</Text>
+                        <View style={[defaultStyles.badge, defaultStyles.peopleBadge]}>
+                            <Text style={defaultStyles.peopleBadgeText}>Admin</Text>
                         </View>
                     ),
                 };
diff --git a/src/styles/illustrations/ThemeIllustrationsContext.ts b/src/styles/illustrations/ThemeIllustrationsContext.ts
deleted file mode 100644
index e4956e6c0479..000000000000
--- a/src/styles/illustrations/ThemeIllustrationsContext.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import DarkIllustrations from './dark';
-import {Illustrations} from './types';
-
-const ThemeIllustrationsContext = React.createContext<Illustrations>(DarkIllustrations);
-
-export default ThemeIllustrationsContext;
diff --git a/src/styles/styles.ts b/src/styles/index.ts
similarity index 98%
rename from src/styles/styles.ts
rename to src/styles/index.ts
index 244a6f2b11dc..9e02335bde0d 100644
--- a/src/styles/styles.ts
+++ b/src/styles/index.ts
@@ -9,35 +9,36 @@ import {MixedStyleDeclaration, MixedStyleRecord} from 'react-native-render-html'
 import DotLottieAnimation from '@components/LottieAnimations/types';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
-import addOutlineWidth from './addOutlineWidth';
-import codeStyles from './codeStyles';
-import colors from './colors';
-import fontFamily from './fontFamily';
-import fontWeightBold from './fontWeight/bold';
-import getPopOverVerticalOffset from './getPopOverVerticalOffset';
-import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles';
-import overflowXHidden from './overflowXHidden';
-import pointerEventsAuto from './pointerEventsAuto';
-import pointerEventsBoxNone from './pointerEventsBoxNone';
-import pointerEventsNone from './pointerEventsNone';
-import {defaultTheme} from './themes/themes';
-import {type ThemeColors} from './themes/types';
-import borders from './utilities/borders';
-import cursor from './utilities/cursor';
-import display from './utilities/display';
-import flex from './utilities/flex';
-import objectFit from './utilities/objectFit';
-import overflow from './utilities/overflow';
-import positioning from './utilities/positioning';
-import sizing from './utilities/sizing';
-import spacing from './utilities/spacing';
-import textDecorationLine from './utilities/textDecorationLine';
-import textUnderline from './utilities/textUnderline';
-import userSelect from './utilities/userSelect';
-import visibility from './utilities/visibility';
-import whiteSpace from './utilities/whiteSpace';
-import wordBreak from './utilities/wordBreak';
-import writingDirection from './utilities/writingDirection';
+import {defaultTheme} from './theme';
+import colors from './theme/colors';
+import {type ThemeColors} from './theme/types';
+import addOutlineWidth from './utils/addOutlineWidth';
+import borders from './utils/borders';
+import codeStyles from './utils/codeStyles';
+import cursor from './utils/cursor';
+import display from './utils/display';
+import editedLabelStyles from './utils/editedLabelStyles';
+import flex from './utils/flex';
+import fontFamily from './utils/fontFamily';
+import fontWeightBold from './utils/fontWeight/bold';
+import getPopOverVerticalOffset from './utils/getPopOverVerticalOffset';
+import objectFit from './utils/objectFit';
+import optionAlternateTextPlatformStyles from './utils/optionAlternateTextPlatformStyles';
+import overflow from './utils/overflow';
+import overflowXHidden from './utils/overflowXHidden';
+import pointerEventsAuto from './utils/pointerEventsAuto';
+import pointerEventsBoxNone from './utils/pointerEventsBoxNone';
+import pointerEventsNone from './utils/pointerEventsNone';
+import positioning from './utils/positioning';
+import sizing from './utils/sizing';
+import spacing from './utils/spacing';
+import textDecorationLine from './utils/textDecorationLine';
+import textUnderline from './utils/textUnderline';
+import userSelect from './utils/userSelect';
+import visibility from './utils/visibility';
+import whiteSpace from './utils/whiteSpace';
+import wordBreak from './utils/wordBreak';
+import writingDirection from './utils/writingDirection';
 import variables from './variables';
 
 type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];
@@ -234,6 +235,7 @@ const styles = (theme: ThemeColors) =>
         ...textUnderline,
         ...objectFit,
         ...textDecorationLine,
+        editedLabelStyles,
 
         autoCompleteSuggestionsContainer: {
             backgroundColor: theme.appBG,
@@ -3998,7 +4000,7 @@ const styles = (theme: ThemeColors) =>
             left: 16,
             bottom: 16,
             width: variables.cardNameWidth,
-            color: theme.text,
+            color: theme.textLight,
             fontSize: variables.fontSizeSmall,
             lineHeight: variables.lineHeightLarge,
         },
@@ -4051,4 +4053,5 @@ type ThemeStyles = ReturnType<typeof styles>;
 const defaultStyles = styles(defaultTheme);
 
 export default styles;
-export {defaultStyles, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
+export {defaultStyles};
+export type {Styles, ThemeStyles, StatusBarStyle, ColorScheme};
diff --git a/src/styles/stylePropTypes.js b/src/styles/stylePropTypes.js
index b97decba621c..f9ecdb98ff13 100644
--- a/src/styles/stylePropTypes.js
+++ b/src/styles/stylePropTypes.js
@@ -1,3 +1,5 @@
 import PropTypes from 'prop-types';
 
-export default PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.func]);
+const stylePropTypes = PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object), PropTypes.func]);
+
+export default stylePropTypes;
diff --git a/src/styles/colors.ts b/src/styles/theme/colors.ts
similarity index 98%
rename from src/styles/colors.ts
rename to src/styles/theme/colors.ts
index 35d93f060c86..061336d2d114 100644
--- a/src/styles/colors.ts
+++ b/src/styles/theme/colors.ts
@@ -1,4 +1,4 @@
-import {Color} from './themes/types';
+import {Color} from './types';
 
 /**
  * DO NOT import colors.js into files. Use the theme switching hooks and HOCs instead.
diff --git a/src/styles/themes/ThemeContext.ts b/src/styles/theme/context/ThemeContext.ts
similarity index 59%
rename from src/styles/themes/ThemeContext.ts
rename to src/styles/theme/context/ThemeContext.ts
index ec35675953fe..64cd805b3f59 100644
--- a/src/styles/themes/ThemeContext.ts
+++ b/src/styles/theme/context/ThemeContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
-import {defaultTheme} from './themes';
-import {type ThemeColors} from './types';
+import {type ThemeColors} from '@styles/theme/types';
+import {defaultTheme} from '..';
 
 const ThemeContext = React.createContext<ThemeColors>(defaultTheme);
 
diff --git a/src/styles/theme/context/ThemeIllustrationsContext.ts b/src/styles/theme/context/ThemeIllustrationsContext.ts
new file mode 100644
index 000000000000..b70cf6aa5ea2
--- /dev/null
+++ b/src/styles/theme/context/ThemeIllustrationsContext.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+import {DefaultIllustrations} from '@styles/theme/illustrations';
+import {IllustrationsType} from '@styles/theme/illustrations/types';
+
+const ThemeIllustrationsContext = React.createContext<IllustrationsType>(DefaultIllustrations);
+
+export default ThemeIllustrationsContext;
diff --git a/src/styles/ThemeStylesContext.ts b/src/styles/theme/context/ThemeStylesContext.ts
similarity index 62%
rename from src/styles/ThemeStylesContext.ts
rename to src/styles/theme/context/ThemeStylesContext.ts
index 73f044f2dcbd..a1c81bbd9c7c 100644
--- a/src/styles/ThemeStylesContext.ts
+++ b/src/styles/theme/context/ThemeStylesContext.ts
@@ -1,8 +1,8 @@
 import React from 'react';
-import {defaultStyles} from './styles';
-import type {ThemeStyles} from './styles';
-import {DefaultStyleUtils} from './utils';
-import type {StyleUtilsType} from './utils';
+import {defaultStyles} from '@styles/index';
+import type {ThemeStyles} from '@styles/index';
+import {DefaultStyleUtils} from '@styles/utils';
+import type {StyleUtilsType} from '@styles/utils';
 
 type ThemeStylesContextType = {
     styles: ThemeStyles;
diff --git a/src/styles/theme/illustrations/index.ts b/src/styles/theme/illustrations/index.ts
new file mode 100644
index 000000000000..9526dbcd1023
--- /dev/null
+++ b/src/styles/theme/illustrations/index.ts
@@ -0,0 +1,15 @@
+import {ThemePreferenceWithoutSystem} from '@styles/theme/types';
+import CONST from '@src/CONST';
+import darkIllustrations from './themes/dark';
+import lightIllustrations from './themes/light';
+import type {IllustrationsType} from './types';
+
+const Illustrations = {
+    [CONST.THEME.LIGHT]: lightIllustrations,
+    [CONST.THEME.DARK]: darkIllustrations,
+} satisfies Record<ThemePreferenceWithoutSystem, IllustrationsType>;
+
+const DefaultIllustrations = Illustrations[CONST.THEME.FALLBACK];
+
+export default Illustrations;
+export {DefaultIllustrations};
diff --git a/src/styles/illustrations/dark.ts b/src/styles/theme/illustrations/themes/dark.ts
similarity index 80%
rename from src/styles/illustrations/dark.ts
rename to src/styles/theme/illustrations/themes/dark.ts
index ca52a24a4e4e..2a4390ae2520 100644
--- a/src/styles/illustrations/dark.ts
+++ b/src/styles/theme/illustrations/themes/dark.ts
@@ -1,12 +1,12 @@
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-dark.png';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-dark-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-dark-es.png';
-import {Illustrations} from './types';
+import {IllustrationsType} from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
     ExampleCheckEN,
     ExampleCheckES,
-} satisfies Illustrations;
+} satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/illustrations/light.ts b/src/styles/theme/illustrations/themes/light.ts
similarity index 80%
rename from src/styles/illustrations/light.ts
rename to src/styles/theme/illustrations/themes/light.ts
index a953a312327f..f41114a04efa 100644
--- a/src/styles/illustrations/light.ts
+++ b/src/styles/theme/illustrations/themes/light.ts
@@ -1,12 +1,12 @@
 import EmptyStateBackgroundImage from '@assets/images/themeDependent/empty-state_background-fade-light.png';
 import ExampleCheckEN from '@assets/images/themeDependent/example-check-image-light-en.png';
 import ExampleCheckES from '@assets/images/themeDependent/example-check-image-light-es.png';
-import {Illustrations} from './types';
+import {IllustrationsType} from '@styles/theme/illustrations/types';
 
 const illustrations = {
     EmptyStateBackgroundImage,
     ExampleCheckEN,
     ExampleCheckES,
-} satisfies Illustrations;
+} satisfies IllustrationsType;
 
 export default illustrations;
diff --git a/src/styles/illustrations/types.ts b/src/styles/theme/illustrations/types.ts
similarity index 80%
rename from src/styles/illustrations/types.ts
rename to src/styles/theme/illustrations/types.ts
index bfb1db4a19c1..bda98dc55fbf 100644
--- a/src/styles/illustrations/types.ts
+++ b/src/styles/theme/illustrations/types.ts
@@ -1,10 +1,10 @@
 import {ImageSourcePropType} from 'react-native';
 
-type Illustrations = {
+type IllustrationsType = {
     EmptyStateBackgroundImage: ImageSourcePropType;
     ExampleCheckES: ImageSourcePropType;
     ExampleCheckEN: ImageSourcePropType;
 };
 
 // eslint-disable-next-line import/prefer-default-export
-export {type Illustrations};
+export {type IllustrationsType};
diff --git a/src/styles/themes/themes.ts b/src/styles/theme/index.ts
similarity index 69%
rename from src/styles/themes/themes.ts
rename to src/styles/theme/index.ts
index c0a305df294f..c8c3a6ec12c1 100644
--- a/src/styles/themes/themes.ts
+++ b/src/styles/theme/index.ts
@@ -1,6 +1,6 @@
 import CONST from '@src/CONST';
-import darkTheme from './default';
-import lightTheme from './light';
+import darkTheme from './themes/dark';
+import lightTheme from './themes/light';
 import {type ThemeColors, ThemePreferenceWithoutSystem} from './types';
 
 const themes = {
@@ -8,7 +8,7 @@ const themes = {
     [CONST.THEME.DARK]: darkTheme,
 } satisfies Record<ThemePreferenceWithoutSystem, ThemeColors>;
 
-const defaultTheme = themes[CONST.THEME.DEFAULT];
+const defaultTheme = themes[CONST.THEME.FALLBACK];
 
 export default themes;
 export {defaultTheme};
diff --git a/src/styles/themes/default.ts b/src/styles/theme/themes/dark.ts
similarity index 98%
rename from src/styles/themes/default.ts
rename to src/styles/theme/themes/dark.ts
index ca48b139b107..714802095810 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -1,7 +1,7 @@
-import colors from '@styles/colors';
+import colors from '@styles/theme/colors';
+import {type ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {type ThemeColors} from './types';
 
 const darkTheme = {
     // Figma keys
diff --git a/src/styles/themes/light.ts b/src/styles/theme/themes/light.ts
similarity index 98%
rename from src/styles/themes/light.ts
rename to src/styles/theme/themes/light.ts
index 3c37ec4534d0..8d401f7533d7 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -1,7 +1,7 @@
-import colors from '@styles/colors';
+import colors from '@styles/theme/colors';
+import {type ThemeColors} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {type ThemeColors} from './types';
 
 const lightTheme = {
     // Figma keys
diff --git a/src/styles/themes/types.ts b/src/styles/theme/types.ts
similarity index 94%
rename from src/styles/themes/types.ts
rename to src/styles/theme/types.ts
index 3a123419c384..56da65ddd17d 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/theme/types.ts
@@ -1,10 +1,10 @@
-import {type ColorScheme, type StatusBarStyle} from '@styles/styles';
 import CONST from '@src/CONST';
+import {type ColorScheme, type StatusBarStyle} from '..';
 
 type Color = string;
 
 type ThemePreference = (typeof CONST.THEME)[keyof typeof CONST.THEME];
-type ThemePreferenceWithoutSystem = Exclude<ThemePreference, 'system'>;
+type ThemePreferenceWithoutSystem = Exclude<ThemePreference, typeof CONST.THEME.SYSTEM>;
 
 type ThemeColors = {
     // Figma keys
diff --git a/src/styles/addOutlineWidth/index.native.ts b/src/styles/utils/addOutlineWidth/index.native.ts
similarity index 100%
rename from src/styles/addOutlineWidth/index.native.ts
rename to src/styles/utils/addOutlineWidth/index.native.ts
diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/utils/addOutlineWidth/index.ts
similarity index 100%
rename from src/styles/addOutlineWidth/index.ts
rename to src/styles/utils/addOutlineWidth/index.ts
diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/utils/addOutlineWidth/types.ts
similarity index 76%
rename from src/styles/addOutlineWidth/types.ts
rename to src/styles/utils/addOutlineWidth/types.ts
index 91e3f7409259..f6b9be63893c 100644
--- a/src/styles/addOutlineWidth/types.ts
+++ b/src/styles/utils/addOutlineWidth/types.ts
@@ -1,5 +1,5 @@
 import {TextStyle} from 'react-native';
-import {type ThemeColors} from '@styles/themes/types';
+import {type ThemeColors} from '@styles/theme/types';
 
 type AddOutlineWidth = (theme: ThemeColors, obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
 
diff --git a/src/styles/utilities/borders.ts b/src/styles/utils/borders.ts
similarity index 100%
rename from src/styles/utilities/borders.ts
rename to src/styles/utils/borders.ts
diff --git a/src/styles/cardStyles/index.native.ts b/src/styles/utils/cardStyles/index.native.ts
similarity index 100%
rename from src/styles/cardStyles/index.native.ts
rename to src/styles/utils/cardStyles/index.native.ts
diff --git a/src/styles/cardStyles/index.ts b/src/styles/utils/cardStyles/index.ts
similarity index 81%
rename from src/styles/cardStyles/index.ts
rename to src/styles/utils/cardStyles/index.ts
index b5d3c069b73a..77a00695d20a 100644
--- a/src/styles/cardStyles/index.ts
+++ b/src/styles/utils/cardStyles/index.ts
@@ -1,4 +1,4 @@
-import positioning from '@styles/utilities/positioning';
+import positioning from '@styles/utils/positioning';
 import GetCardStyles from './types';
 
 /**
diff --git a/src/styles/cardStyles/types.ts b/src/styles/utils/cardStyles/types.ts
similarity index 100%
rename from src/styles/cardStyles/types.ts
rename to src/styles/utils/cardStyles/types.ts
diff --git a/src/styles/codeStyles/index.android.ts b/src/styles/utils/codeStyles/index.android.ts
similarity index 100%
rename from src/styles/codeStyles/index.android.ts
rename to src/styles/utils/codeStyles/index.android.ts
diff --git a/src/styles/codeStyles/index.ios.ts b/src/styles/utils/codeStyles/index.ios.ts
similarity index 100%
rename from src/styles/codeStyles/index.ios.ts
rename to src/styles/utils/codeStyles/index.ios.ts
diff --git a/src/styles/codeStyles/index.ts b/src/styles/utils/codeStyles/index.ts
similarity index 100%
rename from src/styles/codeStyles/index.ts
rename to src/styles/utils/codeStyles/index.ts
diff --git a/src/styles/codeStyles/types.ts b/src/styles/utils/codeStyles/types.ts
similarity index 100%
rename from src/styles/codeStyles/types.ts
rename to src/styles/utils/codeStyles/types.ts
diff --git a/src/styles/containerComposeStyles/index.native.ts b/src/styles/utils/containerComposeStyles/index.native.ts
similarity index 100%
rename from src/styles/containerComposeStyles/index.native.ts
rename to src/styles/utils/containerComposeStyles/index.native.ts
diff --git a/src/styles/containerComposeStyles/index.ts b/src/styles/utils/containerComposeStyles/index.ts
similarity index 100%
rename from src/styles/containerComposeStyles/index.ts
rename to src/styles/utils/containerComposeStyles/index.ts
diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/utils/containerComposeStyles/types.ts
similarity index 75%
rename from src/styles/containerComposeStyles/types.ts
rename to src/styles/utils/containerComposeStyles/types.ts
index 9930e0230016..2b2d23b7f8c1 100644
--- a/src/styles/containerComposeStyles/types.ts
+++ b/src/styles/utils/containerComposeStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type ContainerComposeStyles = (styles: ThemeStyles) => ViewStyle[];
 
diff --git a/src/styles/utilities/cursor/index.native.ts b/src/styles/utils/cursor/index.native.ts
similarity index 100%
rename from src/styles/utilities/cursor/index.native.ts
rename to src/styles/utils/cursor/index.native.ts
diff --git a/src/styles/utilities/cursor/index.ts b/src/styles/utils/cursor/index.ts
similarity index 100%
rename from src/styles/utilities/cursor/index.ts
rename to src/styles/utils/cursor/index.ts
diff --git a/src/styles/utilities/cursor/types.ts b/src/styles/utils/cursor/types.ts
similarity index 100%
rename from src/styles/utilities/cursor/types.ts
rename to src/styles/utils/cursor/types.ts
diff --git a/src/styles/utilities/display.ts b/src/styles/utils/display.ts
similarity index 100%
rename from src/styles/utilities/display.ts
rename to src/styles/utils/display.ts
diff --git a/src/styles/editedLabelStyles/index.native.ts b/src/styles/utils/editedLabelStyles/index.native.ts
similarity index 100%
rename from src/styles/editedLabelStyles/index.native.ts
rename to src/styles/utils/editedLabelStyles/index.native.ts
diff --git a/src/styles/editedLabelStyles/index.ts b/src/styles/utils/editedLabelStyles/index.ts
similarity index 67%
rename from src/styles/editedLabelStyles/index.ts
rename to src/styles/utils/editedLabelStyles/index.ts
index 339c50d8a4df..427918af1202 100644
--- a/src/styles/editedLabelStyles/index.ts
+++ b/src/styles/utils/editedLabelStyles/index.ts
@@ -1,5 +1,5 @@
-import display from '@styles/utilities/display';
-import flex from '@styles/utilities/flex';
+import display from '@styles/utils/display';
+import flex from '@styles/utils/flex';
 import EditedLabelStyles from './types';
 
 const editedLabelStyles: EditedLabelStyles = {
diff --git a/src/styles/editedLabelStyles/types.ts b/src/styles/utils/editedLabelStyles/types.ts
similarity index 100%
rename from src/styles/editedLabelStyles/types.ts
rename to src/styles/utils/editedLabelStyles/types.ts
diff --git a/src/styles/utilities/flex.ts b/src/styles/utils/flex.ts
similarity index 100%
rename from src/styles/utilities/flex.ts
rename to src/styles/utils/flex.ts
diff --git a/src/styles/fontFamily/bold/index.android.ts b/src/styles/utils/fontFamily/bold/index.android.ts
similarity index 100%
rename from src/styles/fontFamily/bold/index.android.ts
rename to src/styles/utils/fontFamily/bold/index.android.ts
diff --git a/src/styles/fontFamily/bold/index.ios.ts b/src/styles/utils/fontFamily/bold/index.ios.ts
similarity index 100%
rename from src/styles/fontFamily/bold/index.ios.ts
rename to src/styles/utils/fontFamily/bold/index.ios.ts
diff --git a/src/styles/fontFamily/bold/index.ts b/src/styles/utils/fontFamily/bold/index.ts
similarity index 100%
rename from src/styles/fontFamily/bold/index.ts
rename to src/styles/utils/fontFamily/bold/index.ts
diff --git a/src/styles/fontFamily/bold/types.ts b/src/styles/utils/fontFamily/bold/types.ts
similarity index 100%
rename from src/styles/fontFamily/bold/types.ts
rename to src/styles/utils/fontFamily/bold/types.ts
diff --git a/src/styles/fontFamily/index.native.ts b/src/styles/utils/fontFamily/index.native.ts
similarity index 100%
rename from src/styles/fontFamily/index.native.ts
rename to src/styles/utils/fontFamily/index.native.ts
diff --git a/src/styles/fontFamily/index.ts b/src/styles/utils/fontFamily/index.ts
similarity index 100%
rename from src/styles/fontFamily/index.ts
rename to src/styles/utils/fontFamily/index.ts
diff --git a/src/styles/fontFamily/multiFontFamily.ts b/src/styles/utils/fontFamily/multiFontFamily.ts
similarity index 100%
rename from src/styles/fontFamily/multiFontFamily.ts
rename to src/styles/utils/fontFamily/multiFontFamily.ts
diff --git a/src/styles/fontFamily/singleFontFamily.ts b/src/styles/utils/fontFamily/singleFontFamily.ts
similarity index 100%
rename from src/styles/fontFamily/singleFontFamily.ts
rename to src/styles/utils/fontFamily/singleFontFamily.ts
diff --git a/src/styles/fontFamily/types.ts b/src/styles/utils/fontFamily/types.ts
similarity index 100%
rename from src/styles/fontFamily/types.ts
rename to src/styles/utils/fontFamily/types.ts
diff --git a/src/styles/fontWeight/bold/index.android.ts b/src/styles/utils/fontWeight/bold/index.android.ts
similarity index 100%
rename from src/styles/fontWeight/bold/index.android.ts
rename to src/styles/utils/fontWeight/bold/index.android.ts
diff --git a/src/styles/fontWeight/bold/index.ts b/src/styles/utils/fontWeight/bold/index.ts
similarity index 100%
rename from src/styles/fontWeight/bold/index.ts
rename to src/styles/utils/fontWeight/bold/index.ts
diff --git a/src/styles/fontWeight/bold/types.ts b/src/styles/utils/fontWeight/bold/types.ts
similarity index 100%
rename from src/styles/fontWeight/bold/types.ts
rename to src/styles/utils/fontWeight/bold/types.ts
diff --git a/src/styles/utils/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
similarity index 95%
rename from src/styles/utils/ModalStyleUtils.ts
rename to src/styles/utils/generators/ModalStyleUtils.ts
index cf312a4e76f7..67faec504d61 100644
--- a/src/styles/utils/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -1,10 +1,10 @@
 import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
-import {type ThemeStyles} from '@styles/styles';
-import {type ThemeColors} from '@styles/themes/types';
+import {ThemeStyles} from '@styles/index';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import StyleUtilGenerator from './types';
 
 function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
@@ -36,14 +36,18 @@ type GetModalStyles = {
     shouldAddTopSafeAreaPadding: boolean;
 };
 
-const createModalStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
+type GetModalStylesStyleUtil = {
     getModalStyles: (
         type: ModalType | undefined,
         windowDimensions: WindowDimensions,
-        popoverAnchorPosition: ViewStyle = {},
-        innerContainerStyle: ViewStyle = {},
-        outerStyle: ViewStyle = {},
-    ): GetModalStyles => {
+        popoverAnchorPosition?: ViewStyle,
+        innerContainerStyle?: ViewStyle,
+        outerStyle?: ViewStyle,
+    ) => GetModalStyles;
+};
+
+const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({theme, styles}) => ({
+    getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}): GetModalStyles => {
         const {isSmallScreenWidth, windowWidth} = windowDimensions;
 
         let modalStyle: GetModalStyles['modalStyle'] = {
diff --git a/src/styles/utils/ReportActionContextMenuStyleUtils.ts b/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
similarity index 73%
rename from src/styles/utils/ReportActionContextMenuStyleUtils.ts
rename to src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
index 9dd3c2a0d203..10904fca05cd 100644
--- a/src/styles/utils/ReportActionContextMenuStyleUtils.ts
+++ b/src/styles/utils/generators/ReportActionContextMenuStyleUtils.ts
@@ -1,7 +1,8 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
-import {type ThemeColors} from '@styles/themes/types';
+import {ThemeStyles} from '@styles/index';
+import {type ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
+import StyleUtilGenerator from './types';
 
 const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
     backgroundColor: theme.componentBG,
@@ -20,6 +21,8 @@ const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle
     },
 ];
 
+type GetReportActionContextMenuStylesStyleUtil = {getReportActionContextMenuStyles: (isMini: boolean, isSmallScreenWidth: boolean) => ViewStyle[]};
+
 /**
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
@@ -27,8 +30,8 @@ const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle
  * @param isSmallScreenWidth
  * @param theme
  */
-const createReportActionContextMenuStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
-    getReportActionContextMenuStyles: (isMini: boolean, isSmallScreenWidth: boolean): ViewStyle[] => {
+const createReportActionContextMenuStyleUtils: StyleUtilGenerator<GetReportActionContextMenuStylesStyleUtil> = ({theme, styles}) => ({
+    getReportActionContextMenuStyles: (isMini, isSmallScreenWidth) => {
         if (isMini) {
             return getMiniWrapperStyle(theme, styles);
         }
diff --git a/src/styles/utils/TooltipStyleUtils.ts b/src/styles/utils/generators/TooltipStyleUtils.ts
similarity index 96%
rename from src/styles/utils/TooltipStyleUtils.ts
rename to src/styles/utils/generators/TooltipStyleUtils.ts
index 5c12a27ee981..0e9fda1a3388 100644
--- a/src/styles/utils/TooltipStyleUtils.ts
+++ b/src/styles/utils/generators/TooltipStyleUtils.ts
@@ -1,11 +1,10 @@
 import {Animated, TextStyle, View, ViewStyle} from 'react-native';
-import fontFamily from '@styles/fontFamily';
-import {type ThemeStyles} from '@styles/styles';
-import {type ThemeColors} from '@styles/themes/types';
-import positioning from '@styles/utilities/positioning';
-import spacing from '@styles/utilities/spacing';
+import fontFamily from '@styles/utils/fontFamily';
+import positioning from '@styles/utils/positioning';
+import roundToNearestMultipleOfFour from '@styles/utils/roundToNearestMultipleOfFour';
+import spacing from '@styles/utils/spacing';
 import variables from '@styles/variables';
-import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
+import StyleUtilGenerator from './types';
 
 /** This defines the proximity with the edge of the window in which tooltips should not be displayed.
  * If a tooltip is too close to the edge of the screen, we'll shift it towards the center. */
@@ -116,6 +115,8 @@ type TooltipParams = {
     manualShiftVertical?: number;
 };
 
+type GetTooltipStylesStyleUtil = {getTooltipStyles: (props: TooltipParams) => TooltipStyles};
+
 /**
  * Generate styles for the tooltip component.
  *
@@ -137,7 +138,7 @@ type TooltipParams = {
  * @param [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down.
  *                                       A positive value shifts it down, and a negative value shifts it up.
  */
-const createTooltipStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
+const createTooltipStyleUtils: StyleUtilGenerator<GetTooltipStylesStyleUtil> = ({theme, styles}) => ({
     getTooltipStyles: ({
         tooltip,
         currentSize,
@@ -151,7 +152,7 @@ const createTooltipStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         tooltipWrapperHeight,
         manualShiftHorizontal = 0,
         manualShiftVertical = 0,
-    }: TooltipParams): TooltipStyles => {
+    }) => {
         const tooltipVerticalPadding = spacing.pv1;
 
         // We calculate tooltip width based on the tooltip's content width
diff --git a/src/styles/utils/generators/types.ts b/src/styles/utils/generators/types.ts
new file mode 100644
index 000000000000..ca6a630d94c5
--- /dev/null
+++ b/src/styles/utils/generators/types.ts
@@ -0,0 +1,6 @@
+import {ThemeStyles} from '@styles/index';
+import {ThemeColors} from '@styles/theme/types';
+
+type StyleUtilGenerator<StyleUtil = Record<string, unknown>> = (props: {theme: ThemeColors; styles: ThemeStyles}) => StyleUtil;
+
+export default StyleUtilGenerator;
diff --git a/src/styles/getContextMenuItemStyles/index.native.ts b/src/styles/utils/getContextMenuItemStyles/index.native.ts
similarity index 100%
rename from src/styles/getContextMenuItemStyles/index.native.ts
rename to src/styles/utils/getContextMenuItemStyles/index.native.ts
diff --git a/src/styles/getContextMenuItemStyles/index.ts b/src/styles/utils/getContextMenuItemStyles/index.ts
similarity index 100%
rename from src/styles/getContextMenuItemStyles/index.ts
rename to src/styles/utils/getContextMenuItemStyles/index.ts
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/utils/getContextMenuItemStyles/types.ts
similarity index 77%
rename from src/styles/getContextMenuItemStyles/types.ts
rename to src/styles/utils/getContextMenuItemStyles/types.ts
index 376fb8d46d7c..06b989becf8a 100644
--- a/src/styles/getContextMenuItemStyles/types.ts
+++ b/src/styles/utils/getContextMenuItemStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type GetContextMenuItemStyle = (styles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
diff --git a/src/styles/getNavigationModalCardStyles/index.desktop.ts b/src/styles/utils/getNavigationModalCardStyles/index.desktop.ts
similarity index 90%
rename from src/styles/getNavigationModalCardStyles/index.desktop.ts
rename to src/styles/utils/getNavigationModalCardStyles/index.desktop.ts
index 9e182636ad76..523f82048a02 100644
--- a/src/styles/getNavigationModalCardStyles/index.desktop.ts
+++ b/src/styles/utils/getNavigationModalCardStyles/index.desktop.ts
@@ -1,4 +1,4 @@
-import positioning from '@styles/utilities/positioning';
+import positioning from '@styles/utils/positioning';
 import GetNavigationModalCardStyles from './types';
 
 const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
diff --git a/src/styles/getNavigationModalCardStyles/index.ts b/src/styles/utils/getNavigationModalCardStyles/index.ts
similarity index 100%
rename from src/styles/getNavigationModalCardStyles/index.ts
rename to src/styles/utils/getNavigationModalCardStyles/index.ts
diff --git a/src/styles/getNavigationModalCardStyles/index.website.ts b/src/styles/utils/getNavigationModalCardStyles/index.website.ts
similarity index 90%
rename from src/styles/getNavigationModalCardStyles/index.website.ts
rename to src/styles/utils/getNavigationModalCardStyles/index.website.ts
index 9e182636ad76..523f82048a02 100644
--- a/src/styles/getNavigationModalCardStyles/index.website.ts
+++ b/src/styles/utils/getNavigationModalCardStyles/index.website.ts
@@ -1,4 +1,4 @@
-import positioning from '@styles/utilities/positioning';
+import positioning from '@styles/utils/positioning';
 import GetNavigationModalCardStyles from './types';
 
 const getNavigationModalCardStyles: GetNavigationModalCardStyles = () => ({
diff --git a/src/styles/getNavigationModalCardStyles/types.ts b/src/styles/utils/getNavigationModalCardStyles/types.ts
similarity index 100%
rename from src/styles/getNavigationModalCardStyles/types.ts
rename to src/styles/utils/getNavigationModalCardStyles/types.ts
diff --git a/src/styles/getPopOverVerticalOffset/index.desktop.ts b/src/styles/utils/getPopOverVerticalOffset/index.desktop.ts
similarity index 100%
rename from src/styles/getPopOverVerticalOffset/index.desktop.ts
rename to src/styles/utils/getPopOverVerticalOffset/index.desktop.ts
diff --git a/src/styles/getPopOverVerticalOffset/index.ts b/src/styles/utils/getPopOverVerticalOffset/index.ts
similarity index 100%
rename from src/styles/getPopOverVerticalOffset/index.ts
rename to src/styles/utils/getPopOverVerticalOffset/index.ts
diff --git a/src/styles/getPopOverVerticalOffset/types.ts b/src/styles/utils/getPopOverVerticalOffset/types.ts
similarity index 100%
rename from src/styles/getPopOverVerticalOffset/types.ts
rename to src/styles/utils/getPopOverVerticalOffset/types.ts
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 59bba2073a0c..c392e61f0814 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1,65 +1,38 @@
 import {CSSProperties} from 'react';
-import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
-import colors from '@styles/colors';
-import containerComposeStyles from '@styles/containerComposeStyles';
-import fontFamily from '@styles/fontFamily';
-import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
-import {compactContentContainerStyles} from '@styles/optionRowStyles';
-import {defaultStyles, type ThemeStyles} from '@styles/styles';
-import {defaultTheme} from '@styles/themes/themes';
-import {ThemeColors} from '@styles/themes/types';
-import cursor from '@styles/utilities/cursor';
-import positioning from '@styles/utilities/positioning';
-import spacing from '@styles/utilities/spacing';
+import {defaultTheme} from '@styles/theme';
+import colors from '@styles/theme/colors';
+import {ThemeColors} from '@styles/theme/types';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
-import createModalStyleUtils from './ModalStyleUtils';
-import createReportActionContextMenuStyleUtils from './ReportActionContextMenuStyleUtils';
-import createTooltipStyleUtils from './TooltipStyleUtils';
-
-type AllStyles = ViewStyle | TextStyle | ImageStyle;
-type ParsableStyle = StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
-
-type ColorValue = ValueOf<typeof colors>;
-type AvatarSizeName = ValueOf<typeof CONST.AVATAR_SIZE>;
-type EReceiptColorName = ValueOf<typeof CONST.ERECEIPT_COLORS>;
-type AvatarSizeValue = ValueOf<
-    Pick<
-        typeof variables,
-        | 'avatarSizeNormal'
-        | 'avatarSizeSmallSubscript'
-        | 'avatarSizeMidSubscript'
-        | 'avatarSizeSubscript'
-        | 'avatarSizeSmall'
-        | 'avatarSizeSmaller'
-        | 'avatarSizeXLarge'
-        | 'avatarSizeLarge'
-        | 'avatarSizeMedium'
-        | 'avatarSizeLargeBordered'
-        | 'avatarSizeHeader'
-        | 'avatarSizeMentionIcon'
-        | 'avatarSizeSmallNormal'
-    >
->;
-
-type AvatarStyle = {
-    width: number;
-    height: number;
-    borderRadius: number;
-    backgroundColor: string;
-};
-
-type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
-type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
-type AvatarSize = {width: number};
-
-type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
-type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+import {defaultStyles, type ThemeStyles} from '..';
+import containerComposeStyles from './containerComposeStyles';
+import fontFamily from './fontFamily';
+import createModalStyleUtils from './generators/ModalStyleUtils';
+import createReportActionContextMenuStyleUtils from './generators/ReportActionContextMenuStyleUtils';
+import createTooltipStyleUtils from './generators/TooltipStyleUtils';
+import getContextMenuItemStyles from './getContextMenuItemStyles';
+import {compactContentContainerStyles} from './optionRowStyles';
+import positioning from './positioning';
+import spacing from './spacing';
+import {
+    AllStyles,
+    AvatarSize,
+    AvatarSizeName,
+    AvatarSizeValue,
+    AvatarStyle,
+    ButtonSizeValue,
+    ButtonStateName,
+    EReceiptColorName,
+    EreceiptColorStyle,
+    ParsableStyle,
+    WorkspaceColorStyle,
+} from './types';
 
 const workspaceColorOptions: WorkspaceColorStyle[] = [
     {backgroundColor: colors.blue200, fill: colors.blue700},
@@ -1103,9 +1076,13 @@ const staticStyleUtils = {
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     ...staticStyleUtils,
-    ...createModalStyleUtils(theme, styles),
-    ...createTooltipStyleUtils(theme, styles),
-    ...createReportActionContextMenuStyleUtils(theme, styles),
+    ...createModalStyleUtils({theme, styles}),
+    ...createTooltipStyleUtils({theme, styles}),
+    ...createReportActionContextMenuStyleUtils({theme, styles}),
+
+    getCompactContentContainerStyles: () => compactContentContainerStyles(styles),
+    getContextMenuItemStyles: (windowWidth?: number) => getContextMenuItemStyles(styles, windowWidth),
+    getContainerComposeStyles: () => containerComposeStyles(styles),
 
     /**
      * Gets styles for AutoCompleteSuggestion row
@@ -1236,7 +1213,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getDisabledLinkStyles: (isDisabled = false): ViewStyle => {
         const disabledLinkStyles = {
             color: theme.textSupporting,
-            ...cursor.cursorDisabled,
+            ...styles.cursorDisabled,
         };
 
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
@@ -1453,12 +1430,6 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
 
         return containerStyles;
     },
-
-    getCompactContentContainerStyles: () => compactContentContainerStyles(styles),
-
-    getContextMenuItemStyles: (windowWidth?: number) => getContextMenuItemStyles(styles, windowWidth),
-
-    getContainerComposeStyles: () => containerComposeStyles(styles),
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;
diff --git a/src/styles/italic/index.android.ts b/src/styles/utils/italic/index.android.ts
similarity index 100%
rename from src/styles/italic/index.android.ts
rename to src/styles/utils/italic/index.android.ts
diff --git a/src/styles/italic/index.ts b/src/styles/utils/italic/index.ts
similarity index 100%
rename from src/styles/italic/index.ts
rename to src/styles/utils/italic/index.ts
diff --git a/src/styles/italic/types.ts b/src/styles/utils/italic/types.ts
similarity index 100%
rename from src/styles/italic/types.ts
rename to src/styles/utils/italic/types.ts
diff --git a/src/styles/utilities/objectFit.ts b/src/styles/utils/objectFit.ts
similarity index 100%
rename from src/styles/utilities/objectFit.ts
rename to src/styles/utils/objectFit.ts
diff --git a/src/styles/optionAlternateTextPlatformStyles/index.ios.ts b/src/styles/utils/optionAlternateTextPlatformStyles/index.ios.ts
similarity index 100%
rename from src/styles/optionAlternateTextPlatformStyles/index.ios.ts
rename to src/styles/utils/optionAlternateTextPlatformStyles/index.ios.ts
diff --git a/src/styles/optionAlternateTextPlatformStyles/index.ts b/src/styles/utils/optionAlternateTextPlatformStyles/index.ts
similarity index 100%
rename from src/styles/optionAlternateTextPlatformStyles/index.ts
rename to src/styles/utils/optionAlternateTextPlatformStyles/index.ts
diff --git a/src/styles/optionAlternateTextPlatformStyles/types.ts b/src/styles/utils/optionAlternateTextPlatformStyles/types.ts
similarity index 100%
rename from src/styles/optionAlternateTextPlatformStyles/types.ts
rename to src/styles/utils/optionAlternateTextPlatformStyles/types.ts
diff --git a/src/styles/optionRowStyles/index.native.ts b/src/styles/utils/optionRowStyles/index.native.ts
similarity index 100%
rename from src/styles/optionRowStyles/index.native.ts
rename to src/styles/utils/optionRowStyles/index.native.ts
diff --git a/src/styles/optionRowStyles/index.ts b/src/styles/utils/optionRowStyles/index.ts
similarity index 100%
rename from src/styles/optionRowStyles/index.ts
rename to src/styles/utils/optionRowStyles/index.ts
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/utils/optionRowStyles/types.ts
similarity index 76%
rename from src/styles/optionRowStyles/types.ts
rename to src/styles/utils/optionRowStyles/types.ts
index 3425d7812be2..a31b94e0fc79 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/utils/optionRowStyles/types.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import {type ThemeStyles} from '@styles/styles';
+import {type ThemeStyles} from '@styles/index';
 
 type CompactContentContainerStyles = (styles: ThemeStyles) => ViewStyle;
 
diff --git a/src/styles/utilities/overflow.ts b/src/styles/utils/overflow.ts
similarity index 100%
rename from src/styles/utilities/overflow.ts
rename to src/styles/utils/overflow.ts
diff --git a/src/styles/utilities/overflowAuto/index.native.ts b/src/styles/utils/overflowAuto/index.native.ts
similarity index 100%
rename from src/styles/utilities/overflowAuto/index.native.ts
rename to src/styles/utils/overflowAuto/index.native.ts
diff --git a/src/styles/utilities/overflowAuto/index.ts b/src/styles/utils/overflowAuto/index.ts
similarity index 100%
rename from src/styles/utilities/overflowAuto/index.ts
rename to src/styles/utils/overflowAuto/index.ts
diff --git a/src/styles/utilities/overflowAuto/types.ts b/src/styles/utils/overflowAuto/types.ts
similarity index 100%
rename from src/styles/utilities/overflowAuto/types.ts
rename to src/styles/utils/overflowAuto/types.ts
diff --git a/src/styles/overflowXHidden/index.native.ts b/src/styles/utils/overflowXHidden/index.native.ts
similarity index 100%
rename from src/styles/overflowXHidden/index.native.ts
rename to src/styles/utils/overflowXHidden/index.native.ts
diff --git a/src/styles/overflowXHidden/index.ts b/src/styles/utils/overflowXHidden/index.ts
similarity index 100%
rename from src/styles/overflowXHidden/index.ts
rename to src/styles/utils/overflowXHidden/index.ts
diff --git a/src/styles/overflowXHidden/types.ts b/src/styles/utils/overflowXHidden/types.ts
similarity index 100%
rename from src/styles/overflowXHidden/types.ts
rename to src/styles/utils/overflowXHidden/types.ts
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.native.ts b/src/styles/utils/overscrollBehaviorContain/index.native.ts
similarity index 100%
rename from src/styles/utilities/overscrollBehaviorContain/index.native.ts
rename to src/styles/utils/overscrollBehaviorContain/index.native.ts
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.ts b/src/styles/utils/overscrollBehaviorContain/index.ts
similarity index 100%
rename from src/styles/utilities/overscrollBehaviorContain/index.ts
rename to src/styles/utils/overscrollBehaviorContain/index.ts
diff --git a/src/styles/utilities/overscrollBehaviorContain/types.ts b/src/styles/utils/overscrollBehaviorContain/types.ts
similarity index 100%
rename from src/styles/utilities/overscrollBehaviorContain/types.ts
rename to src/styles/utils/overscrollBehaviorContain/types.ts
diff --git a/src/styles/pointerEventsAuto/index.native.ts b/src/styles/utils/pointerEventsAuto/index.native.ts
similarity index 100%
rename from src/styles/pointerEventsAuto/index.native.ts
rename to src/styles/utils/pointerEventsAuto/index.native.ts
diff --git a/src/styles/pointerEventsAuto/index.ts b/src/styles/utils/pointerEventsAuto/index.ts
similarity index 100%
rename from src/styles/pointerEventsAuto/index.ts
rename to src/styles/utils/pointerEventsAuto/index.ts
diff --git a/src/styles/pointerEventsAuto/types.ts b/src/styles/utils/pointerEventsAuto/types.ts
similarity index 100%
rename from src/styles/pointerEventsAuto/types.ts
rename to src/styles/utils/pointerEventsAuto/types.ts
diff --git a/src/styles/pointerEventsBoxNone/index.native.ts b/src/styles/utils/pointerEventsBoxNone/index.native.ts
similarity index 100%
rename from src/styles/pointerEventsBoxNone/index.native.ts
rename to src/styles/utils/pointerEventsBoxNone/index.native.ts
diff --git a/src/styles/pointerEventsBoxNone/index.ts b/src/styles/utils/pointerEventsBoxNone/index.ts
similarity index 100%
rename from src/styles/pointerEventsBoxNone/index.ts
rename to src/styles/utils/pointerEventsBoxNone/index.ts
diff --git a/src/styles/pointerEventsBoxNone/types.ts b/src/styles/utils/pointerEventsBoxNone/types.ts
similarity index 100%
rename from src/styles/pointerEventsBoxNone/types.ts
rename to src/styles/utils/pointerEventsBoxNone/types.ts
diff --git a/src/styles/pointerEventsNone/index.native.ts b/src/styles/utils/pointerEventsNone/index.native.ts
similarity index 100%
rename from src/styles/pointerEventsNone/index.native.ts
rename to src/styles/utils/pointerEventsNone/index.native.ts
diff --git a/src/styles/pointerEventsNone/index.ts b/src/styles/utils/pointerEventsNone/index.ts
similarity index 100%
rename from src/styles/pointerEventsNone/index.ts
rename to src/styles/utils/pointerEventsNone/index.ts
diff --git a/src/styles/pointerEventsNone/types.ts b/src/styles/utils/pointerEventsNone/types.ts
similarity index 100%
rename from src/styles/pointerEventsNone/types.ts
rename to src/styles/utils/pointerEventsNone/types.ts
diff --git a/src/styles/utilities/positioning.ts b/src/styles/utils/positioning.ts
similarity index 100%
rename from src/styles/utilities/positioning.ts
rename to src/styles/utils/positioning.ts
diff --git a/src/styles/utilities/sizing.ts b/src/styles/utils/sizing.ts
similarity index 100%
rename from src/styles/utilities/sizing.ts
rename to src/styles/utils/sizing.ts
diff --git a/src/styles/utilities/spacing.ts b/src/styles/utils/spacing.ts
similarity index 100%
rename from src/styles/utilities/spacing.ts
rename to src/styles/utils/spacing.ts
diff --git a/src/styles/utilities/textDecorationLine.ts b/src/styles/utils/textDecorationLine.ts
similarity index 100%
rename from src/styles/utilities/textDecorationLine.ts
rename to src/styles/utils/textDecorationLine.ts
diff --git a/src/styles/utilities/textUnderline/index.native.ts b/src/styles/utils/textUnderline/index.native.ts
similarity index 100%
rename from src/styles/utilities/textUnderline/index.native.ts
rename to src/styles/utils/textUnderline/index.native.ts
diff --git a/src/styles/utilities/textUnderline/index.ts b/src/styles/utils/textUnderline/index.ts
similarity index 100%
rename from src/styles/utilities/textUnderline/index.ts
rename to src/styles/utils/textUnderline/index.ts
diff --git a/src/styles/utilities/textUnderline/types.ts b/src/styles/utils/textUnderline/types.ts
similarity index 100%
rename from src/styles/utilities/textUnderline/types.ts
rename to src/styles/utils/textUnderline/types.ts
diff --git a/src/styles/utils/types.ts b/src/styles/utils/types.ts
new file mode 100644
index 000000000000..c7e1fc60a142
--- /dev/null
+++ b/src/styles/utils/types.ts
@@ -0,0 +1,59 @@
+import {ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {ValueOf} from 'type-fest';
+import type colors from '@styles/theme/colors';
+import type variables from '@styles/variables';
+import type CONST from '@src/CONST';
+
+type AllStyles = ViewStyle | TextStyle | ImageStyle;
+type ParsableStyle = StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+
+type ColorValue = ValueOf<typeof colors>;
+type AvatarSizeName = ValueOf<typeof CONST.AVATAR_SIZE>;
+type EReceiptColorName = ValueOf<typeof CONST.ERECEIPT_COLORS>;
+type AvatarSizeValue = ValueOf<
+    Pick<
+        typeof variables,
+        | 'avatarSizeNormal'
+        | 'avatarSizeSmallSubscript'
+        | 'avatarSizeMidSubscript'
+        | 'avatarSizeSubscript'
+        | 'avatarSizeSmall'
+        | 'avatarSizeSmaller'
+        | 'avatarSizeXLarge'
+        | 'avatarSizeLarge'
+        | 'avatarSizeMedium'
+        | 'avatarSizeLargeBordered'
+        | 'avatarSizeHeader'
+        | 'avatarSizeMentionIcon'
+        | 'avatarSizeSmallNormal'
+    >
+>;
+
+type AvatarStyle = {
+    width: number;
+    height: number;
+    borderRadius: number;
+    backgroundColor: string;
+};
+
+type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
+type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
+type AvatarSize = {width: number};
+
+type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
+type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+
+export type {
+    AllStyles,
+    ParsableStyle,
+    ColorValue,
+    AvatarSizeName,
+    EReceiptColorName,
+    AvatarSizeValue,
+    AvatarStyle,
+    ButtonSizeValue,
+    ButtonStateName,
+    AvatarSize,
+    WorkspaceColorStyle,
+    EreceiptColorStyle,
+};
diff --git a/src/styles/utilities/userSelect/index.native.ts b/src/styles/utils/userSelect/index.native.ts
similarity index 100%
rename from src/styles/utilities/userSelect/index.native.ts
rename to src/styles/utils/userSelect/index.native.ts
diff --git a/src/styles/utilities/userSelect/index.ts b/src/styles/utils/userSelect/index.ts
similarity index 100%
rename from src/styles/utilities/userSelect/index.ts
rename to src/styles/utils/userSelect/index.ts
diff --git a/src/styles/utilities/userSelect/types.ts b/src/styles/utils/userSelect/types.ts
similarity index 100%
rename from src/styles/utilities/userSelect/types.ts
rename to src/styles/utils/userSelect/types.ts
diff --git a/src/styles/utilities/visibility/index.native.ts b/src/styles/utils/visibility/index.native.ts
similarity index 100%
rename from src/styles/utilities/visibility/index.native.ts
rename to src/styles/utils/visibility/index.native.ts
diff --git a/src/styles/utilities/visibility/index.ts b/src/styles/utils/visibility/index.ts
similarity index 100%
rename from src/styles/utilities/visibility/index.ts
rename to src/styles/utils/visibility/index.ts
diff --git a/src/styles/utilities/visibility/types.ts b/src/styles/utils/visibility/types.ts
similarity index 100%
rename from src/styles/utilities/visibility/types.ts
rename to src/styles/utils/visibility/types.ts
diff --git a/src/styles/utilities/whiteSpace/index.native.ts b/src/styles/utils/whiteSpace/index.native.ts
similarity index 100%
rename from src/styles/utilities/whiteSpace/index.native.ts
rename to src/styles/utils/whiteSpace/index.native.ts
diff --git a/src/styles/utilities/whiteSpace/index.ts b/src/styles/utils/whiteSpace/index.ts
similarity index 100%
rename from src/styles/utilities/whiteSpace/index.ts
rename to src/styles/utils/whiteSpace/index.ts
diff --git a/src/styles/utilities/whiteSpace/types.ts b/src/styles/utils/whiteSpace/types.ts
similarity index 100%
rename from src/styles/utilities/whiteSpace/types.ts
rename to src/styles/utils/whiteSpace/types.ts
diff --git a/src/styles/utilities/wordBreak/index.native.ts b/src/styles/utils/wordBreak/index.native.ts
similarity index 100%
rename from src/styles/utilities/wordBreak/index.native.ts
rename to src/styles/utils/wordBreak/index.native.ts
diff --git a/src/styles/utilities/wordBreak/index.ts b/src/styles/utils/wordBreak/index.ts
similarity index 100%
rename from src/styles/utilities/wordBreak/index.ts
rename to src/styles/utils/wordBreak/index.ts
diff --git a/src/styles/utilities/wordBreak/types.ts b/src/styles/utils/wordBreak/types.ts
similarity index 100%
rename from src/styles/utilities/wordBreak/types.ts
rename to src/styles/utils/wordBreak/types.ts
diff --git a/src/styles/utilities/writingDirection.ts b/src/styles/utils/writingDirection.ts
similarity index 100%
rename from src/styles/utilities/writingDirection.ts
rename to src/styles/utils/writingDirection.ts
diff --git a/src/types/modules/material-top-tabs.d.ts b/src/types/modules/material-top-tabs.d.ts
new file mode 100644
index 000000000000..693d82d07c57
--- /dev/null
+++ b/src/types/modules/material-top-tabs.d.ts
@@ -0,0 +1,8 @@
+/** This direct import is required, because this function was added by a patch,
+ *  and its typings are not supported by default */
+import {useTabAnimation} from '@react-navigation/material-top-tabs/src/utils/useTabAnimation';
+
+declare module '@react-navigation/material-top-tabs' {
+    // eslint-disable-next-line import/prefer-default-export
+    export {useTabAnimation};
+}
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index ed44d3088ae0..93bb2cb94d30 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -20,7 +20,7 @@ import * as Pusher from '../../src/libs/Pusher/pusher';
 import PusherConnectionManager from '../../src/libs/PusherConnectionManager';
 import ONYXKEYS from '../../src/ONYXKEYS';
 import appSetup from '../../src/setup';
-import fontWeightBold from '../../src/styles/fontWeight/bold';
+import fontWeightBold from '../../src/styles/utils/fontWeight/bold';
 import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
diff --git a/tests/unit/ReportActionsUtilsTest.js b/tests/unit/ReportActionsUtilsTest.js
index b8b6eb5e7673..545d442e4799 100644
--- a/tests/unit/ReportActionsUtilsTest.js
+++ b/tests/unit/ReportActionsUtilsTest.js
@@ -288,7 +288,7 @@ describe('ReportActionsUtils', () => {
             expect(result).toStrictEqual(input);
         });
 
-        it('should filter out deleted, non-pending comments', () => {
+        it('should filter out deleted and delete-pending comments', () => {
             const input = [
                 {
                     created: '2022-11-13 22:27:01.825',
@@ -312,6 +312,7 @@ describe('ReportActionsUtils', () => {
             ];
             const result = ReportActionsUtils.getSortedReportActionsForDisplay(input);
             input.pop();
+            input.pop();
             expect(result).toStrictEqual(input);
         });
     });

From cbca3516939ea7e4748ccb7dd1396d7fa1c0a3a9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 19:41:59 +0100
Subject: [PATCH 124/244] Migrate MenuItemWithTopDescription to TS

---
 src/components/MenuItemWithTopDescription.js  | 32 -------------------
 src/components/MenuItemWithTopDescription.tsx | 19 +++++++++++
 2 files changed, 19 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/MenuItemWithTopDescription.js
 create mode 100644 src/components/MenuItemWithTopDescription.tsx

diff --git a/src/components/MenuItemWithTopDescription.js b/src/components/MenuItemWithTopDescription.js
deleted file mode 100644
index 8215b7eb3a19..000000000000
--- a/src/components/MenuItemWithTopDescription.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import MenuItem from './MenuItem';
-import menuItemPropTypes from './menuItemPropTypes';
-
-const propTypes = menuItemPropTypes;
-
-function MenuItemWithTopDescription(props) {
-    return (
-        <MenuItem
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            ref={props.forwardedRef}
-            shouldShowBasicTitle
-            shouldShowDescriptionOnTop
-        />
-    );
-}
-
-MenuItemWithTopDescription.propTypes = propTypes;
-MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription';
-
-const MenuItemWithTopDescriptionWithRef = React.forwardRef((props, ref) => (
-    <MenuItemWithTopDescription
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-MenuItemWithTopDescriptionWithRef.displayName = 'MenuItemWithTopDescriptionWithRef';
-
-export default MenuItemWithTopDescriptionWithRef;
diff --git a/src/components/MenuItemWithTopDescription.tsx b/src/components/MenuItemWithTopDescription.tsx
new file mode 100644
index 000000000000..98dedd9d81a6
--- /dev/null
+++ b/src/components/MenuItemWithTopDescription.tsx
@@ -0,0 +1,19 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import {View} from 'react-native';
+import MenuItem, {MenuItemProps} from './MenuItem';
+
+function MenuItemWithTopDescription(props: MenuItemProps, ref: ForwardedRef<View>) {
+    return (
+        <MenuItem
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            shouldShowBasicTitle
+            shouldShowDescriptionOnTop
+        />
+    );
+}
+
+MenuItemWithTopDescription.displayName = 'MenuItemWithTopDescription';
+
+export default forwardRef(MenuItemWithTopDescription);

From 29c23d1ec3ad4855d2ef01d3e7e8defa292a2141 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 20:32:13 +0100
Subject: [PATCH 125/244] Restore menuItemPropTypes

---
 src/components/menuItemPropTypes.js | 167 ++++++++++++++++++++++++++++
 1 file changed, 167 insertions(+)
 create mode 100644 src/components/menuItemPropTypes.js

diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
new file mode 100644
index 000000000000..4d2de3275e23
--- /dev/null
+++ b/src/components/menuItemPropTypes.js
@@ -0,0 +1,167 @@
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import stylePropTypes from '@styles/stylePropTypes';
+import CONST from '@src/CONST';
+import avatarPropTypes from './avatarPropTypes';
+import refPropTypes from './refPropTypes';
+
+const propTypes = {
+    /** Text to be shown as badge near the right end. */
+    badgeText: PropTypes.string,
+
+    /** Any additional styles to apply */
+    // eslint-disable-next-line react/forbid-prop-types
+    wrapperStyle: stylePropTypes,
+
+    /** Used to apply offline styles to child text components */
+    style: stylePropTypes,
+
+    /** Used to apply styles specifically to the title */
+    titleStyle: stylePropTypes,
+
+    /** Function to fire when component is pressed */
+    onPress: PropTypes.func,
+
+    /** Icon to display on the left side of component */
+    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string, PropTypes.arrayOf(avatarPropTypes)]),
+
+    /** Secondary icon to display on the left side of component, right of the icon */
+    secondaryIcon: PropTypes.elementType,
+
+    /** Icon Width */
+    iconWidth: PropTypes.number,
+
+    /** Icon Height */
+    iconHeight: PropTypes.number,
+
+    /** Text to display for the item */
+    title: PropTypes.string,
+
+    /** Text that appears above the title */
+    label: PropTypes.string,
+
+    /** Boolean whether to display the title right icon */
+    shouldShowTitleIcon: PropTypes.bool,
+
+    /** Icon to display at right side of title */
+    titleIcon: PropTypes.func,
+
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon: PropTypes.bool,
+
+    /** Should we make this selectable with a checkbox */
+    shouldShowSelectedState: PropTypes.bool,
+
+    /** Should the title show with normal font weight (not bold) */
+    shouldShowBasicTitle: PropTypes.bool,
+
+    /** Should the description be shown above the title (instead of the other way around) */
+    shouldShowDescriptionOnTop: PropTypes.bool,
+
+    /** Whether this item is selected */
+    isSelected: PropTypes.bool,
+
+    /** A boolean flag that gives the icon a green fill if true */
+    success: PropTypes.bool,
+
+    /** Overrides the icon for shouldShowRightIcon */
+    iconRight: PropTypes.elementType,
+
+    /** A description text to show under the title */
+    description: PropTypes.string,
+
+    /** Any additional styles to pass to the icon container. */
+    iconStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** The fill color to pass into the icon. */
+    iconFill: PropTypes.string,
+
+    /** The fill color to pass into the secondary icon. */
+    secondaryIconFill: PropTypes.string,
+
+    /** Whether item is focused or active */
+    focused: PropTypes.bool,
+
+    /** Should we disable this menu item? */
+    disabled: PropTypes.bool,
+
+    /** A right-aligned subtitle for this menu option */
+    subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /** Flag to choose between avatar image or an icon */
+    iconType: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_ICON, CONST.ICON_TYPE_WORKSPACE]),
+
+    /** Whether the menu item should be interactive at all */
+    interactive: PropTypes.bool,
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
+    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+
+    /** Avatars to show on the right of the menu item */
+    floatRightAvatars: PropTypes.arrayOf(avatarPropTypes),
+
+    /** The type of brick road indicator to show. */
+    brickRoadIndicator: PropTypes.oneOf([CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR, CONST.BRICK_ROAD_INDICATOR_STATUS.INFO, '']),
+
+    /** Prop to identify if we should load avatars vertically instead of diagonally */
+    shouldStackHorizontally: PropTypes.bool,
+
+    /** Prop to represent the size of the float right avatar images to be shown */
+    floatRightAvatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
+    /** Prop to represent the size of the avatar images to be shown */
+    avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
+    /** The function that should be called when this component is LongPressed or right-clicked. */
+    onSecondaryInteraction: PropTypes.func,
+
+    /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
+    shouldBlockSelection: PropTypes.bool,
+
+    /** The ref to the menu item */
+    forwardedRef: refPropTypes,
+
+    /** Any adjustments to style when menu item is hovered or pressed */
+    hoverAndPressStyle: PropTypes.arrayOf(PropTypes.object),
+
+    /** Text to display under the main item */
+    furtherDetails: PropTypes.string,
+
+    /** An icon to display under the main item */
+    furtherDetailsIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+
+    /** The action accept for anonymous user or not */
+    isAnonymousAction: PropTypes.bool,
+
+    /**  Whether we should use small avatar subscript sizing the for menu item */
+    isSmallAvatarSubscriptMenu: PropTypes.bool,
+
+    /** The max number of lines the title text should occupy before ellipses are added */
+    numberOfLines: PropTypes.number,
+
+    /** Should we grey out the menu item when it is disabled? */
+    shouldGreyOutWhenDisabled: PropTypes.bool,
+
+    /** Error to display below the title */
+    error: PropTypes.string,
+
+    /** Should render the content in HTML format */
+    shouldRenderAsHTML: PropTypes.bool,
+
+    /** Label to be displayed on the right */
+    rightLabel: PropTypes.string,
+
+    /** Component to be displayed on the right */
+    rightComponent: PropTypes.node,
+
+    /** Should render component on the right */
+    shouldShowRightComponent: PropTypes.bool,
+
+    /** Array of objects that map display names to their corresponding tooltip */
+    titleWithTooltips: PropTypes.arrayOf(PropTypes.object),
+
+    /** Should check anonymous user in onPress function */
+    shouldCheckActionAllowedOnPress: PropTypes.bool,
+};
+
+export default propTypes;

From 8f33445af0a8aa691c9496058b64f8c734774d3f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 20:37:47 +0100
Subject: [PATCH 126/244] Fix isDeleted handling

---
 src/components/MenuItem.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 6dde0a70168f..c24f3b445408 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,18 +1,19 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
-import _ from 'lodash';
 import React, {FC, ForwardedRef, forwardRef, ReactNode, useEffect, useMemo, useRef, useState} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import {AnimatedStyle} from 'react-native-reanimated';
 import {SvgProps} from 'react-native-svg';
+// eslint-disable-next-line no-restricted-imports
+import _ from 'underscore';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import {AvatarSource} from '@libs/UserUtils';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
@@ -284,6 +285,8 @@ function MenuItem(
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
 
+    // eslint-disable-next-line you-dont-need-lodash-underscore/contains
+    const isDeleted = style ? _.contains(style, styles.offlineFeedback.deleted) : false;
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
     const combinedTitleTextStyle = StyleUtils.combineStyles(
@@ -296,7 +299,7 @@ function MenuItem(
             numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre,
             interactive && disabled ? {...styles.userSelectNone} : {},
             styles.ltr,
-            styles.offlineFeedback.deleted,
+            isDeleted ? styles.offlineFeedback.deleted : {},
         ],
         titleStyle ?? {},
     );
@@ -305,7 +308,7 @@ function MenuItem(
         icon && !Array.isArray(icon) ? styles.ml3 : {},
         title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
         (descriptionTextStyle as ViewStyle) || styles.breakWord,
-        styles.offlineFeedback.deleted,
+        isDeleted ? styles.offlineFeedback.deleted : {},
     ]) as StyleProp<TextStyle>;
 
     useEffect(() => {
@@ -352,7 +355,7 @@ function MenuItem(
             return;
         }
 
-        if (event && event.type === 'click' && event.currentTarget instanceof EventTarget) {
+        if (event && event.type === 'click') {
             (event.currentTarget as HTMLElement).blur();
         }
 
@@ -365,7 +368,7 @@ function MenuItem(
         <Hoverable>
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
-                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(() => onPressAction, isAnonymousAction) : () => onPressAction}
+                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}
@@ -592,4 +595,5 @@ function MenuItem(
 
 MenuItem.displayName = 'MenuItem';
 
+export type {MenuItemProps};
 export default forwardRef(MenuItem);

From 66fd83097ea0ccf297c0d527a0c17cf939f5d3c9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 20:47:01 +0100
Subject: [PATCH 127/244] Fix onPress TS

---
 src/components/MenuItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index c24f3b445408..d621af0be69d 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -350,7 +350,7 @@ function MenuItem(
         return title ? convertToLTR(title) : '';
     };
 
-    const onPressAction = (event: GestureResponderEvent | KeyboardEvent) => {
+    const onPressAction = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
         if (disabled || !interactive) {
             return;
         }
@@ -359,7 +359,7 @@ function MenuItem(
             (event.currentTarget as HTMLElement).blur();
         }
 
-        if (onPress) {
+        if (onPress && event) {
             onPress(event);
         }
     };
@@ -368,7 +368,7 @@ function MenuItem(
         <Hoverable>
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
-                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
+                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed((args) => onPressAction(args as GestureResponderEvent), isAnonymousAction) : onPressAction}
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}

From 8c4690f0bc5e6bbf8d996cc85bb1b38c39a329f9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 21:30:29 +0100
Subject: [PATCH 128/244] Fix icon types

---
 src/components/MenuItem.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index d621af0be69d..1b6597bf1483 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -61,8 +61,14 @@ type AvatarProps = {
     icon: AvatarSource;
 };
 
+type NoIcon = {
+    iconType?: undefined;
+
+    icon?: undefined;
+};
+
 type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
-    (IconProps | AvatarProps) & {
+    (IconProps | AvatarProps | NoIcon) & {
         /** Text to be shown as badge near the right end. */
         badgeText?: string;
 
@@ -412,29 +418,23 @@ function MenuItem(
                                             ]}
                                         />
                                     )}
-                                    {Boolean(icon) && typeof icon === 'function' && (
+                                    {icon && !Array.isArray(icon) && (
                                         <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
-                                            {iconType === CONST.ICON_TYPE_ICON && (
+                                            {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (
                                                 <Icon
                                                     hovered={isHovered}
-                                                    pressed={Boolean(pressed)}
+                                                    pressed={pressed}
                                                     src={icon}
                                                     width={iconWidth}
                                                     height={iconHeight}
-                                                    fill={
-                                                        iconFill ?? StyleUtils.getIconFillColor(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true)
-                                                    }
+                                                    fill={iconFill ?? StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true)}
                                                 />
                                             )}
-                                        </View>
-                                    )}
-                                    {Boolean(icon) && typeof icon !== 'function' && (
-                                        <View>
-                                            {iconType === CONST.ICON_TYPE_WORKSPACE && (
+                                            {icon && iconType === CONST.ICON_TYPE_WORKSPACE && (
                                                 <Avatar
                                                     imageStyles={[styles.alignSelfCenter]}
                                                     size={CONST.AVATAR_SIZE.DEFAULT}
-                                                    source={icon}
+                                                    source={icon as AvatarSource}
                                                     fallbackIcon={fallbackIcon}
                                                     name={title}
                                                     type={CONST.ICON_TYPE_WORKSPACE}
@@ -443,7 +443,7 @@ function MenuItem(
                                             {iconType === CONST.ICON_TYPE_AVATAR && (
                                                 <Avatar
                                                     imageStyles={[styles.alignSelfCenter]}
-                                                    source={icon}
+                                                    source={icon as AvatarSource}
                                                     fallbackIcon={fallbackIcon}
                                                     size={avatarSize}
                                                 />

From 88ad03816ca6df48be5590f6a1ea1af04e8c05e3 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 21:34:27 +0100
Subject: [PATCH 129/244] Drop unused import

---
 src/components/PressableWithSecondaryInteraction/types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
index dc24bd7f0d63..c559b849f6e5 100644
--- a/src/components/PressableWithSecondaryInteraction/types.ts
+++ b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -1,6 +1,5 @@
 import {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
-import ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
     /** The function that should be called when this pressable is pressed */

From 560d65e6f4d4177dca3c7ab7d14e1fe37ec71e4d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 21:40:57 +0100
Subject: [PATCH 130/244] Eslint

---
 src/components/DisplayNames/types.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/DisplayNames/types.ts b/src/components/DisplayNames/types.ts
index 1dcaf3e1f9c1..5137d6f54108 100644
--- a/src/components/DisplayNames/types.ts
+++ b/src/components/DisplayNames/types.ts
@@ -43,6 +43,4 @@ type DisplayNamesProps = {
 
 export default DisplayNamesProps;
 
-export type {
-    DisplayNameWithTooltip
-}
+export type {DisplayNameWithTooltip};

From 7db8be201c7ebb1036b799d0528740d926a9e451 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 22:03:49 +0100
Subject: [PATCH 131/244] Map children in inline mode

---
 .../PressableWithSecondaryInteraction/index.native.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx
index f3cef029aa65..3d27bb835532 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.tsx
+++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx
@@ -36,7 +36,7 @@ function PressableWithSecondaryInteraction(
                 suppressHighlighting={suppressHighlighting}
                 onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             >
-                {children}
+                {children as string}
             </Text>
         );
     }

From b38833c9ee466f42c087d2b8b32dad14a943f881 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 22:05:17 +0100
Subject: [PATCH 132/244] Add ReactNode to allowed types

---
 .../PressableWithSecondaryInteraction/index.native.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx
index 3d27bb835532..c02e38ad53bf 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.tsx
+++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, ReactNode} from 'react';
 import {GestureResponderEvent, TextProps} from 'react-native';
 import {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -36,7 +36,7 @@ function PressableWithSecondaryInteraction(
                 suppressHighlighting={suppressHighlighting}
                 onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             >
-                {children as string}
+                {children as ReactNode | string}
             </Text>
         );
     }

From 58a6234be3b91f424ef87cee32294676c1e71408 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Thu, 14 Dec 2023 22:06:35 +0100
Subject: [PATCH 133/244] Drop string - included in ReactNode type

---
 .../PressableWithSecondaryInteraction/index.native.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx
index c02e38ad53bf..77dc9452f986 100644
--- a/src/components/PressableWithSecondaryInteraction/index.native.tsx
+++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx
@@ -36,7 +36,7 @@ function PressableWithSecondaryInteraction(
                 suppressHighlighting={suppressHighlighting}
                 onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             >
-                {children as ReactNode | string}
+                {children as ReactNode}
             </Text>
         );
     }

From e41e5750b38575aeff6a59b375da90c5f59be9af Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Fri, 15 Dec 2023 11:22:17 +0500
Subject: [PATCH 134/244] feat: add more fields

---
 src/types/onyx/PolicyReportField.ts | 10 ++++++++--
 src/types/onyx/Report.ts            |  2 +-
 src/types/onyx/index.ts             |  4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/types/onyx/PolicyReportField.ts b/src/types/onyx/PolicyReportField.ts
index 855ca2d06870..04876ea690b5 100644
--- a/src/types/onyx/PolicyReportField.ts
+++ b/src/types/onyx/PolicyReportField.ts
@@ -1,4 +1,4 @@
-type PolicyReportFieldType = "text" | "date" | "dropdown";
+type PolicyReportFieldType = 'text' | 'date' | 'dropdown' | 'formula';
 
 type PolicyReportField = {
     /** Name of the field */
@@ -8,13 +8,19 @@ type PolicyReportField = {
     defaultValue: string;
 
     /** Unique id of the field */
-    fieldId: string;
+    fieldID: string;
 
     /** Position at which the field should show up relative to the other fields */
     orderWeight: number;
 
     /** Type of report field */
     type: PolicyReportFieldType;
+
+    /** Tells if the field is required or not */
+    required: boolean;
+
+    /** Options to select from if field is of type dropdown */
+    options: string[];
 };
 
 type PolicyReportFields = Record<string, PolicyReportField>;
diff --git a/src/types/onyx/Report.ts b/src/types/onyx/Report.ts
index bad6b6a942ea..509f27f9e95d 100644
--- a/src/types/onyx/Report.ts
+++ b/src/types/onyx/Report.ts
@@ -159,7 +159,7 @@ type Report = {
     isLoadingPrivateNotes?: boolean;
 
     /** If the report contains reportFields, save the field id and its value */
-    reportFields?: Record<string, string>,
+    reportFields?: Record<string, string>;
 };
 
 export default Report;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index d105a21c6144..c76dbe72192e 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -25,9 +25,11 @@ import PlaidData from './PlaidData';
 import Policy from './Policy';
 import PolicyCategory, {PolicyCategories} from './PolicyCategory';
 import PolicyMember, {PolicyMembers} from './PolicyMember';
+import PolicyReportField from './PolicyReportField';
 import PolicyTag, {PolicyTags} from './PolicyTag';
 import PrivatePersonalDetails from './PrivatePersonalDetails';
 import RecentlyUsedCategories from './RecentlyUsedCategories';
+import RecentlyUsedReportFields from './RecentlyUsedReportFields';
 import RecentlyUsedTags from './RecentlyUsedTags';
 import RecentWaypoint from './RecentWaypoint';
 import ReimbursementAccount from './ReimbursementAccount';
@@ -54,8 +56,6 @@ import WalletOnfido from './WalletOnfido';
 import WalletStatement from './WalletStatement';
 import WalletTerms from './WalletTerms';
 import WalletTransfer from './WalletTransfer';
-import PolicyReportField from './PolicyReportField';
-import RecentlyUsedReportFields from './RecentlyUsedReportFields';
 
 export type {
     Account,

From a40c9f891bff6913c98a9ca64753c21fb49193a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Fri, 15 Dec 2023 09:23:10 +0100
Subject: [PATCH 135/244] Add temporary video tag handling

---
 src/components/HTMLEngineProvider/HTMLRenderers/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/index.js b/src/components/HTMLEngineProvider/HTMLRenderers/index.js
index 69f8eeac798e..13e410db8e3d 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/index.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/index.js
@@ -14,6 +14,7 @@ export default {
     a: AnchorRenderer,
     code: CodeRenderer,
     img: ImageRenderer,
+    video: AnchorRenderer, // temporary until we have a video player component
 
     // Custom tag renderers
     edited: EditedRenderer,

From 480bdfa77836f5072068b50e4078f9e722187192 Mon Sep 17 00:00:00 2001
From: Yauheni Pasiukevich <pasyukevich@live.com>
Date: Thu, 7 Dec 2023 13:37:25 +0100
Subject: [PATCH 136/244] Migrate 'MoneyReportHeaderStatusBar.js' component to
 TypeScript

---
 src/ONYXKEYS.ts                               |  1 +
 ...sBar.js => MoneyReportHeaderStatusBar.tsx} | 14 ++---
 src/libs/NextStepUtils.ts                     |  6 +-
 src/types/onyx/ReportNextStep.ts              | 56 +++++++++++++++++++
 src/types/onyx/index.ts                       |  2 +
 5 files changed, 64 insertions(+), 15 deletions(-)
 rename src/components/{MoneyReportHeaderStatusBar.js => MoneyReportHeaderStatusBar.tsx} (80%)
 create mode 100644 src/types/onyx/ReportNextStep.ts

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 0cc7934ad007..f8d43748b0ae 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -460,6 +460,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS]: OnyxTypes.RecentlyUsedTags;
     [ONYXKEYS.COLLECTION.SELECTED_TAB]: string;
     [ONYXKEYS.COLLECTION.PRIVATE_NOTES_DRAFT]: string;
+    [ONYXKEYS.COLLECTION.NEXT_STEP]: OnyxTypes.ReportNextStep;
 
     // Forms
     [ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM]: OnyxTypes.AddDebitCardForm;
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.tsx
similarity index 80%
rename from src/components/MoneyReportHeaderStatusBar.js
rename to src/components/MoneyReportHeaderStatusBar.tsx
index 687bc92ffbcd..8eaf67e3c96a 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.tsx
@@ -3,20 +3,16 @@ import {Text, View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NextStepUtils from '@libs/NextStepUtils';
-import nextStepPropTypes from '@pages/nextStepPropTypes';
 import CONST from '@src/CONST';
+import ReportNextStep from '@src/types/onyx/ReportNextStep';
 import RenderHTML from './RenderHTML';
 
-const propTypes = {
+type MoneyReportHeaderStatusBarProps = {
     /** The next step for the report */
-    nextStep: nextStepPropTypes,
+    nextStep: ReportNextStep;
 };
 
-const defaultProps = {
-    nextStep: {},
-};
-
-function MoneyReportHeaderStatusBar({nextStep}) {
+function MoneyReportHeaderStatusBar({nextStep}: MoneyReportHeaderStatusBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -38,7 +34,5 @@ function MoneyReportHeaderStatusBar({nextStep}) {
 }
 
 MoneyReportHeaderStatusBar.displayName = 'MoneyReportHeaderStatusBar';
-MoneyReportHeaderStatusBar.propTypes = propTypes;
-MoneyReportHeaderStatusBar.defaultProps = defaultProps;
 
 export default MoneyReportHeaderStatusBar;
diff --git a/src/libs/NextStepUtils.ts b/src/libs/NextStepUtils.ts
index b58f2af1eeac..f5031d476f20 100644
--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -1,9 +1,5 @@
 import Str from 'expensify-common/lib/str';
-
-type Message = {
-    text: string;
-    type?: string;
-};
+import type {Message} from '@src/types/onyx/ReportNextStep';
 
 function parseMessage(messages: Message[] | undefined) {
     let nextStepHTML = '';
diff --git a/src/types/onyx/ReportNextStep.ts b/src/types/onyx/ReportNextStep.ts
new file mode 100644
index 000000000000..b619319d8f91
--- /dev/null
+++ b/src/types/onyx/ReportNextStep.ts
@@ -0,0 +1,56 @@
+type Message = {
+    text: string;
+    type?: string;
+    action?: string;
+};
+
+type DataOptions = {
+    canSeeACHOption?: boolean;
+    isManualReimbursementEnabled?: boolean;
+    maskedLockedAccountNumber?: string;
+    preferredWithdrawalDeleted?: boolean;
+};
+
+type Button = {
+    text?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    data?: DataOptions;
+};
+
+type ReportNextStep = {
+    /** The message parts of the next step */
+    message?: Message[];
+
+    /** The title for the next step */
+    title?: string;
+
+    /** Whether the user should take some sort of action in order to unblock the report */
+    requiresUserAction?: boolean;
+
+    /** The type of next step */
+    type: 'alert' | 'neutral' | null;
+
+    /** If the "Undo submit" button should be visible */
+    showUndoSubmit?: boolean;
+
+    /** Deprecated - If the next step should be displayed on mobile, related to OldApp */
+    showForMobile?: boolean;
+
+    /** If the next step should be displayed at the expense level */
+    showForExpense?: boolean;
+
+    /** An optional alternate message to display on expenses instead of what is provided in the "message" field */
+    expenseMessage?: Message[];
+
+    /** The next person in the approval chain of the report */
+    nextReceiver?: string;
+
+    /** An array of buttons to be displayed next to the next step */
+    buttons?: Record<string, Button>;
+};
+
+export default ReportNextStep;
+
+export type {Message};
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 110bdb024a8c..62e474753745 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -37,6 +37,7 @@ import ReportAction, {ReportActions} from './ReportAction';
 import ReportActionReactions from './ReportActionReactions';
 import ReportActionsDrafts from './ReportActionsDrafts';
 import ReportMetadata from './ReportMetadata';
+import ReportNextStep from './ReportNextStep';
 import ReportUserIsTyping from './ReportUserIsTyping';
 import Request from './Request';
 import Response from './Response';
@@ -107,6 +108,7 @@ export type {
     ReportActions,
     ReportActionsDrafts,
     ReportMetadata,
+    ReportNextStep,
     Request,
     Response,
     ScreenShareRequest,

From bddf4d835e3a5104e331b4e6e36b8368ef1351a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Fri, 15 Dec 2023 10:42:57 +0100
Subject: [PATCH 137/244] Update BaseHTMLProvider

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

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 86ddf0a52bb3..58d7ae48647c 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -64,6 +64,10 @@ function BaseHTMLEngineProvider(props) {
                 tagName: 'next-steps',
                 mixedUAStyles: {...styles.textLabelSupporting},
             }),
+            video: defaultHTMLElementModels.div.extend({
+                tagName: 'video',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
         }),
         [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting],
     );
@@ -71,7 +75,6 @@ function BaseHTMLEngineProvider(props) {
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
     const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
-
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}

From 73e5e92675440fcfc335502642cbe5ccb4a993c7 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Fri, 15 Dec 2023 17:30:17 +0700
Subject: [PATCH 138/244] add max date and min date

---
 src/CONST.ts                                     | 7 +++++++
 src/pages/EditRequestCreatedPage.js              | 4 +++-
 src/pages/iou/request/step/IOURequestStepDate.js | 7 +++----
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 2733da56e597..2777728ac05a 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import dateAdd from 'date-fns/add';
+import dateSubtract from 'date-fns/sub';
 import Config from 'react-native-config';
 import * as KeyCommand from 'react-native-key-command';
 import * as Url from './libs/Url';
@@ -18,6 +20,8 @@ const PLATFORM_IOS = 'iOS';
 const ANDROID_PACKAGE_NAME = 'com.expensify.chat';
 const CURRENT_YEAR = new Date().getFullYear();
 const PULL_REQUEST_NUMBER = Config?.PULL_REQUEST_NUMBER ?? '';
+const MAX_DATE = dateAdd(new Date(), {years: 1});
+const MIN_DATE = dateSubtract(new Date(), {years: 20});
 
 const keyModifierControl = KeyCommand?.constants?.keyModifierControl ?? 'keyModifierControl';
 const keyModifierCommand = KeyCommand?.constants?.keyModifierCommand ?? 'keyModifierCommand';
@@ -105,6 +109,9 @@ const CONST = {
         MAX_AGE: 150,
     },
 
+    MAX_DATE,
+    MIN_DATE,
+
     DESKTOP_SHORTCUT_ACCELERATOR: {
         PASTE_AND_MATCH_STYLE: 'Option+Shift+CmdOrCtrl+V',
         PASTE_AS_PLAIN_TEXT: 'CmdOrCtrl+Shift+V',
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index fbe1b3c782a7..c09469b7e0bc 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -6,6 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const propTypes = {
@@ -38,7 +39,8 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
                     inputID="created"
                     label={translate('common.date')}
                     defaultValue={defaultCreated}
-                    maxDate={new Date()}
+                    maxDate={CONST.MAX_DATE}
+                    minDate={CONST.MIN_DATE}
                 />
             </FormProvider>
         </ScreenWrapper>
diff --git a/src/pages/iou/request/step/IOURequestStepDate.js b/src/pages/iou/request/step/IOURequestStepDate.js
index c90779af47ee..469d9a4fa756 100644
--- a/src/pages/iou/request/step/IOURequestStepDate.js
+++ b/src/pages/iou/request/step/IOURequestStepDate.js
@@ -1,5 +1,3 @@
-import dateAdd from 'date-fns/add';
-import dateSubtract from 'date-fns/sub';
 import React from 'react';
 import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
@@ -10,6 +8,7 @@ import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as IOU from '@userActions/IOU';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
@@ -71,8 +70,8 @@ function IOURequestStepDate({
                     inputID="moneyRequestCreated"
                     label={translate('common.date')}
                     defaultValue={transaction.created}
-                    maxDate={dateAdd(new Date(), {years: 1})}
-                    minDate={dateSubtract(new Date(), {years: 20})}
+                    maxDate={CONST.MAX_DATE}
+                    minDate={CONST.MIN_DATE}
                 />
             </FormProvider>
         </StepScreenWrapper>

From 1eb74dae8c8b4a756a44af6682c8600310042d8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ska=C5=82ka?= <michal.skalka@swmansion.com>
Date: Fri, 15 Dec 2023 11:40:26 +0100
Subject: [PATCH 139/244] Fix getting href for video tags in AnchorRenderer

---
 .../HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 8fd907470c19..c1cd5d6839a2 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -20,7 +20,7 @@ function AnchorRenderer(props) {
     const isAttachment = Boolean(htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
     const displayName = lodashGet(props.tnode, 'domNode.children[0].data', '');
     const parentStyle = lodashGet(props.tnode, 'parent.styles.nativeTextRet', {});
-    const attrHref = htmlAttribs.href || '';
+    const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || '';
     const internalNewExpensifyPath = Link.getInternalNewExpensifyPath(attrHref);
     const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref);
 

From d7b57a50710ed83bbf308b74b96cf91599efff7b Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:18:48 +0100
Subject: [PATCH 140/244] use hooks for translate and styles

---
 .../workspace/WorkspaceInviteMessagePage.js   | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index d8de68bd6cc2..14178c35fb70 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -14,10 +14,10 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigationFocus from '@components/withNavigationFocus';
-import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
@@ -63,8 +63,6 @@ const propTypes = {
     }).isRequired,
 
     ...policyPropTypes,
-    ...withLocalizePropTypes,
-    ...withThemeStylesPropTypes,
 };
 
 const defaultProps = {
@@ -74,6 +72,9 @@ const defaultProps = {
 };
 
 function WorkspaceInviteMessagePage(props) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     const {inputCallbackRef} = useAutoFocusInput();
 
     if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
@@ -85,7 +86,7 @@ function WorkspaceInviteMessagePage(props) {
     };
 
     const getDefaultWelcomeNote = () =>
-        props.translate('workspace.inviteMessage.welcomeNote', {
+        translate('workspace.inviteMessage.welcomeNote', {
             workspaceName: props.policy.name,
         });
 
@@ -131,7 +132,7 @@ function WorkspaceInviteMessagePage(props) {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             >
                 <HeaderWithBackButton
-                    title={props.translate('workspace.inviteMessage.inviteMessageTitle')}
+                    title={translate('workspace.inviteMessage.inviteMessageTitle')}
                     subtitle={policyName}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
@@ -140,50 +141,50 @@ function WorkspaceInviteMessagePage(props) {
                     onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID))}
                 />
                 <FormProvider
-                    style={[props.themeStyles.flexGrow1, props.themeStyles.ph5]}
+                    style={[styles.themeStyles.flexGrow1, styles.themeStyles.ph5]}
                     formID={ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}
                     validate={validate}
                     onSubmit={sendInvitation}
-                    submitButtonText={props.translate('common.invite')}
+                    submitButtonText={translate('common.invite')}
                     enabledWhenOffline
                     footerContent={
                         <PressableWithoutFeedback
                             onPress={openPrivacyURL}
                             role={CONST.ROLE.LINK}
-                            accessibilityLabel={props.translate('common.privacy')}
+                            accessibilityLabel={translate('common.privacy')}
                             href={CONST.PRIVACY_URL}
-                            style={[props.themeStyles.mv2, props.themeStyles.alignSelfStart]}
+                            style={[styles.themeStyles.mv2, styles.themeStyles.alignSelfStart]}
                         >
-                            <View style={[props.themeStyles.flexRow]}>
-                                <Text style={[props.themeStyles.mr1, props.themeStyles.label, props.themeStyles.link]}>{props.translate('common.privacy')}</Text>
+                            <View style={[styles.themeStyles.flexRow]}>
+                                <Text style={[styles.themeStyles.mr1, styles.themeStyles.label, styles.themeStyles.link]}>{translate('common.privacy')}</Text>
                             </View>
                         </PressableWithoutFeedback>
                     }
                 >
-                    <View style={[props.themeStyles.mv4, props.themeStyles.justifyContentCenter, props.themeStyles.alignItemsCenter]}>
+                    <View style={[styles.themeStyles.mv4, styles.themeStyles.justifyContentCenter, styles.themeStyles.alignItemsCenter]}>
                         <MultipleAvatars
                             size={CONST.AVATAR_SIZE.LARGE}
                             icons={OptionsListUtils.getAvatarsForAccountIDs(_.values(props.invitedEmailsToAccountIDsDraft), props.allPersonalDetails, props.invitedEmailsToAccountIDsDraft)}
                             shouldStackHorizontally
                             shouldDisplayAvatarsInRows
-                            secondAvatarStyle={[props.themeStyles.secondAvatarInline]}
+                            secondAvatarStyle={[styles.themeStyles.secondAvatarInline]}
                         />
                     </View>
-                    <View style={[props.themeStyles.mb5]}>
-                        <Text>{props.translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
+                    <View style={[styles.themeStyles.mb5]}>
+                        <Text>{translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
                     </View>
-                    <View style={[props.themeStyles.mb3]}>
+                    <View style={[styles.themeStyles.mb3]}>
                         <InputWrapper
                             InputComponent={TextInput}
                             role={CONST.ROLE.PRESENTATION}
                             inputID="welcomeMessage"
-                            label={props.translate('workspace.inviteMessage.personalMessagePrompt')}
-                            accessibilityLabel={props.translate('workspace.inviteMessage.personalMessagePrompt')}
+                            label={translate('workspace.inviteMessage.personalMessagePrompt')}
+                            accessibilityLabel={translate('workspace.inviteMessage.personalMessagePrompt')}
                             autoCompleteType="off"
                             autoCorrect={false}
                             autoGrowHeight
-                            inputStyle={[props.themeStyles.verticalAlignTop]}
-                            containerStyles={[props.themeStyles.autoGrowHeightMultilineInput]}
+                            inputStyle={[styles.themeStyles.verticalAlignTop]}
+                            containerStyles={[styles.themeStyles.autoGrowHeightMultilineInput]}
                             value={welcomeMessage}
                             onChangeText={(text) => {
                                 saveDraft(text);
@@ -205,7 +206,6 @@ WorkspaceInviteMessagePage.defaultProps = defaultProps;
 WorkspaceInviteMessagePage.displayName = 'WorkspaceInviteMessagePage';
 
 export default compose(
-    withLocalize,
     withPolicyAndFullscreenLoading,
     withOnyx({
         allPersonalDetails: {
@@ -220,5 +220,4 @@ export default compose(
         },
     }),
     withNavigationFocus,
-    withThemeStyles,
 )(WorkspaceInviteMessagePage);

From 4d11558f9ec2c77c9aa6a4955cb09d5e880f5822 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Dec 2023 13:36:03 +0100
Subject: [PATCH 141/244] Only ask for location permission once

---
 src/components/MapView/MapView.tsx         | 6 ++++++
 src/components/MapView/MapView.website.tsx | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 7b3d73479dde..f7a15ba10d2c 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -29,6 +29,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const [isIdle, setIsIdle] = useState(false);
         const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
+        const hasAskedForLocationPermission = useRef(false);
 
         useFocusEffect(
             useCallback(() => {
@@ -36,6 +37,11 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     return;
                 }
 
+                if (hasAskedForLocationPermission.current) {
+                    return;
+                }
+
+                hasAskedForLocationPermission.current = true;
                 getCurrentPosition(
                     (params) => {
                         const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 7910d7f93a29..851fa80506f6 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -5,7 +5,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -52,6 +52,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const [shouldResetBoundaries, setShouldResetBoundaries] = useState<boolean>(false);
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
+        const hasAskedForLocationPermission = useRef(false);
 
         useFocusEffect(
             useCallback(() => {
@@ -59,6 +60,11 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     return;
                 }
 
+                if (hasAskedForLocationPermission.current) {
+                    return;
+                }
+
+                hasAskedForLocationPermission.current = true;
                 getCurrentPosition(
                     (params) => {
                         const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};

From 94faf791924005178e8ea255de3caec0b048c6a6 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Fri, 15 Dec 2023 13:45:55 +0100
Subject: [PATCH 142/244] Get user location from cache on every focus

---
 src/components/MapView/MapView.tsx         | 32 +++++++++++-----------
 src/components/MapView/MapView.website.tsx | 31 +++++++++++----------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index f7a15ba10d2c..ac1af8d4d727 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -31,6 +31,15 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const hasAskedForLocationPermission = useRef(false);
 
+        const getUserLocationFromCache = useCallback(() => {
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            if (cachedUserLocation || !initialState) {
+                return;
+            }
+
+            setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+        }, [cachedUserLocation, initialState]);
+
         useFocusEffect(
             useCallback(() => {
                 if (isOffline) {
@@ -38,26 +47,17 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                 }
 
                 if (hasAskedForLocationPermission.current) {
+                    getUserLocationFromCache();
                     return;
                 }
 
                 hasAskedForLocationPermission.current = true;
-                getCurrentPosition(
-                    (params) => {
-                        const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
-                        setCurrentPosition(currentCoords);
-                        setUserLocation(currentCoords);
-                    },
-                    () => {
-                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                        if (cachedUserLocation || !initialState) {
-                            return;
-                        }
-
-                        setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
-                    },
-                );
-            }, [cachedUserLocation, initialState, isOffline]),
+                getCurrentPosition((params) => {
+                    const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
+                    setCurrentPosition(currentCoords);
+                    setUserLocation(currentCoords);
+                }, getUserLocationFromCache);
+            }, [getUserLocationFromCache, isOffline]),
         );
 
         // Determines if map can be panned to user's detected
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 851fa80506f6..81ad13696778 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -54,6 +54,15 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
         const hasAskedForLocationPermission = useRef(false);
 
+        const getUserLocationFromCache = useCallback(() => {
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            if (cachedUserLocation || !initialState) {
+                return;
+            }
+
+            setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+        }, [cachedUserLocation, initialState]);
+
         useFocusEffect(
             useCallback(() => {
                 if (isOffline) {
@@ -61,25 +70,17 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                 }
 
                 if (hasAskedForLocationPermission.current) {
+                    getUserLocationFromCache();
                     return;
                 }
 
                 hasAskedForLocationPermission.current = true;
-                getCurrentPosition(
-                    (params) => {
-                        const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
-                        setCurrentPosition(currentCoords);
-                        setUserLocation(currentCoords);
-                    },
-                    () => {
-                        if (cachedUserLocation) {
-                            return;
-                        }
-
-                        setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
-                    },
-                );
-            }, [cachedUserLocation, isOffline, initialState.location]),
+                getCurrentPosition((params) => {
+                    const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
+                    setCurrentPosition(currentCoords);
+                    setUserLocation(currentCoords);
+                }, getUserLocationFromCache);
+            }, [getUserLocationFromCache, isOffline]),
         );
 
         // Determines if map can be panned to user's detected

From bb6e48cfd7aa38e1c600e70c1b5b0065b741b2b2 Mon Sep 17 00:00:00 2001
From: Dylan <dylandylan9112@gmail.com>
Date: Fri, 15 Dec 2023 20:35:14 +0700
Subject: [PATCH 143/244] update const

---
 src/CONST.ts                                     | 5 ++---
 src/pages/EditRequestCreatedPage.js              | 4 ++--
 src/pages/iou/request/step/IOURequestStepDate.js | 4 ++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 2777728ac05a..ea38f6bd3d59 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -101,6 +101,8 @@ const CONST = {
         // Numbers were arbitrarily picked.
         MIN_YEAR: CURRENT_YEAR - 100,
         MAX_YEAR: CURRENT_YEAR + 100,
+        MAX_DATE,
+        MIN_DATE,
     },
 
     DATE_BIRTH: {
@@ -109,9 +111,6 @@ const CONST = {
         MAX_AGE: 150,
     },
 
-    MAX_DATE,
-    MIN_DATE,
-
     DESKTOP_SHORTCUT_ACCELERATOR: {
         PASTE_AND_MATCH_STYLE: 'Option+Shift+CmdOrCtrl+V',
         PASTE_AS_PLAIN_TEXT: 'CmdOrCtrl+Shift+V',
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index c09469b7e0bc..f966a6ff570f 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -39,8 +39,8 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
                     inputID="created"
                     label={translate('common.date')}
                     defaultValue={defaultCreated}
-                    maxDate={CONST.MAX_DATE}
-                    minDate={CONST.MIN_DATE}
+                    maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                    minDate={CONST.CALENDAR_PICKER.MIN_DATE}
                 />
             </FormProvider>
         </ScreenWrapper>
diff --git a/src/pages/iou/request/step/IOURequestStepDate.js b/src/pages/iou/request/step/IOURequestStepDate.js
index 469d9a4fa756..21f400f32d47 100644
--- a/src/pages/iou/request/step/IOURequestStepDate.js
+++ b/src/pages/iou/request/step/IOURequestStepDate.js
@@ -70,8 +70,8 @@ function IOURequestStepDate({
                     inputID="moneyRequestCreated"
                     label={translate('common.date')}
                     defaultValue={transaction.created}
-                    maxDate={CONST.MAX_DATE}
-                    minDate={CONST.MIN_DATE}
+                    maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                    minDate={CONST.CALENDAR_PICKER.MIN_DATE}
                 />
             </FormProvider>
         </StepScreenWrapper>

From 443a9cafca94355e0fd0db1a3eb4cffbe8dce85a Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Fri, 15 Dec 2023 16:15:43 +0100
Subject: [PATCH 144/244] fix: apply requested changes

---
 src/pages/SearchPage.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 68724b51e796..ad8e15287d4f 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -8,11 +8,11 @@ import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
 import * as ReportUtils from '@libs/ReportUtils';
-import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
@@ -44,20 +44,19 @@ const defaultProps = {
 };
 
 function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
-    // Data for initialization (runs only on the first render)
-    const {
-        recentReports: initialRecentReports,
-        personalDetails: initialPersonalDetails,
-        userToInvite: initialUserToInvite,
-        // Ignoring the rule because in this case we need the data only initially
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    } = useMemo(() => OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas), []);
-
     const [searchValue, setSearchValue] = useState('');
-    const [searchOptions, setSearchOptions] = useState({
-        recentReports: initialRecentReports,
-        personalDetails: initialPersonalDetails,
-        userToInvite: initialUserToInvite,
+    const [searchOptions, setSearchOptions] = useState(() => {
+        const {
+            recentReports: localRecentReports,
+            personalDetails: localPersonalDetails,
+            userToInvite: localUserToInvite,
+        } = OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas);
+
+        return {
+            recentReports: localRecentReports,
+            personalDetails: localPersonalDetails,
+            userToInvite: localUserToInvite,
+        };
     });
 
     const {isOffline} = useNetwork();

From 5671a128dfb2cb7dbc89a7b7c97af6d93e9205f7 Mon Sep 17 00:00:00 2001
From: Fitsum Abebe <engfitsum@gmail.com>
Date: Sat, 16 Dec 2023 11:45:59 +0300
Subject: [PATCH 145/244] reset category and tag on navigating to confirmation
 page

---
 src/pages/iou/request/step/IOURequestStepParticipants.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/iou/request/step/IOURequestStepParticipants.js b/src/pages/iou/request/step/IOURequestStepParticipants.js
index 85d67ea34bae..ec670b828146 100644
--- a/src/pages/iou/request/step/IOURequestStepParticipants.js
+++ b/src/pages/iou/request/step/IOURequestStepParticipants.js
@@ -71,6 +71,8 @@ function IOURequestStepParticipants({
 
     const goToNextStep = useCallback(() => {
         const nextStepIOUType = numberOfParticipants.current === 1 ? iouType : CONST.IOU.TYPE.SPLIT;
+        IOU.resetMoneyRequestTag_temporaryForRefactor(transactionID);
+        IOU.resetMoneyRequestCategory_temporaryForRefactor(transactionID);
         Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(nextStepIOUType, transactionID, selectedReportID.current || reportID));
     }, [iouType, transactionID, reportID]);
 

From 0326a66072fc194824c8a63a316789135b6a59ee Mon Sep 17 00:00:00 2001
From: Fitsum Abebe <engfitsum@gmail.com>
Date: Sat, 16 Dec 2023 18:13:09 +0300
Subject: [PATCH 146/244] set minHeight for money request amount input
 container

---
 src/pages/iou/steps/MoneyRequestAmountForm.js | 2 +-
 src/styles/index.ts                           | 2 ++
 src/styles/variables.ts                       | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
index c9075d896deb..652e07674ae0 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.js
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -260,7 +260,7 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
             <View
                 id={AMOUNT_VIEW_ID}
                 onMouseDown={(event) => onMouseDown(event, [AMOUNT_VIEW_ID])}
-                style={[styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
+                style={[styles.moneyRequestAmountContainer, styles.flex1, styles.flexRow, styles.w100, styles.alignItemsCenter, styles.justifyContentCenter]}
             >
                 <TextInputWithCurrencySymbol
                     formattedAmount={formattedAmount}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9e02335bde0d..3b416feb59ba 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2655,6 +2655,8 @@ const styles = (theme: ThemeColors) =>
             paddingVertical: 12,
         },
 
+        moneyRequestAmountContainer: {minHeight: 92},
+
         requestPreviewBox: {
             marginTop: 12,
             maxWidth: variables.reportPreviewMaxWidth,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 65d7f6a0311d..60c013bb0fca 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -5,7 +5,7 @@ import {PixelRatio} from 'react-native';
  * method always returns the defaultValue (first param). When the device font size increases/decreases, the PixelRatio.getFontScale() value increases/decreases as well.
  * This means that if you have text and its 'fontSize' is 19, the device font size changed to the 5th level on the iOS slider and the actual fontSize is 19 * PixelRatio.getFontScale()
  * = 19 * 1.11 = 21.09. Since we are disallowing font scaling we need to calculate it manually. We calculate it with: PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue :
- * defaultValue * PixelRatio getFontScale() This means that the fontSize is increased/decreased when the device font size changes up to maxValue (second param)
+ * defaultValue * PixelRatio.getFontScale() This means that the fontSize is increased/decreased when the device font size changes up to maxValue (second param)
  */
 function getValueUsingPixelRatio(defaultValue: number, maxValue: number): number {
     return PixelRatio.getFontScale() * defaultValue > maxValue ? maxValue : defaultValue * PixelRatio.getFontScale();

From a6cb72c58c160927b5928de7ca10d1da7d494b3d Mon Sep 17 00:00:00 2001
From: Fitsum Abebe <engfitsum@gmail.com>
Date: Sat, 16 Dec 2023 18:20:39 +0300
Subject: [PATCH 147/244] removed map view container max height

---
 src/styles/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9e02335bde0d..712e91e70af0 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -3850,7 +3850,6 @@ const styles = (theme: ThemeColors) =>
         mapViewContainer: {
             ...flex.flex1,
             minHeight: 300,
-            maxHeight: 500,
         },
 
         mapView: {

From 95c70d6ccb15d9f56ff2d9c266b9e578dc55416c Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Mon, 18 Dec 2023 13:11:47 +0700
Subject: [PATCH 148/244] fix: message header disappears when delete message in
 offline

---
 src/pages/home/report/ReportActionsList.js             | 2 +-
 src/pages/home/report/ReportActionsListItemRenderer.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index e2ae7b947fcc..2c8362268ef8 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -383,7 +383,7 @@ function ReportActionsList({
                 index={index}
                 report={report}
                 linkedReportActionID={linkedReportActionID}
-                sortedReportActions={sortedReportActions}
+                displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(sortedReportActions, index)}
                 mostRecentIOUReportActionID={mostRecentIOUReportActionID}
                 shouldHideThreadDividerLine={shouldHideThreadDividerLine}
                 shouldDisplayNewMarker={shouldDisplayNewMarker(reportAction, index)}
diff --git a/src/pages/home/report/ReportActionsListItemRenderer.js b/src/pages/home/report/ReportActionsListItemRenderer.js
index 0e558541c69a..ba47e804de06 100644
--- a/src/pages/home/report/ReportActionsListItemRenderer.js
+++ b/src/pages/home/report/ReportActionsListItemRenderer.js
@@ -19,8 +19,8 @@ const propTypes = {
     /** Report for this action */
     report: reportPropTypes.isRequired,
 
-    /** Sorted actions prepared for display */
-    sortedReportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)).isRequired,
+    /** Should the comment have the appearance of being grouped with the previous comment? */
+    displayAsGroup: PropTypes.bool.isRequired,
 
     /** The ID of the most recent IOU report action connected with the shown report */
     mostRecentIOUReportActionID: PropTypes.string,
@@ -44,7 +44,7 @@ function ReportActionsListItemRenderer({
     reportAction,
     index,
     report,
-    sortedReportActions,
+    displayAsGroup,
     mostRecentIOUReportActionID,
     shouldHideThreadDividerLine,
     shouldDisplayNewMarker,
@@ -68,7 +68,7 @@ function ReportActionsListItemRenderer({
             report={report}
             action={reportAction}
             linkedReportActionID={linkedReportActionID}
-            displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(sortedReportActions, index)}
+            displayAsGroup={displayAsGroup}
             shouldDisplayNewMarker={shouldDisplayNewMarker}
             shouldShowSubscriptAvatar={
                 (ReportUtils.isPolicyExpenseChat(report) || ReportUtils.isExpenseReport(report)) &&

From ac2860907f6c34e93301510b0b1bb41745341220 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Mon, 18 Dec 2023 13:35:23 +0700
Subject: [PATCH 149/244] fix: loading shows even though not found in profile
 page

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

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 3772b8127ef7..62c7ed75a9f0 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -125,7 +125,7 @@ function ProfilePage(props) {
 
     const isCurrentUser = props.session.accountID === accountID;
     const hasMinimumDetails = !_.isEmpty(details.avatar);
-    const isLoading = lodashGet(details, 'isLoading', false) || _.isEmpty(details) || props.isLoadingReportData;
+    const isLoading = lodashGet(details, 'isLoading', false) || _.isEmpty(details);
 
     // If the API returns an error for some reason there won't be any details and isLoading will get set to false, so we want to show a blocking screen
     const shouldShowBlockingView = !hasMinimumDetails && !isLoading;

From 52183ad09e062fd419122a37cf707498e1c6ca21 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Mon, 18 Dec 2023 14:13:07 +0700
Subject: [PATCH 150/244] fix lint

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

diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 62c7ed75a9f0..b50798f2d856 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -57,9 +57,6 @@ const propTypes = {
     /** Route params */
     route: matchType.isRequired,
 
-    /** Indicates whether the app is loading initial data */
-    isLoadingReportData: PropTypes.bool,
-
     /** Session info for the currently logged in user. */
     session: PropTypes.shape({
         /** Currently logged in user accountID */
@@ -72,7 +69,6 @@ const propTypes = {
 const defaultProps = {
     // When opening someone else's profile (via deep link) before login, this is empty
     personalDetails: {},
-    isLoadingReportData: true,
     session: {
         accountID: 0,
     },
@@ -288,9 +284,6 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },

From 80196fcefc867fc6ded66c8c8b03101d4cba13c7 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 18 Dec 2023 14:22:59 +0700
Subject: [PATCH 151/244] check if report empty

---
 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 3f7e2fdfaf74..1974296c82e1 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -350,7 +350,7 @@ function ReportScreen({
                 !onyxReportID &&
                 prevReport.statusNum === CONST.REPORT.STATUS.OPEN &&
                 (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM))) ||
-            ((ReportUtils.isMoneyRequest(prevReport) || ReportUtils.isMoneyRequestReport(prevReport)) && _.isEqual(report, defaultProps.report))
+            ((ReportUtils.isMoneyRequest(prevReport) || ReportUtils.isMoneyRequestReport(prevReport)) && _.isEmpty(report))
         ) {
             Navigation.dismissModal();
             if (Navigation.getTopmostReportId() === prevOnyxReportID) {

From 74ae783f1e5cfcf730beeac2bc64a811104271ff Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 11:22:35 +0100
Subject: [PATCH 152/244] Change ViewStyle to TextStyle

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 1b6597bf1483..a001fa747bb1 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -87,7 +87,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         /** Any adjustments to style when menu item is hovered or pressed */
         hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
 
-        descriptionTextStyle?: StyleProp<ViewStyle>;
+        descriptionTextStyle?: StyleProp<TextStyle>;
 
         /** The fill color to pass into the icon. */
         iconFill?: string;

From 5b4b1b94bb4738ff899eef776596c7fb253238d4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 11:23:34 +0100
Subject: [PATCH 153/244] Describe prop in a comment

---
 src/components/MenuItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index a001fa747bb1..8ce61123864e 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -87,6 +87,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         /** Any adjustments to style when menu item is hovered or pressed */
         hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
 
+        /** Additional styles to style the description text below the title */
         descriptionTextStyle?: StyleProp<TextStyle>;
 
         /** The fill color to pass into the icon. */

From 8f9003ecd59bd3ad0082ac1eabb7b22d776019ee Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 11:26:07 +0100
Subject: [PATCH 154/244] Use ValueOf from type-fest whenever possible

---
 src/components/MenuItem.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 8ce61123864e..a832422ad29d 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -3,6 +3,7 @@ import React, {FC, ForwardedRef, forwardRef, ReactNode, useEffect, useMemo, useR
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import {AnimatedStyle} from 'react-native-reanimated';
 import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
 // eslint-disable-next-line no-restricted-imports
 import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -184,9 +185,9 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         floatRightAvatars?: IconType[];
 
         /** Prop to represent the size of the float right avatar images to be shown */
-        floatRightAvatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
+        floatRightAvatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
-        viewMode?: (typeof CONST.OPTION_MODE)[keyof typeof CONST.OPTION_MODE];
+        viewMode?: ValueOf<typeof CONST.OPTION_MODE>;
 
         numberOfLinesTitle?: number;
 
@@ -194,7 +195,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         isSmallAvatarSubscriptMenu?: boolean;
 
         /** The type of brick road indicator to show. */
-        brickRoadIndicator?: (typeof CONST.BRICK_ROAD_INDICATOR_STATUS)[keyof typeof CONST.BRICK_ROAD_INDICATOR_STATUS];
+        brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
 
         /** Should render the content in HTML format */
         shouldRenderAsHTML?: boolean;

From 641c2e988bb44c22164680f527be68c9647f1666 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 11:29:18 +0100
Subject: [PATCH 155/244] Add prop descriptions

---
 src/components/MenuItem.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index a832422ad29d..e652896c629c 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -187,8 +187,10 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         /** Prop to represent the size of the float right avatar images to be shown */
         floatRightAvatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
+        /** Affects avatar size  */
         viewMode?: ValueOf<typeof CONST.OPTION_MODE>;
 
+        /** Used to truncate the text with an ellipsis after computing the text layout */
         numberOfLinesTitle?: number;
 
         /**  Whether we should use small avatar subscript sizing the for menu item */
@@ -209,6 +211,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         /** Flag to indicate whether or not text selection should be disabled from long-pressing the menu item. */
         shouldBlockSelection?: boolean;
 
+        /** Whether should render title as HTML or as Text */
         shouldParseTitle?: false;
 
         /** Should check anonymous user in onPress function */

From 453a11137337a22a2076f6900bbe69e5de7213e0 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 11:31:09 +0100
Subject: [PATCH 156/244] Replace underscore with native JS

---
 src/components/MenuItem.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index e652896c629c..bc7ccbd9250d 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -4,8 +4,6 @@ import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle,
 import {AnimatedStyle} from 'react-native-reanimated';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
-// eslint-disable-next-line no-restricted-imports
-import _ from 'underscore';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -296,8 +294,7 @@ function MenuItem(
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
 
-    // eslint-disable-next-line you-dont-need-lodash-underscore/contains
-    const isDeleted = style ? _.contains(style, styles.offlineFeedback.deleted) : false;
+    const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const fallbackAvatarSize = viewMode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT;
     const combinedTitleTextStyle = StyleUtils.combineStyles(

From 58aa6e850d4b91d06194512dc601df8520c62d97 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:23:55 +0100
Subject: [PATCH 157/244] Use native JS array checking

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index bc7ccbd9250d..0ca836012376 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -543,7 +543,7 @@ function MenuItem(
                                         <Text style={[styles.textLabelSupporting, ...(combinedStyle as TextStyle[])]}>{subtitle}</Text>
                                     </View>
                                 )}
-                                {!_.isEmpty(floatRightAvatars) && (
+                                {floatRightAvatars?.length > 0 && (
                                     <View style={[styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : undefined]}>
                                         <MultipleAvatars
                                             isHovered={isHovered}

From aa3ab88fe029bfd1942502b877fecf20b61c1994 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:24:53 +0100
Subject: [PATCH 158/244] Fix type casting

---
 src/components/MenuItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 0ca836012376..29663868e3b0 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -311,13 +311,13 @@ function MenuItem(
         ],
         titleStyle ?? {},
     );
-    const descriptionTextStyles = StyleUtils.combineStyles([
+    const descriptionTextStyles = StyleUtils.combineStyles<TextStyle>([
         styles.textLabelSupporting,
         icon && !Array.isArray(icon) ? styles.ml3 : {},
         title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        (descriptionTextStyle as ViewStyle) || styles.breakWord,
+        (descriptionTextStyle as TextStyle) || styles.breakWord,
         isDeleted ? styles.offlineFeedback.deleted : {},
-    ]) as StyleProp<TextStyle>;
+    ]);
 
     useEffect(() => {
         if (!title || (titleRef.current.length && titleRef.current === title) || !shouldParseTitle) {

From 5539a74e8e89cd38197a0ea3b1f6bedb9ed63f65 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:25:54 +0100
Subject: [PATCH 159/244] Fix incorrect typing - use any instead of unknown

---
 src/libs/actions/Session/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index d7043ee7b3eb..ca38e0dd5902 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -125,7 +125,8 @@ function signOutAndRedirectToSignIn() {
  * @param isAnonymousAction The action is allowed for anonymous or not
  * @returns same callback if the action is allowed, otherwise a function that signs out and redirects to sign in
  */
-function checkIfActionIsAllowed<TCallback extends (...args: unknown[]) => unknown>(callback: TCallback, isAnonymousAction = false): TCallback | (() => void) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function checkIfActionIsAllowed<TCallback extends (...args: any[]) => any>(callback: TCallback, isAnonymousAction = false): TCallback | (() => void) {
     if (isAnonymousUser() && !isAnonymousAction) {
         return () => signOutAndRedirectToSignIn();
     }

From 5159644999cb925a226c531a83101622801bd7d9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:26:07 +0100
Subject: [PATCH 160/244] Drop type casting

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 29663868e3b0..ee7417dca5f8 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -376,7 +376,7 @@ function MenuItem(
         <Hoverable>
             {(isHovered) => (
                 <PressableWithSecondaryInteraction
-                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed((args) => onPressAction(args as GestureResponderEvent), isAnonymousAction) : onPressAction}
+                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}

From 5f68392b98270310e035b8931b556c6a99363f09 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:27:07 +0100
Subject: [PATCH 161/244] Implicitly infer type of param

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index ee7417dca5f8..bf4ebe4ea855 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -380,7 +380,7 @@ function MenuItem(
                     onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={onSecondaryInteraction}
-                    style={({pressed}: PressableStateCallbackType) =>
+                    style={({pressed}) =>
                         [
                             containerStyle,
                             errorText ? styles.pb5 : {},

From ec7ca00285c847930fcd16acb6686523759fc7cc Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:27:44 +0100
Subject: [PATCH 162/244] Drop type casting

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index bf4ebe4ea855..aac242193fbc 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -468,7 +468,7 @@ function MenuItem(
                                     <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
                                         {Boolean(description) && shouldShowDescriptionOnTop && (
                                             <Text
-                                                style={descriptionTextStyles as TextStyle}
+                                                style={descriptionTextStyles}
                                                 numberOfLines={2}
                                             >
                                                 {description}

From 6776cc95d7fec4239c0cab0ce01513e25ebdadd8 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:31:33 +0100
Subject: [PATCH 163/244] Convert Boolean() to !!...

---
 src/components/MenuItem.tsx | 39 +++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index aac242193fbc..0fefb97abdbc 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -386,7 +386,7 @@ function MenuItem(
                             errorText ? styles.pb5 : {},
                             combinedStyle,
                             !interactive && styles.cursorDefault,
-                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true),
+                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
                             (isHovered || pressed) && hoverAndPressStyle,
                             ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                             shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
@@ -401,16 +401,16 @@ function MenuItem(
                     {({pressed}) => (
                         <>
                             <View style={[styles.flexColumn, styles.flex1]}>
-                                {Boolean(label) && (
+                                {!!label && (
                                     <View style={icon ? styles.mb2 : null}>
                                         <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre])}>{label}</Text>
                                     </View>
                                 )}
                                 <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && styles.cursorDisabled]}>
-                                    {Boolean(icon) && Array.isArray(icon) && (
+                                    {!!icon && Array.isArray(icon) && (
                                         <MultipleAvatars
                                             isHovered={isHovered}
-                                            isPressed={Boolean(pressed)}
+                                            isPressed={pressed}
                                             icons={icon}
                                             size={avatarSize}
                                             secondAvatarStyle={[
@@ -458,15 +458,12 @@ function MenuItem(
                                                 src={secondaryIcon}
                                                 width={iconWidth}
                                                 height={iconHeight}
-                                                fill={
-                                                    secondaryIconFill ??
-                                                    StyleUtils.getIconFillColor(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive), true)
-                                                }
+                                                fill={secondaryIconFill ?? StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true)}
                                             />
                                         </View>
                                     )}
                                     <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
-                                        {Boolean(description) && shouldShowDescriptionOnTop && (
+                                        {!!description && shouldShowDescriptionOnTop && (
                                             <Text
                                                 style={descriptionTextStyles}
                                                 numberOfLines={2}
@@ -475,12 +472,12 @@ function MenuItem(
                                             </Text>
                                         )}
                                         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {Boolean(title) && (Boolean(shouldRenderAsHTML) || (Boolean(shouldParseTitle) && Boolean(html.length))) && (
+                                            {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
                                                 <View style={styles.renderHTMLTitle}>
                                                     <RenderHTML html={getProcessedTitle} />
                                                 </View>
                                             )}
-                                            {!shouldRenderAsHTML && !shouldParseTitle && Boolean(title) && (
+                                            {!shouldRenderAsHTML && !shouldParseTitle && !!title && (
                                                 <Text
                                                     style={combinedTitleTextStyle}
                                                     numberOfLines={numberOfLinesTitle || undefined}
@@ -489,7 +486,7 @@ function MenuItem(
                                                     {renderTitleContent()}
                                                 </Text>
                                             )}
-                                            {Boolean(shouldShowTitleIcon) && titleIcon && (
+                                            {shouldShowTitleIcon && titleIcon && (
                                                 <View style={[styles.ml2]}>
                                                     <Icon
                                                         src={titleIcon}
@@ -498,7 +495,7 @@ function MenuItem(
                                                 </View>
                                             )}
                                         </View>
-                                        {Boolean(description) && !shouldShowDescriptionOnTop && (
+                                        {!!description && !shouldShowDescriptionOnTop && (
                                             <Text
                                                 style={descriptionTextStyles}
                                                 numberOfLines={2}
@@ -506,12 +503,12 @@ function MenuItem(
                                                 {description}
                                             </Text>
                                         )}
-                                        {Boolean(error) && (
+                                        {!!error && (
                                             <View style={[styles.mt1]}>
                                                 <Text style={[styles.textLabelError]}>{error}</Text>
                                             </View>
                                         )}
-                                        {furtherDetailsIcon && Boolean(furtherDetails) && (
+                                        {furtherDetailsIcon && !!furtherDetails && (
                                             <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
                                                 <Icon
                                                     src={furtherDetailsIcon}
@@ -547,7 +544,7 @@ function MenuItem(
                                     <View style={[styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : undefined]}>
                                         <MultipleAvatars
                                             isHovered={isHovered}
-                                            isPressed={Boolean(pressed)}
+                                            isPressed={pressed}
                                             icons={floatRightAvatars}
                                             size={floatRightAvatarSize ?? fallbackAvatarSize}
                                             fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
@@ -555,7 +552,7 @@ function MenuItem(
                                         />
                                     </View>
                                 )}
-                                {Boolean(brickRoadIndicator) && (
+                                {!!brickRoadIndicator && (
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
@@ -563,23 +560,23 @@ function MenuItem(
                                         />
                                     </View>
                                 )}
-                                {Boolean(rightLabel) && (
+                                {!!rightLabel && (
                                     <View style={styles.justifyContentCenter}>
                                         <Text style={styles.rightLabelMenuItem}>{rightLabel}</Text>
                                     </View>
                                 )}
-                                {Boolean(shouldShowRightIcon) && (
+                                {shouldShowRightIcon && (
                                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, disabled && styles.cursorDisabled]}>
                                         <Icon
                                             src={iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, Boolean(pressed), success, disabled, interactive))}
+                                            fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive))}
                                         />
                                     </View>
                                 )}
                                 {shouldShowRightComponent && rightComponent}
                                 {shouldShowSelectedState && <SelectCircle isChecked={isSelected} />}
                             </View>
-                            {Boolean(errorText) && (
+                            {!!errorText && (
                                 <FormHelpMessage
                                     isError
                                     shouldShowRedDotIndicator={false}

From 6f2112763049c008aa7cfae3c201dfb656af0852 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:32:21 +0100
Subject: [PATCH 164/244] Drop unused import

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 0fefb97abdbc..1d550bdddce5 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import React, {FC, ForwardedRef, forwardRef, ReactNode, useEffect, useMemo, useRef, useState} from 'react';
-import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import {GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import {AnimatedStyle} from 'react-native-reanimated';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';

From 01adc3749ea91865676342dcfb033c115f4e15a1 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Mon, 18 Dec 2023 12:33:30 +0100
Subject: [PATCH 165/244] Do not consider Unknown Merchant and empty merchant

---
 src/components/ReportActionItem/MoneyRequestView.js | 2 +-
 src/libs/TransactionUtils.ts                        | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 817c88d456db..a05319c929f9 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -102,7 +102,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
         cardID: transactionCardID,
     } = ReportUtils.getTransactionDetails(transaction);
     const isEmptyMerchant =
-        transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
+        transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
     let formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : '';
     const hasPendingWaypoints = lodashGet(transaction, 'pendingFields.waypoints', null);
diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
index 232c30658838..4f5610eca686 100644
--- a/src/libs/TransactionUtils.ts
+++ b/src/libs/TransactionUtils.ts
@@ -131,11 +131,10 @@ function hasReceipt(transaction: Transaction | undefined | null): boolean {
 
 function isMerchantMissing(transaction: Transaction) {
     const isMerchantEmpty =
-        transaction.merchant === CONST.TRANSACTION.UNKNOWN_MERCHANT || transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === '';
+        transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === '';
 
     const isModifiedMerchantEmpty =
         !transaction.modifiedMerchant ||
-        transaction.modifiedMerchant === CONST.TRANSACTION.UNKNOWN_MERCHANT ||
         transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT ||
         transaction.modifiedMerchant === '';
 

From 93d4d40a29432b4d2c01ce02abab45966b3589fc Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 12:34:02 +0100
Subject: [PATCH 166/244] Use ParsableStyle instead of merging View and Text

---
 src/components/PressableWithSecondaryInteraction/types.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
index c559b849f6e5..4fe67f8e733b 100644
--- a/src/components/PressableWithSecondaryInteraction/types.ts
+++ b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -1,5 +1,6 @@
-import {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {GestureResponderEvent} from 'react-native';
 import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import {ParsableStyle} from '@styles/utils/types';
 
 type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
     /** The function that should be called when this pressable is pressed */
@@ -40,7 +41,7 @@ type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
     activeOpacity?: number;
 
     /** Used to apply styles to the Pressable */
-    style?: StyleProp<ViewStyle & TextStyle>;
+    style?: ParsableStyle;
 
     /** Whether the long press with hover behavior is enabled */
     enableLongPressWithHover?: boolean;

From 23a9a01bb9e3f4ff6b73db07de690c270bf179a2 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 18 Dec 2023 12:54:28 +0100
Subject: [PATCH 167/244] fix comments

---
 src/pages/home/report/LinkPreviewer.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/LinkPreviewer.tsx b/src/pages/home/report/LinkPreviewer.tsx
index d0952c0365d9..dd6a2b9ab61e 100644
--- a/src/pages/home/report/LinkPreviewer.tsx
+++ b/src/pages/home/report/LinkPreviewer.tsx
@@ -20,11 +20,27 @@ type LinkPreviewerProps = {
     maxAmountOfPreviews?: number;
 };
 
+function filterNonUniqueLinks(linkMetadata: LinkMetadata[]): LinkMetadata[] {
+    const map = new Map<string, string>();
+    const result: LinkMetadata[] = [];
+
+    linkMetadata.forEach((item) => {
+        if (!item.url || map.has(item.url)) {
+            return;
+        }
+
+        map.set(item.url, item.url);
+        result.push(item);
+    });
+
+    return result;
+}
+
 function LinkPreviewer({linkMetadata = [], maxAmountOfPreviews = -1}: LinkPreviewerProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const uniqueLinks = linkMetadata.filter((link, index) => linkMetadata.findIndex(({url}) => url === link.url) === index);
+    const uniqueLinks = filterNonUniqueLinks(linkMetadata);
     const maxAmmountOfLinks = maxAmountOfPreviews >= 0 ? Math.min(maxAmountOfPreviews, linkMetadata.length) : linkMetadata.length;
     const linksToShow = uniqueLinks.slice(0, maxAmmountOfLinks);
     return linksToShow.map((linkData) => {

From 84a862be15d875b50212d787c5586cb610a97c79 Mon Sep 17 00:00:00 2001
From: Jakub Szymczak <szymczak.jakub12@gmail.com>
Date: Mon, 18 Dec 2023 12:55:42 +0100
Subject: [PATCH 168/244] fix naming

---
 src/pages/home/report/LinkPreviewer.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/LinkPreviewer.tsx b/src/pages/home/report/LinkPreviewer.tsx
index dd6a2b9ab61e..209096d2fa15 100644
--- a/src/pages/home/report/LinkPreviewer.tsx
+++ b/src/pages/home/report/LinkPreviewer.tsx
@@ -21,15 +21,15 @@ type LinkPreviewerProps = {
 };
 
 function filterNonUniqueLinks(linkMetadata: LinkMetadata[]): LinkMetadata[] {
-    const map = new Map<string, string>();
+    const linksMap = new Map<string, string>();
     const result: LinkMetadata[] = [];
 
     linkMetadata.forEach((item) => {
-        if (!item.url || map.has(item.url)) {
+        if (!item.url || linksMap.has(item.url)) {
             return;
         }
 
-        map.set(item.url, item.url);
+        linksMap.set(item.url, item.url);
         result.push(item);
     });
 

From efdd400f5576a087fb118d50752072b25c90a748 Mon Sep 17 00:00:00 2001
From: Alberto <alberto@expensify.com>
Date: Mon, 18 Dec 2023 13:14:24 +0100
Subject: [PATCH 169/244] prettier

---
 src/components/ReportActionItem/MoneyRequestView.js | 3 +--
 src/libs/TransactionUtils.ts                        | 8 ++------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index a05319c929f9..d024ef43a69d 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -101,8 +101,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate
         originalCurrency: transactionOriginalCurrency,
         cardID: transactionCardID,
     } = ReportUtils.getTransactionDetails(transaction);
-    const isEmptyMerchant =
-        transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
+    const isEmptyMerchant = transactionMerchant === '' || transactionMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT;
     const isDistanceRequest = TransactionUtils.isDistanceRequest(transaction);
     let formattedTransactionAmount = transactionAmount ? CurrencyUtils.convertToDisplayString(transactionAmount, transactionCurrency) : '';
     const hasPendingWaypoints = lodashGet(transaction, 'pendingFields.waypoints', null);
diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
index 4f5610eca686..6905a542fa5b 100644
--- a/src/libs/TransactionUtils.ts
+++ b/src/libs/TransactionUtils.ts
@@ -130,13 +130,9 @@ function hasReceipt(transaction: Transaction | undefined | null): boolean {
 }
 
 function isMerchantMissing(transaction: Transaction) {
-    const isMerchantEmpty =
-        transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === '';
+    const isMerchantEmpty = transaction.merchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.merchant === '';
 
-    const isModifiedMerchantEmpty =
-        !transaction.modifiedMerchant ||
-        transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT ||
-        transaction.modifiedMerchant === '';
+    const isModifiedMerchantEmpty = !transaction.modifiedMerchant || transaction.modifiedMerchant === CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT || transaction.modifiedMerchant === '';
 
     return isMerchantEmpty && isModifiedMerchantEmpty;
 }

From 13f7b9c78fb5c122be011ef1178dfc4a35dfda24 Mon Sep 17 00:00:00 2001
From: Cristi Paval <cristi@expensify.com>
Date: Mon, 18 Dec 2023 15:05:03 +0200
Subject: [PATCH 170/244] Add changes from main

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

diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
index aa1604f9536a..c3d9b0a85339 100644
--- a/src/libs/ModifiedExpenseMessage.ts
+++ b/src/libs/ModifiedExpenseMessage.ts
@@ -146,7 +146,8 @@ function getForReportAction(reportAction: ReportAction): string {
     const hasModifiedCreated = reportActionOriginalMessage && 'oldCreated' in reportActionOriginalMessage && 'created' in reportActionOriginalMessage;
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
-        const formattedOldCreated = format(new Date(reportActionOriginalMessage?.oldCreated ?? ''), CONST.DATE.FNS_FORMAT_STRING);
+        let formattedOldCreated: Date | string = new Date(reportActionOriginalMessage?.oldCreated ? reportActionOriginalMessage.oldCreated : 0);
+        formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING);
         buildMessageFragmentForValue(
             reportActionOriginalMessage?.created ?? '',
             formattedOldCreated,

From d8dc3143385bbf78e7f7a1ff7fb8c65e517c8ba0 Mon Sep 17 00:00:00 2001
From: Fitsum Abebe <engfitsum@gmail.com>
Date: Mon, 18 Dec 2023 16:35:24 +0300
Subject: [PATCH 171/244] changed minheight to 116

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3b416feb59ba..1c106c6bcd19 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2655,7 +2655,7 @@ const styles = (theme: ThemeColors) =>
             paddingVertical: 12,
         },
 
-        moneyRequestAmountContainer: {minHeight: 92},
+        moneyRequestAmountContainer: {minHeight: 116},
 
         requestPreviewBox: {
             marginTop: 12,

From bc1853407477cff915a7ebdd37cedf14c1141ec8 Mon Sep 17 00:00:00 2001
From: Fitsum Abebe <engfitsum@gmail.com>
Date: Mon, 18 Dec 2023 17:49:19 +0300
Subject: [PATCH 172/244] changed to 114

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1c106c6bcd19..1ff8ae8b4187 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2655,7 +2655,7 @@ const styles = (theme: ThemeColors) =>
             paddingVertical: 12,
         },
 
-        moneyRequestAmountContainer: {minHeight: 116},
+        moneyRequestAmountContainer: {minHeight: 114},
 
         requestPreviewBox: {
             marginTop: 12,

From abc385ca9c7d38604f37a8cd54405d04dcf36f50 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 16:19:47 +0100
Subject: [PATCH 173/244] Blank line

---
 src/components/Icon/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index a1cc68afc33a..932ea17541b9 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -101,4 +101,5 @@ function Icon({
 Icon.displayName = 'Icon';
 
 export type {SrcProps};
+
 export default Icon;

From bd2b0c9ff9ee62ce3ac5ae8d34ad4454d931b20b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 16:22:41 +0100
Subject: [PATCH 174/244] Split type imports

---
 src/components/MenuItemWithTopDescription.tsx             | 3 ++-
 src/components/PressableWithSecondaryInteraction/types.ts | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/MenuItemWithTopDescription.tsx b/src/components/MenuItemWithTopDescription.tsx
index 98dedd9d81a6..48fa95ecf637 100644
--- a/src/components/MenuItemWithTopDescription.tsx
+++ b/src/components/MenuItemWithTopDescription.tsx
@@ -1,6 +1,7 @@
 import React, {ForwardedRef, forwardRef} from 'react';
 import {View} from 'react-native';
-import MenuItem, {MenuItemProps} from './MenuItem';
+import MenuItem from './MenuItem';
+import type {MenuItemProps} from './MenuItem';
 
 function MenuItemWithTopDescription(props: MenuItemProps, ref: ForwardedRef<View>) {
     return (
diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
index 4fe67f8e733b..bf999e9692b5 100644
--- a/src/components/PressableWithSecondaryInteraction/types.ts
+++ b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -1,6 +1,6 @@
-import {GestureResponderEvent} from 'react-native';
+import type {GestureResponderEvent} from 'react-native';
 import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
-import {ParsableStyle} from '@styles/utils/types';
+import type {ParsableStyle} from '@styles/utils/types';
 
 type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps & {
     /** The function that should be called when this pressable is pressed */

From 9de6f8b3f66683f8f4c717b09aeed89286d60964 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 16:22:52 +0100
Subject: [PATCH 175/244] Use safe operator

---
 src/components/MenuItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 1d550bdddce5..c2cc4abce6c5 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -363,7 +363,7 @@ function MenuItem(
             return;
         }
 
-        if (event && event.type === 'click') {
+        if (event?.type === 'click') {
             (event.currentTarget as HTMLElement).blur();
         }
 

From 9da1c8e0e486c30646e9aee236a55b48c34c82a8 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:24:31 +0100
Subject: [PATCH 176/244] Only apply mh1 on single layout

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

diff --git a/src/components/Section.js b/src/components/Section.js
index 96fdeea42891..43b63fa6310f 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -116,7 +116,7 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
                         iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
                     />
                 )}
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, styles.mh1, ...titleStyles]}>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
                     <View style={[styles.flexShrink1]}>
                         <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
                     </View>

From 5d3d93af6e770ee82f0bfed7637a9f31b31ae932 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:24:56 +0100
Subject: [PATCH 177/244] Bool instead of boolean

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

diff --git a/src/components/Section.js b/src/components/Section.js
index 43b63fa6310f..df74e52a1c41 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -48,7 +48,7 @@ const propTypes = {
     subtitleStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Whether the subtitle should have a muted style */
-    subtitleMuted: PropTypes.boolean,
+    subtitleMuted: PropTypes.bool,
 
     /** Customize the Section container */
     // eslint-disable-next-line react/forbid-prop-types

From 0cc848e37fdb3ddab359ca2dfe63709093f6570b Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:26:07 +0100
Subject: [PATCH 178/244] Use useLocalize instead of withLocalize

---
 .../workspace/card/WorkspaceCardCreateAWorkspace.tsx     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
index d8f94dfe244f..9e45bd143e7e 100644
--- a/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
+++ b/src/pages/workspace/card/WorkspaceCardCreateAWorkspace.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import Button from '@components/Button';
 import * as Illustrations from '@components/Icon/Illustrations';
 import Section, {CARD_LAYOUT} from '@components/Section';
-import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-type WorkspaceCardCreateAWorkspaceProps = WithLocalizeProps;
-
-function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspaceProps) {
+function WorkspaceCardCreateAWorkspace() {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
 
     return (
         <Section
@@ -31,4 +30,4 @@ function WorkspaceCardCreateAWorkspace({translate}: WorkspaceCardCreateAWorkspac
 
 WorkspaceCardCreateAWorkspace.displayName = 'WorkspaceCardNoVBAView';
 
-export default withLocalize(WorkspaceCardCreateAWorkspace);
+export default WorkspaceCardCreateAWorkspace;

From 91b8e91a05cf207b114e4123c43f03d5bef46a8c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:29:38 +0100
Subject: [PATCH 179/244] Spread array of styles

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

diff --git a/src/components/Section.js b/src/components/Section.js
index df74e52a1c41..1e2816385956 100644
--- a/src/components/Section.js
+++ b/src/components/Section.js
@@ -113,7 +113,7 @@ function Section({children, childrenStyles, containerStyles, icon, IconComponent
                     <IconSection
                         icon={icon}
                         IconComponent={IconComponent}
-                        iconContainerStyles={[iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
                     />
                 )}
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>

From 5e800a2289c1cd2c4a1d7a19ab53b0791a776f3d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 17:41:52 +0100
Subject: [PATCH 180/244] Split Section to index.js and IconSection.js

---
 src/components/Section/IconSection.js |  40 +++++++++
 src/components/Section/index.js       | 121 ++++++++++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 src/components/Section/IconSection.js
 create mode 100644 src/components/Section/index.js

diff --git a/src/components/Section/IconSection.js b/src/components/Section/IconSection.js
new file mode 100644
index 000000000000..21dc458f2c76
--- /dev/null
+++ b/src/components/Section/IconSection.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+const iconSectionPropTypes = {
+    icon: PropTypes.icon,
+    IconComponent: PropTypes.IconComponent,
+    iconContainerStyles: PropTypes.iconContainerStyles,
+};
+
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
+
+export default IconSection;
diff --git a/src/components/Section/index.js b/src/components/Section/index.js
new file mode 100644
index 000000000000..cadadfe94b39
--- /dev/null
+++ b/src/components/Section/index.js
@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import MenuItemList from '@components/MenuItemList';
+import menuItemPropTypes from '@components/menuItemPropTypes';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import IconSection from './IconSection';
+
+const CARD_LAYOUT = {
+    ICON_ON_TOP: 'iconOnTop',
+    ICON_ON_RIGHT: 'iconOnRight',
+};
+
+const propTypes = {
+    /** An array of props that are pass to individual MenuItem components */
+    menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
+
+    /** The text to display in the title of the section */
+    title: PropTypes.string.isRequired,
+
+    /** The text to display in the subtitle of the section */
+    subtitle: PropTypes.string,
+
+    /** The icon to display along with the title */
+    icon: PropTypes.func,
+
+    /** Icon component */
+    IconComponent: PropTypes.func,
+
+    /** Card layout that affects icon positioning, margins, sizes. */
+    // eslint-disable-next-line rulesdir/prefer-underscore-method
+    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
+
+    /** Contents to display inside the section */
+    children: PropTypes.node,
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    titleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    subtitleStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether the subtitle should have a muted style */
+    subtitleMuted: PropTypes.bool,
+
+    /** Customize the Section container */
+    // eslint-disable-next-line react/forbid-prop-types
+    childrenStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Customize the Icon container */
+    // eslint-disable-next-line react/forbid-prop-types
+    iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+const defaultProps = {
+    menuItems: null,
+    children: null,
+    icon: null,
+    IconComponent: null,
+    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
+    containerStyles: [],
+    iconContainerStyles: [],
+    titleStyles: [],
+    subtitleStyles: [],
+    subtitleMuted: false,
+    childrenStyles: [],
+    subtitle: null,
+};
+
+function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <>
+            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
+                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
+                    <IconSection
+                        icon={icon}
+                        IconComponent={IconComponent}
+                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
+                    />
+                )}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
+                    <View style={[styles.flexShrink1]}>
+                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
+                    </View>
+                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
+                        <IconSection
+                            icon={icon}
+                            IconComponent={IconComponent}
+                            iconContainerStyles={iconContainerStyles}
+                        />
+                    )}
+                </View>
+
+                {Boolean(subtitle) && (
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
+                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
+                    </View>
+                )}
+
+                <View style={[styles.w100, ...childrenStyles]}>{children}</View>
+
+                <View style={[styles.w100]}>{Boolean(menuItems) && <MenuItemList menuItems={menuItems} />}</View>
+            </View>
+        </>
+    );
+}
+Section.displayName = 'Section';
+Section.propTypes = propTypes;
+Section.defaultProps = defaultProps;
+
+export {CARD_LAYOUT};
+export default Section;

From 6fd3b5ab0f959dfe545d036b76ce4864aa664756 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Mon, 18 Dec 2023 18:18:32 +0100
Subject: [PATCH 181/244] Drop Section.js after pushing it to a separate
 directory

---
 src/components/Section.js | 153 --------------------------------------
 1 file changed, 153 deletions(-)
 delete mode 100644 src/components/Section.js

diff --git a/src/components/Section.js b/src/components/Section.js
deleted file mode 100644
index 1e2816385956..000000000000
--- a/src/components/Section.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import useThemeStyles from '@hooks/useThemeStyles';
-import Icon from './Icon';
-import MenuItemList from './MenuItemList';
-import menuItemPropTypes from './menuItemPropTypes';
-import Text from './Text';
-
-const CARD_LAYOUT = {
-    ICON_ON_TOP: 'iconOnTop',
-    ICON_ON_RIGHT: 'iconOnRight',
-};
-
-const propTypes = {
-    /** An array of props that are pass to individual MenuItem components */
-    menuItems: PropTypes.arrayOf(PropTypes.shape(menuItemPropTypes)),
-
-    /** The text to display in the title of the section */
-    title: PropTypes.string.isRequired,
-
-    /** The text to display in the subtitle of the section */
-    subtitle: PropTypes.string,
-
-    /** The icon to display along with the title */
-    icon: PropTypes.func,
-
-    /** Icon component */
-    IconComponent: PropTypes.func,
-
-    /** Card layout that affects icon positioning, margins, sizes. */
-    // eslint-disable-next-line rulesdir/prefer-underscore-method
-    cardLayout: PropTypes.oneOf(Object.values(CARD_LAYOUT)),
-
-    /** Contents to display inside the section */
-    children: PropTypes.node,
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    titleStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    subtitleStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Whether the subtitle should have a muted style */
-    subtitleMuted: PropTypes.bool,
-
-    /** Customize the Section container */
-    // eslint-disable-next-line react/forbid-prop-types
-    childrenStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the Icon container */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconContainerStyles: PropTypes.arrayOf(PropTypes.object),
-};
-
-const iconSectionPropTypes = {
-    icon: propTypes.icon,
-    IconComponent: propTypes.IconComponent,
-    iconContainerStyles: propTypes.iconContainerStyles,
-};
-
-const defaultProps = {
-    menuItems: null,
-    children: null,
-    icon: null,
-    IconComponent: null,
-    cardLayout: CARD_LAYOUT.ICON_ON_RIGHT,
-    containerStyles: [],
-    iconContainerStyles: [],
-    titleStyles: [],
-    subtitleStyles: [],
-    subtitleMuted: false,
-    childrenStyles: [],
-    subtitle: null,
-};
-
-const defaultIconSectionPropTypes = {
-    icon: null,
-    IconComponent: null,
-    iconContainerStyles: [],
-};
-
-function IconSection({icon, IconComponent, iconContainerStyles}) {
-    const styles = useThemeStyles();
-
-    return (
-        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
-            {Boolean(icon) && (
-                <Icon
-                    src={icon}
-                    height={68}
-                    width={68}
-                />
-            )}
-            {Boolean(IconComponent) && <IconComponent />}
-        </View>
-    );
-}
-
-function Section({children, childrenStyles, containerStyles, icon, IconComponent, cardLayout, iconContainerStyles, menuItems, subtitle, subtitleStyles, subtitleMuted, title, titleStyles}) {
-    const styles = useThemeStyles();
-
-    return (
-        <>
-            <View style={[styles.pageWrapper, styles.cardSection, ...containerStyles]}>
-                {cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
-                    <IconSection
-                        icon={icon}
-                        IconComponent={IconComponent}
-                        iconContainerStyles={[...iconContainerStyles, styles.alignSelfStart, styles.mb3]}
-                    />
-                )}
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP && styles.mh1, ...titleStyles]}>
-                    <View style={[styles.flexShrink1]}>
-                        <Text style={[styles.textHeadline, styles.cardSectionTitle]}>{title}</Text>
-                    </View>
-                    {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && (
-                        <IconSection
-                            icon={icon}
-                            IconComponent={IconComponent}
-                            iconContainerStyles={iconContainerStyles}
-                        />
-                    )}
-                </View>
-
-                {Boolean(subtitle) && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100, cardLayout === CARD_LAYOUT.ICON_ON_TOP ? [styles.mt1, styles.mh1] : styles.mt4, ...subtitleStyles]}>
-                        <Text style={[styles.textNormal, subtitleMuted && styles.colorMuted]}>{subtitle}</Text>
-                    </View>
-                )}
-
-                <View style={[styles.w100, ...childrenStyles]}>{children}</View>
-
-                <View style={[styles.w100]}>{Boolean(menuItems) && <MenuItemList menuItems={menuItems} />}</View>
-            </View>
-        </>
-    );
-}
-IconSection.displayName = 'IconSection';
-IconSection.propTypes = iconSectionPropTypes;
-IconSection.defaultProps = defaultIconSectionPropTypes;
-Section.displayName = 'Section';
-Section.propTypes = propTypes;
-Section.defaultProps = defaultProps;
-
-export {CARD_LAYOUT};
-export default Section;

From 7271668d3bef91cc0c681a32cb927e94c98db4cd Mon Sep 17 00:00:00 2001
From: Andrew Rosiclair <arosiclair@expensify.com>
Date: Mon, 18 Dec 2023 15:31:33 -0500
Subject: [PATCH 182/244] move clearing notification logic to ReportScreen

---
 src/libs/actions/Report.ts     |  3 ---
 src/pages/home/ReportScreen.js | 20 ++++++++++----------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index c3b1532b4d87..a13e1e34eea9 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -16,7 +16,6 @@ import * as Environment from '@libs/Environment/Environment';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
-import clearReportNotifications from '@libs/Notification/clearReportNotifications';
 import LocalNotification from '@libs/Notification/LocalNotification';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
@@ -475,8 +474,6 @@ function openReport(
         return;
     }
 
-    clearReportNotifications(reportID);
-
     const optimisticReport = reportActionsExist(reportID)
         ? {}
         : {
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 161b8aa8889d..6ad68af4577c 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -291,17 +291,17 @@ function ReportScreen({
         [route],
     );
 
-    // Clear notifications for the current report when the app is focused
-    useAppFocusEvent(
-        useCallback(() => {
-            // Check if this is the top-most ReportScreen since the Navigator preserves multiple at a time
-            if (!isTopMostReportId) {
-                return;
-            }
+    // Clear notifications for the current report when it's opened and re-focused
+    const clearNotifications = useCallback(() => {
+        // Check if this is the top-most ReportScreen since the Navigator preserves multiple at a time
+        if (!isTopMostReportId) {
+            return;
+        }
 
-            clearReportNotifications(report.reportID);
-        }, [report.reportID, isTopMostReportId]),
-    );
+        clearReportNotifications(report.reportID);
+    }, [report.reportID, isTopMostReportId]);
+    useEffect(clearNotifications, [clearNotifications]);
+    useAppFocusEvent(clearNotifications);
 
     useEffect(() => {
         Timing.end(CONST.TIMING.CHAT_RENDER);

From 05c288002385cdbd5b62764375e1a8eb53e5a85c Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 06:39:29 +0530
Subject: [PATCH 183/244] add icons

---
 docs/assets/images/send-money.svg          | 25 ++++++++++++++++++++++
 docs/assets/images/subscription-annual.svg | 23 ++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 docs/assets/images/send-money.svg
 create mode 100644 docs/assets/images/subscription-annual.svg

diff --git a/docs/assets/images/send-money.svg b/docs/assets/images/send-money.svg
new file mode 100644
index 000000000000..e858f0d5c327
--- /dev/null
+++ b/docs/assets/images/send-money.svg
@@ -0,0 +1,25 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.0211 5.11499L7.45224 18.5637L16.6864 26.0851L18.6252 42.8405L25.6905 35.4302L36.5185 44.7793L52.0211 5.11499Z" fill="#00B268"/>
+<path d="M12.8126 23.0083L7.6821 19.4756C7.6821 19.4756 7.9081 25.1374 7.45611 25.518L12.8126 23.0122V23.0083Z" fill="#085239"/>
+<path d="M16.686 26.0851L18.6248 42.8405L51.2198 6.25293L49.511 6.70889L16.686 26.0851Z" fill="#085239"/>
+<path d="M35.8922 33.7808C35.8922 33.7808 34.4093 32.5834 32.9859 33.3803C31.5626 34.1773 32.9859 36.7425 32.9859 36.7425C32.9859 36.7425 34.4688 37.7099 35.6662 37.0835C36.8636 36.457 36.8636 34.4627 35.8922 33.7768V33.7808Z" fill="#085239"/>
+<path d="M17.959 18.9641C17.959 18.9641 16.4761 17.7667 15.0528 18.5637C13.6294 19.3606 15.0528 21.9259 15.0528 21.9259C15.0528 21.9259 16.5356 22.8933 17.733 22.2668C18.9304 21.6404 18.9304 19.6461 17.959 18.9602V18.9641Z" fill="#085239"/>
+<path d="M42.8263 16.0541C42.8263 16.0541 38.116 14.0043 33.4811 19.0952C28.8462 24.186 27.0977 28.2143 28.7709 32.1633L42.8263 16.0541Z" fill="#03D47C"/>
+<path d="M46.7756 8.30676C46.7756 8.30676 46.0144 7.24418 44.7258 7.92614C43.4333 8.60809 44.1192 9.67464 44.1192 9.67464L46.7796 8.30676H46.7756Z" fill="#085239"/>
+<path d="M48.5992 9.59521L46.5493 11.9503C46.5493 11.9503 48.2225 12.8622 48.7538 11.5697C49.2851 10.2772 48.6031 9.59521 48.6031 9.59521H48.5992Z" fill="#085239"/>
+<path d="M23.0098 38.4513L21.4159 23.8052" stroke="#002E22" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.2457 23.5792C21.2457 23.5792 22.8237 20.0823 20.8453 17.5011L43.4885 9.8252" stroke="#008C59" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.1079 31.727C29.1079 31.727 32.2441 29.3917 36.2327 30.6446L46.2043 12.4658" stroke="#008C59" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.07512 18.7541L52.4766 5L36.2881 44.8903L25.8328 35.4579L18.6207 43.118L16.8009 26.315L7.07512 18.7541Z" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.833 35.4579L52.4768 5" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.8014 26.315L52.4771 5" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.07533 18.7539C8.59387 22.6672 7 25.8946 7 25.8946L12.7926 23.1945" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M28.8348 31.9808C26.7017 30.0658 28.141 24.9789 32.0503 20.6255C35.7614 16.4902 40.3646 14.4998 42.6483 15.943" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.1418 36.9296C37.0058 36.0656 36.9292 34.5883 35.9708 33.6298C35.0123 32.6714 33.535 32.5948 32.671 33.4588C31.807 34.3228 31.8835 35.8002 32.842 36.7586C33.8004 37.717 35.2778 37.7936 36.1418 36.9296Z" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M48.6112 9.77368C49.0869 10.4398 49.0671 11.32 48.5279 11.8632C48.0164 12.3746 47.1957 12.4182 46.5455 12.0178" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5704 21.285C19.081 20.1749 18.4966 18.8159 17.2652 18.2495C16.0338 17.6831 14.6216 18.1239 14.111 19.2339C13.6005 20.344 14.1848 21.703 15.4163 22.2694C16.6477 22.8358 18.0599 22.3951 18.5704 21.285Z" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M44.0795 9.77356C43.909 9.38897 43.8932 8.9568 44.0755 8.56825C44.4284 7.79907 45.4077 7.49377 46.2602 7.88629C46.4544 7.97748 46.6289 8.09643 46.7756 8.2352" stroke="#002140" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.3169 45.6833C17.3169 45.6833 17.075 46.2424 16.7658 47.1702" stroke="#008C59" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9167 50.3142C15.1039 54.283 14.981 59.7585 19.4414 62.3991C30.7373 68.4811 46.7235 47.519 60.0375 62.8828" stroke="#008C59" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.0683 64.1516C61.3775 64.56 61.6868 64.9882 61.996 65.4402" stroke="#008C59" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/docs/assets/images/subscription-annual.svg b/docs/assets/images/subscription-annual.svg
new file mode 100644
index 000000000000..a4b99a43b16e
--- /dev/null
+++ b/docs/assets/images/subscription-annual.svg
@@ -0,0 +1,23 @@
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5778 17.6361C24.484 17.6361 25.3105 17.9783 25.935 18.5387L26.024 18.6497C25.3457 19.1953 24.4914 19.5319 23.5611 19.5634C23.5074 19.5671 23.4592 19.5671 23.4055 19.5671V19.5781C22.3862 19.6743 22.0397 20.4104 22.0397 21.1595C22.0397 22.0232 22.579 22.7483 23.5537 22.7853C24.8102 22.7594 25.9906 22.4154 27.0173 21.8383L27.0284 21.8586C26.7004 23.4622 25.279 24.6662 23.576 24.6662C21.6301 24.6662 20.0531 23.0923 20.0531 21.1503C20.0531 19.2082 21.6301 17.6343 23.576 17.6343L23.5778 17.6361Z" fill="#E4BC07"/>
+<path d="M47.567 21.8401L47.5781 21.8605C47.2501 23.464 45.8287 24.6681 44.1256 24.6681C42.1798 24.6681 40.6028 23.0941 40.6028 21.1521C40.6028 19.2101 42.1798 17.6361 44.1256 17.6361C45.0318 17.6361 45.8583 17.9783 46.4829 18.5387L46.5718 18.6497C45.8936 19.1953 45.0392 19.5319 44.109 19.5633C44.0552 19.567 44.007 19.567 43.9533 19.567V19.5781C42.9341 19.6743 42.5875 20.4104 42.5875 21.1595C42.5875 22.0232 43.1268 22.7483 44.1015 22.7852C45.358 22.7593 46.5385 22.4153 47.5651 21.8383L47.567 21.8401Z" fill="#E4BC07"/>
+<path d="M48.1507 15.3797C48.1507 15.2798 48.147 15.1799 48.1396 15.0801C47.9876 12.9068 46.1734 11.1886 43.9533 11.1886C41.7332 11.1886 40.0783 12.7589 39.7967 14.7989V15.0856H36.5499V14.8156C36.8464 11.0037 40.0394 8 43.9366 8C47.8338 8 51.188 11.1516 51.34 15.0986C51.3437 15.1947 51.3455 15.2928 51.3455 15.3908C51.3455 18.1559 49.8223 20.5714 47.567 21.8364C46.5403 22.4135 45.3598 22.7557 44.1034 22.7834C43.1286 22.7446 42.5894 22.0214 42.5894 21.1577C42.5894 20.4067 42.9359 19.6725 43.9551 19.5763V19.5652C44.0089 19.5652 44.0571 19.5652 44.1108 19.5615C45.0411 19.5301 45.8954 19.1916 46.5737 18.6478C47.5373 17.884 48.1526 16.7021 48.1526 15.3778L48.1507 15.3797Z" fill="#002140"/>
+<path d="M19.2766 14.6084V15.0856H15.9854C15.9891 14.995 15.9947 14.9062 16.0002 14.8156C16.2967 11.0055 19.4916 8.00183 23.3869 8.00183C27.2823 8.00183 30.6291 11.1479 30.7903 15.0893C30.794 15.1892 30.7959 15.2909 30.7959 15.3945C30.7959 18.1595 29.2726 20.575 27.0173 21.8401C25.9906 22.4172 24.8102 22.7594 23.5537 22.7871C22.579 22.7483 22.0397 22.0251 22.0397 21.1613C22.0397 20.4104 22.3862 19.6762 23.4055 19.58V19.5689C23.4592 19.5689 23.5074 19.5689 23.5611 19.5652C24.4914 19.5337 25.3457 19.1953 26.024 18.6515C26.9876 17.8877 27.6029 16.7058 27.6029 15.3815C27.6029 15.2816 27.5992 15.1855 27.5918 15.0893C27.4416 12.9124 25.6255 11.1923 23.4055 11.1923C21.354 11.1923 19.6398 12.6664 19.2785 14.6121L19.2766 14.6084Z" fill="#002140"/>
+<path d="M54.1253 26.2513H54.5385V52.931C54.5385 54.8657 52.9541 56.447 51.0157 56.447H16.6173C14.6789 56.447 13.0945 54.8657 13.0945 52.931V26.2513H54.1253Z" fill="#FFFAF0"/>
+<path d="M51.3659 15.1005C53.1412 15.2799 54.5385 16.7854 54.5385 18.6017V26.2514H44.1256V24.6663C45.8287 24.6663 47.2482 23.4623 47.578 21.8587L47.5669 21.8384C49.8222 20.5733 51.3455 18.1578 51.3455 15.3927C51.3455 15.2928 51.3418 15.1966 51.34 15.1005H51.3659Z" fill="#FED607"/>
+<path d="M48.1507 15.3797C48.1507 16.704 47.5336 17.884 46.5718 18.6497L46.4829 18.5387C45.8584 17.9783 45.0318 17.6361 44.1256 17.6361C42.1798 17.6361 40.6028 19.2101 40.6028 21.1521C40.6028 23.0942 42.1798 24.6681 44.1256 24.6681V26.2532H23.5778V24.6681C25.2809 24.6681 26.7004 23.4641 27.0303 21.8605L27.0191 21.8402C29.2744 20.5751 30.7977 18.1596 30.7977 15.3945C30.7977 15.2928 30.794 15.1892 30.7922 15.0893L30.9182 15.0856H48.0469L48.1414 15.0801C48.1507 15.18 48.1526 15.2798 48.1526 15.3797H48.1507Z" fill="#FED607"/>
+<path d="M23.5778 26.2513H13.0945V18.6016C13.0945 16.8815 14.3472 15.4425 15.9854 15.1448C16.1911 15.1059 16.4024 15.0856 16.6173 15.0856H27.5899C27.5992 15.1817 27.601 15.2798 27.601 15.3778C27.601 16.7021 26.9839 17.8821 26.0221 18.6478L25.9332 18.5368C25.3087 17.9764 24.4821 17.6342 23.576 17.6342C21.6301 17.6342 20.0531 19.2082 20.0531 21.1502C20.0531 23.0923 21.6301 24.6662 23.576 24.6662V26.2513H23.5778Z" fill="#FED607"/>
+<path d="M30.9163 15.0856H36.5499H39.7967H48.0451" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M16.0873 15.0856H17.9331H17.9664H27.588H27.6029" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M16.6173 56.4469C14.6789 56.4469 13.0945 54.8656 13.0945 52.931V18.6016C13.0945 16.8815 14.3472 15.4425 15.9854 15.1448C16.1911 15.1059 16.4024 15.0856 16.6173 15.0856" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M51.2955 15.1003C53.1116 15.2797 54.5385 16.7834 54.5385 18.5997V52.9161C54.5385 54.8489 52.9189 56.4303 50.9379 56.4303H15.9947" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M13 26.2513H15.2256H25.1641H44.6464H54.1253" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M15.9799 15.3945C15.9799 15.3131 15.9799 15.228 15.9854 15.1448C15.9817 15.1244 15.9854 15.1059 15.9854 15.0856C15.9891 14.995 15.9947 14.9062 16.0002 14.8156" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M16.0002 14.8174C16.2967 11.0055 19.4916 8.00183 23.3869 8.00183C27.2823 8.00183 30.6291 11.1479 30.7903 15.0893C30.794 15.1892 30.7959 15.2909 30.7959 15.3945C30.7959 18.1595 29.2726 20.575 27.0173 21.8401C25.9906 22.4172 24.8102 22.7594 23.5537 22.7871C23.4981 22.7908 23.4425 22.7908 23.3869 22.7908" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M19.247 14.7989C19.2563 14.7342 19.2655 14.6731 19.2767 14.6084C19.638 12.6627 21.3522 11.1886 23.4036 11.1886C25.6237 11.1886 27.4398 12.9087 27.5899 15.0856C27.5992 15.1818 27.6011 15.2798 27.6011 15.3778C27.6011 16.7021 26.9839 17.8821 26.0222 18.6478C25.3439 19.1934 24.4896 19.53 23.5593 19.5615C23.5056 19.5652 23.4574 19.5652 23.4036 19.5652" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M23.8391 22.7797C23.7835 22.7852 23.7279 22.7889 23.6723 22.7889C23.6316 22.7889 23.5927 22.7889 23.5556 22.7852C22.5808 22.7464 22.0416 22.0232 22.0416 21.1595C22.0416 20.4086 22.3881 19.6743 23.4073 19.5781C23.4574 19.5726 23.5093 19.5689 23.563 19.567" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M36.5499 14.8174C36.8464 11.0055 40.0394 8.00183 43.9366 8.00183C47.8338 8.00183 51.188 11.1535 51.34 15.1004C51.3437 15.1966 51.3455 15.2946 51.3455 15.3926C51.3455 18.1577 49.8223 20.5732 47.567 21.8383C46.5403 22.4153 45.3598 22.7575 44.1034 22.7852C44.0478 22.7889 43.9922 22.7889 43.9366 22.7889" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M39.7967 14.7989C40.0784 12.7589 41.8333 11.1886 43.9533 11.1886C46.0733 11.1886 47.9877 12.905 48.1396 15.08C48.1489 15.1799 48.1507 15.2798 48.1507 15.3797C48.1507 16.7039 47.5336 17.884 46.5718 18.6497C45.8936 19.1953 45.0393 19.5319 44.109 19.5633C44.0553 19.567 44.0071 19.567 43.9533 19.567" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M44.3888 22.7797C44.3332 22.7852 44.2776 22.7889 44.222 22.7889C44.1813 22.7889 44.1423 22.7889 44.1053 22.7852C43.1305 22.7464 42.5912 22.0232 42.5912 21.1595C42.5912 20.4086 42.9378 19.6743 43.957 19.5781C44.0071 19.5726 44.059 19.5689 44.1127 19.567" stroke="#002140" stroke-miterlimit="10"/>
+<path d="M34.6897 37.605L34.6897 37.6049L34.6839 37.6032C33.9664 37.3904 33.4302 37.1825 33.0723 36.9008C32.7499 36.647 32.5625 36.3267 32.5625 35.8011C32.5625 35.2383 32.7731 34.8441 33.0898 34.5817C33.418 34.3098 33.9007 34.1476 34.4792 34.1476C35.0229 34.1476 35.4697 34.3169 35.8242 34.6318C36.1845 34.9518 36.4813 35.4512 36.6613 36.1589L36.6715 36.199L36.6881 36.2369C36.6993 36.2623 36.7113 36.2901 36.7241 36.32C36.8056 36.5091 36.9218 36.779 37.0752 37.0016C37.2574 37.266 37.5711 37.5804 38.0625 37.5804C38.6347 37.5804 39.002 37.1572 39.2009 36.6983C39.4032 36.2318 39.5 35.6007 39.5 34.863C39.5 34.1043 39.3795 33.3126 39.1308 32.6915C38.9009 32.117 38.4604 31.4632 37.7083 31.4632C37.2692 31.4632 36.9103 31.6724 36.6711 32.0036C36.4557 31.9017 36.2211 31.8065 35.9735 31.7265L36.0784 30.9887L36.0799 30.9779L36.081 30.967C36.0883 30.8919 36.0983 30.8153 36.109 30.7337C36.1121 30.7103 36.1152 30.6866 36.1183 30.6623C36.1305 30.5679 36.1458 30.4445 36.1458 30.3427C36.1458 30.09 36.0925 29.7873 35.8717 29.5495C35.6442 29.3044 35.3298 29.2244 35.0208 29.2244C34.6532 29.2244 34.3221 29.3555 34.0794 29.6469C33.859 29.9114 33.7512 30.2619 33.6936 30.6273L33.6935 30.6273L33.6923 30.6361L33.5828 31.4204C30.8659 31.6448 28.5208 33.5766 28.5208 36.5687C28.5208 38.0155 29.0788 39.1001 29.9408 39.9014C30.7862 40.6871 31.9051 41.1842 33.0208 41.5246L33.0208 41.5246L33.0263 41.5262C33.7371 41.7341 34.2842 41.9715 34.6499 42.2827C34.9906 42.5725 35.1875 42.9363 35.1875 43.477C35.1875 44.0391 34.972 44.4634 34.6311 44.7546C34.2821 45.0525 33.7688 45.2372 33.1458 45.2372C31.9457 45.2372 30.8964 44.3733 30.4503 43.1177C30.419 43.0295 30.3851 42.927 30.3489 42.8176C30.2611 42.5518 30.1597 42.2449 30.048 42.0022C29.9657 41.8231 29.8569 41.6276 29.7058 41.4713C29.5467 41.3069 29.318 41.1647 29.0208 41.1647C28.464 41.1647 28.0793 41.6013 27.8599 42.0842C27.63 42.5902 27.5 43.2971 27.5 44.1807C27.5 45.1155 27.6586 45.9706 27.9374 46.611C28.0765 46.9306 28.2553 47.2193 28.48 47.4349C28.7076 47.6533 29.0038 47.815 29.3542 47.815C29.8142 47.815 30.1756 47.5907 30.4197 47.2625C30.7949 47.4389 31.2276 47.6017 31.6912 47.7228L31.5894 48.4522C31.5458 48.6998 31.5208 48.9404 31.5208 49.106C31.5208 49.3587 31.5742 49.6614 31.795 49.8993C32.0225 50.1444 32.3369 50.2244 32.6458 50.2244C33.0105 50.2244 33.3459 50.0954 33.5921 49.8054C33.8194 49.5377 33.9277 49.1825 33.9751 48.8072C33.9751 48.8068 33.9752 48.8065 33.9752 48.8061L34.0879 47.9414C36.9729 47.7009 39.2083 45.7036 39.2083 42.7521C39.2083 41.3143 38.6784 40.1964 37.8293 39.3513C36.9931 38.5191 35.8677 37.97 34.6897 37.605Z" fill="#50EEF6" stroke="#002140"/>
+</svg>

From 85a18ff371e604a1ac357f053912b52d5efd77ee Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 06:43:14 +0530
Subject: [PATCH 184/244] use icons

---
 docs/_data/_routes.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_data/_routes.yml b/docs/_data/_routes.yml
index e320b690c226..d4e12d396ceb 100644
--- a/docs/_data/_routes.yml
+++ b/docs/_data/_routes.yml
@@ -31,7 +31,7 @@ platforms:
 
       - href: billing-and-subscriptions
         title: Billing & Subscriptions
-        icon: /assets/images/money-wings.svg
+        icon: /assets/images/subscription-annual.svg
         description: Here is where you can review Expensify's billing and subscription options, plan types, and payment methods.
 
       - href: expense-and-report-features
@@ -71,7 +71,7 @@ platforms:
       
       - href: send-payments
         title: Send Payments
-        icon: /assets/images/money-wings.svg
+        icon: /assets/images/send-money.svg
         description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options.
       
       - href: workspace-and-domain-settings
@@ -105,7 +105,7 @@ platforms:
       
       - href: billing-and-plan-types
         title: Billing & Plan Types
-        icon: /assets/images/money-wings.svg
+        icon: /assets/images/subscription-annual.svg
         description: Here is where you can review Expensify's billing and subscription options, plan types, and payment methods.
       
       - href: expensify-card

From 83b1120be6be19d818643946e5fd5823b02b0535 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 06:43:25 +0530
Subject: [PATCH 185/244] rm money wings icon

---
 docs/assets/images/money-wings.svg | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 docs/assets/images/money-wings.svg

diff --git a/docs/assets/images/money-wings.svg b/docs/assets/images/money-wings.svg
deleted file mode 100644
index 87ffdf28ec4b..000000000000
--- a/docs/assets/images/money-wings.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="69" height="68" fill="none" viewBox="0 0 69 68"><path fill="#00B368" d="M52.5717 55.511C52.5717 55.511 46.6865 50.4596 46.1063 41.7416C45.526 33.0187 47.7738 19.927 47.2228 16.3237C46.6719 12.7156 45.2432 9.30248 43.0979 7.92261L19.2695 11.9159C19.2695 11.9159 22.9459 15.8117 22.9362 21.5994C22.9264 27.387 21.2638 44.8231 22.4145 50.1037C23.5652 55.3842 28.6117 59.9578 28.6117 59.9578L52.5717 55.511Z"/><path fill="#5BE3AA" d="M31.164 56.0506C31.8889 55.2502 31.6078 53.8144 30.536 52.8437C29.4643 51.8729 28.0077 51.7347 27.2828 52.535C26.5579 53.3353 26.839 54.7711 27.9108 55.7419C28.9826 56.7127 30.4391 56.8509 31.164 56.0506Z"/><path fill="#5BE3AA" d="M46.0318 53.7771C46.7567 52.9768 46.5095 51.5718 45.4797 50.6389C44.4498 49.7061 43.0273 49.5987 42.3023 50.399C41.5774 51.1993 41.8246 52.6044 42.8545 53.5372C43.8843 54.47 45.3068 54.5774 46.0318 53.7771Z"/><path fill="#5BE3AA" d="M43.6719 15.06C44.3968 14.2597 44.1496 12.8547 43.1198 11.9219C42.0899 10.9891 40.6674 10.8817 39.9425 11.682C39.2176 12.4823 39.4647 13.8873 40.4946 14.8201C41.5244 15.753 42.947 15.8604 43.6719 15.06Z"/><path fill="#5BE3AA" d="M28.6846 17.6023C29.4095 16.802 29.1623 15.397 28.1325 14.4641C27.1026 13.5313 25.6801 13.4239 24.9552 14.2242C24.2303 15.0245 24.4774 16.4295 25.5073 17.3624C26.5371 18.2952 27.9597 18.4026 28.6846 17.6023Z"/><path fill="#5BE3AA" d="M41.6298 34.7155C41.6298 34.7155 40.9179 23.3304 35.8812 22.443C30.8444 21.5555 27.953 31.0927 28.3041 35.1787C28.6551 39.2647 29.8156 46.7247 35.0084 46.8125C40.2012 46.9003 42.2149 36.5683 41.6298 34.7204V34.7155Z"/><path fill="#FFF2B2" d="M22.5795 29.2692C22.5795 29.2692 19.7466 29.9762 17.4013 28.9961C15.0609 28.0161 11.5161 25.1832 9.12208 25.2368C6.72316 25.2905 5.19702 27.1433 4.38275 29.5422C3.5636 31.9411 3.9488 38.6406 5.41643 39.4061C6.88894 40.1667 7.21562 40.0595 7.21562 40.0595C7.21562 40.0595 6.45499 43.2726 8.30294 44.1454C10.1509 45.0182 11.7355 42.2926 11.7355 42.2926C11.7355 42.2926 12.1695 45.8861 14.0223 45.7252C15.8751 45.5594 16.8016 43.4921 16.8016 43.4921C16.8016 43.4921 17.1819 46.4907 18.708 46.5443C20.2342 46.598 21.7603 44.6379 21.7603 44.6379L22.36 32.8676L22.5795 29.274V29.2692Z"/><path fill="#FFF2B2" d="M46.8815 27.689C46.8815 27.689 45.5845 36.5241 45.8478 39.1327C46.1111 41.7413 48.3003 45.5639 50.1532 45.2373C52.006 44.9106 52.279 41.6438 52.279 41.6438C52.279 41.6438 53.9124 45.0764 55.658 44.2572C57.4036 43.4381 57.4572 40.8782 57.4572 40.8782C57.4572 40.8782 59.5831 44.1451 61.0507 42.892C62.5232 41.6389 62.3038 38.7524 62.3038 38.7524C62.3038 38.7524 63.4496 38.533 63.8836 38.2599C64.3175 37.9869 65.6828 35.4807 65.6291 33.0817C65.5755 30.6828 65.4097 23.7103 60.3973 23.9834C55.385 24.2564 51.8987 30.0295 46.8863 27.689H46.8815Z"/><path fill="#FFFAF0" d="M22.5801 29.269C22.5801 29.269 20.5664 30.0296 18.3138 29.1617C16.0611 28.2889 10.5416 25.0221 9.12276 25.2367C7.70388 25.4561 4.94414 25.6706 4.51019 28.9423C4.07624 32.2091 3.05718 38.7477 5.4171 39.401C7.77702 40.0544 9.15689 38.8939 9.44944 37.2947C9.74199 35.6954 10.9756 32.2823 10.9756 32.2823C10.9756 32.2823 14.6081 36.495 17.2216 36.3487C19.835 36.2025 22.2339 34.8226 22.2339 34.8226L22.5801 29.2641V29.269Z"/><path fill="#FFFAF0" d="M46.6423 28.0013L46.1353 33.16C46.1353 33.16 48.895 35.0469 52.3812 34.2473C55.8675 33.4476 58.3395 30.6879 58.3395 30.6879C58.3395 30.6879 60.0851 38.8989 62.9911 38.6063C64.6635 38.3137 65.9703 33.3014 65.6046 30.6148C65.2438 27.9282 63.9712 23.8227 60.3923 23.9836C56.8134 24.1494 53.6197 28.6498 46.6423 27.9964V28.0013Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M28.6308 59.8846C12.8964 45.6325 30.3228 22.0284 19.0352 11.8037L43.2536 7.54224C54.5363 17.762 37.1148 41.3661 52.8492 55.6231L28.6357 59.8846H28.6308Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M28.6713 17.6781C29.4739 16.7919 29.2445 15.2763 28.1587 14.2928C27.073 13.3094 25.5422 13.2305 24.7395 14.1167C23.9368 15.0028 24.1663 16.5184 25.252 17.5019C26.3378 18.4853 27.8686 18.5642 28.6713 17.6781Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M31.2582 56.0167C32.0609 55.1305 31.8314 53.6149 30.7457 52.6315C29.6599 51.648 28.1291 51.5691 27.3264 52.4553C26.5237 53.3414 26.7532 54.8571 27.8389 55.8405C28.9247 56.8239 30.4555 56.9028 31.2582 56.0167Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M46.1332 53.8692C46.9359 52.9831 46.7064 51.4675 45.6207 50.484C44.5349 49.5006 43.0041 49.4217 42.2014 50.3078C41.3987 51.194 41.6282 52.7096 42.7139 53.693C43.7997 54.6765 45.3305 54.7554 46.1332 53.8692Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M43.7733 15.1517C44.576 14.2655 44.3465 12.7499 43.2608 11.7665C42.1751 10.783 40.6442 10.7042 39.8415 11.5903C39.0389 12.4765 39.2683 13.9921 40.3541 14.9755C41.4398 15.959 42.9707 16.0378 43.7733 15.1517Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M41.7767 34.6321C41.8108 27.8946 38.815 22.4175 35.0855 22.3986C31.3559 22.3797 28.3048 27.8262 28.2707 34.5637C28.2366 41.3012 31.2324 46.7782 34.962 46.7971C38.6915 46.816 41.7426 41.3695 41.7767 34.6321Z"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M22.7308 29.2935C14.3541 30.254 12.8279 24.4761 7.70339 25.4561C4.99728 25.973 4.15864 29.5665 3.89534 31.8582C3.67593 33.7451 3.359 39.406 5.9432 40.0008C9.10763 40.7273 10.5119 33.7695 10.8922 31.668C10.8922 31.668 16.1386 39.8448 22.1067 34.8276"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M7.3521 39.8547C7.3521 39.8547 6.28916 44.1991 8.9075 44.5257C11.521 44.8524 14.466 35.7004 14.466 35.7004"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M12.2627 41.1172C12.2627 41.1172 11.5606 45.6615 14.1935 45.7639C16.8265 45.8663 18.9719 36.4949 18.9719 36.4949"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M17.2744 42.0632C17.2744 42.0632 16.5723 46.6075 19.2052 46.7099C20.0634 46.7441 20.8679 45.7738 21.5652 44.4475"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M46.6126 27.8403C54.9893 28.8009 56.5154 23.023 61.64 24.003C64.3461 24.5199 65.1847 28.1134 65.448 30.405C65.6674 32.292 65.9844 37.9529 63.4001 38.5477C60.2357 39.2742 58.8315 32.3164 58.4511 30.2149C58.4511 30.2149 54.726 36.8412 46.4468 33.4086"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M61.9962 38.3969C61.9962 38.3969 63.0591 42.7462 60.4457 43.0729C57.8322 43.3995 54.8872 34.2476 54.8872 34.2476"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M57.0861 39.6643C57.0861 39.6643 57.7883 44.2086 55.1553 44.311C52.5223 44.4134 50.377 35.042 50.377 35.042"/><path stroke="#002140" stroke-linecap="round" stroke-linejoin="round" d="M52.0739 40.6104C52.0739 40.6104 52.776 45.1547 50.143 45.257C49.2849 45.2912 47.4272 44.3111 46.0132 40.8249"/></svg>
\ No newline at end of file

From 661f783c8cf4305a4f1d02748c0dbce2123e2522 Mon Sep 17 00:00:00 2001
From: Fitsum Abebe <engfitsum@gmail.com>
Date: Tue, 19 Dec 2023 11:38:11 +0300
Subject: [PATCH 186/244] updated from fixed value to calculated one

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1ff8ae8b4187..5fc3fcd145cb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2655,7 +2655,7 @@ const styles = (theme: ThemeColors) =>
             paddingVertical: 12,
         },
 
-        moneyRequestAmountContainer: {minHeight: 114},
+        moneyRequestAmountContainer: {minHeight: variables.inputHeight + 2 * (variables.formErrorLineHeight + 8)},
 
         requestPreviewBox: {
             marginTop: 12,

From 5712d5d10bcd1de3316c59c603c6c1061cc588a7 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 15:55:09 +0530
Subject: [PATCH 187/244] collapse faq sections

---
 docs/_layouts/default.html                    | 19 +++++++-------
 docs/_sass/_main.scss                         | 25 ++++++++++++++++---
 .../getting-started/Using-The-App.md          | 17 ++++++++++++-
 docs/assets/js/main.js                        |  2 ++
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 7d98500ecf32..6b4532a749ad 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -64,17 +64,16 @@
         <div id="article-content">
             <!-- Article title (only shown in article pages) -->
             {% if page.url contains "/articles/" %}
-            <h1 class="title">
-                {{ page.name | remove: '.md' | split: "-" |  join: " " }}
-            </h1>
-
-            <div class="article-toc-content article">
-                {{ content }}
-            </div>
+                <h1 class="title">
+                    {{ page.name | remove: '.md' | split: "-" |  join: " " }}
+                </h1>
+                <div class="article-toc-content article">
+                    {{ content }}
+                </div>
             {% else %}
-            <div class="article-toc-content lhn">
-                {{ content }}
-            </div>
+                <div class="article-toc-content lhn">
+                    {{ content }}
+                </div>
             {% endif %}
         </div>
 
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 9276443c3813..05378d7ce526 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -99,7 +99,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6, 
+summary {
     color: $color-text;
     font-weight: bold;
     padding-bottom: 12px;
@@ -113,7 +114,25 @@ h6 {
     margin-top: 20px;
 }
 
-h1 {
+details>summary {
+    list-style: none;
+}
+
+// summary::-webkit-details-marker {
+//     display: block;
+// }
+
+// summary::before {
+//     content: ' ►';
+// }
+
+// details[open] summary::before {
+//     content: " ▼";
+// }
+  
+
+h1, 
+summary {
     font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     font-weight: 500;
     font-size: larger;
@@ -398,7 +417,7 @@ button {
             flex-wrap: wrap;
         }
 
-        h1 {
+        h1, summary {
             font-size: 1.5em;
             padding: 20px 0 12px 0;
         }
diff --git a/docs/articles/expensify-classic/getting-started/Using-The-App.md b/docs/articles/expensify-classic/getting-started/Using-The-App.md
index 281a26a4317b..f77acd1864e1 100644
--- a/docs/articles/expensify-classic/getting-started/Using-The-App.md
+++ b/docs/articles/expensify-classic/getting-started/Using-The-App.md
@@ -2,8 +2,10 @@
 title: Using the app
 description: Streamline expense management effortlessly with the Expensify mobile app. Learn how to install, enable push notifications, and use SmartScan to capture, categorize, and track expenses. Versatile for personal and business use, Expensify is a secure and automated solution for managing your finances on the go.
 ---
+
 # Overview
 The Expensify mobile app is the ultimate expense management solution that makes it effortless to track and submit your receipts and expenses. Use the app to snap a picture of your receipts, categorize and submit expenses, and even review and approve expense reports.
+
 # How to install the Expensify app
 To get started with Expensify on your mobile device, you need to download the app:
 1. Visit the App Store (iOS) or Google Play Store (Android).
@@ -11,6 +13,7 @@ To get started with Expensify on your mobile device, you need to download the ap
 3. Tap "Download" or "Install."
    
 Once the app is installed, open it and log in with your Expensify credentials. If you don't have an Expensify account, you can create one during the sign-up process.
+
 # How to enable on push notifications
 Push notifications keep you informed about expense approvals, reimbursements, and more. To enable push notifications:
 1. Open the Expensify app.
@@ -39,14 +42,26 @@ SmartScan's performance can vary depending on factors such as receipt quality, l
 **Receipt quality**: The clarity and condition of a receipt can impact SmartScan's accuracy. For best results, ensure your environment is well-lit and the receipt is straight and free of obstructions.
 **Language support**: While SmartScan supports multiple languages, its accuracy may differ from one language to another. Users dealing with non-English receipts should be aware of potential variations in data extraction.
 **Handwriting recognition**: Handwritten receipts might pose challenges for SmartScan. In such cases, manual verification may be necessary to ensure accurate data entry.
-# FAQ
+
+
+{::options parse_block_html="true" /}
+<details>
+{::options parse_block_html="false" /}
+<summary>FAQ</summary> {: #faq}
+
 ## Can I use the mobile app for both personal and business expenses?
 Yes, you can use Expensify for personal and business expenses. It's versatile and suitable for both individual and corporate use. Check out our personal and business plans [here](https://www.expensify.com/pricing) to see what might be right for you.
+
 ## Is it possible to categorize and tag expenses on the mobile app?
 Yes, you can categorize and tag expenses on the mobile app. The app allows you to customize categories and tags to help organize and track your spending.
+
 ## What should I do if I encounter issues with the mobile app, such as login problems or crashes?
 If you experience issues, first make sure you’re using the most recent version of the app. You can also try to restarting the app. If the issue persists, you can start a chat with Concierge in the app or write to [concierge@expensify.com](mailto:concierge@expensify.com).
+
 ## Is the mobile app secure for managing sensitive financial information?
 Expensify takes security seriously and employs encryption and other security measures to protect your data. It's important to use strong, unique passwords and enable device security features like biometric authentication.
+
 ## Can I use the mobile app offline, and will my data sync when I'm back online?
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
+
+</details>
\ No newline at end of file
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index dde3af22e900..1bf7015eab07 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -190,6 +190,7 @@ window.addEventListener('DOMContentLoaded', () => {
             // Disable the collapsible functionality of the library by
             // setting the maximum number of heading levels (6)
             collapseDepth: 6,
+            headingSelector: 'h1, h2, h3, summary',
 
             // Main class to add to lists.
             listClass: 'lhn-items',
@@ -226,6 +227,7 @@ window.addEventListener('DOMContentLoaded', () => {
     // the LHN menu in responsive view.
     lhnContent.addEventListener('click', (event) => {
         const clickedLink = event.target;
+        console.log(clickedLink)
         if (clickedLink) {
             const href = clickedLink.getAttribute('href');
             if (href && href.startsWith('#') && !!document.getElementById(href.slice(1))) {

From 56d4762fc5f70f34f553bd7e4b3b759f96a2a8a4 Mon Sep 17 00:00:00 2001
From: Sibtain Ali <allroundexperts@gmail.com>
Date: Tue, 19 Dec 2023 15:31:21 +0500
Subject: [PATCH 188/244] fix: use same types as backend

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

diff --git a/src/types/onyx/PolicyReportField.ts b/src/types/onyx/PolicyReportField.ts
index 04876ea690b5..6a3be23c0a0b 100644
--- a/src/types/onyx/PolicyReportField.ts
+++ b/src/types/onyx/PolicyReportField.ts
@@ -17,10 +17,10 @@ type PolicyReportField = {
     type: PolicyReportFieldType;
 
     /** Tells if the field is required or not */
-    required: boolean;
+    deletable: boolean;
 
     /** Options to select from if field is of type dropdown */
-    options: string[];
+    values: string[];
 };
 
 type PolicyReportFields = Record<string, PolicyReportField>;

From a17f3577cf3744386f4644c5d06602df655e320d Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 16:18:54 +0530
Subject: [PATCH 189/244] fix arrow icon on chrome

---
 docs/_sass/_main.scss | 23 ++++-------------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 05378d7ce526..309529a113c2 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -46,7 +46,6 @@ blockquote {
 
 article,
 aside,
-details,
 figcaption,
 figure,
 footer,
@@ -55,8 +54,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
-summary {
+section {
     display: block;
 }
 
@@ -113,23 +111,10 @@ h5,
 h6 {
     margin-top: 20px;
 }
-
-details>summary {
-    list-style: none;
-}
-
-// summary::-webkit-details-marker {
-//     display: block;
-// }
-
-// summary::before {
-//     content: ' ►';
-// }
-
-// details[open] summary::before {
-//     content: " ▼";
-// }
   
+details summary { 
+    cursor: pointer;
+}
 
 h1, 
 summary {

From d236f5237ab70e14a08201abacc0edfe3b966199 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 16:21:12 +0530
Subject: [PATCH 190/244] undo indent

---
 docs/_layouts/default.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 6b4532a749ad..b050a4bbbc16 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -64,16 +64,16 @@
         <div id="article-content">
             <!-- Article title (only shown in article pages) -->
             {% if page.url contains "/articles/" %}
-                <h1 class="title">
-                    {{ page.name | remove: '.md' | split: "-" |  join: " " }}
-                </h1>
-                <div class="article-toc-content article">
-                    {{ content }}
-                </div>
+            <h1 class="title">
+                {{ page.name | remove: '.md' | split: "-" |  join: " " }}
+            </h1>
+            <div class="article-toc-content article">
+                {{ content }}
+            </div>
             {% else %}
-                <div class="article-toc-content lhn">
-                    {{ content }}
-                </div>
+            <div class="article-toc-content lhn">
+                {{ content }}
+            </div>
             {% endif %}
         </div>
 

From 09ce7b4a3db424f8bd4d1ccc3a81568b3cfbd692 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 16:21:38 +0530
Subject: [PATCH 191/244] undo indent

---
 docs/_layouts/default.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index b050a4bbbc16..2581530cb14f 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -67,6 +67,7 @@
             <h1 class="title">
                 {{ page.name | remove: '.md' | split: "-" |  join: " " }}
             </h1>
+            
             <div class="article-toc-content article">
                 {{ content }}
             </div>

From 12008555fb8840a6cb1ddfbbf1f0d4be4cc02c18 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 16:22:09 +0530
Subject: [PATCH 192/244] undo indent

---
 docs/_layouts/default.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 2581530cb14f..7d98500ecf32 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -67,7 +67,7 @@
             <h1 class="title">
                 {{ page.name | remove: '.md' | split: "-" |  join: " " }}
             </h1>
-            
+
             <div class="article-toc-content article">
                 {{ content }}
             </div>

From 6cc8b833b91f222cf6c5652ac8b14d23fae9cc3b Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 16:23:25 +0530
Subject: [PATCH 193/244] rm console log

---
 docs/assets/js/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index 1bf7015eab07..6e154bb09a44 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -227,7 +227,6 @@ window.addEventListener('DOMContentLoaded', () => {
     // the LHN menu in responsive view.
     lhnContent.addEventListener('click', (event) => {
         const clickedLink = event.target;
-        console.log(clickedLink)
         if (clickedLink) {
             const href = clickedLink.getAttribute('href');
             if (href && href.startsWith('#') && !!document.getElementById(href.slice(1))) {

From 66acce2bb333caa4338a324f23ef1448df34b717 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Tue, 19 Dec 2023 12:09:56 +0100
Subject: [PATCH 194/244] Disallow CSSProperties usage

---
 .eslintrc.js                                  | 5 +++++
 src/components/Icon/svgs/LoungeAccessIcon.tsx | 2 +-
 src/components/MapView/MapView.website.tsx    | 2 +-
 src/styles/utils/index.ts                     | 7 +++----
 src/styles/utils/objectFit.ts                 | 3 +--
 src/styles/utils/types.ts                     | 2 ++
 src/types/modules/react-native.d.ts           | 1 +
 src/types/onyx/Bank.ts                        | 3 +--
 src/types/onyx/PaymentMethod.ts               | 3 +--
 9 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 39a7c7553261..822a7f66b474 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,6 +24,11 @@ const restrictedImportPaths = [
         importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
         message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
     },
+    {
+        name: 'react',
+        importNames: ['CSSProperties'],
+        message: "Please use 'ViewStyle', 'TextStyle', 'ImageStyle' from 'react-native' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [
diff --git a/src/components/Icon/svgs/LoungeAccessIcon.tsx b/src/components/Icon/svgs/LoungeAccessIcon.tsx
index e57573c439f1..0dcf9052ca87 100644
--- a/src/components/Icon/svgs/LoungeAccessIcon.tsx
+++ b/src/components/Icon/svgs/LoungeAccessIcon.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Svg, {G, Path, Polygon} from 'react-native-svg';
 import useTheme from '@hooks/useTheme';
 
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 7910d7f93a29..778ef66449d4 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -183,7 +183,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                                 latitude: currentPosition?.latitude,
                                 zoom: initialState.zoom,
                             }}
-                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText) as React.CSSProperties}
+                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText)}
                             mapStyle={styleURL}
                         >
                             {waypoints?.map(({coordinate, markerComponent, id}) => {
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 228643e5ba2e..c6ec9dd3d579 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
@@ -402,7 +401,7 @@ function getBackgroundColorStyle(backgroundColor: string): ViewStyle {
 /**
  * Returns a style for text color
  */
-function getTextColorStyle(color: string): TextStyle {
+function getTextColorStyle(color: string): TextColorStyle {
     return {
         color,
     };
@@ -613,7 +612,7 @@ function getMinimumHeight(minHeight: number): ViewStyle {
 /**
  * Get minimum width as style
  */
-function getMinimumWidth(minWidth: number): ViewStyle | CSSProperties {
+function getMinimumWidth(minWidth: number): ViewStyle {
     return {
         minWidth,
     };
@@ -906,7 +905,7 @@ function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu: boolean): Vie
 /**
  * Returns color style
  */
-function getColorStyle(color: string): ViewStyle | CSSProperties {
+function getColorStyle(color: string): TextColorStyle {
     return {color};
 }
 
diff --git a/src/styles/utils/objectFit.ts b/src/styles/utils/objectFit.ts
index 9d5e4141d6de..51f0c33b5457 100644
--- a/src/styles/utils/objectFit.ts
+++ b/src/styles/utils/objectFit.ts
@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 
 export default {
@@ -14,4 +13,4 @@ export default {
     oFNone: {
         objectFit: 'none',
     },
-} satisfies Record<string, ViewStyle | CSSProperties>;
+} satisfies Record<string, ViewStyle>;
diff --git a/src/styles/utils/types.ts b/src/styles/utils/types.ts
index c7e1fc60a142..40a261beee71 100644
--- a/src/styles/utils/types.ts
+++ b/src/styles/utils/types.ts
@@ -42,6 +42,7 @@ type AvatarSize = {width: number};
 
 type WorkspaceColorStyle = {backgroundColor: ColorValue; fill: ColorValue};
 type EreceiptColorStyle = {backgroundColor: ColorValue; color: ColorValue};
+type TextColorStyle = {color: string};
 
 export type {
     AllStyles,
@@ -56,4 +57,5 @@ export type {
     AvatarSize,
     WorkspaceColorStyle,
     EreceiptColorStyle,
+    TextColorStyle,
 };
diff --git a/src/types/modules/react-native.d.ts b/src/types/modules/react-native.d.ts
index 27cc16b912d5..25ff1c6c73b8 100644
--- a/src/types/modules/react-native.d.ts
+++ b/src/types/modules/react-native.d.ts
@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
+// eslint-disable-next-line no-restricted-imports
 import {CSSProperties, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, UIEventHandler, WheelEventHandler} from 'react';
 import 'react-native';
 import {BootSplashModule} from '@libs/BootSplash/types';
diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts
index b6312e039079..43346f956cb0 100644
--- a/src/types/onyx/Bank.ts
+++ b/src/types/onyx/Bank.ts
@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
@@ -9,7 +8,7 @@ type BankIcon = {
     iconSize?: number;
     iconHeight?: number;
     iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
+    iconStyles?: ViewStyle[];
 };
 
 type BankName = ValueOf<typeof CONST.BANK_NAMES>;
diff --git a/src/types/onyx/PaymentMethod.ts b/src/types/onyx/PaymentMethod.ts
index 4a9722911bf9..f62234b021b9 100644
--- a/src/types/onyx/PaymentMethod.ts
+++ b/src/types/onyx/PaymentMethod.ts
@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import BankAccount from './BankAccount';
@@ -10,7 +9,7 @@ type PaymentMethod = (BankAccount | Fund) & {
     iconSize?: number;
     iconHeight?: number;
     iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
+    iconStyles?: ViewStyle[];
 };
 
 export default PaymentMethod;

From 639f05a89805fe7ef609cdd35b51f940fe9881cf Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 16:40:08 +0530
Subject: [PATCH 195/244] make faq unselectable

---
 docs/_sass/_main.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 309529a113c2..a6298ae70395 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -114,6 +114,7 @@ h6 {
   
 details summary { 
     cursor: pointer;
+    user-select: none;
 }
 
 h1, 

From a2dc38f1b264b215af4e8eddc03e60fef3a86362 Mon Sep 17 00:00:00 2001
From: Blazej Kustra <blazej.kustra@swmansion.com>
Date: Tue, 19 Dec 2023 12:10:44 +0100
Subject: [PATCH 196/244] Import TextColorStyle

---
 src/styles/utils/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c6ec9dd3d579..8682b807031f 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -30,6 +30,7 @@ import {
     EReceiptColorName,
     EreceiptColorStyle,
     ParsableStyle,
+    TextColorStyle,
     WorkspaceColorStyle,
 } from './types';
 

From d62872eeeebac8277e8905a612d16bd2864b60a3 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 19 Dec 2023 13:42:34 +0100
Subject: [PATCH 197/244] review fixes

---
 .../workspace/WorkspaceInviteMessagePage.js   | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 14178c35fb70..7b7350823168 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -141,7 +141,7 @@ function WorkspaceInviteMessagePage(props) {
                     onBackButtonPress={() => Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID))}
                 />
                 <FormProvider
-                    style={[styles.themeStyles.flexGrow1, styles.themeStyles.ph5]}
+                    style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}
                     validate={validate}
                     onSubmit={sendInvitation}
@@ -153,27 +153,27 @@ function WorkspaceInviteMessagePage(props) {
                             role={CONST.ROLE.LINK}
                             accessibilityLabel={translate('common.privacy')}
                             href={CONST.PRIVACY_URL}
-                            style={[styles.themeStyles.mv2, styles.themeStyles.alignSelfStart]}
+                            style={[styles.mv2, styles.alignSelfStart]}
                         >
-                            <View style={[styles.themeStyles.flexRow]}>
-                                <Text style={[styles.themeStyles.mr1, styles.themeStyles.label, styles.themeStyles.link]}>{translate('common.privacy')}</Text>
+                            <View style={[styles.flexRow]}>
+                                <Text style={[styles.mr1, styles.label, styles.link]}>{translate('common.privacy')}</Text>
                             </View>
                         </PressableWithoutFeedback>
                     }
                 >
-                    <View style={[styles.themeStyles.mv4, styles.themeStyles.justifyContentCenter, styles.themeStyles.alignItemsCenter]}>
+                    <View style={[styles.mv4, styles.justifyContentCenter, styles.alignItemsCenter]}>
                         <MultipleAvatars
                             size={CONST.AVATAR_SIZE.LARGE}
                             icons={OptionsListUtils.getAvatarsForAccountIDs(_.values(props.invitedEmailsToAccountIDsDraft), props.allPersonalDetails, props.invitedEmailsToAccountIDsDraft)}
                             shouldStackHorizontally
                             shouldDisplayAvatarsInRows
-                            secondAvatarStyle={[styles.themeStyles.secondAvatarInline]}
+                            secondAvatarStyle={[styles.secondAvatarInline]}
                         />
                     </View>
-                    <View style={[styles.themeStyles.mb5]}>
+                    <View style={[styles.mb5]}>
                         <Text>{translate('workspace.inviteMessage.inviteMessagePrompt')}</Text>
                     </View>
-                    <View style={[styles.themeStyles.mb3]}>
+                    <View style={[styles.mb3]}>
                         <InputWrapper
                             InputComponent={TextInput}
                             role={CONST.ROLE.PRESENTATION}
@@ -183,15 +183,18 @@ function WorkspaceInviteMessagePage(props) {
                             autoCompleteType="off"
                             autoCorrect={false}
                             autoGrowHeight
-                            inputStyle={[styles.themeStyles.verticalAlignTop]}
-                            containerStyles={[styles.themeStyles.autoGrowHeightMultilineInput]}
+                            inputStyle={[styles.verticalAlignTop]}
+                            containerStyles={[styles.autoGrowHeightMultilineInput]}
                             value={welcomeMessage}
                             onChangeText={(text) => {
                                 saveDraft(text);
                             }}
                             ref={(el) => {
-                                updateMultilineInputRange(el);
+                                if (!el) {
+                                    return;
+                                }
                                 inputCallbackRef(el);
+                                updateMultilineInputRange(el);
                             }}
                         />
                     </View>

From b4b2c57b32b9d3ba967e848f13a92f4199d5b517 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 19 Dec 2023 14:03:57 +0100
Subject: [PATCH 198/244] fix correct navigation on invite

---
 src/pages/workspace/WorkspaceInviteMessagePage.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 7b7350823168..260214066e3e 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -1,7 +1,7 @@
 import {isEmpty} from 'lodash';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -77,9 +77,13 @@ function WorkspaceInviteMessagePage(props) {
 
     const {inputCallbackRef} = useAutoFocusInput();
 
-    if (_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
+    useEffect(() => {
+        if (!_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
+            return;
+        }
         Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true);
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     const saveDraft = (newDraft) => {
         Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft);

From cf4848a4c38883b9de8d0f89700c6ea9ed3ec73c Mon Sep 17 00:00:00 2001
From: Jules Rosser <jules@expensify.com>
Date: Mon, 11 Sep 2023 17:54:37 +0100
Subject: [PATCH 199/244] add monochrome app icon for Android theming

---
 .../res/mipmap-anydpi-v26/ic_launcher.xml        |   1 +
 .../main/res/drawable/ic_launcher_monochrome.png | Bin 0 -> 1309 bytes
 .../main/res/mipmap-anydpi-v26/ic_launcher.xml   |   1 +
 3 files changed, 2 insertions(+)
 create mode 100644 android/app/src/main/res/drawable/ic_launcher_monochrome.png

diff --git a/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml b/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml
index 7353dbd1fd82..1084c240820a 100644
--- a/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -2,4 +2,5 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>
\ No newline at end of file
diff --git a/android/app/src/main/res/drawable/ic_launcher_monochrome.png b/android/app/src/main/res/drawable/ic_launcher_monochrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..4eea447cd3cbd8e4724b325e93ee39c4dbdfa147
GIT binary patch
literal 1309
zcmV+&1>*XNP)<h;3K|Lk000e1NJLTq003+N003+V1^@s6k7ifR00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1hPp)K~#7F?cMKr
z(>fFe@b~^1pc`D>2`CdFCZJ4EGXZ6SW&_FuDH8w_#7sc>$fuYI$_8Lz8%pZq%Jw;q
zY`?$fIZr`J)7U4HWl4?!A|fIpA|fIpA|fIpA|j$8{=$5nmf_3zuMAiJAN9ZQD$4j)
z$4wbu>z_Hu)JYi^W$enhE#tdFgxAV&Kgl%E-6VZCjwX3DKuFXj^lDO{*w=sCfubBM
zQEiF40Es-Rousj&?}o<fdC)JR`FoB2JMvQ*SE!CVr}gV}{f+RPv-)>-1ODD?(9h#U
z*zvJDE$ryfOr2mnhbq~9lDET(dBh#7!gDsT?F6_ot`V0sjStK0oFi`Mgyw6?9pvzE
z;#QZiOT;xj4#(rr-c(*;WnyYpN?qv;RpR!jn&nmTc)0s~3QB@Q_c_rX99c+8SF%F4
z-eJBxs^;<x3(<8_JolP)xNVo1IgjNg%cFg}JPiE{TicGuo}-#vjNxFfndFS+gz~V>
zk9)pW5?(^CT^sbXL;Ud3(Ac3L554U>ItRI<@d^E<n6R$*6^7GHMnwLGjdRFN#&ayk
zE1|rZDW46gc5N|Csx>UQ!o;;qTLyWjI1H0=!a`D{SqJr6X3->`3+2~{?-kBT=ncLV
z9(#twIq27}AmthsoWf?i@6kRF^FnzJ``YypRV^NB%z0C@Fx9s_)+|d%l2j8ij1yDC
zwm7Z}=+|6xR?Wg35_W<KdW)K!4lk64=AyvzHEZ_|H7mAMXeLa0Qy;M&(zYg<FejAf
zSdSZ_+(C(E!X63b1=hnnVVa}`p&AF=m`=x#(C(;69gjVfXx1<(F|(T&8lmr;T5s0J
zumbDTmM{k;R?{nFgbAA&CTwOj6IQg8t?^0^*HTtMiS??flRBp8DHiB|lCC`pW8PEN
zOjtN+bS>o$@(HD;yo?t(E@=o#En%8X;#Z-3O&2&wHS9B#SRccJH6_do<pq>zCM*}q
zA7MS72<1~85(bf04~^|D&S3)6L4I#)w9mt&Pf~{E^FnzJMcUo^4`_emVY!#}LKKH_
zAB+OycJ8@Q{uT+7rWeLGi&oPsT8m{I?AEjVLAyx|=Nq~3nEEQ%gj@>cIh1ECEXEQ)
z2<74Oqa_YiImk_M(#>I`YpwYP!=&6KZecvjJcSK(+w@cu<~m+)gBj_nWkYsMstMae
zu3ZiWtmeZ)=i`m=n8z|YAQ|MOgl#Wi!1`OYrB7O3##6*=rfIAdJ)V1w_H(bIjQ=rH
z9_>xWkn5aNBVBpvF>`Gjw!!>4+&@kyds$H*p((q@!Zxbr%6NyW!?MA`Om!S0O2<D)
zhp!{l!UAc?Pz|a1GQMD4%g#F;ek+>UiDx8-`zPz6gR!RN4x%&2qYqn5o4AL*L;pRf
zbKG&N#5u&>LSzSe@VkHycUT6U<PEuV(vs)&dfA}=U~L#J3C&k%Qe$uBk=4J`=WY~B
zJbzT-VRN&bTZPy2AW>*`G!i#9np=oa1cz#89V2l~qBtruP=@IyFvIbXiBjUAo4i}-
z-ri~w))SbPJgT0bL$!Xt8C-S;&nxPmH~4)^;3kNOh=_=Yh=_=Yh=_=Yh*shU?tEd#
TATL`S00000NkvXXu0mjf7Bgn7

literal 0
HcmV?d00001

diff --git a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
index 7353dbd1fd82..1084c240820a 100644
--- a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -2,4 +2,5 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>
\ No newline at end of file

From ac2dd0673e90bb640af648bd143d8d4ab9d7f220 Mon Sep 17 00:00:00 2001
From: maddylewis <38016013+maddylewis@users.noreply.github.com>
Date: Tue, 19 Dec 2023 09:13:25 -0500
Subject: [PATCH 200/244] Delete
 docs/articles/expensify-classic/manage-employees-and-report-approvals/Add-Members-to-your-Workspace.md

empty page / deleting
---
 .../Add-Members-to-your-Workspace.md                         | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 docs/articles/expensify-classic/manage-employees-and-report-approvals/Add-Members-to-your-Workspace.md

diff --git a/docs/articles/expensify-classic/manage-employees-and-report-approvals/Add-Members-to-your-Workspace.md b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Add-Members-to-your-Workspace.md
deleted file mode 100644
index f2978434959b..000000000000
--- a/docs/articles/expensify-classic/manage-employees-and-report-approvals/Add-Members-to-your-Workspace.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Add Members to your Workspace
-description: Coming Soon
----
-## Resource Coming Soon!

From 14d38208d4e28e30798f7b6990e7c3fe93c56a96 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 19 Dec 2023 16:11:03 +0100
Subject: [PATCH 201/244] fix input value and space placement

---
 .../workspace/WorkspaceInviteMessagePage.js   | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 260214066e3e..d60f187fa7d2 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -1,7 +1,7 @@
 import {isEmpty} from 'lodash';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Keyboard, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -75,30 +75,32 @@ function WorkspaceInviteMessagePage(props) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [welcomeNote, setWelcomeNote] = useState();
+
     const {inputCallbackRef} = useAutoFocusInput();
 
+    const getDefaultWelcomeNote = () =>
+        props.workspaceInviteMessageDraft ||
+        translate('workspace.inviteMessage.welcomeNote', {
+            workspaceName: props.policy.name,
+        });
+
     useEffect(() => {
         if (!_.isEmpty(props.invitedEmailsToAccountIDsDraft)) {
+            setWelcomeNote(getDefaultWelcomeNote());
             return;
         }
         Navigation.goBack(ROUTES.WORKSPACE_INVITE.getRoute(props.route.params.policyID), true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const saveDraft = (newDraft) => {
+    const debouncedSaveDraft = _.debounce((newDraft) => {
         Policy.setWorkspaceInviteMessageDraft(props.route.params.policyID, newDraft);
-    };
-
-    const getDefaultWelcomeNote = () =>
-        translate('workspace.inviteMessage.welcomeNote', {
-            workspaceName: props.policy.name,
-        });
-
-    const welcomeMessage = props.workspaceInviteMessageDraft || getDefaultWelcomeNote();
+    });
 
     const sendInvitation = () => {
         Keyboard.dismiss();
-        Policy.addMembersToWorkspace(props.invitedEmailsToAccountIDsDraft, welcomeMessage, props.route.params.policyID);
+        Policy.addMembersToWorkspace(props.invitedEmailsToAccountIDsDraft, welcomeNote, props.route.params.policyID);
         Policy.setWorkspaceInviteMembersDraft(props.route.params.policyID, {});
         SearchInputManager.searchInput = '';
         // Pop the invite message page before navigating to the members page.
@@ -187,11 +189,12 @@ function WorkspaceInviteMessagePage(props) {
                             autoCompleteType="off"
                             autoCorrect={false}
                             autoGrowHeight
-                            inputStyle={[styles.verticalAlignTop]}
                             containerStyles={[styles.autoGrowHeightMultilineInput]}
-                            value={welcomeMessage}
+                            defaultValue={getDefaultWelcomeNote()}
+                            value={welcomeNote}
                             onChangeText={(text) => {
-                                saveDraft(text);
+                                setWelcomeNote(text);
+                                debouncedSaveDraft(text);
                             }}
                             ref={(el) => {
                                 if (!el) {

From 0b0e664a85ca16c124e6cc641ee8aa02ce940840 Mon Sep 17 00:00:00 2001
From: Vit Horacek <36083550+mountiny@users.noreply.github.com>
Date: Tue, 19 Dec 2023 16:40:10 +0100
Subject: [PATCH 202/244] Revert "(perf) Debounce search in OptionList"

---
 src/CONST.ts                                  |  2 +-
 src/components/CategoryPicker/index.js        |  1 +
 .../MoneyRequestConfirmationList.js           |  1 +
 ...oraryForRefactorRequestConfirmationList.js |  1 +
 src/components/OptionRow.js                   |  2 +-
 .../OptionsSelector/BaseOptionsSelector.js    | 12 +--
 .../optionsSelectorPropTypes.js               |  3 +
 src/components/TagPicker/index.js             |  1 +
 src/libs/actions/Report.ts                    |  5 +-
 src/pages/NewChatPage.js                      |  1 +
 src/pages/SearchPage.js                       | 13 ++-
 ...yForRefactorRequestParticipantsSelector.js |  1 +
 .../MoneyRequestParticipantsSelector.js       | 93 ++++++++-----------
 src/pages/tasks/TaskAssigneeSelectorModal.js  | 11 ++-
 .../TaskShareDestinationSelectorModal.js      |  3 +
 15 files changed, 84 insertions(+), 66 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index 2e2f591f7117..b29456ba170b 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -710,7 +710,7 @@ const CONST = {
         TOOLTIP_SENSE: 1000,
         TRIE_INITIALIZATION: 'trie_initialization',
         COMMENT_LENGTH_DEBOUNCE_TIME: 500,
-        SEARCH_OPTION_LIST_DEBOUNCE_TIME: 300,
+        SEARCH_FOR_REPORTS_DEBOUNCE_TIME: 300,
     },
     PRIORITY_MODE: {
         GSD: 'gsd',
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
index a957e31a9de4..d170def12276 100644
--- a/src/components/CategoryPicker/index.js
+++ b/src/components/CategoryPicker/index.js
@@ -62,6 +62,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             sectionHeaderStyle={styles.mt5}
             sections={sections}
             selectedOptions={selectedOptions}
+            value={searchValue}
             // Focus the first option when searching
             focusedIndex={0}
             // Focus the selected option on first load
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 63181e4aea87..fc3e4b095873 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -565,6 +565,7 @@ function MoneyRequestConfirmationList(props) {
     return (
         <OptionsSelector
             sections={optionSelectorSections}
+            value=""
             onSelectRow={canModifyParticipants ? selectParticipant : navigateToReportOrUserDetail}
             onAddToSelection={selectParticipant}
             onConfirmSelection={confirm}
diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index d5e9fc8d1e39..5c7ea712e772 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -565,6 +565,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
     return (
         <OptionsSelector
             sections={optionSelectorSections}
+            value=""
             onSelectRow={userCanModifyParticipants.current ? selectParticipant : navigateToReportOrUserDetail}
             onAddToSelection={selectParticipant}
             onConfirmSelection={confirm}
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index b6628d7444ab..1a8c395ddd8b 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -323,7 +323,7 @@ export default React.memo(
         prevProps.showSelectedState === nextProps.showSelectedState &&
         prevProps.highlightSelected === nextProps.highlightSelected &&
         prevProps.showTitleTooltip === nextProps.showTitleTooltip &&
-        _.isEqual(prevProps.option.icons, nextProps.option.icons) &&
+        !_.isEqual(prevProps.option.icons, nextProps.option.icons) &&
         prevProps.optionIsFocused === nextProps.optionIsFocused &&
         prevProps.option.text === nextProps.option.text &&
         prevProps.option.alternateText === nextProps.option.alternateText &&
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 79482c11d6b0..30e069d60aab 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -80,7 +80,6 @@ class BaseOptionsSelector extends Component {
         this.incrementPage = this.incrementPage.bind(this);
         this.sliceSections = this.sliceSections.bind(this);
         this.calculateAllVisibleOptionsCount = this.calculateAllVisibleOptionsCount.bind(this);
-        this.debouncedUpdateSearchValue = _.debounce(this.updateSearchValue, CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME);
         this.relatedTarget = null;
 
         const allOptions = this.flattenSections();
@@ -95,7 +94,6 @@ class BaseOptionsSelector extends Component {
             shouldShowReferralModal: false,
             errorMessage: '',
             paginationPage: 1,
-            value: '',
         };
     }
 
@@ -163,7 +161,7 @@ class BaseOptionsSelector extends Component {
             },
             () => {
                 // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top
-                if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || (!!prevState.value && !this.state.value)) {
+                if (this.props.selectedOptions.length !== prevProps.selectedOptions.length || (!!prevProps.value && !this.props.value)) {
                     this.scrollToIndex(0);
                     return;
                 }
@@ -249,7 +247,6 @@ class BaseOptionsSelector extends Component {
         this.setState({
             paginationPage: 1,
             errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '',
-            value,
         });
 
         this.props.onChangeText(value);
@@ -418,7 +415,7 @@ class BaseOptionsSelector extends Component {
                     this.relatedTarget = null;
                 }
                 if (this.textInput.isFocused()) {
-                    setSelection(this.textInput, 0, this.state.value.length);
+                    setSelection(this.textInput, 0, this.props.value.length);
                 }
             }
             const selectedOption = this.props.onSelectRow(option);
@@ -443,7 +440,7 @@ class BaseOptionsSelector extends Component {
         if (this.props.shouldShowTextInput && this.props.shouldPreventDefaultFocusOnSelectRow) {
             this.textInput.focus();
             if (this.textInput.isFocused()) {
-                setSelection(this.textInput, 0, this.state.value.length);
+                setSelection(this.textInput, 0, this.props.value.length);
             }
         }
         this.props.onAddToSelection(option);
@@ -471,10 +468,11 @@ class BaseOptionsSelector extends Component {
         const textInput = (
             <TextInput
                 ref={(el) => (this.textInput = el)}
+                value={this.props.value}
                 label={this.props.textInputLabel}
                 accessibilityLabel={this.props.textInputLabel}
                 role={CONST.ROLE.PRESENTATION}
-                onChangeText={this.debouncedUpdateSearchValue}
+                onChangeText={this.updateSearchValue}
                 errorText={this.state.errorMessage}
                 onSubmitEditing={this.selectFocusedOption}
                 placeholder={this.props.placeholderText}
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index e52187fa76d7..8593569dfafd 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -27,6 +27,9 @@ const propTypes = {
         }),
     ).isRequired,
 
+    /** Value in the search input field */
+    value: PropTypes.string.isRequired,
+
     /** Callback fired when text changes */
     onChangeText: PropTypes.func,
 
diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
index e258472eae93..cb3d9bf260e6 100644
--- a/src/components/TagPicker/index.js
+++ b/src/components/TagPicker/index.js
@@ -70,6 +70,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, should
             highlightSelectedOptions
             isRowMultilineSupported
             shouldShowTextInput={shouldShowTextInput}
+            value={searchValue}
             // Focus the first option when searching
             focusedIndex={0}
             // Focus the selected option on first load
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index c3b1532b4d87..135e616f7691 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -1,6 +1,7 @@
 import {format as timezoneFormat, utcToZonedTime} from 'date-fns-tz';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
+import lodashDebounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import {DeviceEventEmitter, InteractionManager} from 'react-native';
 import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
@@ -2498,6 +2499,8 @@ function searchForReports(searchInput: string) {
     API.read('SearchForReports', parameters, {successData, failureData});
 }
 
+const debouncedSearchInServer = lodashDebounce(searchForReports, CONST.TIMING.SEARCH_FOR_REPORTS_DEBOUNCE_TIME, {leading: false});
+
 function searchInServer(searchInput: string) {
     if (isNetworkOffline || !searchInput.trim().length) {
         Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false);
@@ -2508,7 +2511,7 @@ function searchInServer(searchInput: string) {
     // we want to show the loading state right away. Otherwise, we will see a flashing UI where the client options are sorted and
     // tell the user there are no options, then we start searching, and tell them there are no options again.
     Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, true);
-    searchForReports(searchInput);
+    debouncedSearchInServer(searchInput);
 }
 
 function clearNewRoomFormError() {
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index d7abbab6e93f..6f45c0b33f5a 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -244,6 +244,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
                             onAddToSelection={(option) => toggleOption(option)}
                             sections={sections}
                             selectedOptions={selectedOptions}
+                            value={searchTerm}
                             onSelectRow={(option) => createChat(option)}
                             onChangeText={setSearchTermAndSearchInServer}
                             headerMessage={headerMessage}
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 28718d9aac1c..01fe83289d71 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -67,6 +67,7 @@ class SearchPage extends Component {
         this.selectReport = this.selectReport.bind(this);
         this.onChangeText = this.onChangeText.bind(this);
         this.updateOptions = this.updateOptions.bind(this);
+        this.debouncedUpdateOptions = _.debounce(this.updateOptions.bind(this), 75);
         this.state = {
             searchValue: '',
             recentReports: {},
@@ -84,7 +85,7 @@ class SearchPage extends Component {
 
     onChangeText(searchValue = '') {
         Report.searchInServer(searchValue);
-        this.setState({searchValue}, this.updateOptions);
+        this.setState({searchValue}, this.debouncedUpdateOptions);
     }
 
     /**
@@ -155,7 +156,14 @@ class SearchPage extends Component {
         }
 
         if (option.reportID) {
-            Navigation.dismissModal(option.reportID);
+            this.setState(
+                {
+                    searchValue: '',
+                },
+                () => {
+                    Navigation.dismissModal(option.reportID);
+                },
+            );
         } else {
             Report.navigateToAndOpenReport([option.login]);
         }
@@ -182,6 +190,7 @@ class SearchPage extends Component {
                         <View style={[this.props.themeStyles.flex1, this.props.themeStyles.w100, this.props.themeStyles.pRelative]}>
                             <OptionsSelector
                                 sections={sections}
+                                value={this.state.searchValue}
                                 onSelectRow={this.selectReport}
                                 onChangeText={this.onChangeText}
                                 headerMessage={headerMessage}
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index 4db9c4ce3fb7..8d7d5cfceb77 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -307,6 +307,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                 onAddToSelection={addParticipantToSelection}
                 sections={sections}
                 selectedOptions={participants}
+                value={searchTerm}
                 onSelectRow={addSingleParticipant}
                 onChangeText={setSearchTermAndSearchInServer}
                 ref={forwardedRef}
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index f51e6d7e9fdd..d8d644479270 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -6,7 +6,6 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
-import {usePersonalDetails} from '@components/OnyxProvider';
 import OptionsSelector from '@components/OptionsSelector';
 import refPropTypes from '@components/refPropTypes';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
@@ -17,6 +16,7 @@ import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -48,6 +48,9 @@ const propTypes = {
         }),
     ),
 
+    /** All of the personal details for everyone */
+    personalDetails: PropTypes.objectOf(personalDetailsPropType),
+
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
@@ -70,6 +73,7 @@ const defaultProps = {
     participants: [],
     forwardedRef: undefined,
     safeAreaPaddingBottomStyle: {},
+    personalDetails: {},
     reports: {},
     betas: [],
     isDistanceRequest: false,
@@ -80,6 +84,7 @@ function MoneyRequestParticipantsSelector({
     forwardedRef,
     betas,
     participants,
+    personalDetails,
     reports,
     translate,
     navigateToRequest,
@@ -98,7 +103,7 @@ function MoneyRequestParticipantsSelector({
         userToInvite: null,
     });
     const {isOffline} = useNetwork();
-    const personalDetails = usePersonalDetails();
+
     const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
 
     /**
@@ -155,32 +160,20 @@ function MoneyRequestParticipantsSelector({
         }
 
         return newSections;
-    }, [maxParticipantsReached, newChatOptions.personalDetails, newChatOptions.recentReports, newChatOptions.userToInvite, participants, personalDetails, searchTerm, translate]);
+    }, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate, searchTerm]);
 
     /**
      * Adds a single participant to the request
      *
      * @param {Object} option
      */
-    const addSingleParticipant = useCallback(
-        (option) => {
-            onAddParticipants(
-                [
-                    {
-                        accountID: option.accountID,
-                        login: option.login,
-                        isPolicyExpenseChat: option.isPolicyExpenseChat,
-                        reportID: option.reportID,
-                        selected: true,
-                        searchText: option.searchText,
-                    },
-                ],
-                false,
-            );
-            navigateToRequest();
-        },
-        [onAddParticipants, navigateToRequest],
-    );
+    const addSingleParticipant = (option) => {
+        onAddParticipants(
+            [{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true, searchText: option.searchText}],
+            false,
+        );
+        navigateToRequest();
+    };
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.
@@ -222,16 +215,12 @@ function MoneyRequestParticipantsSelector({
         [participants, onAddParticipants],
     );
 
-    const headerMessage = useMemo(
-        () =>
-            OptionsListUtils.getHeaderMessage(
-                newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
-                Boolean(newChatOptions.userToInvite),
-                searchTerm.trim(),
-                maxParticipantsReached,
-                _.some(participants, (participant) => participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase())),
-            ),
-        [maxParticipantsReached, newChatOptions.personalDetails.length, newChatOptions.recentReports.length, newChatOptions.userToInvite, participants, searchTerm],
+    const headerMessage = OptionsListUtils.getHeaderMessage(
+        newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
+        Boolean(newChatOptions.userToInvite),
+        searchTerm.trim(),
+        maxParticipantsReached,
+        _.some(participants, (participant) => participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase())),
     );
     const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
 
@@ -289,27 +278,23 @@ function MoneyRequestParticipantsSelector({
         navigateToSplit();
     }, [shouldShowSplitBillErrorMessage, navigateToSplit]);
 
-    const footerContent = useMemo(
-        () => (
-            <View>
-                {shouldShowSplitBillErrorMessage && (
-                    <FormHelpMessage
-                        style={[styles.ph1, styles.mb2]}
-                        isError
-                        message="iou.error.splitBillMultipleParticipantsErrorMessage"
-                    />
-                )}
-                <Button
-                    success
-                    text={translate('iou.addToSplit')}
-                    onPress={handleConfirmSelection}
-                    pressOnEnter
-                    isDisabled={shouldShowSplitBillErrorMessage}
+    const footerContent = (
+        <View>
+            {shouldShowSplitBillErrorMessage && (
+                <FormHelpMessage
+                    style={[styles.ph1, styles.mb2]}
+                    isError
+                    message="iou.error.splitBillMultipleParticipantsErrorMessage"
                 />
-            </View>
-        ),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [handleConfirmSelection, shouldShowSplitBillErrorMessage, translate],
+            )}
+            <Button
+                success
+                text={translate('iou.addToSplit')}
+                onPress={handleConfirmSelection}
+                pressOnEnter
+                isDisabled={shouldShowSplitBillErrorMessage}
+            />
+        </View>
     );
 
     return (
@@ -321,6 +306,7 @@ function MoneyRequestParticipantsSelector({
                 onAddToSelection={addParticipantToSelection}
                 sections={sections}
                 selectedOptions={participants}
+                value={searchTerm}
                 onSelectRow={addSingleParticipant}
                 onChangeText={setSearchTermAndSearchInServer}
                 ref={forwardedRef}
@@ -360,6 +346,9 @@ MoneyRequestParticipantsSelectorWithRef.displayName = 'MoneyRequestParticipantsS
 export default compose(
     withLocalize,
     withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index cee84cdd1a93..6b3815d0dee0 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -119,8 +119,12 @@ function TaskAssigneeSelectorModal(props) {
     }, [props, searchValue, allPersonalDetails, isLoading]);
 
     useEffect(() => {
-        updateOptions();
-    }, [searchValue, updateOptions]);
+        const debouncedSearch = _.debounce(updateOptions, 200);
+        debouncedSearch();
+        return () => {
+            debouncedSearch.cancel();
+        };
+    }, [updateOptions]);
 
     const onChangeText = (newSearchTerm = '') => {
         setSearchValue(newSearchTerm);
@@ -188,6 +192,8 @@ function TaskAssigneeSelectorModal(props) {
         // Check to see if we're creating a new task
         // If there's no route params, we're creating a new task
         if (!props.route.params && option.accountID) {
+            // Clear out the state value, set the assignee and navigate back to the NewTaskPage
+            setSearchValue('');
             Task.setAssigneeValue(option.login, option.accountID, props.task.shareDestination, OptionsListUtils.isCurrentUser(option));
             return Navigation.goBack(ROUTES.NEW_TASK);
         }
@@ -222,6 +228,7 @@ function TaskAssigneeSelectorModal(props) {
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector
                             sections={sections}
+                            value={searchValue}
                             onSelectRow={selectReport}
                             onChangeText={onChangeText}
                             headerMessage={headerMessage}
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index 64fd5f50b61f..b0b6dac15d69 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -110,6 +110,8 @@ function TaskShareDestinationSelectorModal(props) {
         }
 
         if (option.reportID) {
+            // Clear out the state value, set the assignee and navigate back to the NewTaskPage
+            setSearchValue('');
             Task.setShareDestinationValue(option.reportID);
             Navigation.goBack(ROUTES.NEW_TASK);
         }
@@ -137,6 +139,7 @@ function TaskShareDestinationSelectorModal(props) {
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                         <OptionsSelector
                             sections={sections}
+                            value={searchValue}
                             onSelectRow={selectReport}
                             onChangeText={setSearchTermAndSearchInServer}
                             headerMessage={headerMessage}

From 0f1cdd12f419b9bf37b0ae4054f7a244b0f8ed2e Mon Sep 17 00:00:00 2001
From: Jules Rosser <jules@expensify.com>
Date: Tue, 19 Dec 2023 16:30:51 +0000
Subject: [PATCH 203/244] update AdHoc to themed icon

---
 android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml b/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml
index 7353dbd1fd82..1084c240820a 100644
--- a/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -2,4 +2,5 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>
\ No newline at end of file

From 11bcd83d0e0ed7f2bec5d70f1b47a3affc55d9e4 Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Tue, 19 Dec 2023 16:46:05 +0000
Subject: [PATCH 204/244] Update version to 1.4.14-1

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 1338459abdf1..597d85de1c09 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041400
-        versionName "1.4.14-0"
+        versionCode 1001041401
+        versionName "1.4.14-1"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 66cdf8003d63..897a300143b7 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.0</string>
+	<string>1.4.14.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index effadbde9866..01316af0c986 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.0</string>
+	<string>1.4.14.1</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 8fb51c7ba3e7..1f6496c08566 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-0",
+  "version": "1.4.14-1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-0",
+      "version": "1.4.14-1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 0e40d5b3fa23..d11a8c69f8f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-0",
+  "version": "1.4.14-1",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From 83840cd38de1c0edfd599bb13506ebba8ed0756c Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 22:49:34 +0530
Subject: [PATCH 205/244] use arrow icon

---
 docs/_sass/_main.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index a6298ae70395..cfdf4ff3a2bc 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -111,12 +111,24 @@ h5,
 h6 {
     margin-top: 20px;
 }
-  
+
+#faq::marker {
+    font-size: 1.5em;
+}
+
 details summary { 
     cursor: pointer;
     user-select: none;
 }
 
+details > summary {
+    list-style-image: url("/assets/images/arrow-right.svg");
+}
+
+details[open] > summary {
+    list-style-image: url("/assets/images/down.svg");
+}
+
 h1, 
 summary {
     font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;

From 361b77420daae1ac1fa8a6b6ae0003382651659c Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 23:27:43 +0530
Subject: [PATCH 206/244] simplify api to use faq

---
 docs/_includes/faq-begin.md | 4 ++++
 docs/_includes/faq-end.md   | 1 +
 2 files changed, 5 insertions(+)
 create mode 100644 docs/_includes/faq-begin.md
 create mode 100644 docs/_includes/faq-end.md

diff --git a/docs/_includes/faq-begin.md b/docs/_includes/faq-begin.md
new file mode 100644
index 000000000000..af1981c242cd
--- /dev/null
+++ b/docs/_includes/faq-begin.md
@@ -0,0 +1,4 @@
+{::options parse_block_html="true" /}
+<details>
+{::options parse_block_html="false" /}
+<summary>FAQ</summary> {: #faq}
\ No newline at end of file
diff --git a/docs/_includes/faq-end.md b/docs/_includes/faq-end.md
new file mode 100644
index 000000000000..32012c1ab5cb
--- /dev/null
+++ b/docs/_includes/faq-end.md
@@ -0,0 +1 @@
+</details>
\ No newline at end of file

From c420b43901aa0cd249a20cdc2647a1cfc467cb48 Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 23:27:49 +0530
Subject: [PATCH 207/244] simplify api to use faq

---
 .../expensify-classic/getting-started/Using-The-App.md    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/articles/expensify-classic/getting-started/Using-The-App.md b/docs/articles/expensify-classic/getting-started/Using-The-App.md
index f77acd1864e1..7d3a8cb5e22b 100644
--- a/docs/articles/expensify-classic/getting-started/Using-The-App.md
+++ b/docs/articles/expensify-classic/getting-started/Using-The-App.md
@@ -43,11 +43,7 @@ SmartScan's performance can vary depending on factors such as receipt quality, l
 **Language support**: While SmartScan supports multiple languages, its accuracy may differ from one language to another. Users dealing with non-English receipts should be aware of potential variations in data extraction.
 **Handwriting recognition**: Handwritten receipts might pose challenges for SmartScan. In such cases, manual verification may be necessary to ensure accurate data entry.
 
-
-{::options parse_block_html="true" /}
-<details>
-{::options parse_block_html="false" /}
-<summary>FAQ</summary> {: #faq}
+{% include faq-begin.md %}
 
 ## Can I use the mobile app for both personal and business expenses?
 Yes, you can use Expensify for personal and business expenses. It's versatile and suitable for both individual and corporate use. Check out our personal and business plans [here](https://www.expensify.com/pricing) to see what might be right for you.
@@ -64,4 +60,4 @@ Expensify takes security seriously and employs encryption and other security mea
 ## Can I use the mobile app offline, and will my data sync when I'm back online?
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
 
-</details>
\ No newline at end of file
+{% include faq-end.md %}
\ No newline at end of file

From 96c558c33c26a237e3b1a1513d398fcab01b58bc Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 23:29:46 +0530
Subject: [PATCH 208/244] update template

---
 docs/TEMPLATE.md                                               | 3 ++-
 .../expensify-classic/getting-started/Using-The-App.md         | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/TEMPLATE.md b/docs/TEMPLATE.md
index 4408e56382a2..bbf4ab96d35f 100644
--- a/docs/TEMPLATE.md
+++ b/docs/TEMPLATE.md
@@ -21,7 +21,7 @@ What options does a user have then interacting with this feature?
 What elements of this feature are pay-walled vs. free?
 -->
 
-# FAQ
+{% include faq-begin.md %}
 <!--
 This section covers the useful but not as vital information, it should capture commonly queried elements which do not organically form part of the About or How-to sections.
 
@@ -32,6 +32,7 @@ This section covers the useful but not as vital information, it should capture c
 - Is there any general troubleshooting for this feature?
  - Note: troubleshooting should generally go in the FAQ, but if there is extensive troubleshooting, such as with integrations, that will be housed in a separate page, stored with and linked from the main page for that feature.
 -->
+{% include faq-end.md %}
 
 # Deep Dive
 <!--
diff --git a/docs/articles/expensify-classic/getting-started/Using-The-App.md b/docs/articles/expensify-classic/getting-started/Using-The-App.md
index 7d3a8cb5e22b..27cbcde946c3 100644
--- a/docs/articles/expensify-classic/getting-started/Using-The-App.md
+++ b/docs/articles/expensify-classic/getting-started/Using-The-App.md
@@ -60,4 +60,4 @@ Expensify takes security seriously and employs encryption and other security mea
 ## Can I use the mobile app offline, and will my data sync when I'm back online?
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
 
-{% include faq-end.md %}
\ No newline at end of file
+{% include faq-end.md %}

From ad8797f3758cde9fd36b231f6a6b814d2e45edcc Mon Sep 17 00:00:00 2001
From: Rushat Gabhane <rushatgabhane@gmail.com>
Date: Tue, 19 Dec 2023 23:32:31 +0530
Subject: [PATCH 209/244] rm unnecessary diff

---
 .../expensify-classic/getting-started/Using-The-App.md     | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/docs/articles/expensify-classic/getting-started/Using-The-App.md b/docs/articles/expensify-classic/getting-started/Using-The-App.md
index 27cbcde946c3..9b8bc530e12e 100644
--- a/docs/articles/expensify-classic/getting-started/Using-The-App.md
+++ b/docs/articles/expensify-classic/getting-started/Using-The-App.md
@@ -2,10 +2,8 @@
 title: Using the app
 description: Streamline expense management effortlessly with the Expensify mobile app. Learn how to install, enable push notifications, and use SmartScan to capture, categorize, and track expenses. Versatile for personal and business use, Expensify is a secure and automated solution for managing your finances on the go.
 ---
-
 # Overview
 The Expensify mobile app is the ultimate expense management solution that makes it effortless to track and submit your receipts and expenses. Use the app to snap a picture of your receipts, categorize and submit expenses, and even review and approve expense reports.
-
 # How to install the Expensify app
 To get started with Expensify on your mobile device, you need to download the app:
 1. Visit the App Store (iOS) or Google Play Store (Android).
@@ -13,7 +11,6 @@ To get started with Expensify on your mobile device, you need to download the ap
 3. Tap "Download" or "Install."
    
 Once the app is installed, open it and log in with your Expensify credentials. If you don't have an Expensify account, you can create one during the sign-up process.
-
 # How to enable on push notifications
 Push notifications keep you informed about expense approvals, reimbursements, and more. To enable push notifications:
 1. Open the Expensify app.
@@ -47,16 +44,12 @@ SmartScan's performance can vary depending on factors such as receipt quality, l
 
 ## Can I use the mobile app for both personal and business expenses?
 Yes, you can use Expensify for personal and business expenses. It's versatile and suitable for both individual and corporate use. Check out our personal and business plans [here](https://www.expensify.com/pricing) to see what might be right for you.
-
 ## Is it possible to categorize and tag expenses on the mobile app?
 Yes, you can categorize and tag expenses on the mobile app. The app allows you to customize categories and tags to help organize and track your spending.
-
 ## What should I do if I encounter issues with the mobile app, such as login problems or crashes?
 If you experience issues, first make sure you’re using the most recent version of the app. You can also try to restarting the app. If the issue persists, you can start a chat with Concierge in the app or write to [concierge@expensify.com](mailto:concierge@expensify.com).
-
 ## Is the mobile app secure for managing sensitive financial information?
 Expensify takes security seriously and employs encryption and other security measures to protect your data. It's important to use strong, unique passwords and enable device security features like biometric authentication.
-
 ## Can I use the mobile app offline, and will my data sync when I'm back online?
 Yes, you can use the mobile app offline to capture receipts and create expenses. The app will sync your data once you have an internet connection.
 

From a459d902543d6e260f88acae99a711775ed71ab7 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz <maciej.dobosz@swmansion.com>
Date: Tue, 19 Dec 2023 19:57:12 +0100
Subject: [PATCH 210/244] Set location exactly once

---
 src/components/MapView/MapView.tsx         | 32 +++++++++++-----------
 src/components/MapView/MapView.website.tsx | 32 +++++++++++-----------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index ac1af8d4d727..f7a15ba10d2c 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -31,15 +31,6 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const hasAskedForLocationPermission = useRef(false);
 
-        const getUserLocationFromCache = useCallback(() => {
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            if (cachedUserLocation || !initialState) {
-                return;
-            }
-
-            setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
-        }, [cachedUserLocation, initialState]);
-
         useFocusEffect(
             useCallback(() => {
                 if (isOffline) {
@@ -47,17 +38,26 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                 }
 
                 if (hasAskedForLocationPermission.current) {
-                    getUserLocationFromCache();
                     return;
                 }
 
                 hasAskedForLocationPermission.current = true;
-                getCurrentPosition((params) => {
-                    const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
-                    setCurrentPosition(currentCoords);
-                    setUserLocation(currentCoords);
-                }, getUserLocationFromCache);
-            }, [getUserLocationFromCache, isOffline]),
+                getCurrentPosition(
+                    (params) => {
+                        const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
+                        setCurrentPosition(currentCoords);
+                        setUserLocation(currentCoords);
+                    },
+                    () => {
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        if (cachedUserLocation || !initialState) {
+                            return;
+                        }
+
+                        setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+                    },
+                );
+            }, [cachedUserLocation, initialState, isOffline]),
         );
 
         // Determines if map can be panned to user's detected
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 81ad13696778..9ade3548f959 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -54,15 +54,6 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
         const hasAskedForLocationPermission = useRef(false);
 
-        const getUserLocationFromCache = useCallback(() => {
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            if (cachedUserLocation || !initialState) {
-                return;
-            }
-
-            setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
-        }, [cachedUserLocation, initialState]);
-
         useFocusEffect(
             useCallback(() => {
                 if (isOffline) {
@@ -70,17 +61,26 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                 }
 
                 if (hasAskedForLocationPermission.current) {
-                    getUserLocationFromCache();
                     return;
                 }
 
                 hasAskedForLocationPermission.current = true;
-                getCurrentPosition((params) => {
-                    const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
-                    setCurrentPosition(currentCoords);
-                    setUserLocation(currentCoords);
-                }, getUserLocationFromCache);
-            }, [getUserLocationFromCache, isOffline]),
+                getCurrentPosition(
+                    (params) => {
+                        const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
+                        setCurrentPosition(currentCoords);
+                        setUserLocation(currentCoords);
+                    },
+                    () => {
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        if (cachedUserLocation || !initialState) {
+                            return;
+                        }
+
+                        setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+                    },
+                );
+            }, [cachedUserLocation, initialState, isOffline]),
         );
 
         // Determines if map can be panned to user's detected

From 6a33807e45e1ee6e1f853f8694d7338ea380479f Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 19 Dec 2023 22:55:16 +0100
Subject: [PATCH 211/244] Revert: Migrate Icon/index.js and
 FloatingActionButton to function component

---
 ios/Podfile.lock                              |  31 +++-
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 src/components/FloatingActionButton.js        | 132 ++++++++++++++++++
 .../FloatingActionButton/FabPlusIcon.js       |  49 -------
 src/components/FloatingActionButton/index.js  |  85 -----------
 src/components/Icon/index.tsx                 | 110 ++++++++-------
 src/styles/utils/index.ts                     |   8 ++
 8 files changed, 232 insertions(+), 199 deletions(-)
 create mode 100644 src/components/FloatingActionButton.js
 delete mode 100644 src/components/FloatingActionButton/FabPlusIcon.js
 delete mode 100644 src/components/FloatingActionButton/index.js

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index eebd6ad532d4..0fac30a26430 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -777,10 +777,35 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (1.14.0):
     - React-Core
-  - RNReanimated (3.6.1):
-    - RCT-Folly (= 2021.07.22.00)
+  - RNReanimated (3.5.4):
+    - DoubleConversion
+    - FBLazyVector
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
     - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTAppDelegate
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
     - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (3.21.0):
     - React-Core
     - React-RCTImage
@@ -1255,7 +1280,7 @@ SPEC CHECKSUMS:
   rnmapbox-maps: 6f638ec002aa6e906a6f766d69cd45f968d98e64
   RNPermissions: 9b086c8f05b2e2faa587fdc31f4c5ab4509728aa
   RNReactNativeHapticFeedback: 1e3efeca9628ff9876ee7cdd9edec1b336913f8c
-  RNReanimated: fdbaa9c964bbab7fac50c90862b6cc5f041679b9
+  RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: d037903436160a4b039d32606668350d2a808806
   RNSVG: d00c8f91c3cbf6d476451313a18f04d220d4f396
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
diff --git a/package-lock.json b/package-lock.json
index 18978204afeb..b1b7102bc9fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,7 +100,7 @@
         "react-native-plaid-link-sdk": "10.8.0",
         "react-native-qrcode-svg": "^6.2.0",
         "react-native-quick-sqlite": "^8.0.0-beta.2",
-        "react-native-reanimated": "^3.6.1",
+        "react-native-reanimated": "3.5.4",
         "react-native-render-html": "6.3.1",
         "react-native-safe-area-context": "4.4.1",
         "react-native-screens": "3.21.0",
@@ -44561,9 +44561,9 @@
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz",
-      "integrity": "sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==",
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.5.4.tgz",
+      "integrity": "sha512-8we9LLDO1o4Oj9/DICeEJ2K1tjfqkJagqQUglxeUAkol/HcEJ6PGxIrpBcNryLqCDYEcu6FZWld/FzizBIw6bg==",
       "dependencies": {
         "@babel/plugin-transform-object-assign": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",
@@ -84883,9 +84883,9 @@
       "requires": {}
     },
     "react-native-reanimated": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz",
-      "integrity": "sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==",
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.5.4.tgz",
+      "integrity": "sha512-8we9LLDO1o4Oj9/DICeEJ2K1tjfqkJagqQUglxeUAkol/HcEJ6PGxIrpBcNryLqCDYEcu6FZWld/FzizBIw6bg==",
       "requires": {
         "@babel/plugin-transform-object-assign": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",
diff --git a/package.json b/package.json
index 88538562c001..c667423b9e69 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
-    "react-native-reanimated": "^3.6.1",
+    "react-native-reanimated": "3.5.4",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "3.21.0",
diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
new file mode 100644
index 000000000000..791eb150f8c9
--- /dev/null
+++ b/src/components/FloatingActionButton.js
@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import React, {PureComponent} from 'react';
+import {Animated, Easing, View} from 'react-native';
+import compose from '@libs/compose';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import Tooltip from './Tooltip/PopoverAnchorTooltip';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import withStyleUtils, {withStyleUtilsPropTypes} from './withStyleUtils';
+import withTheme, {withThemePropTypes} from './withTheme';
+import withThemeStyles, {withThemeStylesPropTypes} from './withThemeStyles';
+
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
+AnimatedIcon.displayName = 'AnimatedIcon';
+
+const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback);
+AnimatedPressable.displayName = 'AnimatedPressable';
+
+const propTypes = {
+    // Callback to fire on request to toggle the FloatingActionButton
+    onPress: PropTypes.func.isRequired,
+
+    // Current state (active or not active) of the component
+    isActive: PropTypes.bool.isRequired,
+
+    // Ref for the button
+    buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+    ...withLocalizePropTypes,
+    ...withThemePropTypes,
+    ...withThemeStylesPropTypes,
+    ...withStyleUtilsPropTypes,
+};
+
+const defaultProps = {
+    buttonRef: () => {},
+};
+
+class FloatingActionButton extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.animatedValue = new Animated.Value(props.isActive ? 1 : 0);
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.isActive === this.props.isActive) {
+            return;
+        }
+
+        this.animateFloatingActionButton();
+    }
+
+    /**
+     * Animates the floating action button
+     * Method is called when the isActive prop changes
+     */
+    animateFloatingActionButton() {
+        const animationFinalValue = this.props.isActive ? 1 : 0;
+
+        Animated.timing(this.animatedValue, {
+            toValue: animationFinalValue,
+            duration: 340,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: false,
+        }).start();
+    }
+
+    render() {
+        const rotate = this.animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '135deg'],
+        });
+
+        const backgroundColor = this.animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [this.props.theme.success, this.props.theme.buttonDefaultBG],
+        });
+
+        const fill = this.animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [this.props.theme.textLight, this.props.theme.textDark],
+        });
+
+        return (
+            <Tooltip text={this.props.translate('common.new')}>
+                <View style={this.props.themeStyles.floatingActionButtonContainer}>
+                    <AnimatedPressable
+                        ref={(el) => {
+                            this.fabPressable = el;
+                            if (this.props.buttonRef) {
+                                this.props.buttonRef.current = el;
+                            }
+                        }}
+                        accessibilityLabel={this.props.accessibilityLabel}
+                        role={this.props.role}
+                        pressDimmingValue={1}
+                        onPress={(e) => {
+                            // Drop focus to avoid blue focus ring.
+                            this.fabPressable.blur();
+                            this.props.onPress(e);
+                        }}
+                        onLongPress={() => {}}
+                        style={[this.props.themeStyles.floatingActionButton, this.props.StyleUtils.getAnimatedFABStyle(rotate, backgroundColor)]}
+                    >
+                        <AnimatedIcon
+                            src={Expensicons.Plus}
+                            fill={fill}
+                        />
+                    </AnimatedPressable>
+                </View>
+            </Tooltip>
+        );
+    }
+}
+
+FloatingActionButton.propTypes = propTypes;
+FloatingActionButton.defaultProps = defaultProps;
+
+const FloatingActionButtonWithLocalize = withLocalize(FloatingActionButton);
+
+const FloatingActionButtonWithLocalizeWithRef = React.forwardRef((props, ref) => (
+    <FloatingActionButtonWithLocalize
+        // eslint-disable-next-line
+        {...props}
+        buttonRef={ref}
+    />
+));
+
+FloatingActionButtonWithLocalizeWithRef.displayName = 'FloatingActionButtonWithLocalizeWithRef';
+
+export default compose(withThemeStyles, withTheme, withStyleUtils)(FloatingActionButtonWithLocalizeWithRef);
diff --git a/src/components/FloatingActionButton/FabPlusIcon.js b/src/components/FloatingActionButton/FabPlusIcon.js
deleted file mode 100644
index 09afa00f119d..000000000000
--- a/src/components/FloatingActionButton/FabPlusIcon.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
-import Animated, {Easing, interpolateColor, useAnimatedProps, useSharedValue, withTiming} from 'react-native-reanimated';
-import Svg, {Path} from 'react-native-svg';
-import useTheme from '@hooks/useTheme';
-
-const AnimatedPath = Animated.createAnimatedComponent(Path);
-
-const propTypes = {
-    /* Current state (active or not active) of the component */
-    isActive: PropTypes.bool.isRequired,
-};
-
-function FabPlusIcon({isActive}) {
-    const theme = useTheme();
-    const animatedValue = useSharedValue(isActive ? 1 : 0);
-
-    useEffect(() => {
-        animatedValue.value = withTiming(isActive ? 1 : 0, {
-            duration: 340,
-            easing: Easing.inOut(Easing.ease),
-        });
-    }, [isActive, animatedValue]);
-
-    const animatedProps = useAnimatedProps(() => {
-        const fill = interpolateColor(animatedValue.value, [0, 1], [theme.textLight, theme.textDark]);
-
-        return {
-            fill,
-        };
-    });
-
-    return (
-        <Svg
-            width={20}
-            height={20}
-        >
-            <AnimatedPath
-                d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
-                animatedProps={animatedProps}
-            />
-        </Svg>
-    );
-}
-
-FabPlusIcon.propTypes = propTypes;
-FabPlusIcon.displayName = 'FabPlusIcon';
-
-export default FabPlusIcon;
diff --git a/src/components/FloatingActionButton/index.js b/src/components/FloatingActionButton/index.js
deleted file mode 100644
index d341396c44b7..000000000000
--- a/src/components/FloatingActionButton/index.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {useEffect, useRef} from 'react';
-import {View} from 'react-native';
-import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
-import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
-import FabPlusIcon from './FabPlusIcon';
-
-const AnimatedPressable = Animated.createAnimatedComponent(PressableWithFeedback);
-AnimatedPressable.displayName = 'AnimatedPressable';
-
-const propTypes = {
-    /* Callback to fire on request to toggle the FloatingActionButton */
-    onPress: PropTypes.func.isRequired,
-
-    /* Current state (active or not active) of the component */
-    isActive: PropTypes.bool.isRequired,
-
-    /* An accessibility label for the button */
-    accessibilityLabel: PropTypes.string.isRequired,
-
-    /* An accessibility role for the button */
-    role: PropTypes.string.isRequired,
-};
-
-const FloatingActionButton = React.forwardRef(({onPress, isActive, accessibilityLabel, role}, ref) => {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const fabPressable = useRef(null);
-    const animatedValue = useSharedValue(isActive ? 1 : 0);
-    const buttonRef = ref;
-
-    useEffect(() => {
-        animatedValue.value = withTiming(isActive ? 1 : 0, {
-            duration: 340,
-            easing: Easing.inOut(Easing.ease),
-        });
-    }, [isActive, animatedValue]);
-
-    const animatedStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(animatedValue.value, [0, 1], [theme.success, theme.buttonDefaultBG]);
-
-        return {
-            transform: [{rotate: `${animatedValue.value * 135}deg`}],
-            backgroundColor,
-            borderRadius: styles.floatingActionButton.borderRadius,
-        };
-    });
-
-    return (
-        <Tooltip text={translate('common.new')}>
-            <View style={styles.floatingActionButtonContainer}>
-                <AnimatedPressable
-                    ref={(el) => {
-                        fabPressable.current = el;
-                        if (buttonRef) {
-                            buttonRef.current = el;
-                        }
-                    }}
-                    accessibilityLabel={accessibilityLabel}
-                    role={role}
-                    pressDimmingValue={1}
-                    onPress={(e) => {
-                        // Drop focus to avoid blue focus ring.
-                        fabPressable.current.blur();
-                        onPress(e);
-                    }}
-                    onLongPress={() => {}}
-                    style={[styles.floatingActionButton, animatedStyle]}
-                >
-                    <FabPlusIcon isActive={isActive} />
-                </AnimatedPressable>
-            </View>
-        </Tooltip>
-    );
-});
-
-FloatingActionButton.propTypes = propTypes;
-FloatingActionButton.displayName = 'FloatingActionButton';
-
-export default FloatingActionButton;
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 5f82421c0e8e..80abe1872c12 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import useStyleUtils from '@hooks/useStyleUtils';
-import useTheme from '@hooks/useTheme';
-import useThemeStyles from '@hooks/useThemeStyles';
+import withStyleUtils, {WithStyleUtilsProps} from '@components/withStyleUtils';
+import withTheme, {WithThemeProps} from '@components/withTheme';
+import withThemeStyles, {type WithThemeStylesProps} from '@components/withThemeStyles';
 import variables from '@styles/variables';
 import IconWrapperStyles from './IconWrapperStyles';
 
@@ -41,63 +41,65 @@ type IconProps = {
 
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
-};
+} & WithThemeStylesProps &
+    WithThemeProps &
+    WithStyleUtilsProps;
+
+// We must use a class component to create an animatable component with the Animated API
+// eslint-disable-next-line react/prefer-stateless-function
+class Icon extends PureComponent<IconProps> {
+    // eslint-disable-next-line react/static-property-placement
+    public static defaultProps = {
+        width: variables.iconSizeNormal,
+        height: variables.iconSizeNormal,
+        fill: undefined,
+        small: false,
+        inline: false,
+        additionalStyles: [],
+        hovered: false,
+        pressed: false,
+    };
 
-function Icon({
-    src,
-    width = variables.iconSizeNormal,
-    height = variables.iconSizeNormal,
-    fill = undefined,
-    small = false,
-    inline = false,
-    hovered = false,
-    pressed = false,
-    additionalStyles = [],
-}: IconProps) {
-    const theme = useTheme();
-    const StyleUtils = useStyleUtils();
-    const styles = useThemeStyles();
-    const iconWidth = small ? variables.iconSizeSmall : width;
-    const iconHeight = small ? variables.iconSizeSmall : height;
-    const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
-    const iconFill = fill ?? theme.icon;
-    const IconComponent = src;
+    render() {
+        const width = this.props.small ? variables.iconSizeSmall : this.props.width;
+        const height = this.props.small ? variables.iconSizeSmall : this.props.height;
+        const iconStyles = [this.props.StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
+        const fill = this.props.fill ?? this.props.theme.icon;
+
+        if (this.props.inline) {
+            return (
+                <View
+                    testID={`${this.props.src.name} Icon`}
+                    style={[this.props.StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
+                >
+                    <View style={iconStyles}>
+                        <this.props.src
+                            width={width}
+                            height={height}
+                            fill={fill}
+                            hovered={this.props.hovered?.toString()}
+                            pressed={this.props.pressed?.toString()}
+                        />
+                    </View>
+                </View>
+            );
+        }
 
-    if (inline) {
         return (
             <View
-                testID={`${src.name} Icon`}
-                style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
+                testID={`${this.props.src.name} Icon`}
+                style={this.props.additionalStyles}
             >
-                <View style={iconStyles}>
-                    <IconComponent
-                        width={iconWidth}
-                        height={iconHeight}
-                        fill={iconFill}
-                        hovered={hovered?.toString()}
-                        pressed={pressed?.toString()}
-                    />
-                </View>
+                <this.props.src
+                    width={width}
+                    height={height}
+                    fill={fill}
+                    hovered={this.props.hovered?.toString()}
+                    pressed={this.props.pressed?.toString()}
+                />
             </View>
         );
     }
-
-    return (
-        <View
-            testID={`${src.name} Icon`}
-            style={additionalStyles}
-        >
-            <IconComponent
-                width={iconWidth}
-                height={iconHeight}
-                fill={iconFill}
-                hovered={hovered?.toString()}
-                pressed={pressed?.toString()}
-            />
-        </View>
-    );
 }
 
-Icon.displayName = 'Icon';
-
-export default Icon;
+export default withTheme(withThemeStyles(withStyleUtils(Icon)));
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index a48724e72fc9..1dbe0b8587fd 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -446,6 +446,13 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu
     return {};
 }
 
+function getAnimatedFABStyle(rotate: Animated.Value, backgroundColor: Animated.Value): Animated.WithAnimatedValue<ViewStyle> {
+    return {
+        transform: [{rotate}],
+        backgroundColor,
+    };
+}
+
 function getWidthAndHeightStyle(width: number, height?: number): ViewStyle {
     return {
         width,
@@ -1008,6 +1015,7 @@ const staticStyleUtils = {
     combineStyles,
     displayIfTrue,
     getAmountFontSizeAndLineHeight,
+    getAnimatedFABStyle,
     getAutoCompleteSuggestionContainerStyle,
     getAvatarBorderRadius,
     getAvatarBorderStyle,

From 109374546049097b832e0a4f0e2a1f213f54e2f0 Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 19 Dec 2023 23:05:40 +0100
Subject: [PATCH 212/244] fix export

---
 src/components/Icon/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index d61e91267b46..d38e61f8eba1 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -104,6 +104,4 @@ class Icon extends PureComponent<IconProps> {
 
 export default withTheme(withThemeStyles(withStyleUtils(Icon)));
 
-export type {SrcProps};
-
-export default Icon;
+export type {SrcProps};
\ No newline at end of file

From 7d6284da963e964c27ce206449ce5d359b44104a Mon Sep 17 00:00:00 2001
From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 19 Dec 2023 23:08:41 +0100
Subject: [PATCH 213/244] run prettier

---
 src/components/Icon/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index d38e61f8eba1..59b1639dce33 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -102,6 +102,6 @@ class Icon extends PureComponent<IconProps> {
     }
 }
 
-export default withTheme(withThemeStyles(withStyleUtils(Icon)));
+export type {SrcProps};
 
-export type {SrcProps};
\ No newline at end of file
+export default withTheme(withThemeStyles(withStyleUtils(Icon)));

From a41803e3464b1fcd1897289ae9242b439ff3507d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= <marco@expensify.com>
Date: Tue, 19 Dec 2023 17:43:15 -0600
Subject: [PATCH 214/244] Refactor timing logic in Timing.ts

---
 src/libs/actions/Timing.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/Timing.ts b/src/libs/actions/Timing.ts
index 0cef2fe4d2b8..9e40f088f1c2 100644
--- a/src/libs/actions/Timing.ts
+++ b/src/libs/actions/Timing.ts
@@ -39,8 +39,8 @@ function end(eventName: string, secondaryName = '', maxExecutionTime = 0) {
         return;
     }
 
+    const {startTime, shouldUseFirebase} = timestampData[eventName];
     Environment.getEnvironment().then((envName) => {
-        const {startTime, shouldUseFirebase} = timestampData[eventName];
         const eventTime = Date.now() - startTime;
 
         if (shouldUseFirebase) {

From fdc5cfb0bc1a8de213b6b760a0f4b11e1cb16ddf Mon Sep 17 00:00:00 2001
From: Nikki Wines <nikkiwines@expensify.com>
Date: Tue, 19 Dec 2023 18:47:12 -0500
Subject: [PATCH 215/244] Update OFFLINE_UX.md to include finallyData

---
 contributingGuides/OFFLINE_UX.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/contributingGuides/OFFLINE_UX.md b/contributingGuides/OFFLINE_UX.md
index cca5c6286f73..cd45bebdce4b 100644
--- a/contributingGuides/OFFLINE_UX.md
+++ b/contributingGuides/OFFLINE_UX.md
@@ -82,6 +82,7 @@ When the user is offline:
     - `optimisticData` - always include this object when using the Pattern B
     - `successData` - include this if the action is `update` or `delete`. You do not have to include this if the action is `add` (same data was already passed using the `optimisticData` object)
     - `failureData` - always include this object. In case of `add` action, you will want to add some generic error which covers some unexpected failures which were not handled in the backend
+       - In the event that `successData` and `failureData` are the same, you can use a single object `finallyData` in place of both. 
 
 **Handling errors:**
 - The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31)

From 52ecad401123dbeced531d63dc722aa92e84f537 Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Wed, 20 Dec 2023 02:41:32 +0000
Subject: [PATCH 216/244] Update version to 1.4.14-2

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 597d85de1c09..b7ed29f176dc 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041401
-        versionName "1.4.14-1"
+        versionCode 1001041402
+        versionName "1.4.14-2"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 897a300143b7..67c47dbb30cf 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.1</string>
+	<string>1.4.14.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 01316af0c986..d13112319dd6 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.1</string>
+	<string>1.4.14.2</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 2d58e7cc7f4d..1c2ae325575d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-1",
+  "version": "1.4.14-2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-1",
+      "version": "1.4.14-2",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index d4726491e36e..7281ab12cfa7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-1",
+  "version": "1.4.14-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From d88c17e767fbf7569dae84cfec71680bc4957e03 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 20 Dec 2023 11:50:26 +0700
Subject: [PATCH 217/244] remove validateCodeSend error when verify magic code

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

diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index b1e46ec40861..67828c766147 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -371,6 +371,7 @@ function validateSecondaryLogin(contactMethod, validateCode) {
                 [contactMethod]: {
                     errorFields: {
                         validateLogin: null,
+                        validateCodeSent: null,
                     },
                     pendingFields: {
                         validateLogin: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
@@ -416,6 +417,7 @@ function validateSecondaryLogin(contactMethod, validateCode) {
                 [contactMethod]: {
                     errorFields: {
                         validateLogin: ErrorUtils.getMicroSecondOnyxError('contacts.genericFailureMessages.validateSecondaryLogin'),
+                        validateCodeSent: null,
                     },
                     pendingFields: {
                         validateLogin: null,

From 253ccddc5ec18d0e764c8e3d8502ab9f9dfb1221 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Wed, 20 Dec 2023 09:23:08 +0100
Subject: [PATCH 218/244] fix: revert changes applied after another commit

---
 src/pages/SearchPage.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 039ef7c2a079..d779ab856fb5 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -77,18 +78,24 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
         });
     }, [reports, personalDetails, searchValue, betas]);
 
+    const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]);
+
     useEffect(() => {
         Timing.start(CONST.TIMING.SEARCH_RENDER);
         Performance.markStart(CONST.TIMING.SEARCH_RENDER);
     }, []);
 
+    useEffect(() => {
+        updateOptions();
+    }, [reports, personalDetails, betas, updateOptions]);
+
     useEffect(() => {
         if (!isMounted.current) {
             isMounted.current = true;
             return;
         }
 
-        updateOptions();
+        debouncedUpdateOptions();
         // Ignoring the rule intentionally, we want to run the code only when search Value changes to prevent additional runs.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [searchValue]);
@@ -177,6 +184,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
                         <OptionsSelector
                             sections={getSections()}
                             onSelectRow={selectReport}
+                            value={searchValue}
                             onChangeText={onChangeText}
                             headerMessage={headerMessage}
                             hideSectionHeaders

From 72da1620987b0a30fbed8a13c30e0dc7a0d13df3 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 20 Dec 2023 16:01:58 +0700
Subject: [PATCH 219/244] copy mention

---
 src/libs/ReportActionsUtils.ts                |  2 +-
 src/libs/ReportUtils.ts                       |  3 ---
 .../report/ContextMenu/ContextMenuActions.js  | 26 ++++++++++++-------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 9a3099ba6c02..4847eee2c8c6 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -735,7 +735,7 @@ function getMemberChangeMessageFragment(reportAction: OnyxEntry<ReportAction>):
         .map((messageElement) => {
             switch (messageElement.kind) {
                 case 'userMention':
-                    return `<mention-user accountID=${messageElement.accountID}></mention-user>`;
+                    return `<mention-user accountID=${messageElement.accountID}>${messageElement.content}</mention-user>`;
                 case 'roomReference':
                     return `<a href="${environmentURL}/r/${messageElement.roomID}" target="_blank">${messageElement.roomName}</a>`;
                 default:
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 86a746b02386..ae7095bdf826 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -348,9 +348,6 @@ type OnyxDataTaskAssigneeChat = {
     optimisticChatCreatedReportAction?: OptimisticCreatedReportAction;
 };
 
-let environmentURL: string;
-Environment.getEnvironmentURL().then((url: string) => (environmentURL = url));
-
 let currentUserEmail: string | undefined;
 let currentUserAccountID: number | undefined;
 let isAnonymousUser = false;
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index a5e946e6a78a..3682ef602a2b 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -35,6 +35,20 @@ function getActionText(reportAction) {
     return lodashGet(message, 'html', '');
 }
 
+/**
+ * Sets the HTML string to Clipboard.
+ * @param {String} content
+ */
+function setClipboardMessage(content) {
+    const parser = new ExpensiMark();
+    if (!Clipboard.canSetHtml()) {
+        Clipboard.setString(parser.htmlToMarkdown(content));
+    } else {
+        const plainText = parser.htmlToText(content);
+        Clipboard.setHtml(content, plainText);
+    }
+}
+
 const CONTEXT_MENU_TYPES = {
     LINK: 'LINK',
     REPORT_ACTION: 'REPORT_ACTION',
@@ -291,19 +305,13 @@ export default [
                     const taskPreviewMessage = TaskUtils.getTaskCreatedMessage(reportAction);
                     Clipboard.setString(taskPreviewMessage);
                 } else if (ReportActionsUtils.isMemberChangeAction(reportAction)) {
-                    const logMessage = ReportActionsUtils.getMemberChangeMessagePlainText(reportAction);
-                    Clipboard.setString(logMessage);
+                    const logMessage = ReportActionsUtils.getMemberChangeMessageFragment(reportAction).html;
+                    setClipboardMessage(logMessage);
                 } else if (ReportActionsUtils.isSubmittedExpenseAction(reportAction)) {
                     const submittedMessage = _.reduce(reportAction.message, (acc, curr) => `${acc}${curr.text}`, '');
                     Clipboard.setString(submittedMessage);
                 } else if (content) {
-                    const parser = new ExpensiMark();
-                    if (!Clipboard.canSetHtml()) {
-                        Clipboard.setString(parser.htmlToMarkdown(content));
-                    } else {
-                        const plainText = parser.htmlToText(content);
-                        Clipboard.setHtml(content, plainText);
-                    }
+                    setClipboardMessage(content);
                 }
             }
 

From 51f9bb02e8654fe59f18c04587ca85b8c5bcda01 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 20 Dec 2023 16:02:38 +0700
Subject: [PATCH 220/244] remove redundant imports

---
 src/libs/ReportUtils.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index ae7095bdf826..8ac32675bb4e 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -25,7 +25,6 @@ import DeepValueOf from '@src/types/utils/DeepValueOf';
 import {EmptyObject, isEmptyObject, isNotEmptyObject} from '@src/types/utils/EmptyObject';
 import * as CurrencyUtils from './CurrencyUtils';
 import DateUtils from './DateUtils';
-import * as Environment from './Environment/Environment';
 import isReportMessageAttachment from './isReportMessageAttachment';
 import * as LocalePhoneNumber from './LocalePhoneNumber';
 import * as Localize from './Localize';

From 6ccbcf40afce29ea28a97fb87b782f4c4a7fe4ee Mon Sep 17 00:00:00 2001
From: Jules Rosser <jules@expensify.com>
Date: Wed, 20 Dec 2023 09:24:53 +0000
Subject: [PATCH 221/244] replace roundIcon with adaptive icon

---
 android/app/src/main/AndroidManifest.xml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 74e91caa91d5..84364f2ef7ff 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -18,7 +18,6 @@
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:resizeableActivity="false"
-        android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="false"
         android:theme="@style/AppTheme"
         tools:replace="android:supportsRtl">

From 3e6c72d6eae0d5bcc031106eb944e1ae976a57dd Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Wed, 20 Dec 2023 10:37:06 +0100
Subject: [PATCH 222/244] add focus effect

---
 src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
index 8dda0ea0025d..84ca74c2842f 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusClearAfterPage.js
@@ -166,6 +166,7 @@ function StatusClearAfterPage({currentUserPersonalDetails, customStatus}) {
                     key={`${index}+${item.value}`}
                     onSelectRow={() => updateMode(item)}
                     showTooltip={false}
+                    isFocused={item.isSelected}
                 />
             )),
         [statusType, updateMode],

From d5b1cbed1dff65f8cad941e7f232fc9618f24af7 Mon Sep 17 00:00:00 2001
From: Jules Rosser <jules@expensify.com>
Date: Wed, 20 Dec 2023 10:33:10 +0000
Subject: [PATCH 223/244] reduce Android themed icon padding to match existing

---
 .../res/drawable/ic_launcher_monochrome.png   | Bin 1309 -> 2193 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/android/app/src/main/res/drawable/ic_launcher_monochrome.png b/android/app/src/main/res/drawable/ic_launcher_monochrome.png
index 4eea447cd3cbd8e4724b325e93ee39c4dbdfa147..b1a286b6f8dd2be8cc1a884e9768b3322554812c 100644
GIT binary patch
literal 2193
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

delta 1296
zcmV+r1@HQi5uFM)iBL{Q4GJ0x0000DNk~Le0001N0001N2nGNE0FP!@%>V!Z32;bR
za{vGf6951U69E94oEVWdAAbb0Nkl<ZcmeI*?|IWY6bA73{u!VfT-^yM6Cfs_Oi(ic
zWrAh{$^<DB029PaK>5h0m<h@TU|}0d>f_4xIgV_<zvnqmK}pltCz54JjsYSfA|fIp
zA|fIpA|fIpq9Ojme4Uoz%lNMhSN|XNzwau__*TbF8DHz4ImpyW8GjdL?8>+;<GVtH
z*UE4|$u!X2Bz-rICV4bKNYo|tYEqxr*MHlAq8uwxZHc=8i9D*Eq_Ly#hQ{l8&@Z9+
zdyW1(@>3aCsE#|Q_3L!~jqsea`ge8%{@!cQ&*Mbc@v%EC?C8);onSnND%pLKx5J8g
z#2u@`b2hN;1h_J;5r3C7jStK0oFi`Mgyw6?9pvzE;#QZiOT;xj4#(rr-c(*;WnyYp
zN?qv;RpR!jn&nmTc)0s~3QB@Q_c_rX99c+8SF%F4-eJBxs^;<x3(<8_JolP)xNVo1
zIgjNg%cFg}JPiE{TicGuo}-#vjNxFfndFS+gz~V>k9)pW5`SJou3a1SvqSvw(a_kT
z9}m6lJ30rsqwxv-rI@g;_Z5cIOh!chhK+N`O~!L9$19<{nJJ$QsdjBKOsX|3xWdG>
zOj`zdr#K9ga>7DVq*({`T4vECo(tvIi0>87N$3r}6&`zr#5w5Kt{~+a7M#LnyYJCH
z5A#BK4*S~m5r0)J9%{^aQ?oGDw>;J?OGuJb6EchwQ^U46t_$ebTys{<!W<HIf(d$y
znw<_Wl!xY`!16U~_YXBIwp3^)OnOrvu^!U4CYdlNl;>EF8=>4miDtqc3FQUW!#rV{
zqy?cG2i%xW$B@wOs7M`;J(OtHFex#!n-?0P@0?n1)_=#a0_)S3Fb5@8(<@|z37Z)v
zY-ThQR<x9@@k$TZQdU5T^{T0pI;Q9;7U+MHu00B4-c#00SU72PE#(gK38kjIj2AdA
zX$VR!VVX_iSD}1O7dS{Y>@$>DAH#w*CCm%u1(aweEEmcjVLhG*<x?CI29Z_|jqNSY
zVFJ@Zet&Ojw9mt&Pf~{E^FnzJMcUo^4`_emVY!#}LKKH_AB+OycJ8@Q{uT+7rWeLG
zi&oPsT8m{I?AEjVLAyx|=Nq~3nEEQ%gj@>cIh1ECEXEQ)2<74Oqa_YiImk_M(#>I`
zYpwYP!=&6KZecvjJcSK(+w@cu<~m+)gBj_nWq(6<OsWanL#|y82CU}8Lg(X+@R-Lk
zIv^S3q=aoRV8HrYwWUv5UdB_zYo=+e6+NDNjrMb|qKyABQy%S2#*pirQzKn@=`nL{
z8@9pxIov-^Cwo~@AE7C`#=<tL=E``7s>8Cu!c27>B1*?UNQbW@)WQO3$WRTb`7*v>
zU4P5YI~{&2n%RkGB!~Ma>!E|OrsWQzGsvS4TTGj{hrUDqJ*acsajL{Q#N9$<2YT?k
zfDd<A2A$*$xpUHz=k$8np#NZP7%d6SS7=gWZ{?BIztiV#6iYmRRN-NBvz%Ln*YhAz
zXm&IbH#VAEh)@KFYG)lIaZRE)Dl<@q=}{&y!|{-bQsSVSyj$qr-f9xo6PT7fs-B-i
zwSK=DTy_V~E9##&_<c*@CWwfLh=_=Yh=_=Yh=_=YR^kWld|}5RFIyY{0000<MNUMn
GLSTZjBxWK2


From 3ac5af2730ea9b4392919e505704c22a3468d97d Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Wed, 20 Dec 2023 12:34:30 +0200
Subject: [PATCH 224/244] Desktop - Chat - Infinite loading displayed on
 selected chat when navigate to RHP with deeplink

---
 src/libs/actions/Report.ts                           |  5 +++++
 .../shouldSkipDeepLinkNavigation/index.desktop.ts    | 12 ++++++++++++
 src/libs/shouldSkipDeepLinkNavigation/index.ts       |  5 +++++
 3 files changed, 22 insertions(+)
 create mode 100644 src/libs/shouldSkipDeepLinkNavigation/index.desktop.ts
 create mode 100644 src/libs/shouldSkipDeepLinkNavigation/index.ts

diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index 135e616f7691..0ea325cacf00 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -24,6 +24,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as Pusher from '@libs/Pusher/pusher';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import shouldSkipDeepLinkNavigation from '@libs/shouldSkipDeepLinkNavigation';
 import * as UserUtils from '@libs/UserUtils';
 import Visibility from '@libs/Visibility';
 import CONFIG from '@src/CONFIG';
@@ -2032,6 +2033,10 @@ function openReportFromDeepLink(url: string, isAuthenticated: boolean) {
                     return;
                 }
 
+                if (shouldSkipDeepLinkNavigation(route)) {
+                    return;
+                }
+
                 Navigation.navigate(route as Route, CONST.NAVIGATION.ACTION_TYPE.PUSH);
             });
         });
diff --git a/src/libs/shouldSkipDeepLinkNavigation/index.desktop.ts b/src/libs/shouldSkipDeepLinkNavigation/index.desktop.ts
new file mode 100644
index 000000000000..0a2d7f533e74
--- /dev/null
+++ b/src/libs/shouldSkipDeepLinkNavigation/index.desktop.ts
@@ -0,0 +1,12 @@
+import ROUTES from '@src/ROUTES';
+
+export default function shouldSkipDeepLinkNavigation(route: string) {
+    // When deep-linking to desktop app with `transition` route we don't want to call navigate
+    // on the route because it will display an infinite loading indicator.
+    // See issue: https://github.com/Expensify/App/issues/33149
+    if (route.includes(ROUTES.TRANSITION_BETWEEN_APPS)) {
+        return true;
+    }
+
+    return false;
+}
diff --git a/src/libs/shouldSkipDeepLinkNavigation/index.ts b/src/libs/shouldSkipDeepLinkNavigation/index.ts
new file mode 100644
index 000000000000..8a2d8035507f
--- /dev/null
+++ b/src/libs/shouldSkipDeepLinkNavigation/index.ts
@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function shouldSkipDeepLinkNavigation(route: string) {
+    // no-op for all other platforms
+    return false;
+}

From 267396564c53f29a59e67cbde7410d18c9e88686 Mon Sep 17 00:00:00 2001
From: Jules Rosser <jules@expensify.com>
Date: Wed, 20 Dec 2023 10:42:27 +0000
Subject: [PATCH 225/244] clean up unused launcher icons

---
 .../res/mipmap-anydpi-v26/ic_launcher_round.xml |   5 -----
 .../res/mipmap-hdpi/ic_launcher_foreground.png  | Bin 4108 -> 0 bytes
 .../adhoc/res/mipmap-hdpi/ic_launcher_round.png | Bin 4471 -> 0 bytes
 .../res/mipmap-mdpi/ic_launcher_foreground.png  | Bin 2707 -> 0 bytes
 .../adhoc/res/mipmap-mdpi/ic_launcher_round.png | Bin 2847 -> 0 bytes
 .../res/mipmap-xhdpi/ic_launcher_foreground.png | Bin 5477 -> 0 bytes
 .../res/mipmap-xhdpi/ic_launcher_round.png      | Bin 6370 -> 0 bytes
 .../mipmap-xxhdpi/ic_launcher_foreground.png    | Bin 8437 -> 0 bytes
 .../res/mipmap-xxhdpi/ic_launcher_round.png     | Bin 10060 -> 0 bytes
 .../mipmap-xxxhdpi/ic_launcher_foreground.png   | Bin 11518 -> 0 bytes
 .../res/mipmap-xxxhdpi/ic_launcher_round.png    | Bin 14383 -> 0 bytes
 .../adhoc/res/values/ic_launcher_background.xml |   4 ----
 .../res/mipmap-anydpi-v26/ic_launcher_round.xml |   5 -----
 .../res/mipmap-hdpi/ic_launcher_round.png       | Bin 4470 -> 0 bytes
 .../res/mipmap-mdpi/ic_launcher_round.png       | Bin 2851 -> 0 bytes
 .../res/mipmap-xhdpi/ic_launcher_round.png      | Bin 6331 -> 0 bytes
 .../res/mipmap-xxhdpi/ic_launcher_round.png     | Bin 9945 -> 0 bytes
 .../res/mipmap-xxxhdpi/ic_launcher_round.png    | Bin 14143 -> 0 bytes
 .../res/values/ic_launcher_background.xml       |   4 ----
 .../res/mipmap-anydpi-v26/ic_launcher_round.xml |   5 -----
 .../main/res/mipmap-hdpi/ic_launcher_round.png  | Bin 4142 -> 0 bytes
 .../main/res/mipmap-mdpi/ic_launcher_round.png  | Bin 2716 -> 0 bytes
 .../main/res/mipmap-xhdpi/ic_launcher_round.png | Bin 6010 -> 0 bytes
 .../res/mipmap-xxhdpi/ic_launcher_round.png     | Bin 9387 -> 0 bytes
 .../res/mipmap-xxxhdpi/ic_launcher_round.png    | Bin 13361 -> 0 bytes
 25 files changed, 23 deletions(-)
 delete mode 100644 android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher_round.xml
 delete mode 100644 android/app/src/adhoc/res/mipmap-hdpi/ic_launcher_foreground.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-hdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-mdpi/ic_launcher_foreground.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-mdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-xhdpi/ic_launcher_foreground.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-xhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-xxhdpi/ic_launcher_foreground.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-xxhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-xxxhdpi/ic_launcher_foreground.png
 delete mode 100644 android/app/src/adhoc/res/mipmap-xxxhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/adhoc/res/values/ic_launcher_background.xml
 delete mode 100644 android/app/src/development/res/mipmap-anydpi-v26/ic_launcher_round.xml
 delete mode 100644 android/app/src/development/res/mipmap-hdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/development/res/mipmap-mdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/development/res/mipmap-xhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/development/res/mipmap-xxhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/development/res/mipmap-xxxhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/development/res/values/ic_launcher_background.xml
 delete mode 100644 android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
 delete mode 100644 android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
 delete mode 100644 android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png

diff --git a/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher_round.xml b/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher_round.xml
deleted file mode 100644
index 7353dbd1fd82..000000000000
--- a/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-</adaptive-icon>
\ No newline at end of file
diff --git a/android/app/src/adhoc/res/mipmap-hdpi/ic_launcher_foreground.png b/android/app/src/adhoc/res/mipmap-hdpi/ic_launcher_foreground.png
deleted file mode 100644
index f0cf22860e1602fa7a240eb84b43f69748ff8c42..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4108
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

diff --git a/android/app/src/adhoc/res/mipmap-hdpi/ic_launcher_round.png b/android/app/src/adhoc/res/mipmap-hdpi/ic_launcher_round.png
deleted file mode 100644
index 56e3594de9204dcdc1ef3296ac6d1ee53648a350..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4471
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
JPDHLkV1jPo#GU{E

diff --git a/android/app/src/adhoc/res/mipmap-mdpi/ic_launcher_foreground.png b/android/app/src/adhoc/res/mipmap-mdpi/ic_launcher_foreground.png
deleted file mode 100644
index 8070c42691fec85ecbc047e579680e431bf2e193..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2707
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
JRO^7u|1T~B3LyXh

diff --git a/android/app/src/adhoc/res/mipmap-mdpi/ic_launcher_round.png b/android/app/src/adhoc/res/mipmap-mdpi/ic_launcher_round.png
deleted file mode 100644
index 5bceb63203acb4bcaa84264d5bc7ac78cdf77bce..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2847
zcmV+)3*hvLP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm000W+Nkl<ZcwWU?
zX;f9$6+ZXgM@_74lhv*^ro$rQ0L~K%(L_<>z+e=`2|)?UBt}FY5gt}FX|2ODRdK2@
z8WYFX*_deJKqP{S!eh`VPHEIcSEklK$x_+f`<y$yckg3RV$WLNdYAjo+56k)?7h!E
z=fT*cHeeFl5u>ouBtQOHUo-cmvH!OQ`7%3}@9=)jTXlX5c0RWybLTzBLC^Hgu8|Cq
z_1Kyn@e4U^mFm0%r7~{~ejZmUa%+@|yxaKqcO3Lg@8~<xCxOOz$apM<(9&xSXH=<l
z#UTzMsk;bJDqIZ*A46kZam=0db6Xuv)-*p?pXJIqDUPb#iyovaUA2e@4MeTk7?MRY
z^_bwR(Nyta3QWK1Ila*xN_65x#_hVtKfPzTKG=<Q=arBSJKYc0OakO8SB6sUx^F1Y
z70(*Z&IYAu7RdY4K;AeB<VB-FS`ZD=!cicvo&fUtcu)>b1Le~!(bqhdWNC(=4%zL>
zu;b9UW*Vqe=C0CbUCf%{0wqpPP)ZF0)~_S5&aHf-YXGo8oq1n*!z55nWt&%|mdn=u
zF3(wG$E9J-lnu~jHgoct|7r?wCgp;0z=m}L)}xJ;Y<&oB%g4$q$AePr^mHvv&$*l}
zNI}FxgN-l+4=(L$JM!{@G?3z7K;o?pLf!DWPY_74eL$M`GRSLUL4GSvV0A1=t_c1e
z_2GTBaXs6Bl<*?RAEetGaXNb~(~M|PV5>P^cIVEpkT1*O{>?($83ekw25C$P$g3uR
za?&)DzCbItVjM{0LeY=_U5+&QMbCbuvnr2b4dmjiOfxs%P0hi6<*r^H0jrT;jxO_j
zpitTcl@IR9XPO75H_`fVGK-IuqIzKLbO32?l(i3^ygbr<-*F`Kc{4|AGyA<ew}cBY
z1r?upjXcfR*icYDoNiUxSe(GjwKoM_<u&Vf1dT&+)@h_BINI*mn(LJ3B%54^XB+ZQ
z);Gu?pE(4xk12yRA>^IOAY<xPj?EPBhy%G&Il9uZ8R=%OM$;@R&2R2-;|@y$wLFg*
zLVBg2?lyepy~(3+r6{X$pfTPC6lQ`nGFVJfa(_b)-zW0GQS7|LmdF0mgEMccMar4%
zIDPiD8NoD1nSvYeQWsFn*+K(uU{Z9iMuEmy<X|jGQ9bqSL>Wx~j#dHVP&t&IXy)vh
zHp_Aj35!*~!%d0}?WU&501>d>N(skj8d<4<pfMIX2zl99kszpFcz00FsIj4OI+6J?
z(_?|SYa2wNvki8-%R8wnAg_-T8x9JSVtV_|Hce;%5(H^fFVU}8Tae#P5bs4=C4=s=
zjZ-^t&YZiNmN2a)s_rAo1gux2lrSL(Hy+B}7G-rAfV(Wki!bmv@Rp;3>L^}zpd4x1
zK;)968BxpA`M%^dZUE=5u7GmNxlXr~K2ZT1*jbPX4fH+xJ`AAUm)APJ;I;{34H(R<
zx4Kyl?P}=OxE)U4$Y^&ql@}5&%?XcAAEq0#K<?wM#0)zF-j28SYXqd>YB1wYuYB~X
zc&~9go^cX6n^Nh@m=@?VHRew8)<m5Q)iK@*JYZ)41|#=#Z`9#BW=OAv8?ulKf3NP$
za?z|SEVb{`h5<WLevf(iE4@<%1#r9}pr8)_C)gOk`nCr)ppyksa+r0z4dlN?8~U}?
z)JlsI=WUih!rw4pTT%el-{0z;NC2fXO@KKc+riENAD|-6GTsKHQ`b+0BE8oPIPLt7
zEg2tZ7_eb-8;b!rNEfhnqD6rRehLFnr><Yyf6NBVA0<*LZ_8r-q?FCRt#={;Z<}1`
zuOlrAJYZ))|BfJ0D)mPCAnSM=kWO8{w+j_#-C@pQ0fqq>5OS$k5O1Gi%v#nEivkbW
z81Tqh2zBbRkPCmW1@R{{udtDwe`^@PSTnS$Nbf|SM>F)JBBeBM1s?b*48Ssi%R&ys
zg}>LheUx5;oSO^kq9}4;Zr$L~iK<XKY>*J#RA_VYR-(hsfJfQLX!6vJj5z3LW{umP
z<oA%XpWrS^2}$0al&*H73#wW?P=l255*Aji_=d*gz-^<<hXLH*ZAyrGO9{8?|Fnss
zZsI^(%)I1vv9pM?M=8M;4DW_}!GFw_^36=!(j$9_jmTS}4+H8$ow6d0m6vx+)xHzO
zT(R@NEVF+I=bYc)VJ@dzU?q4|odr?4(keu&l_8e6w7J->LQ@$)vyZ1St(@lP2AX{{
zrvqt)$n{s8vCdtM1NoiF(|IRtx$s%sLa1lquudS;?V7h@Je)8xv=L~vdp`8vz8VH^
z`G<jZ1u!T)1;TpAf`8uu;I~OFAu4j|SXoOIvb=l@xsSv1Sg9S)IzIbHxj5^Ruvk4(
zmd+NjKnA?f9?z^vRs$Mwr2O?^7tC~RfrI1Ez$eia@af1(9Yrr!Kv6_FoCrS$??;^g
z=lq@U^r?CJky1V~qlN`O<L|*)Z^EJ{<PGt;JVTgPfuB`p4hDHi3^&MPKm+l_xjB%v
zU^kqNxX>V+j;e;)Z|tpYUN%?E{<6_?iKF#UPtCBXrE+veDOYN~tMmrtW`bQz_&~3{
z%i-AQatqPAP!d^nFX-?RkoTvaLvDZI41HcR3d@=)*#k%5`QS&sZF}EBBjkOlAdLtH
zHn@vOuVjebErS>0R&9n-Bz1n;Rk*t723%cy1FkK-3IAUEC0t)|3qEsRhwIC4!PSK~
z;riciLB*uY_sb$LLfHB@e^k=@#Sk~P*4M?B)`SsH$*U*)g=YW?9!g<m0}93)2XD$2
z5#2$~AC4y__2A(H2?bl>Y~%&_eB~|pYS-6r^SwLpdBH8XbMPCuz5g4infC=;S#SgH
zeDEz?p7+Ir3#r#?i-(m%&y4hi#L3=uyc?ya7)DF<tg<y>Gr!89D-E*|bp3%bp=T!o
z85G<Wq@lQhy*db_dBZ_o8pA=)^e!}V5)_7?h4L{Mp?vH`s7|{I?unP6BCZB1Ce}dN
z=!;O5cp1)(`0T;?q-zh(jHrUOA)B@l7tX0cm%G$NJkU}-r)*E$r>+Fu*&FVJ!7Oh{
z#9cK6SV*A9iugi{uAN|E*jwmE=Pkaj;Y`E@?lz~wD`8{btp|`pE6&BI-}`D}Kr=*u
z@=p8~{;LWZ!2>(j_<@7A_Fc&!%^oH;J@p#K7WiGum<U*!_CC)rUgT@huzN(F+-6mu
z4K(wuIS0PuK1>q>$q0YPn`0JY#rgv$O>yCE2)SB`Q|z$xGt)n(@=}BYpXnX{t|S{;
zoc=Sk`FJse>{$UJy9#PUcdxh?x@RSR7C`X3i+^aBHDwX$<hmc4yw=E_I<TKHiis(q
z<COy`rF=CgL+OT4o$mR|W1SFv#gBX>gJhA+{V4mDkXX{ibvD{<d^HN5{1`HVZUTZF
zi=*euho)arO4VyWaxDSzV@O?~K3aboi!w--V^Q?$D7!t^LAn|ou#IUV2a`)Z!=7s1
z&GAN5uJW&>Lac?p=QF6)_+oWDLGS20>LY&9{9f6aTu3rV7MIzeJpZVTW=1G^67f4k
zJ2oUJ!m(iZ9A#7dHf3LG3DqoEete1P_G=D&mXBoAC<jtYs1Nm}F*ufP7D&dETxPy{
zY5Q23@jnw}4Bgoi5r0Gw`%Uv6EZDyv8xS~{gP!RfeJA=*Um7D$RhGi+aW)<wm??Ik
x--<ZVR)_xo;TJ0Cncn&FK6H|zF-_p-{{zCjPEbfz_|O0V002ovPDHLkV1oXnZ=V1F

diff --git a/android/app/src/adhoc/res/mipmap-xhdpi/ic_launcher_foreground.png b/android/app/src/adhoc/res/mipmap-xhdpi/ic_launcher_foreground.png
deleted file mode 100644
index 06f3ee842084eb7cf7f96a7f47c8693e1b6058f4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5477
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
TphZ0oi2(#x(^dVfY!mrEZkt<*

diff --git a/android/app/src/adhoc/res/mipmap-xhdpi/ic_launcher_round.png b/android/app/src/adhoc/res/mipmap-xhdpi/ic_launcher_round.png
deleted file mode 100644
index 1590298616fcd26e01881682d2a393c50ac0f742..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6370
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

diff --git a/android/app/src/adhoc/res/mipmap-xxhdpi/ic_launcher_foreground.png b/android/app/src/adhoc/res/mipmap-xxhdpi/ic_launcher_foreground.png
deleted file mode 100644
index 692e5d1fac3f5b2693874600408fefd065d63301..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 8437
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

diff --git a/android/app/src/adhoc/res/mipmap-xxhdpi/ic_launcher_round.png b/android/app/src/adhoc/res/mipmap-xxhdpi/ic_launcher_round.png
deleted file mode 100644
index 7a69e882941e038235f7203e2e024af6e8e1f944..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10060
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
Hn+5(48<P$x

diff --git a/android/app/src/adhoc/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/android/app/src/adhoc/res/mipmap-xxxhdpi/ic_launcher_foreground.png
deleted file mode 100644
index 5b1e8667481bd5d637ac052026ebe1215b362ea8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11518
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
ShiZ|tRrT%|YnN-eJpW(xJAKpu

diff --git a/android/app/src/adhoc/res/mipmap-xxxhdpi/ic_launcher_round.png b/android/app/src/adhoc/res/mipmap-xxxhdpi/ic_launcher_round.png
deleted file mode 100644
index d7d01c5f0c0a295cdcee4b6aca9e3eec5302094d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14383
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

diff --git a/android/app/src/adhoc/res/values/ic_launcher_background.xml b/android/app/src/adhoc/res/values/ic_launcher_background.xml
deleted file mode 100644
index f86b6cf6e2a0..000000000000
--- a/android/app/src/adhoc/res/values/ic_launcher_background.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <color name="ic_launcher_background">#03D47C</color>
-</resources>
\ No newline at end of file
diff --git a/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher_round.xml b/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher_round.xml
deleted file mode 100644
index 7353dbd1fd82..000000000000
--- a/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-</adaptive-icon>
\ No newline at end of file
diff --git a/android/app/src/development/res/mipmap-hdpi/ic_launcher_round.png b/android/app/src/development/res/mipmap-hdpi/ic_launcher_round.png
deleted file mode 100644
index 8807b5a298f43fe1a905b3a8c4c8225917e4bcef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4470
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
IM6N<$g1ZBtt^fc4

diff --git a/android/app/src/development/res/mipmap-mdpi/ic_launcher_round.png b/android/app/src/development/res/mipmap-mdpi/ic_launcher_round.png
deleted file mode 100644
index 4442d28de683bcc79fa92b2ded264cd17ced3b9e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2851
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
BWdHyG

diff --git a/android/app/src/development/res/mipmap-xhdpi/ic_launcher_round.png b/android/app/src/development/res/mipmap-xhdpi/ic_launcher_round.png
deleted file mode 100644
index 1cf62c5de53d9969e08d620c05aab00429d8fca0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6331
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

diff --git a/android/app/src/development/res/mipmap-xxhdpi/ic_launcher_round.png b/android/app/src/development/res/mipmap-xxhdpi/ic_launcher_round.png
deleted file mode 100644
index a241d41d34fe328a06a70b17b2032a721f3c19ae..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9945
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

diff --git a/android/app/src/development/res/mipmap-xxxhdpi/ic_launcher_round.png b/android/app/src/development/res/mipmap-xxxhdpi/ic_launcher_round.png
deleted file mode 100644
index 996266b64f6ee730afe2375e582d1975a44a1805..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14143
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
Z?w$Alzk|0)BO}-WP?A%Zt(7(p{vUi8=X(GE

diff --git a/android/app/src/development/res/values/ic_launcher_background.xml b/android/app/src/development/res/values/ic_launcher_background.xml
deleted file mode 100644
index f86b6cf6e2a0..000000000000
--- a/android/app/src/development/res/values/ic_launcher_background.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <color name="ic_launcher_background">#03D47C</color>
-</resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
deleted file mode 100644
index 7353dbd1fd82..000000000000
--- a/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_background"/>
-    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-</adaptive-icon>
\ No newline at end of file
diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
deleted file mode 100644
index 94269b994fe4ab002fb3f8ad13a21457075d7ca0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4142
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

diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
deleted file mode 100644
index 4b35b9b4d1bcf56e8bdd2473d567ffd428b08bef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2716
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
WZ11jYf^sDQ0000<MNUMnLSTa1fI`Ut

diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
deleted file mode 100644
index d1bc1f7ac4733332f52af56a5c1dfaf32e04bb08..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6010
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

diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
deleted file mode 100644
index f533b4e8d2300abcb84799d6f6516e7323a33b1a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9387
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

diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
deleted file mode 100644
index ee08d91ae4a78072c3c4029d2175ed2f1bdc847f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 13361
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
ZgRTGnzk$C=12fnFP*c)YtdX|}`yY}mU&H_a


From 5bc5f76310e543fcb92a0ff08b6569e5897ade3c Mon Sep 17 00:00:00 2001
From: Jules Rosser <jules@expensify.com>
Date: Wed, 20 Dec 2023 10:57:44 +0000
Subject: [PATCH 226/244] use original adaptive icons for dev and adhoc
 varients

---
 android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml      | 1 -
 .../app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml b/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml
index 1084c240820a..7353dbd1fd82 100644
--- a/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/adhoc/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -2,5 +2,4 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>
\ No newline at end of file
diff --git a/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml b/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml
index 1084c240820a..7353dbd1fd82 100644
--- a/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/android/app/src/development/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -2,5 +2,4 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@drawable/ic_launcher_foreground"/>
-    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>
\ No newline at end of file

From 7130c0addcd184831f6274ee3806d09766698609 Mon Sep 17 00:00:00 2001
From: Luthfi <luthfi.ufi14@gmail.com>
Date: Wed, 20 Dec 2023 18:30:21 +0700
Subject: [PATCH 227/244] Update .github/PULL_REQUEST_TEMPLATE.md

Co-authored-by: 0xmiroslav <97473779+0xmiroslav@users.noreply.github.com>
---
 .github/PULL_REQUEST_TEMPLATE.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index e516b8b3e0e1..19b62f0f93d8 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -115,8 +115,8 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
 - [ ] If the PR modifies the form input styles:
-    - [ ] All the inputs inside a form should be aligned with each other
-    - [ ] Add the Design label so the Design team can review your changes
+    - [ ] I verified that all the inputs inside a form are aligned with each other.
+    - [ ] I added `Design` label so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

From 5376ab570b40b4d27b53075ebb1626e88aaa5b76 Mon Sep 17 00:00:00 2001
From: Luthfi <luthfi.ufi14@gmail.com>
Date: Wed, 20 Dec 2023 18:32:28 +0700
Subject: [PATCH 228/244] update the reviewer checklist

---
 contributingGuides/REVIEWER_CHECKLIST.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contributingGuides/REVIEWER_CHECKLIST.md b/contributingGuides/REVIEWER_CHECKLIST.md
index 51908d696c1d..146c170a15cf 100644
--- a/contributingGuides/REVIEWER_CHECKLIST.md
+++ b/contributingGuides/REVIEWER_CHECKLIST.md
@@ -52,8 +52,8 @@
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
 - [ ] If the PR modifies the form input styles:
-    - [ ] All the inputs inside a form should be aligned with each other
-    - [ ] Add the Design label so the Design team can review your changes
+    - [ ] I verified that all the inputs inside a form are aligned with each other.
+    - [ ] I added `Design` label so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

From b9bf599a7dc51414b9e4d2f346ce5100f6053d97 Mon Sep 17 00:00:00 2001
From: Yauheni Pasiukevich <pasyukevich@live.com>
Date: Wed, 20 Dec 2023 13:10:32 +0100
Subject: [PATCH 229/244] fix import

---
 src/styles/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 00992043ee2d..7a5df1657c99 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1,4 +1,4 @@
-import {Animated, DimensionValue, PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, ViewStyle} from 'react-native';
+import {Animated, DimensionValue, ImageStyle, PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, ViewStyle} from 'react-native';
 import {EdgeInsets} from 'react-native-safe-area-context';
 import {ValueOf} from 'type-fest';
 import * as Browser from '@libs/Browser';

From e4048d63aebfb933e6a74a960b53d3b68a46ecdf Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Wed, 20 Dec 2023 14:50:15 +0100
Subject: [PATCH 230/244] Remove borderRadius from LHP

---
 src/styles/index.ts     | 20 ++++++++++----------
 src/styles/variables.ts |  2 --
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index aececf93beb9..fcc78779136d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -122,6 +122,13 @@ const headlineFont = {
     fontWeight: '500',
 } satisfies TextStyle;
 
+const modalNavigatorContainer = (isSmallScreenWidth: boolean) =>
+    ({
+        position: 'absolute',
+        width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+        height: '100%',
+    } satisfies ViewStyle);
+
 const webViewStyles = (theme: ThemeColors) =>
     ({
         // As of react-native-render-html v6, don't declare distinct styles for
@@ -1406,21 +1413,14 @@ const styles = (theme: ThemeColors) =>
 
         LHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
-                position: 'absolute',
+                ...modalNavigatorContainer(isSmallScreenWidth),
                 left: 0,
-                height: '100%',
-                borderTopRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
-                borderBottomRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
-                overflow: 'hidden',
             } satisfies ViewStyle),
 
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
             ({
-                width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
-                position: 'absolute',
+                ...modalNavigatorContainer(isSmallScreenWidth),
                 right: 0,
-                height: '100%',
             } satisfies ViewStyle),
 
         onlyEmojisText: {
@@ -1641,7 +1641,7 @@ const styles = (theme: ThemeColors) =>
                 ...positioning.pFixed,
                 // We need to stretch the overlay to cover the sidebar and the translate animation distance.
                 // The overlay must also cover borderRadius of the LHP component
-                left: isModalOnTheLeft ? -variables.lhpBorderRadius : -2 * variables.sideBarWidth,
+                left: isModalOnTheLeft ? 0 : -2 * variables.sideBarWidth,
                 top: 0,
                 bottom: 0,
                 right: isModalOnTheLeft ? -2 * variables.sideBarWidth : 0,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 4904a224327a..3bf83545bc4a 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -193,6 +193,4 @@ export default {
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
     cardNameWidth: 156,
-
-    lhpBorderRadius: 24,
 } as const;

From 6b1391624da2c59323eb6301e7e05a989208318c Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 20 Dec 2023 21:52:38 +0700
Subject: [PATCH 231/244] enable reply in thread for iou whisper action

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

diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index 3682ef602a2b..1f82e71ef5f1 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -148,7 +148,7 @@ export default [
             const isTaskAction = ReportActionsUtils.isTaskAction(reportAction);
             const isWhisperAction = ReportActionsUtils.isWhisperAction(reportAction);
             return (
-                !isWhisperAction &&
+                (!isWhisperAction || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU || isReportPreviewAction) &&
                 (isCommentAction || isReportPreviewAction || isIOUAction || isModifiedExpenseAction || isTaskAction) &&
                 !ReportUtils.isThreadFirstChat(reportAction, reportID)
             );

From 102154717acb6e3e7b9bba0c8e254c01c2da259c Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 20 Dec 2023 22:52:03 +0700
Subject: [PATCH 232/244] use isIOUAction variable

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

diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index 1f82e71ef5f1..2e51ef714562 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -148,7 +148,7 @@ export default [
             const isTaskAction = ReportActionsUtils.isTaskAction(reportAction);
             const isWhisperAction = ReportActionsUtils.isWhisperAction(reportAction);
             return (
-                (!isWhisperAction || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU || isReportPreviewAction) &&
+                (!isWhisperAction || isIOUAction || isReportPreviewAction) &&
                 (isCommentAction || isReportPreviewAction || isIOUAction || isModifiedExpenseAction || isTaskAction) &&
                 !ReportUtils.isThreadFirstChat(reportAction, reportID)
             );

From 808a1e11fe9fc08a9ee921fabb7975750680cd89 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Wed, 20 Dec 2023 17:29:38 +0100
Subject: [PATCH 233/244] Add optional chaining to topRouteName in linkTo

---
 src/libs/Navigation/linkTo.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts
index 6468670fce99..86558765a6e6 100644
--- a/src/libs/Navigation/linkTo.ts
+++ b/src/libs/Navigation/linkTo.ts
@@ -80,7 +80,7 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
 
     // If action type is different than NAVIGATE we can't change it to the PUSH safely
     if (action?.type === CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) {
-        const topRouteName = rootState.routes.at(-1)?.name;
+        const topRouteName = rootState?.routes?.at(-1)?.name;
         const isTargetNavigatorOnTop = topRouteName === action.payload.name;
 
         // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack

From 497ab50d809aeef21113944e65ed76b9f4f3ffd0 Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Wed, 20 Dec 2023 18:23:47 +0000
Subject: [PATCH 234/244] Update version to 1.4.14-3

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index b7ed29f176dc..91b29f6e982d 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041402
-        versionName "1.4.14-2"
+        versionCode 1001041403
+        versionName "1.4.14-3"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 67c47dbb30cf..d714e191df2a 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.2</string>
+	<string>1.4.14.3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index d13112319dd6..3fe19193d6b5 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.2</string>
+	<string>1.4.14.3</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 1c2ae325575d..d69d460c9184 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-2",
+  "version": "1.4.14-3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-2",
+      "version": "1.4.14-3",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 7281ab12cfa7..21c10be9d800 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-2",
+  "version": "1.4.14-3",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From 41ba4768680bd8c5fd633c5f39772b7d0db87f2f Mon Sep 17 00:00:00 2001
From: mkhutornyi <mkhutorniy@gmail.com>
Date: Wed, 20 Dec 2023 16:49:11 -0500
Subject: [PATCH 235/244] fix crash when trying to scroll pdf preview

---
 .../AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js   | 2 +-
 .../AttachmentView/AttachmentViewPdf/index.android.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
index 40887ddee697..de14f848c37e 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js
@@ -30,7 +30,7 @@ function BaseAttachmentViewPdf({
             onScaleChangedProp(scale);
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
-            if (isUsedInCarousel) {
+            if (isUsedInCarousel && attachmentCarouselPagerContext) {
                 const shouldPagerScroll = scale === 1;
 
                 attachmentCarouselPagerContext.onPinchGestureChange(!shouldPagerScroll);
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
index 308d3cf2c0ba..6d510d234512 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
@@ -18,7 +18,7 @@ function AttachmentViewPdf(props) {
     const Pan = Gesture.Pan()
         .manualActivation(true)
         .onTouchesMove((evt) => {
-            if (offsetX.value !== 0 && offsetY.value !== 0) {
+            if (offsetX.value !== 0 && offsetY.value !== 0 && attachmentCarouselPagerContext) {
                 // if the value of X is greater than Y and the pdf is not zoomed in,
                 // enable  the pager scroll so that the user
                 // can swipe to the next attachment otherwise disable it.

From 4b9889fccca2f9721f48c2f80908d48172984d56 Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Wed, 20 Dec 2023 21:52:20 +0000
Subject: [PATCH 236/244] Update version to 1.4.14-4

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 91b29f6e982d..ded407d0211f 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041403
-        versionName "1.4.14-3"
+        versionCode 1001041404
+        versionName "1.4.14-4"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index d714e191df2a..e825d2a3bb9f 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.3</string>
+	<string>1.4.14.4</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 3fe19193d6b5..f3bb098a344b 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.3</string>
+	<string>1.4.14.4</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index d69d460c9184..e22c97183bd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-3",
+  "version": "1.4.14-4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-3",
+      "version": "1.4.14-4",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 21c10be9d800..5b98b778ca40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-3",
+  "version": "1.4.14-4",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From f4ae14452cdb83c65ceb9195f7a93ba0ccab3153 Mon Sep 17 00:00:00 2001
From: Andrew Rosiclair <arosiclair@expensify.com>
Date: Wed, 20 Dec 2023 17:30:59 -0500
Subject: [PATCH 237/244] disable clearReportNotifications on android

---
 .../PushNotification/index.native.ts          | 36 ----------------
 .../Notification/PushNotification/index.ts    |  1 -
 .../Notification/PushNotification/types.ts    |  2 -
 .../clearReportNotifications/index.android.ts |  9 ++++
 .../clearReportNotifications/index.ios.ts     | 41 +++++++++++++++++++
 .../clearReportNotifications/index.native.ts  |  5 ---
 6 files changed, 50 insertions(+), 44 deletions(-)
 create mode 100644 src/libs/Notification/clearReportNotifications/index.android.ts
 create mode 100644 src/libs/Notification/clearReportNotifications/index.ios.ts
 delete mode 100644 src/libs/Notification/clearReportNotifications/index.native.ts

diff --git a/src/libs/Notification/PushNotification/index.native.ts b/src/libs/Notification/PushNotification/index.native.ts
index d48d56f71993..7b2571eea368 100644
--- a/src/libs/Notification/PushNotification/index.native.ts
+++ b/src/libs/Notification/PushNotification/index.native.ts
@@ -2,7 +2,6 @@ import Airship, {EventType, PushPayload} from '@ua/react-native-airship';
 import Onyx from 'react-native-onyx';
 import Log from '@libs/Log';
 import * as PushNotificationActions from '@userActions/PushNotification';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ForegroundNotifications from './ForegroundNotifications';
 import NotificationType, {NotificationData} from './NotificationType';
@@ -190,40 +189,6 @@ const clearNotifications: ClearNotifications = () => {
     Airship.push.clearNotifications();
 };
 
-const parseNotificationAndReportIDs = (pushPayload: PushPayload) => {
-    let payload = pushPayload.extras.payload;
-    if (typeof payload === 'string') {
-        payload = JSON.parse(payload);
-    }
-    const data = payload as NotificationData;
-    return {
-        notificationID: pushPayload.notificationId,
-        reportID: String(data.reportID),
-    };
-};
-
-const clearReportNotifications = (reportID: string) => {
-    Log.info('[PushNotification] clearing report notifications', false, {reportID});
-
-    Airship.push
-        .getActiveNotifications()
-        .then((pushPayloads) => {
-            const reportNotificationIDs = pushPayloads.reduce<string[]>((notificationIDs, pushPayload) => {
-                const notification = parseNotificationAndReportIDs(pushPayload);
-                if (notification.notificationID && notification.reportID === reportID) {
-                    notificationIDs.push(notification.notificationID);
-                }
-                return notificationIDs;
-            }, []);
-
-            Log.info(`[PushNotification] found ${reportNotificationIDs.length} notifications to clear`, false, {reportID});
-            reportNotificationIDs.forEach((notificationID) => Airship.push.clearNotification(notificationID));
-        })
-        .catch((error) => {
-            Log.alert(`${CONST.ERROR.ENSURE_BUGBOT} [PushNotification] BrowserNotifications.clearReportNotifications threw an error. This should never happen.`, {reportID, error});
-        });
-};
-
 const PushNotification: PushNotificationType = {
     init,
     register,
@@ -232,7 +197,6 @@ const PushNotification: PushNotificationType = {
     onSelected,
     TYPE: NotificationType,
     clearNotifications,
-    clearReportNotifications,
 };
 
 export default PushNotification;
diff --git a/src/libs/Notification/PushNotification/index.ts b/src/libs/Notification/PushNotification/index.ts
index 925574b8976f..1e5499d1fe7d 100644
--- a/src/libs/Notification/PushNotification/index.ts
+++ b/src/libs/Notification/PushNotification/index.ts
@@ -10,7 +10,6 @@ const PushNotification: PushNotificationType = {
     onSelected: () => {},
     TYPE: NotificationType,
     clearNotifications: () => {},
-    clearReportNotifications: () => {},
 };
 
 export default PushNotification;
diff --git a/src/libs/Notification/PushNotification/types.ts b/src/libs/Notification/PushNotification/types.ts
index e39f21e0cb92..f72ee1af887a 100644
--- a/src/libs/Notification/PushNotification/types.ts
+++ b/src/libs/Notification/PushNotification/types.ts
@@ -1,5 +1,4 @@
 import {ValueOf} from 'type-fest';
-import ClearReportNotifications from '@libs/Notification/clearReportNotifications/types';
 import NotificationType, {NotificationDataMap} from './NotificationType';
 
 type Init = () => void;
@@ -17,7 +16,6 @@ type PushNotification = {
     onSelected: OnSelected;
     TYPE: typeof NotificationType;
     clearNotifications: ClearNotifications;
-    clearReportNotifications: ClearReportNotifications;
 };
 
 export default PushNotification;
diff --git a/src/libs/Notification/clearReportNotifications/index.android.ts b/src/libs/Notification/clearReportNotifications/index.android.ts
new file mode 100644
index 000000000000..8f0e8cc2ea69
--- /dev/null
+++ b/src/libs/Notification/clearReportNotifications/index.android.ts
@@ -0,0 +1,9 @@
+import ClearReportNotifications from './types';
+
+/**
+ * This is a temporary fix for issues with our Notification Cache not being cleared in Android.
+ * More info here: https://github.com/Expensify/App/issues/33367#issuecomment-1865196381
+ */
+const clearReportNotifications: ClearReportNotifications = () => {};
+
+export default clearReportNotifications;
diff --git a/src/libs/Notification/clearReportNotifications/index.ios.ts b/src/libs/Notification/clearReportNotifications/index.ios.ts
new file mode 100644
index 000000000000..74b2c7faa50f
--- /dev/null
+++ b/src/libs/Notification/clearReportNotifications/index.ios.ts
@@ -0,0 +1,41 @@
+import Airship, {PushPayload} from '@ua/react-native-airship';
+import Log from '@libs/Log';
+import {NotificationData} from '@libs/Notification/PushNotification/NotificationType';
+import CONST from '@src/CONST';
+import ClearReportNotifications from './types';
+
+const parseNotificationAndReportIDs = (pushPayload: PushPayload) => {
+    let payload = pushPayload.extras.payload;
+    if (typeof payload === 'string') {
+        payload = JSON.parse(payload);
+    }
+    const data = payload as NotificationData;
+    return {
+        notificationID: pushPayload.notificationId,
+        reportID: String(data.reportID),
+    };
+};
+
+const clearReportNotifications: ClearReportNotifications = (reportID: string) => {
+    Log.info('[PushNotification] clearing report notifications', false, {reportID});
+
+    Airship.push
+        .getActiveNotifications()
+        .then((pushPayloads) => {
+            const reportNotificationIDs = pushPayloads.reduce<string[]>((notificationIDs, pushPayload) => {
+                const notification = parseNotificationAndReportIDs(pushPayload);
+                if (notification.notificationID && notification.reportID === reportID) {
+                    notificationIDs.push(notification.notificationID);
+                }
+                return notificationIDs;
+            }, []);
+
+            Log.info(`[PushNotification] found ${reportNotificationIDs.length} notifications to clear`, false, {reportID});
+            reportNotificationIDs.forEach((notificationID) => Airship.push.clearNotification(notificationID));
+        })
+        .catch((error) => {
+            Log.alert(`${CONST.ERROR.ENSURE_BUGBOT} [PushNotification] BrowserNotifications.clearReportNotifications threw an error. This should never happen.`, {reportID, error});
+        });
+};
+
+export default clearReportNotifications;
diff --git a/src/libs/Notification/clearReportNotifications/index.native.ts b/src/libs/Notification/clearReportNotifications/index.native.ts
deleted file mode 100644
index 5082fe492564..000000000000
--- a/src/libs/Notification/clearReportNotifications/index.native.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import PushNotification from '@libs/Notification/PushNotification';
-import ClearReportNotifications from './types';
-
-const clearReportNotifications: ClearReportNotifications = PushNotification.clearReportNotifications;
-export default clearReportNotifications;

From 6797636de63a0d8c0aeb022d36f5db58ffc42057 Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Thu, 21 Dec 2023 01:46:32 +0000
Subject: [PATCH 238/244] Update version to 1.4.14-5

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index ded407d0211f..922b047098d0 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041404
-        versionName "1.4.14-4"
+        versionCode 1001041405
+        versionName "1.4.14-5"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index e825d2a3bb9f..303d2f662fc9 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.4</string>
+	<string>1.4.14.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index f3bb098a344b..47f6e27cef9a 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.4</string>
+	<string>1.4.14.5</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index e22c97183bd7..cca83c250cc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-4",
+  "version": "1.4.14-5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-4",
+      "version": "1.4.14-5",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 5b98b778ca40..c4808f69e0a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-4",
+  "version": "1.4.14-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From 58ae7fe8fabde71059d0599a48a35bff062f246c Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Thu, 21 Dec 2023 03:09:51 +0000
Subject: [PATCH 239/244] Update version to 1.4.14-6

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 922b047098d0..981800af5b9f 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041405
-        versionName "1.4.14-5"
+        versionCode 1001041406
+        versionName "1.4.14-6"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 303d2f662fc9..330868b262c4 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.5</string>
+	<string>1.4.14.6</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 47f6e27cef9a..8af46472572d 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.5</string>
+	<string>1.4.14.6</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index cca83c250cc5..39cfdfa82854 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-5",
+  "version": "1.4.14-6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-5",
+      "version": "1.4.14-6",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index c4808f69e0a6..3e63b96af229 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-5",
+  "version": "1.4.14-6",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From 2f7c2b2caa32002455165965d140230a38e3f18c Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Thu, 21 Dec 2023 05:04:41 +0000
Subject: [PATCH 240/244] Update version to 1.4.15-0

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 4 ++--
 ios/NewExpensifyTests/Info.plist | 4 ++--
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 981800af5b9f..98133994a3e3 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041406
-        versionName "1.4.14-6"
+        versionCode 1001041500
+        versionName "1.4.15-0"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 330868b262c4..ce90808c0c44 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.14</string>
+	<string>1.4.15</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.6</string>
+	<string>1.4.15.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 8af46472572d..6f30fbec8f41 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.14</string>
+	<string>1.4.15</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.6</string>
+	<string>1.4.15.0</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 39cfdfa82854..10f23f7ca4e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-6",
+  "version": "1.4.15-0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.14-6",
+      "version": "1.4.15-0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 3e63b96af229..d430203bedc9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-6",
+  "version": "1.4.15-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From 563df39fcaabe4e77ed69fe540f6bc14af1c0f5c Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 21 Dec 2023 09:40:25 +0100
Subject: [PATCH 241/244] fix: initialize state with empty objects

---
 src/pages/SearchPage.js | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index d779ab856fb5..a2b955755121 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -45,18 +45,10 @@ const defaultProps = {
 
 function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
     const [searchValue, setSearchValue] = useState('');
-    const [searchOptions, setSearchOptions] = useState(() => {
-        const {
-            recentReports: localRecentReports,
-            personalDetails: localPersonalDetails,
-            userToInvite: localUserToInvite,
-        } = OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas);
-
-        return {
-            recentReports: localRecentReports,
-            personalDetails: localPersonalDetails,
-            userToInvite: localUserToInvite,
-        };
+    const [searchOptions, setSearchOptions] = useState({
+        recentReports: {},
+        personalDetails: {},
+        userToInvite: {},
     });
 
     const {isOffline} = useNetwork();
@@ -179,7 +171,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
-                    <HeaderWithBackButton title={translate('common.search')} />
+                    <HeaderWithBackButton title={translate('common.search')}/>
                     <View style={[themeStyles.flex1, themeStyles.w100, themeStyles.pRelative]}>
                         <OptionsSelector
                             sections={getSections()}

From 1085833b707caaa9cf9055566b26273a1bde53a9 Mon Sep 17 00:00:00 2001
From: Agata Kosior <agata.kosior57@gmail.com>
Date: Thu, 21 Dec 2023 09:43:26 +0100
Subject: [PATCH 242/244] fix: run prettier

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

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index a2b955755121..8fa733903a43 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -171,7 +171,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {
         >
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
-                    <HeaderWithBackButton title={translate('common.search')}/>
+                    <HeaderWithBackButton title={translate('common.search')} />
                     <View style={[themeStyles.flex1, themeStyles.w100, themeStyles.pRelative]}>
                         <OptionsSelector
                             sections={getSections()}

From 2394482a65555ee53a9eceb5c54be00ccdf4bdd0 Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Thu, 21 Dec 2023 09:27:04 +0000
Subject: [PATCH 243/244] Update version to 1.4.15-1

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 98133994a3e3..164a548ff7b0 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041500
-        versionName "1.4.15-0"
+        versionCode 1001041501
+        versionName "1.4.15-1"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index ce90808c0c44..6a658b888abd 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.15.0</string>
+	<string>1.4.15.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 6f30fbec8f41..0cb84e5d01f9 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.15.0</string>
+	<string>1.4.15.1</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 10f23f7ca4e4..571b91d2036e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.15-0",
+  "version": "1.4.15-1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.15-0",
+      "version": "1.4.15-1",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index d430203bedc9..f91043f50dd9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.15-0",
+  "version": "1.4.15-1",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

From f232241b4c95dbb6e8b41c984b24aa25d791fe5d Mon Sep 17 00:00:00 2001
From: OSBotify <infra+osbotify@expensify.com>
Date: Thu, 21 Dec 2023 09:43:22 +0000
Subject: [PATCH 244/244] Update version to 1.4.15-2

---
 android/app/build.gradle         | 4 ++--
 ios/NewExpensify/Info.plist      | 2 +-
 ios/NewExpensifyTests/Info.plist | 2 +-
 package-lock.json                | 4 ++--
 package.json                     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 164a548ff7b0..6b6c7442d6c6 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041501
-        versionName "1.4.15-1"
+        versionCode 1001041502
+        versionName "1.4.15-2"
     }
 
     flavorDimensions "default"
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 6a658b888abd..c4eff14f35e9 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.15.1</string>
+	<string>1.4.15.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 0cb84e5d01f9..2db2550b72ea 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.15.1</string>
+	<string>1.4.15.2</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 571b91d2036e..0683a7ea31a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.15-1",
+  "version": "1.4.15-2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.15-1",
+      "version": "1.4.15-2",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index f91043f50dd9..c17c4a12aea8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.15-1",
+  "version": "1.4.15-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",