diff --git a/.eslintrc.js b/.eslintrc.js
index f509613d8819..afcea2cb3401 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,6 @@
 module.exports = {
-    extends: ['expensify', 'plugin:storybook/recommended'],
+    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended'],
+    plugins: ['react-hooks'],
     parser: 'babel-eslint',
     ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', '.git/**'],
     env: {
diff --git a/.github/actions/composite/setupNode/action.yml b/.github/actions/composite/setupNode/action.yml
index d475acf5380f..643c707da230 100644
--- a/.github/actions/composite/setupNode/action.yml
+++ b/.github/actions/composite/setupNode/action.yml
@@ -12,6 +12,6 @@ runs:
     - name: Install node packages
       uses: nick-invision/retry@0711ba3d7808574133d713a0d92d2941be03a350
       with:
-        timeout_minutes: 10
-        max_attempts: 5
+        timeout_minutes: 30
+        max_attempts: 3
         command: npm ci
diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml
index 4a8a3fd732c0..e1b38b713d7b 100644
--- a/.github/workflows/platformDeploy.yml
+++ b/.github/workflows/platformDeploy.yml
@@ -10,7 +10,7 @@ on:
 
 env:
   SHOULD_DEPLOY_PRODUCTION: ${{ github.event_name == 'release' }}
-  DEVELOPER_DIR: /Applications/Xcode_14.0.1.app/Contents/Developer
+  DEVELOPER_DIR: /Applications/Xcode_14.1.app/Contents/Developer
 
 jobs:
   validateActor:
diff --git a/.github/workflows/testBuild.yml b/.github/workflows/testBuild.yml
index 6b068c9f6f8e..f52453dcdf40 100644
--- a/.github/workflows/testBuild.yml
+++ b/.github/workflows/testBuild.yml
@@ -11,7 +11,7 @@ on:
     branches: ['*ci-test/**']
 
 env:
-  DEVELOPER_DIR: /Applications/Xcode_14.0.1.app/Contents/Developer
+  DEVELOPER_DIR: /Applications/Xcode_14.1.app/Contents/Developer
 
 jobs:
   validateActor:
diff --git a/__mocks__/@react-native-camera-roll/camera-roll.js b/__mocks__/@react-native-camera-roll/camera-roll.js
new file mode 100644
index 000000000000..4274cd531a85
--- /dev/null
+++ b/__mocks__/@react-native-camera-roll/camera-roll.js
@@ -0,0 +1,5 @@
+export default {
+    CameraRoll: {
+        save: jest.fn(),
+    },
+};
diff --git a/__mocks__/@ua/react-native-airship.js b/__mocks__/@ua/react-native-airship.js
new file mode 100644
index 000000000000..ec394d982ab8
--- /dev/null
+++ b/__mocks__/@ua/react-native-airship.js
@@ -0,0 +1,40 @@
+const EventType = {
+    NotificationResponse: 'notificationResponse',
+    PushReceived: 'pushReceived',
+};
+
+const iOS = {
+    ForegroundPresentationOption: {
+        Alert: 'alert',
+        Sound: 'sound',
+        Badge: 'badge',
+    },
+};
+
+const Airship = {
+    setUserNotificationsEnabled: jest.fn(),
+    addListener: jest.fn(),
+    removeAllListeners: jest.fn(),
+    setBadgeNumber: jest.fn(),
+    push: {
+        iOS: {
+            setBadgeNumber: jest.fn(),
+            setForegroundPresentationOptions: jest.fn(),
+        },
+        enableUserNotifications: () => Promise.resolve(false),
+        clearNotifications: jest.fn(),
+        getNotificationStatus: () => Promise.resolve({airshipOptIn: false, systemEnabled: false}),
+    },
+    contact: {
+        identify: jest.fn(),
+        getNamedUserId: jest.fn(),
+        reset: jest.fn(),
+    },
+};
+
+export default Airship;
+
+export {
+    EventType,
+    iOS,
+};
diff --git a/__mocks__/urbanairship-react-native.js b/__mocks__/urbanairship-react-native.js
deleted file mode 100644
index 5bc90f267bf2..000000000000
--- a/__mocks__/urbanairship-react-native.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const EventType = {
-    NotificationResponse: 'notificationResponse',
-    PushReceived: 'pushReceived',
-};
-
-const iOS = {
-    ForegroundPresentationOption: {
-        Alert: 'alert',
-        Sound: 'sound',
-        Badge: 'badge',
-    },
-};
-
-const UrbanAirship = {
-    setUserNotificationsEnabled: jest.fn(),
-    clearNotifications: jest.fn(),
-    addListener: jest.fn(),
-    getNamedUser: jest.fn(),
-    enableUserPushNotifications: () => Promise.resolve(false),
-    setNamedUser: jest.fn(),
-    removeAllListeners: jest.fn(),
-    setBadgeNumber: jest.fn(),
-    setForegroundPresentationOptions: jest.fn(),
-    getNotificationStatus: () => Promise.resolve({airshipOptIn: false, systemEnabled: false}),
-};
-
-export default UrbanAirship;
-
-export {
-    EventType,
-    iOS,
-    UrbanAirship,
-};
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 206473700086..9e57edc17154 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001028900
-        versionName "1.2.89-0"
+        versionCode 1001029202
+        versionName "1.2.92-2"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {
@@ -332,6 +332,10 @@ dependencies {
 
     // Plaid SDK
     implementation project(':react-native-plaid-link-sdk')
+
+    // Fixes a version conflict between airship and react-native-plaid-link-sdk
+    implementation "androidx.work:work-runtime-ktx:2.8.0"
+    
     // This okhttp3 dependency prevents the app from crashing - See https://github.com/plaid/react-native-plaid-link-sdk/issues/74#issuecomment-648435002
     implementation "com.squareup.okhttp3:okhttp-urlconnection:4.+"
 }
diff --git a/android/build.gradle b/android/build.gradle
index 2f24d17f2073..938b8c48f054 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -3,8 +3,8 @@
 buildscript {
     ext {
         minSdkVersion = 21
-        compileSdkVersion = 32
-        targetSdkVersion = 32
+        compileSdkVersion = 33
+        targetSdkVersion = 33
 
         if (System.properties['os.arch'] == "aarch64") {
             // For M1 Users we need to use the NDK 24 which added support for aarch64
diff --git a/config/proxyConfig.js b/config/proxyConfig.js
new file mode 100644
index 000000000000..fa09c436461f
--- /dev/null
+++ b/config/proxyConfig.js
@@ -0,0 +1,9 @@
+/**
+ * These are the base API roots used to send requests to the proxy.
+ * We only specify for staging URLs as API requests are sent to the production
+ * servers by default.
+ */
+module.exports = {
+    STAGING: '/staging/',
+    STAGING_SECURE: '/staging-secure/',
+};
diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index 0b48c4e5f35a..2867d857ee04 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -21,6 +21,7 @@ module.exports = (env = {}) => portfinder.getPortPromise({port: BASE_PORT})
             : {
                 proxy: {
                     '/api': 'http://[::1]:9000',
+                    '/staging': 'http://[::1]:9000',
                     '/chat-attachments': 'http://[::1]:9000',
                 },
             };
diff --git a/contributingGuides/CONTRIBUTING.md b/contributingGuides/CONTRIBUTING.md
index 035f186bc5dc..43cf91e08473 100644
--- a/contributingGuides/CONTRIBUTING.md
+++ b/contributingGuides/CONTRIBUTING.md
@@ -170,3 +170,10 @@ Additionally if you want to discuss an idea with the open source community witho
 #### Important note about JavaScript Style
 - Read our official [JavaScript and React style guide](https://github.com/Expensify/App/blob/main/contributingGuides/STYLE.md). Please refer to our Style Guide before asking for a review.
 - We have nothing against Prettier or any other automatic style fixers, but we generally don't use them here at Expensify. Do not use Prettier. The style changes these tools enforce don't always align with the ones we recommend and require in our eslint configs and can result in unnecessary changes for our reviewers. Ignoring this advice will ultimately make your changes take longer to review as we will ask you to undo any style changes that are not related to the important changes you are making.
+
+#### For external agencies that Expensify partners with
+Follow all the above above steps and processes. When you find a job you'd like to work on:
+- Post “I’m from [agency], I’d like to work on this job”
+  - If no proposals have been submitted by other contributors, BugZero (BZ) team member or an internal engineer will assign the issue to you. 
+  - If there are existing proposals, BZ will put the issue on hold. Contributor+ (C+) will review the existing proposals.  If a contributor’s proposal is accepted then contributor will be assigned to the issue.  If not the issue will be assigned to the agency-employee. 
+- Once assigned follow the steps [here](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#propose-a-solution-for-the-job) to submit your proposal 
diff --git a/contributingGuides/STYLE.md b/contributingGuides/STYLE.md
index 62e64bede72c..9d94623f0e33 100644
--- a/contributingGuides/STYLE.md
+++ b/contributingGuides/STYLE.md
@@ -123,10 +123,10 @@ There are a few things that we have customized for our tastes which will take pr
 <SomeComponent shouldShowIcon />
 
 // Bad
-const valid = this.props.something && this.props.somethingElse;
+const valid = props.something && props.somethingElse;
 
 // Good
-const isValid = this.props.something && this.props.somethingElse;
+const isValid = props.something && props.somethingElse;
 ```
 
 ## Functions
@@ -297,11 +297,9 @@ Don't destructure props or state. It makes the source of a given variable unclea
 
 ```javascript
 // Bad
-render() {
-	const {userData} = this.props;
-	const {firstName, lastName} = this.state;
-	...
-}
+const {userData} = props;
+const {firstName, lastName} = state;
+...
 
 // Bad
 const UserInfo = ({name, email}) => (
@@ -413,63 +411,7 @@ const propTypes = {
 };
 ```
 
-* Avoid public methods on components and calling them via refs
-
-```javascript
-// Bad
-class MyComponent extends React.Component {
-
-    /**
-     * Refresh the data in our component by calling `MyComponent.refreshData()`
-     *
-     * @public
-     * @params {Object[]} newData
-     */
-    refreshData(newData) {
-        this.setState({data: newData});
-    }
-}
-
-class SomeOtherComponent extends Component {
-    setDataInMyComponent(newData) {
-        this.myComponent.refreshData(newData);
-    }
-
-    render() {
-        return (
-            <MyComponent ref={el => this.myComponent = el} />
-        );
-    }
-}
-```
-
-```javascript
-// Good
-class MyComponent extends Component {
-    ...
-}
-
-class SomeOtherComponent extends Component {
-    constructor(props) {
-        this.state = {
-            data: {},
-        };
-    }
-
-    ...
-
-    render() {
-        return (
-            <MyComponent data={this.state.data} />
-        );
-    }
-}
-```
-
-**Note:** One exception to this rule would be lower level React Native UI components like inputs that maybe need a `focus()` method to be called via a `ref`.
-
 * Do not use underscores when naming private methods.
-* Do not add method documentation for the built-in [lifecycle methods](https://facebook.github.io/react/docs/component-specs.html) of a component.
 * Add descriptions to all `propTypes` using a block comment above the definition. No need to document the types (that's what `propTypes` is doing already), but add some context for each property so that other developers understand the intended use.
 
 ```javascript
@@ -540,96 +482,48 @@ const propTypes = {
 }
 ```
 
-## Binding methods
-
-For class components, methods should be bound in the `constructor()` if passed directly as a prop or needing to be accessed via the component instance from outside of the component's execution context. Binding all methods in the constructor is unnecessary. Learn and understand how `this` works [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).
-
-```javascript
-// Bad
-class SomeComponent {
-    constructor(props) {
-        super(props);
-
-        this.myMethod = this.myMethod.bind(this);
-    }
-
-    myMethod() {...}
-
-    render() {
-        return (
-            // No need to bind this since arrow function is used
-            <Button onPress={() => this.myMethod()} />
-        );
-    }
-}
-
-// Good
-class SomeComponent {
-    constructor(props) {
-        super(props);
-
-        this.myMethod = this.myMethod.bind(this);
-    }
-
-    myMethod() {...}
-
-    render() {
-        return (
-            // Passed directly to Button so this should be bound to the component
-            <Button onPress={this.myMethod} />
-        );
-    }
-}
-```
-
 ## Inline Ternaries
 * Use inline ternary statements when rendering optional pieces of templates. Notice the white space and formatting of the ternary.
 
 ```javascript
 // Bad
 {
-    render() {
-        const optionalTitle = this.props.title ? <div className="title">{this.props.title}</div> : null;
-        return (
-            <div>
-                {optionalTitle}
-                <div className="body">This is the body</div>
-            </div>
-        );
-    }
+    const optionalTitle = props.title ? <div className="title">{props.title}</div> : null;
+    return (
+        <div>
+            {optionalTitle}
+            <div className="body">This is the body</div>
+        </div>
+    );
 }
 ```
 
 ```javascript
 // Good
 {
-    render() {
-        return (
-            <div>
-                {this.props.title
-                    ? <div className="title">{this.props.title}</div>
-                    : null}
-                <div className="body">This is the body</div>
-            </div>
-        );
-    }
+    return (
+        <div>
+            {props.title
+                ? <div className="title">{props.title}</div>
+                : null}
+            <div className="body">This is the body</div>
+        </div>
+    );
 }
 ```
 
 ```javascript
 // Good
 {
-    render() {
-        return (
-            <div>
-                {this.props.title
-                    ? <div className="title">{this.props.title}</div>
-                    : <div className="title">Default Title</div>
-                }
-                <div className="body">This is the body</body>
-            </div>
-        );
-    }
+    return (
+        <div>
+            {props.title
+                ? <div className="title">{props.title}</div>
+                : <div className="title">Default Title</div>
+            }
+            <div className="body">This is the body</body>
+        </div>
+    );
 }
 ```
 
@@ -640,36 +534,32 @@ In React Native, one **must not** attempt to falsey-check a string for an inline
 ```javascript
 // Bad! This will cause a breaking an error on native platforms
 {
-    render() {
-        return (
-            <View>
-                {this.props.title
-                    ? <View style={styles.title}>{this.props.title}</View>
-                    : null}
-                <View style={styles.body}>This is the body</View>
-            </View>
-        );
-    }
+    return (
+        <View>
+            {props.title
+                ? <View style={styles.title}>{props.title}</View>
+                : null}
+            <View style={styles.body}>This is the body</View>
+        </View>
+    );
 }
 
 // Good
 {
-    render() {
-        return (
-            <View>
-                {!_.isEmpty(this.props.title)
-                    ? <View style={styles.title}>{this.props.title}</View>
-                    : null}
-                <View style={styles.body}>This is the body</View>
-            </View>
-        );
-    }
+    return (
+        <View>
+            {!_.isEmpty(props.title)
+                ? <View style={styles.title}>{props.title}</View>
+                : null}
+            <View style={styles.body}>This is the body</View>
+        </View>
+    );
 }
 ```
 
-## Stateless component style
+## Function component style
 
-When writing a stateless component you must ALWAYS add a `displayName` property and give it the same value as the name of the component (this is so it appears properly in the React dev tools)
+When writing a function component you must ALWAYS add a `displayName` property and give it the same value as the name of the component (this is so it appears properly in the React dev tools)
 
 ```javascript
 
@@ -684,125 +574,9 @@ When writing a stateless component you must ALWAYS add a `displayName` property
 
 ## Stateless components vs Pure Components vs Class based components vs Render Props - When to use what?
 
-*_1. Stateless components: Used when you don't need to maintain state or use lifecycle methods._*
-
-In many cases, we create components that do not need to have a state, lifecycle hooks or any internal variables. In other words just a simple component that takes props and renders something presentational. But often times we write them as class based components which come with a lot of cruft (for e.g., it has a state, lifecycle hooks and it is a javascript class which means that React creates instances of it) that is unnecessary in many cases.
-
-A quote from the React documentation:
+Class components are DEPRECATED. Use function components and React hooks.
 
-> These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate. However, you may still specify .propTypes and .defaultProps by setting them as properties on the function, just as you would set them on an ES6 class.
-
-
- - Here is an [example](https://github.com/Expensify/JS-Libs/blob/e3b7ee4b111a3a370a1427ad904485df4e65a472/lib/components/StepProgressBar.js#L20) from our codebase of a stateless component.
-```js
-const StepProgressBar = ({steps, currentStep}) => {
-    const currentStepIndex = Math.max(0, _.findIndex(steps, step => step.id === currentStep));
-    return (
-        <div id="js_steps_progress" className="progress-wrapper">
-...
-
-```
-*_2. Pure components: Use to improve performance where a component does not need to be rendered too often._*
-
-*IF YOU ARE NOT SURE ABOUT USING React.PureComponent, USE React.Component INSTEAD.* It's very important that you understand the differences.
-
-By default, a plain `React.Component` has `shouldComponentUpdate` set to always return true. This is good because it means React errs on the side of always updating the component in case there’s any new data to show. However, it’s bad because it means React might trigger unnecessary re-renders.
-
-`React.PureComponent` has a default implementation of `shouldComponentUpdate` that does a shallow comparison of props and state to determine if it should re-render or not.
-
-Read the [React Docs](https://reactjs.org/docs/react-api.html#reactpurecomponent) to understand this more.
-
-
-```js
-// Internal react code for pure component looks like this with regards to shouldComponentUpdate
-
-if (type.prototype && type.prototype.isPureReactComponent) {
-    shouldUpdate = !shallowEqual(oldProps, props) ||
-                   !shallowEqual(oldState, state);
-}
-```
-
-> A common pitfall when converting from Component to PureComponent is to forget that the children need to re-render too. As with all React - if the parent doesn’t re-render the children won’t either. So if you have a PureComponent with children, those children can only update if the parent’s state or props are shallowly different (causing the parent to re-render). You can only have a PureComponent parent if you know none of the children should re-render if the parent doesn’t re-render.
-
-**Tip:** If you think you need `React.PureComponent`, but you're not using a class component use [`React.memo()`](https://reactjs.org/docs/react-api.html#reactmemo) to achieve the same thing.
-
-*_3. Class based components: Use it when you need to maintain state and use lifecycle methods._*
-
-Always extend from `React.Component` and use a class component when:
-
-- A component needs some data passed to it from a parent holding the data in `this.state`. A class component would hold this data in state and pass it down to the child via props. - If you need to perform some kind of side-effect after the component mounts (`componentDidMount()`) or tweak a component's rendering performance.
-- A final case where you might need to use a class component is if you need to use a `ref`. We have not yet adopted built-in React hooks like `useRef()` so if you need a `ref` use a class component.
-
-```javascript
-// Bad
-const MyComponent = props => {
-    const inputRef = useRef();
-    return <Input ref={inputRef} />;
-};
-
-// Good
-class MyComponent extends React.Component {
-    render() {
-        return <Input ref={el => this.inputRef = el} />;
-    }
-}
-```
-
-*_4. Render Props: Use for Cross-Cutting Concerns and Code Reuse_*
-
-Let's say you have two separate components that render two different things, but you want them both to be based on the same state. You can pass a `render` property to a component or pass a function as a child to accomplish this. You can read more about how this works and when to use it in the [React Docs](https://reactjs.org/docs/render-props.html).
-
-## Do not use inheritance for other React components
-```js
-// Bad
-// Extends from our custom components
-class AComponent extends CComponent, React.Component { ... }
-class BComponent extends CComponent, React.Component { ... }
-
-// Good
-const AEnhancedComponent = higherOrderComponent({ ... })(CComponent);
-
-// Good
-// Only extends from React's component, not from our own components
-class AComponent extends React.Component { ... }
-class BComposedComponent extends React.Component
-{
-
-    ...
-    render() {
-        return (
-            <AComponent {...props}>
-                <Text>
-                    {this.state.whatever}
-                </Text>
-            </AComponent>
-        )
-    }
-    ...
-}
-```
-
-## isMounted is an Antipattern
-
-Sometimes we must set React state when a resolved promise is handled. This can cause errors in the JS console because a promise does not have any awareness of whether a component we are setting state on still exists or has unmounted. It may be tempting in these situations to use an instance flag like `this.isComponentMounted` and then set it to `false` in `componentWillUnmount()`. The correct way to handle this is to use a "cancellable" promise.
-
-```js
-componentWillUnmount() {
-    if (!this.doSomethingPromise) {
-        return;
-    }
-
-    this.doSomethingPromise.cancel();
-}
-
-doSomethingThenSetState() {
-    this.doSomethingPromise = makeCancellablePromise(this.doSomething());
-    this.doSomethingPromise.promise
-        .then((value) => this.setState({value}));
-}
-```
-
-**Read more:** [https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html](https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html)
+[https://react.dev/reference/react/Component#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function](https://react.dev/reference/react/Component#migrating-a-component-with-lifecycle-methods-from-a-class-to-a-function)
 
 ## Composition vs Inheritance
 
@@ -842,12 +616,7 @@ There are several ways to use and declare refs and we prefer the [callback metho
 
 ## Are we allowed to use [insert brand new React feature]? Why or why not?
 
-We love React and learning about all the new features that are regularly being added to the API. However, we try to keep our organization's usage of React limited to a very strict and stable set of features that React offers. We do this mainly for **consistency** and so our engineers don't have to spend extra time trying to figure out how everything is working. Participation in our React driven codebases shouldn't mean everyone is required to keep up to date on the latest and greatest features. So with that in mind, here are a few things we would ask you to not use:
-
-- Hooks - Use a class `Component` and relevant lifecycle methods instead of hooks. One exception here is if a 3rd party library offers some functionality via hooks (and only hooks).
-- `createRef()` - Use a callback ref instead
-- Class properties - Use an anonymous arrow function when calling a method or bind your method in the `constructor()`
-- Static getters and setters - Use props directly or create a method that computes some value
+We love React and learning about all the new features that are regularly being added to the API. However, we try to keep our organization's usage of React limited to the most stable set of features that React offers. We do this mainly for **consistency** and so our engineers don't have to spend extra time trying to figure out how everything is working. That said, if you aren't sure if we have adopted something please ask us first.
 
 # Onyx Best Practices
 
diff --git a/desktop/main.js b/desktop/main.js
index 484398f8c363..62406545d8d9 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -16,7 +16,7 @@ const {machineId} = require('node-machine-id');
 const ELECTRON_EVENTS = require('./ELECTRON_EVENTS');
 const checkForUpdates = require('../src/libs/checkForUpdates');
 const CONFIG = require('../src/CONFIG').default;
-const CONST = require('../src/CONST');
+const CONST = require('../src/CONST').default;
 const Localize = require('../src/libs/Localize');
 
 const port = process.env.PORT || 8080;
@@ -81,6 +81,8 @@ let downloadedVersion;
 // So we track preferredLocale separately via ELECTRON_EVENTS.LOCALE_UPDATED
 let preferredLocale = CONST.DEFAULT_LOCALE;
 
+const appProtocol = CONST.DEEPLINK_BASE_URL.replace('://', '');
+
 const quitAndInstallWithUpdate = () => {
     if (!downloadedVersion) {
         return;
@@ -268,7 +270,7 @@ const mainWindow = (() => {
              * when the app is bundled electron-builder will take care of it.
              */
             if (__DEV__) {
-                app.setAsDefaultProtocolClient('new-expensify');
+                app.setAsDefaultProtocolClient(appProtocol);
             }
 
             browserWindow = new BrowserWindow({
@@ -406,7 +408,14 @@ const mainWindow = (() => {
                 browserWindow.webContents.send(ELECTRON_EVENTS.BLUR);
             });
 
-            app.on('before-quit', () => quitting = true);
+            app.on('before-quit', () => {
+                // Adding __DEV__ check because we want links to be handled by dev app only while it's running
+                // https://github.com/Expensify/App/issues/15965#issuecomment-1483182952
+                if (__DEV__) {
+                    app.removeAsDefaultProtocolClient(appProtocol);
+                }
+                quitting = true;
+            });
             app.on('activate', () => {
                 if (expectedUpdateVersion && app.getVersion() !== expectedUpdateVersion) {
                     return;
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 166c1fa569d2..0183da296bff 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -102,11 +102,11 @@ <h3>Learn more</h3>
                 <h3>Get Started</h3>
                 <ul>
                     <li>
-                        <a href="https://www.expensify.com" alt="Create a new account" target="_blank">Create a new account</a>
+                        <a href="https://www.expensify.com" alt="Create A New Account" target="_blank">Create A New Account</a>
                     </li>
 
                     <li>
-                        <a href="https://www.expensify.com" alt="Log in" target="_blank">Log in</a>
+                        <a href="https://www.expensify.com" alt="Log In" target="_blank">Log In</a>
                     </li>
                 </ul>
 
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index ac648bfe4fed..9c256602144a 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -2,6 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://cdnjs.cloudflare.com/ajax/libs/tocbot/ 'self'; style-src cdnjs.cloudflare.com ka-f.fontawesome.com 'self' 'unsafe-inline'" >
     <title>Expensify Help</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <link rel="icon" type="image/png" href="/assets/images/expensify-logo-round.png">
diff --git a/ios/NewExpensify.xcodeproj/project.pbxproj b/ios/NewExpensify.xcodeproj/project.pbxproj
index ee77a2595272..a12bef90fd2c 100644
--- a/ios/NewExpensify.xcodeproj/project.pbxproj
+++ b/ios/NewExpensify.xcodeproj/project.pbxproj
@@ -61,28 +61,28 @@
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = NewExpensify/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = NewExpensify/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = NewExpensify/main.m; sourceTree = "<group>"; };
-		177D06D4BF2346EB90E37D3D /* ExpensifyMono-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyMono-Bold.otf"; path = "../assets/fonts/native/ExpensifyMono-Bold.otf"; sourceTree = "<group>"; };
+		177D06D4BF2346EB90E37D3D /* ExpensifyMono-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyMono-Bold.otf"; path = "../assets/fonts/native/ExpensifyMono-Bold.otf"; sourceTree = "<group>"; };
 		18D050DF262400AF000D658B /* BridgingFile.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BridgingFile.swift; sourceTree = "<group>"; };
-		1977066010294D51AEB35F3B /* ExpensifyNeue-Italic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Italic.otf"; path = "../assets/fonts/native/ExpensifyNeue-Italic.otf"; sourceTree = "<group>"; };
-		1B3F09A4E4EA4CFFA5E4E7CD /* ExpensifyMono-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyMono-Regular.otf"; path = "../assets/fonts/native/ExpensifyMono-Regular.otf"; sourceTree = "<group>"; };
+		1977066010294D51AEB35F3B /* ExpensifyNeue-Italic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Italic.otf"; path = "../assets/fonts/native/ExpensifyNeue-Italic.otf"; sourceTree = "<group>"; };
+		1B3F09A4E4EA4CFFA5E4E7CD /* ExpensifyMono-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyMono-Regular.otf"; path = "../assets/fonts/native/ExpensifyMono-Regular.otf"; sourceTree = "<group>"; };
 		374FB8D528A133A7000D84EF /* OriginImageRequestHandler.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = OriginImageRequestHandler.h; path = NewExpensify/OriginImageRequestHandler.h; sourceTree = "<group>"; };
 		374FB8D628A133FE000D84EF /* OriginImageRequestHandler.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; name = OriginImageRequestHandler.mm; path = NewExpensify/OriginImageRequestHandler.mm; sourceTree = "<group>"; };
-		38E61473EAA34C598CB6B345 /* ExpensifyNeue-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-BoldItalic.otf"; path = "../assets/fonts/native/ExpensifyNeue-BoldItalic.otf"; sourceTree = "<group>"; };
+		38E61473EAA34C598CB6B345 /* ExpensifyNeue-BoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-BoldItalic.otf"; path = "../assets/fonts/native/ExpensifyNeue-BoldItalic.otf"; sourceTree = "<group>"; };
 		3EDF186626B8D2CBA203E08D /* libPods-NewExpensify.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NewExpensify.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		44BF435285B94E5B95F90994 /* ExpensifyNewKansas-Medium.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNewKansas-Medium.otf"; path = "../assets/fonts/native/ExpensifyNewKansas-Medium.otf"; sourceTree = "<group>"; };
-		6BEDED270C49437581EBE50D /* ExpensifyNeue-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Regular.otf"; path = "../assets/fonts/native/ExpensifyNeue-Regular.otf"; sourceTree = "<group>"; };
+		44BF435285B94E5B95F90994 /* ExpensifyNewKansas-Medium.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNewKansas-Medium.otf"; path = "../assets/fonts/native/ExpensifyNewKansas-Medium.otf"; sourceTree = "<group>"; };
+		6BEDED270C49437581EBE50D /* ExpensifyNeue-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Regular.otf"; path = "../assets/fonts/native/ExpensifyNeue-Regular.otf"; sourceTree = "<group>"; };
 		7041848326A8E40900E09F4D /* RCTStartupTimer.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = RCTStartupTimer.h; path = NewExpensify/RCTStartupTimer.h; sourceTree = "<group>"; };
 		7041848426A8E47D00E09F4D /* RCTStartupTimer.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; name = RCTStartupTimer.m; path = NewExpensify/RCTStartupTimer.m; sourceTree = "<group>"; };
 		70CF6E81262E297300711ADC /* BootSplash.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = BootSplash.storyboard; path = NewExpensify/BootSplash.storyboard; sourceTree = "<group>"; };
 		A2695CF895D81C31AFB4A074 /* libPods-NewExpensify-NewExpensifyTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-NewExpensify-NewExpensifyTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		B66D52EC75F78B8A06F1E035 /* Pods-NewExpensify.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-NewExpensify.debug.xcconfig"; path = "Target Support Files/Pods-NewExpensify/Pods-NewExpensify.debug.xcconfig"; sourceTree = "<group>"; };
-		D2AFB39EC1D44BF9B91D3227 /* ExpensifyNewKansas-MediumItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNewKansas-MediumItalic.otf"; path = "../assets/fonts/native/ExpensifyNewKansas-MediumItalic.otf"; sourceTree = "<group>"; };
+		D2AFB39EC1D44BF9B91D3227 /* ExpensifyNewKansas-MediumItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNewKansas-MediumItalic.otf"; path = "../assets/fonts/native/ExpensifyNewKansas-MediumItalic.otf"; sourceTree = "<group>"; };
 		DD7904292792E76D004484B4 /* RCTBootSplash.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RCTBootSplash.h; path = NewExpensify/RCTBootSplash.h; sourceTree = "<group>"; };
 		DD79042A2792E76D004484B4 /* RCTBootSplash.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = RCTBootSplash.m; path = NewExpensify/RCTBootSplash.m; sourceTree = "<group>"; };
 		E9DF872C2525201700607FDC /* AirshipConfig.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = AirshipConfig.plist; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
-		EDFC169F9D7A43BDB924151F /* ExpensifyNeue-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Bold.otf"; path = "../assets/fonts/native/ExpensifyNeue-Bold.otf"; sourceTree = "<group>"; };
+		EDFC169F9D7A43BDB924151F /* ExpensifyNeue-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ExpensifyNeue-Bold.otf"; path = "../assets/fonts/native/ExpensifyNeue-Bold.otf"; sourceTree = "<group>"; };
 		F0C450E92705020500FD2970 /* colors.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; name = colors.json; path = ../colors.json; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -431,6 +431,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipCoreResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipExtendedActionsResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipMessageCenterResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipPreferenceCenterResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
@@ -439,6 +440,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipCoreResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipExtendedActionsResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipMessageCenterResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipPreferenceCenterResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -479,6 +481,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipCoreResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipExtendedActionsResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipMessageCenterResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/Airship/AirshipPreferenceCenterResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
@@ -487,6 +490,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipCoreResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipExtendedActionsResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipMessageCenterResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AirshipPreferenceCenterResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -648,7 +652,7 @@
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
 				INFOPLIST_FILE = "$(SRCROOT)/NewExpensify/Info.plist";
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0.0;
 				OTHER_LDFLAGS = (
@@ -679,7 +683,7 @@
 				DEVELOPMENT_TEAM = 368M544MTT;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
 				INFOPLIST_FILE = NewExpensify/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				MARKETING_VERSION = 1.0.0;
 				OTHER_LDFLAGS = (
@@ -744,7 +748,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.1;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"$(SDKROOT)/usr/lib/swift",
@@ -799,7 +803,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.1;
 				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
 				LIBRARY_SEARCH_PATHS = (
 					"$(SDKROOT)/usr/lib/swift",
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index a5ba7b14fff4..3da2feaee711 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.89</string>
+	<string>1.2.92</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.89.0</string>
+	<string>1.2.92.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index f6b0be920f4a..cc4bd8edc39b 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.2.89</string>
+	<string>1.2.92</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.89.0</string>
+	<string>1.2.92.2</string>
 </dict>
 </plist>
diff --git a/ios/Podfile b/ios/Podfile
index 1698d638257d..091868b8137f 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -1,7 +1,7 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '12.4'
+platform :ios, '13.0'
 install! 'cocoapods', :deterministic_uuids => false
 
 target 'NewExpensify' do
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 5011d9d325da..a9a51943eeae 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1,19 +1,25 @@
 PODS:
-  - Airship (16.10.7):
-    - Airship/Automation (= 16.10.7)
-    - Airship/Basement (= 16.10.7)
-    - Airship/Core (= 16.10.7)
-    - Airship/ExtendedActions (= 16.10.7)
-    - Airship/MessageCenter (= 16.10.7)
-  - Airship/Automation (16.10.7):
+  - Airship (16.11.2):
+    - Airship/Automation (= 16.11.2)
+    - Airship/Basement (= 16.11.2)
+    - Airship/Core (= 16.11.2)
+    - Airship/ExtendedActions (= 16.11.2)
+    - Airship/MessageCenter (= 16.11.2)
+  - Airship/Automation (16.11.2):
     - Airship/Core
-  - Airship/Basement (16.10.7)
-  - Airship/Core (16.10.7):
+  - Airship/Basement (16.11.2)
+  - Airship/Core (16.11.2):
     - Airship/Basement
-  - Airship/ExtendedActions (16.10.7):
+  - Airship/ExtendedActions (16.11.2):
     - Airship/Core
-  - Airship/MessageCenter (16.10.7):
+  - Airship/MessageCenter (16.11.2):
     - Airship/Core
+  - Airship/PreferenceCenter (16.11.2):
+    - Airship/Core
+  - AirshipFrameworkProxy (2.0.1):
+    - Airship (= 16.11.2)
+    - Airship/MessageCenter (= 16.11.2)
+    - Airship/PreferenceCenter (= 16.11.2)
   - boost (1.76.0)
   - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
@@ -462,9 +468,12 @@ PODS:
   - React-jsinspector (0.70.4-alpha.2)
   - React-logger (0.70.4-alpha.2):
     - glog
+  - react-native-airship (15.2.0):
+    - AirshipFrameworkProxy (= 2.0.1)
+    - React-Core
   - react-native-blob-util (0.16.2):
     - React-Core
-  - react-native-cameraroll (4.1.2):
+  - react-native-cameraroll (5.0.4):
     - React-Core
   - react-native-config (1.4.6):
     - react-native-config/App (= 1.4.6)
@@ -645,9 +654,6 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - SocketRocket (0.6.0)
-  - urbanairship-react-native (14.6.1):
-    - Airship (= 16.10.7)
-    - React-Core
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -704,8 +710,9 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - "react-native-airship (from `../node_modules/@ua/react-native-airship`)"
   - react-native-blob-util (from `../node_modules/react-native-blob-util`)
-  - "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
+  - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-config (from `../node_modules/react-native-config`)
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-flipper (from `../node_modules/react-native-flipper`)
@@ -749,12 +756,12 @@ DEPENDENCIES:
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
-  - urbanairship-react-native (from `../node_modules/urbanairship-react-native`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
   trunk:
     - Airship
+    - AirshipFrameworkProxy
     - CocoaAsyncSocket
     - Firebase
     - FirebaseABTesting
@@ -846,10 +853,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-airship:
+    :path: "../node_modules/@ua/react-native-airship"
   react-native-blob-util:
     :path: "../node_modules/react-native-blob-util"
   react-native-cameraroll:
-    :path: "../node_modules/@react-native-community/cameraroll"
+    :path: "../node_modules/@react-native-camera-roll/camera-roll"
   react-native-config:
     :path: "../node_modules/react-native-config"
   react-native-document-picker:
@@ -936,13 +945,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNSVG:
     :path: "../node_modules/react-native-svg"
-  urbanairship-react-native:
-    :path: "../node_modules/urbanairship-react-native"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  Airship: fbff646723323c58e3871cd30488612ca373f597
+  Airship: 19ead2c0bdc791c1b9d6ebb7940aaac99614414e
+  AirshipFrameworkProxy: 037a0ad6491757c45de2c70a6cc47bae5fcfa32b
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
@@ -1001,8 +1009,9 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 523e742f144a346f7df32dea4fe1944d39b02473
   React-jsinspector: 7b02a02b9b9bf830102394039c80b3bf2e0200b0
   React-logger: b2c47bb0829c3c45ba3a04add9a2b4aea3f3dd4e
+  react-native-airship: 8690a133d791068741855d4f20ea83ec4a7761d1
   react-native-blob-util: c3b0faecd2919db568e9d552084396f3e50b57c7
-  react-native-cameraroll: 2957f2bce63ae896a848fbe0d5352c1bd4d20866
+  react-native-cameraroll: 38b40d9033e4077b6c603f92f95c6d05fa7907df
   react-native-config: 7cd105e71d903104e8919261480858940a6b9c0e
   react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-flipper: dc5290261fbeeb2faec1bdc57ae6dd8d562e1de4
@@ -1049,10 +1058,9 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
-  urbanairship-react-native: fe4d169332546a0efd348a009aa490dc36ff815e
   Yoga: f77f6497bccebdcbc8efb03dbf83eadfdec6d104
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 48093a300788c218e76f70cf6d102915cd993f34
+PODFILE CHECKSUM: 4478f05b452c2dbc905adb8db4704eb8a860331c
 
 COCOAPODS: 1.11.3
diff --git a/ios/chat_expensify_adhoc.mobileprovision.gpg b/ios/chat_expensify_adhoc.mobileprovision.gpg
index f90590388d5b..97179c8a65ac 100644
Binary files a/ios/chat_expensify_adhoc.mobileprovision.gpg and b/ios/chat_expensify_adhoc.mobileprovision.gpg differ
diff --git a/package-lock.json b/package-lock.json
index 3dd8033a7113..0c9ac0d7c2a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.2.89-0",
+  "version": "1.2.92-2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.2.89-0",
+      "version": "1.2.92-2",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -19,7 +19,7 @@
         "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#c5f654fc9d0ad7cc5b89d50b34ecf8b0e3f4d050",
         "@onfido/react-native-sdk": "7.4.0",
         "@react-native-async-storage/async-storage": "^1.17.10",
-        "@react-native-community/cameraroll": "git+https://github.com/react-native-cameraroll/react-native-cameraroll.git#3f0aed96db68e134f199171c7b06c1b4d6cb382b",
+        "@react-native-camera-roll/camera-roll": "~5.0.1",
         "@react-native-community/clipboard": "^1.5.1",
         "@react-native-community/datetimepicker": "^3.5.2",
         "@react-native-community/netinfo": "^8.3.0",
@@ -33,11 +33,12 @@
         "@react-navigation/drawer": "github:Expensify/react-navigation#react-navigation-drawer-v6.5.0-alpha1-gitpkg",
         "@react-navigation/native": "6.0.13",
         "@react-navigation/stack": "6.3.1",
+        "@ua/react-native-airship": "^15.2.0",
         "babel-plugin-transform-remove-console": "^6.9.4",
         "babel-polyfill": "^6.26.0",
         "dom-serializer": "^0.2.2",
         "domhandler": "^4.3.0",
-        "expensify-common": "git+https://github.com/Expensify/expensify-common.git#36d6f232d3b49d844d9226bc74f668b07cfa7f3c",
+        "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#9cf047b9741d3c02820d515dccb9e0a45b6595f5",
         "fbjs": "^3.0.2",
         "html-entities": "^1.3.1",
         "htmlparser2": "^7.2.0",
@@ -90,8 +91,7 @@
         "save": "^2.4.0",
         "semver": "^7.3.8",
         "shim-keyboard-event-key": "^1.0.3",
-        "underscore": "^1.13.1",
-        "urbanairship-react-native": "^14.6.1"
+        "underscore": "^1.13.1"
       },
       "devDependencies": {
         "@actions/core": "1.10.0",
@@ -135,13 +135,14 @@
         "css-loader": "^6.7.2",
         "diff-so-fancy": "^1.3.0",
         "dotenv": "^16.0.3",
-        "electron": "^22.3.4",
+        "electron": "22.3.4",
         "electron-builder": "23.5.0",
         "electron-notarize": "^1.2.1",
         "eslint": "^7.6.0",
         "eslint-config-expensify": "^2.0.31",
         "eslint-plugin-jest": "^24.1.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-storybook": "^0.5.13",
         "flipper-plugin-bridgespy-client": "^0.1.9",
         "html-inline-script-webpack-plugin": "^3.1.0",
@@ -5178,17 +5179,12 @@
         "react-native": "^0.0.0-0 || 0.60 - 0.71 || 1000.0.0"
       }
     },
-    "node_modules/@react-native-community/cameraroll": {
-      "version": "4.1.2",
-      "resolved": "git+ssh://git@github.com/react-native-cameraroll/react-native-cameraroll.git#3f0aed96db68e134f199171c7b06c1b4d6cb382b",
-      "integrity": "sha512-ZbR82O+yIR/KC9oJT4QbUtnGiUC511CAHCE1VidEaD8e/JsD6zRjh4Fiy5sNuHRPIJl4g19mo3jBa+z8/pahQg==",
-      "license": "MIT",
-      "dependencies": {
-        "invariant": "^2.2.4"
-      },
+    "node_modules/@react-native-camera-roll/camera-roll": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@react-native-camera-roll/camera-roll/-/camera-roll-5.0.4.tgz",
+      "integrity": "sha512-3kBRgW3VfmLQmQm70gPUVDu8rPSZymoPc9vmeiPLMKBqtWaqPNuPX0jQ6mZ8AEtYbBdoWC360Q4YYPalXv37zA==",
       "peerDependencies": {
-        "react": "16 || 17 || 18",
-        "react-native": ">=0.60"
+        "react-native": ">=0.59"
       }
     },
     "node_modules/@react-native-community/cli": {
@@ -16543,6 +16539,18 @@
       "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.88.tgz",
       "integrity": "sha512-tyHSEGw+CxJIt7IbyrZ+S+sAApY9QhjEpC7I695r09dP2hKzYnTjM5vg81e+zJUadFKH2tZO/hu83HdShQ5fBQ=="
     },
+    "node_modules/@ua/react-native-airship": {
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/@ua/react-native-airship/-/react-native-airship-15.2.0.tgz",
+      "integrity": "sha512-va/tfjzrJ5cmL9Z7CnluTq0Qu5rjljzlxyRpHu0vRX4WSKDlNLH4iS7lxJyJwiWMd0f3eTyMPLyp2VECqSWKsg==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@vercel/ncc": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/@vercel/ncc/-/ncc-0.27.0.tgz",
@@ -25230,8 +25238,8 @@
     },
     "node_modules/expensify-common": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#36d6f232d3b49d844d9226bc74f668b07cfa7f3c",
-      "integrity": "sha512-vDpxCEDm0GfeyW0uCf5//Q1RewA/r3GZ9v6lwNSUy5GJ9G2HOrxbt1HgblSI3OxPONSlC/IFnLNxlqnXsNJvLA==",
+      "resolved": "git+ssh://git@github.com/Expensify/expensify-common.git#9cf047b9741d3c02820d515dccb9e0a45b6595f5",
+      "integrity": "sha512-fKpvwc9npaWnL4FxZP/OKUE90lNMPut5O44psliSRHDajYVYONSknVv/1ZFQy9zFs8vcma0M8P5HrUc0YrClPA==",
       "license": "MIT",
       "dependencies": {
         "classnames": "2.3.1",
@@ -42929,15 +42937,6 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
-    "node_modules/urbanairship-react-native": {
-      "version": "14.6.1",
-      "resolved": "https://registry.npmjs.org/urbanairship-react-native/-/urbanairship-react-native-14.6.1.tgz",
-      "integrity": "sha512-ddL3ZWZnhwCja9oMpq7YHEyuqca1IH34MtMm24w1SePzGRhcVAvKOe/lncIB1FAK6QyjG0pkPT5mu3vE/DsPEw==",
-      "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -48661,13 +48660,11 @@
         "merge-options": "^3.0.4"
       }
     },
-    "@react-native-community/cameraroll": {
-      "version": "git+ssh://git@github.com/react-native-cameraroll/react-native-cameraroll.git#3f0aed96db68e134f199171c7b06c1b4d6cb382b",
-      "integrity": "sha512-ZbR82O+yIR/KC9oJT4QbUtnGiUC511CAHCE1VidEaD8e/JsD6zRjh4Fiy5sNuHRPIJl4g19mo3jBa+z8/pahQg==",
-      "from": "@react-native-community/cameraroll@git+https://github.com/react-native-cameraroll/react-native-cameraroll.git#3f0aed96db68e134f199171c7b06c1b4d6cb382b",
-      "requires": {
-        "invariant": "^2.2.4"
-      }
+    "@react-native-camera-roll/camera-roll": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@react-native-camera-roll/camera-roll/-/camera-roll-5.0.4.tgz",
+      "integrity": "sha512-3kBRgW3VfmLQmQm70gPUVDu8rPSZymoPc9vmeiPLMKBqtWaqPNuPX0jQ6mZ8AEtYbBdoWC360Q4YYPalXv37zA==",
+      "requires": {}
     },
     "@react-native-community/cli": {
       "version": "9.2.1",
@@ -57191,6 +57188,12 @@
       "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.88.tgz",
       "integrity": "sha512-tyHSEGw+CxJIt7IbyrZ+S+sAApY9QhjEpC7I695r09dP2hKzYnTjM5vg81e+zJUadFKH2tZO/hu83HdShQ5fBQ=="
     },
+    "@ua/react-native-airship": {
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/@ua/react-native-airship/-/react-native-airship-15.2.0.tgz",
+      "integrity": "sha512-va/tfjzrJ5cmL9Z7CnluTq0Qu5rjljzlxyRpHu0vRX4WSKDlNLH4iS7lxJyJwiWMd0f3eTyMPLyp2VECqSWKsg==",
+      "requires": {}
+    },
     "@vercel/ncc": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/@vercel/ncc/-/ncc-0.27.0.tgz",
@@ -64003,9 +64006,9 @@
       }
     },
     "expensify-common": {
-      "version": "git+ssh://git@github.com/Expensify/expensify-common.git#36d6f232d3b49d844d9226bc74f668b07cfa7f3c",
-      "integrity": "sha512-vDpxCEDm0GfeyW0uCf5//Q1RewA/r3GZ9v6lwNSUy5GJ9G2HOrxbt1HgblSI3OxPONSlC/IFnLNxlqnXsNJvLA==",
-      "from": "expensify-common@git+https://github.com/Expensify/expensify-common.git#36d6f232d3b49d844d9226bc74f668b07cfa7f3c",
+      "version": "git+ssh://git@github.com/Expensify/expensify-common.git#9cf047b9741d3c02820d515dccb9e0a45b6595f5",
+      "integrity": "sha512-fKpvwc9npaWnL4FxZP/OKUE90lNMPut5O44psliSRHDajYVYONSknVv/1ZFQy9zFs8vcma0M8P5HrUc0YrClPA==",
+      "from": "expensify-common@git+ssh://git@github.com/Expensify/expensify-common.git#9cf047b9741d3c02820d515dccb9e0a45b6595f5",
       "requires": {
         "classnames": "2.3.1",
         "clipboard": "2.0.4",
@@ -77596,12 +77599,6 @@
         }
       }
     },
-    "urbanairship-react-native": {
-      "version": "14.6.1",
-      "resolved": "https://registry.npmjs.org/urbanairship-react-native/-/urbanairship-react-native-14.6.1.tgz",
-      "integrity": "sha512-ddL3ZWZnhwCja9oMpq7YHEyuqca1IH34MtMm24w1SePzGRhcVAvKOe/lncIB1FAK6QyjG0pkPT5mu3vE/DsPEw==",
-      "requires": {}
-    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index 5b1eb502a0cd..9f41de89ef7f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.89-0",
+  "version": "1.2.92-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.",
@@ -50,7 +50,7 @@
     "@oguzhnatly/react-native-image-manipulator": "github:Expensify/react-native-image-manipulator#c5f654fc9d0ad7cc5b89d50b34ecf8b0e3f4d050",
     "@onfido/react-native-sdk": "7.4.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
-    "@react-native-community/cameraroll": "git+https://github.com/react-native-cameraroll/react-native-cameraroll.git#3f0aed96db68e134f199171c7b06c1b4d6cb382b",
+    "@react-native-camera-roll/camera-roll": "~5.0.1",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/netinfo": "^8.3.0",
@@ -64,11 +64,12 @@
     "@react-navigation/drawer": "github:Expensify/react-navigation#react-navigation-drawer-v6.5.0-alpha1-gitpkg",
     "@react-navigation/native": "6.0.13",
     "@react-navigation/stack": "6.3.1",
+    "@ua/react-native-airship": "^15.2.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "babel-polyfill": "^6.26.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+https://github.com/Expensify/expensify-common.git#36d6f232d3b49d844d9226bc74f668b07cfa7f3c",
+    "expensify-common": "git+ssh://git@github.com/Expensify/expensify-common.git#9cf047b9741d3c02820d515dccb9e0a45b6595f5",
     "fbjs": "^3.0.2",
     "html-entities": "^1.3.1",
     "htmlparser2": "^7.2.0",
@@ -121,8 +122,7 @@
     "save": "^2.4.0",
     "semver": "^7.3.8",
     "shim-keyboard-event-key": "^1.0.3",
-    "underscore": "^1.13.1",
-    "urbanairship-react-native": "^14.6.1"
+    "underscore": "^1.13.1"
   },
   "devDependencies": {
     "@actions/core": "1.10.0",
@@ -173,6 +173,7 @@
     "eslint-config-expensify": "^2.0.31",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.5.13",
     "flipper-plugin-bridgespy-client": "^0.1.9",
     "html-inline-script-webpack-plugin": "^3.1.0",
diff --git a/src/CONFIG.js b/src/CONFIG.js
index 6b8d191b514e..d430f9d9883a 100644
--- a/src/CONFIG.js
+++ b/src/CONFIG.js
@@ -84,4 +84,5 @@ export default {
     DEV_PORT: process.env.PORT || 8080,
     E2E_TESTING: lodashGet(Config, 'E2E_TESTING', 'false') === 'true',
     SEND_CRASH_REPORTS: lodashGet(Config, 'SEND_CRASH_REPORTS', 'false') === 'true',
+    IS_USING_WEB_PROXY: getPlatform() === 'web' && useWebProxy,
 };
diff --git a/src/CONST.js b/src/CONST.js
index 1981eaff576e..a13b69adac9d 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -19,7 +19,7 @@ const CONST = {
 
     API_ATTACHMENT_VALIDATIONS: {
         // Same as the PHP layer allows
-        ALLOWED_EXTENSIONS: ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'html', 'txt', 'rtf', 'doc', 'docx', 'htm', 'tiff', 'tif', 'xml', 'mp3', 'mp4', 'mov'],
+        ALLOWED_EXTENSIONS: ['webp', 'jpg', 'jpeg', 'png', 'gif', 'pdf', 'html', 'txt', 'rtf', 'doc', 'docx', 'htm', 'tiff', 'tif', 'xml', 'mp3', 'mp4', 'mov'],
 
         // 24 megabytes in bytes, this is limit set on servers, do not update without wider internal discussion
         MAX_SIZE: 25165824,
@@ -337,6 +337,48 @@ const CONST = {
                 IOU: 'IOU',
                 RENAMED: 'RENAMED',
                 CHRONOSOOOLIST: 'CHRONOSOOOLIST',
+                POLICYCHANGELOG: {
+                    UPDATE_NAME: 'POLICYCHANGELOG_UPDATE_NAME',
+                    UPDATE_CURRENCY: 'POLICYCHANGELOG_UPDATE_CURRENCY',
+                    UPDATE_OWNERSHIP: 'POLICYCHANGELOG_UPDATE_OWNERSHIP',
+                    UPDATE_AUTOHARVESTING: 'POLICYCHANGELOG_UPDATE_AUTOHARVESTING',
+                    UPDATE_AUTOREPORTING_FREQUENCY: 'POLICYCHANGELOG_UPDATE_AUTOREPORTING_FREQUENCY',
+                    UPDATE_DEFAULT_TITLE_ENFORCED: 'POLICYCHANGELOG_UPDATE_DEFAULT_TITLE_ENFORCED',
+                    UPDATE_REPORT_FIELD: 'POLICYCHANGELOG_UPDATE_REPORT_FIELD',
+                    ADD_REPORT_FIELD: 'POLICYCHANGELOG_ADD_REPORT_FIELD',
+                    DELETE_REPORT_FIELD: 'POLICYCHANGELOG_DELETE_REPORT_FIELD',
+                    UPDATE_DEFAULT_TITLE: 'POLICYCHANGELOG_UPDATE_DEFAULT_TITLE',
+                    ADD_CATEGORY: 'POLICYCHANGELOG_ADD_CATEGORY',
+                    DELETE_CATEGORY: 'POLICYCHANGELOG_DELETE_CATEGORY',
+                    SET_CATEGORY_NAME: 'POLICYCHANGELOG_SET_CATEGORY_NAME',
+                    UPDATE_CATEGORY: 'POLICYCHANGELOG_UPDATE_CATEGORY',
+                    ADD_TAG: 'POLICYCHANGELOG_ADD_TAG',
+                    UPDATE_TAG: 'POLICYCHANGELOG_UPDATE_TAG',
+                    DELETE_TAG: 'POLICYCHANGELOG_DELETE_TAG',
+                    UPDATE_TAG_NAME: 'POLICYCHANGELOG_UPDATE_TAG_NAME',
+                    UPDATE_TAG_LIST_NAME: 'POLICYCHANGELOG_UPDATE_TAG_LIST_NAME',
+                    IMPORT_TAGS: 'POLICYCHANGELOG_IMPORT_TAGS',
+                    DELETE_ALL_TAGS: 'POLICYCHANGELOG_DELETE_ALL_TAGS',
+                    ADD_APPROVER_RULE: 'POLICYCHANGELOG_ADD_APPROVER_RULE',
+                    UPDATE_APPROVER_RULE: 'POLICYCHANGELOG_UPDATE_APPROVER_RULE',
+                    DELETE_APPROVER_RULE: 'POLICYCHANGELOG_DELETE_APPROVER_RULE',
+                    ADD_EMPLOYEE: 'POLICYCHANGELOG_ADD_EMPLOYEE',
+                    DELETE_EMPLOYEE: 'POLICYCHANGELOG_DELETE_EMPLOYEE',
+                    UPDATE_EMPLOYEE: 'POLICYCHANGELOG_UPDATE_EMPLOYEE',
+                    SET_AUTO_JOIN: 'POLICYCHANGELOG_SET_AUTO_JOIN',
+                    ADD_INTEGRATION: 'POLICYCHANGELOG_ADD_INTEGRATION',
+                    DELETE_INTEGRATION: 'POLICYCHANGELOG_DELETE_INTEGRATION',
+                    UPDATE_ACH_ACCOUNT: 'POLICYCHANGELOG_UPDATE_ACH_ACCOUNT',
+                    UPDATE_REIMBURSEMENT_CHOICE: 'POLICYCHANGELOG_UPDATE_REIMBURSEMENT_CHOICE',
+                    SET_AUTOREIMBURSEMENT: 'POLICYCHANGELOG_SET_AUTOREIMBURSEMENT',
+                    ADD_CUSTOM_UNIT: 'POLICYCHANGELOG_ADD_CUSTOM_UNIT',
+                    DELETE_CUSTOM_UNIT: 'POLICYCHANGELOG_DELETE_CUSTOM_UNIT',
+                    UPDATE_CUSTOM_UNIT: 'POLICYCHANGELOG_UPDATE_CUSTOM_UNIT',
+                    UPDATE_CUSTOM_UNIT_RATE: 'POLICYCHANGELOG_UPDATE_CUSTOM_UNIT_RATE',
+                    ADD_CUSTOM_UNIT_RATE: 'POLICYCHANGELOG_ADD_CUSTOM_UNIT_RATE',
+                    DELETE_CUSTOM_UNIT_RATE: 'POLICYCHANGELOG_DELETE_CUSTOM_UNIT_RATE',
+                    UPDATE_FIELD: 'POLICYCHANGELOG_UPDATE_FIELD',
+                },
             },
         },
         ARCHIVE_REASON: {
diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
index 42a4a2d651be..9db87bcba6db 100755
--- a/src/ONYXKEYS.js
+++ b/src/ONYXKEYS.js
@@ -105,6 +105,7 @@ export default {
         REPORT: 'report_',
         REPORT_ACTIONS: 'reportActions_',
         REPORT_DRAFT_COMMENT: 'reportDraftComment_',
+        REPORT_DRAFT_COMMENT_NUMBER_OF_LINES: 'reportDraftCommentNumberOfLines_',
         REPORT_ACTIONS_DRAFTS: 'reportActionsDrafts_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         POLICY: 'policy_',
diff --git a/src/ROUTES.js b/src/ROUTES.js
index 2cbe87a4361e..2412e7e42550 100644
--- a/src/ROUTES.js
+++ b/src/ROUTES.js
@@ -51,6 +51,8 @@ export default {
     SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: `${SETTINGS_PERSONAL_DETAILS}/date-of-birth`,
     SETTINGS_PERSONAL_DETAILS_ADDRESS: `${SETTINGS_PERSONAL_DETAILS}/address`,
     SETTINGS_CONTACT_METHODS,
+    SETTINGS_CONTACT_METHOD_DETAILS: `${SETTINGS_CONTACT_METHODS}/:contactMethod/details`,
+    getEditContactMethodRoute: contactMethod => `${SETTINGS_CONTACT_METHODS}/${encodeURIComponent(contactMethod)}/details`,
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     REPORT,
diff --git a/src/components/AddressSearch.js b/src/components/AddressSearch.js
index 7e22542c0484..683d3556dec4 100644
--- a/src/components/AddressSearch.js
+++ b/src/components/AddressSearch.js
@@ -105,8 +105,9 @@ const AddressSearch = (props) => {
         const {
             street_number: streetNumber,
             route: streetName,
-            locality: city,
-            sublocality: cityFallback, // Some locations only return sublocality instead of locality
+            locality,
+            sublocality,
+            postal_town: postalTown,
             postal_code: zipCode,
             administrative_area_level_1: state,
             country,
@@ -115,6 +116,7 @@ const AddressSearch = (props) => {
             route: 'long_name',
             locality: 'long_name',
             sublocality: 'long_name',
+            postal_town: 'long_name',
             postal_code: 'long_name',
             administrative_area_level_1: 'short_name',
             country: 'short_name',
@@ -128,12 +130,19 @@ const AddressSearch = (props) => {
             administrative_area_level_1: 'long_name',
         });
 
+        // Make sure that the order of keys remains such that the country is always set above the state.
+        // Refer to https://github.com/Expensify/App/issues/15633 for more information.
         const values = {
             street: props.value ? props.value.trim() : '',
-            city: city || cityFallback,
+
+            // When locality is not returned, many countries return the city as postalTown (e.g. 5 New Street
+            // Square, London), otherwise as sublocality (e.g. 384 Court Street Brooklyn). If postalTown is
+            // returned, the sublocality will be a city subdivision so shouldn't take precedence (e.g.
+            // Salagatan, Upssala, Sweden).
+            city: locality || postalTown || sublocality,
             zipCode,
-            state,
             country: '',
+            state,
         };
 
         // If the address is not in the US, use the full length state name since we're displaying the address's
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
index 86e9e9690a96..87835062a959 100644
--- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
+++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.js
@@ -22,7 +22,9 @@ const propTypes = {
     onPressOut: PropTypes.func,
 
     /** If a file download is happening */
-    download: PropTypes.bool,
+    download: PropTypes.shape({
+        isDownloading: PropTypes.bool.isRequired,
+    }),
 
     ...anchorForAttachmentsOnlyPropTypes,
 };
@@ -30,7 +32,7 @@ const propTypes = {
 const defaultProps = {
     onPressIn: undefined,
     onPressOut: undefined,
-    download: false,
+    download: {isDownloading: false},
     ...anchorForAttachmentsOnlyDefaultProps,
 };
 
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 144d0aaa0874..bd232526bd9b 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -196,6 +196,7 @@ class AttachmentCarousel extends React.Component {
                     <AttachmentView
                         onPress={() => this.toggleArrowsVisibility(!this.state.shouldShowArrow)}
                         source={authSource}
+                        key={authSource}
                         file={this.state.file}
                     />
                 </CarouselActions>
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index b9b276520ff3..9cc38f234c5f 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -95,7 +95,7 @@ const AvatarCropModal = (props) => {
         // Even if the browser height is reduced too much, the relative height should not be negative
         const relativeHeight = Math.max(height - styles.imageCropRotateButton.height, CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
         setImageContainerSize(Math.floor(Math.min(relativeHeight, width)));
-    }, [props.isSmallScreenWidth]);
+    }, []);
 
     // An onLayout callback, that initializes the slider container size, for proper render of a slider
     const initializeSliderContainer = useCallback((event) => {
@@ -117,15 +117,16 @@ const AvatarCropModal = (props) => {
         setSliderContainerSize(CONST.AVATAR_CROP_MODAL.INITIAL_SIZE);
         setIsImageContainerInitialized(false);
         setIsImageInitialized(false);
-    }, []);
+    }, [originalImageHeight, originalImageWidth, prevMaxOffsetX, prevMaxOffsetY, rotation, scale, translateSlider, translateX, translateY]);
 
     // In order to calculate proper image position/size/animation, we have to know its size.
     // And we have to update image size if image url changes.
+    const imageUri = props.imageUri;
     useEffect(() => {
-        if (!props.imageUri) {
+        if (!imageUri) {
             return;
         }
-        Image.getSize(props.imageUri, (width, height) => {
+        Image.getSize(imageUri, (width, height) => {
             // We need to have image sizes in shared values to properly calculate position/size/animation
             originalImageHeight.value = height;
             originalImageWidth.value = width;
@@ -137,7 +138,7 @@ const AvatarCropModal = (props) => {
             translateSlider.value += 0.01;
             rotation.value += 360;
         });
-    }, [props.imageUri]);
+    }, [imageUri, originalImageHeight, originalImageWidth, rotation, translateSlider]);
 
     /**
      * Validates that value is within the provided mix/max range.
@@ -245,7 +246,7 @@ const AvatarCropModal = (props) => {
         }
         prevMaxOffsetX.value = maxOffsetX;
         prevMaxOffsetY.value = maxOffsetY;
-    }, [imageContainerSize]);
+    }, [getDisplayedImageSize, imageContainerSize, prevMaxOffsetX, prevMaxOffsetY, translateX, translateY]);
 
     /**
      * Calculates new scale value and updates images offset to ensure
@@ -283,7 +284,7 @@ const AvatarCropModal = (props) => {
             [CONST.AVATAR_CROP_MODAL.MIN_SCALE, CONST.AVATAR_CROP_MODAL.MAX_SCALE],
             [0, sliderContainerSize],
         );
-    }, [sliderContainerSize]);
+    }, [scale.value, sliderContainerSize, translateSlider]);
 
     // Rotates the image by changing the rotation value by 90 degrees
     // and updating the position so the image remains in the same place after rotation
@@ -298,7 +299,7 @@ const AvatarCropModal = (props) => {
             originalImageWidth.value,
             originalImageHeight.value,
         ];
-    }, []);
+    }, [originalImageHeight.value, originalImageWidth.value, rotation, translateX.value, translateY.value]);
 
     // Crops an image that was provided in the imageUri prop, using the current position/scale
     // then calls onSave and onClose callbacks
@@ -333,7 +334,7 @@ const AvatarCropModal = (props) => {
                 props.onClose();
                 props.onSave(newImage);
             });
-    }, [props.imageUri, props.imageName, props.imageType, imageContainerSize]);
+    }, [originalImageHeight.value, originalImageWidth.value, scale.value, translateX.value, imageContainerSize, translateY.value, props, rotation.value]);
 
     /**
      * @param {Number} locationX
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.js
index 4a04231c805e..93d6e3d82a73 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.js
@@ -16,17 +16,18 @@ import walletTermsPropTypes from '../pages/EnablePayments/walletTermsPropTypes';
 import * as PolicyUtils from '../libs/PolicyUtils';
 import * as PaymentMethods from '../libs/actions/PaymentMethods';
 import * as ReportUtils from '../libs/ReportUtils';
+import * as UserUtils from '../libs/UserUtils';
+import themeColors from '../styles/themes/default';
 
 const propTypes = {
     /** URL for the avatar */
     source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
-    /** Avatar size */
-    size: PropTypes.string,
-
     /** To show a tooltip on hover */
     tooltipText: PropTypes.string,
 
+    /* Onyx Props */
+
     /** The employee list of all policies (coming from Onyx) */
     policiesMemberList: PropTypes.objectOf(policyMemberPropType),
 
@@ -44,10 +45,18 @@ const propTypes = {
 
     /** Information about the user accepting the terms for payments */
     walletTerms: walletTermsPropTypes,
+
+    /** Login list for the user that is signed in */
+    loginList: PropTypes.shape({
+        /** Date login was validated, used to show info indicator status */
+        validatedDate: PropTypes.string,
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
 };
 
 const defaultProps = {
-    size: 'default',
     tooltipText: '',
     policiesMemberList: {},
     policies: {},
@@ -55,45 +64,47 @@ const defaultProps = {
     cardList: {},
     userWallet: {},
     walletTerms: {},
+    loginList: {},
 };
 
 const AvatarWithIndicator = (props) => {
-    const isLarge = props.size === 'large';
-    const indicatorStyles = [
-        styles.alignItemsCenter,
-        styles.justifyContentCenter,
-        isLarge ? styles.statusIndicatorLarge : styles.statusIndicator,
-    ];
-
     // If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
     // those should be cleaned out before doing any error checking
     const cleanPolicies = _.pick(props.policies, policy => policy);
     const cleanPolicyMembers = _.pick(props.policiesMemberList, member => member);
 
-    // All of the error-checking methods are put into an array. This is so that using _.some() will return
-    // early as soon as the first error is returned. This makes the error checking very efficient since
-    // we only care if a single error exists anywhere.
+    // All of the error & info-checking methods are put into an array. This is so that using _.some() will return
+    // early as soon as the first error / info condition is returned. This makes the checks very efficient since
+    // we only care if a single error / info condition exists anywhere.
     const errorCheckingMethods = [
         () => !_.isEmpty(props.userWallet.errors),
         () => PaymentMethods.hasPaymentMethodError(props.bankAccountList, props.cardList),
         () => _.some(cleanPolicies, PolicyUtils.hasPolicyError),
         () => _.some(cleanPolicies, PolicyUtils.hasCustomUnitsError),
         () => _.some(cleanPolicyMembers, PolicyUtils.hasPolicyMemberError),
+        () => UserUtils.hasLoginListError(props.loginList),
 
         // Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
         () => !_.isEmpty(props.walletTerms.errors) && !props.walletTerms.chatReportID,
     ];
-    const shouldShowIndicator = _.some(errorCheckingMethods, errorCheckingMethod => errorCheckingMethod());
+    const infoCheckingMethods = [
+        () => UserUtils.hasLoginListInfo(props.loginList),
+    ];
+    const shouldShowErrorIndicator = _.some(errorCheckingMethods, errorCheckingMethod => errorCheckingMethod());
+    const shouldShowInfoIndicator = !shouldShowErrorIndicator && _.some(infoCheckingMethods, infoCheckingMethod => infoCheckingMethod());
+
+    const indicatorColor = shouldShowErrorIndicator ? themeColors.danger : themeColors.success;
+    const indicatorStyles = [
+        styles.alignItemsCenter,
+        styles.justifyContentCenter,
+        styles.statusIndicator(indicatorColor),
+    ];
 
     return (
-        <View style={[isLarge ? styles.avatarLarge : styles.sidebarAvatar]}>
+        <View style={[styles.sidebarAvatar]}>
             <Tooltip text={props.tooltipText}>
-                <Avatar
-                    imageStyles={[isLarge ? styles.avatarLarge : null]}
-                    source={ReportUtils.getSmallSizeAvatar(props.source)}
-                    size={props.size}
-                />
-                {shouldShowIndicator && (
+                <Avatar source={ReportUtils.getSmallSizeAvatar(props.source)} />
+                {(shouldShowErrorIndicator || shouldShowInfoIndicator) && (
                     <View style={StyleSheet.flatten(indicatorStyles)} />
                 )}
             </Tooltip>
@@ -124,4 +135,7 @@ export default withOnyx({
     walletTerms: {
         key: ONYXKEYS.WALLET_TERMS,
     },
+    loginList: {
+        key: ONYXKEYS.LOGIN_LIST,
+    },
 })(AvatarWithIndicator);
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index 4267d696af8f..1d0188ac305c 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -8,7 +8,6 @@ import Text from '../Text';
 import themeColors from '../../styles/themes/default';
 import TextLink from '../TextLink';
 import Navigation from '../../libs/Navigation/Navigation';
-import ROUTES from '../../ROUTES';
 
 const propTypes = {
     /** Expensicon for the page */
@@ -51,7 +50,7 @@ const BlockingView = props => (
         {props.shouldShowBackHomeLink
             ? (
                 <TextLink
-                    onPress={() => Navigation.navigate(ROUTES.REPORT)}
+                    onPress={() => Navigation.dismissModal(true)}
                     style={[styles.link, styles.mt2]}
                 >
                     {props.link}
diff --git a/src/components/CalendarPicker/index.js b/src/components/CalendarPicker/index.js
index d0103d03f959..a1b36a07bae5 100644
--- a/src/components/CalendarPicker/index.js
+++ b/src/components/CalendarPicker/index.js
@@ -2,6 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {View, TouchableOpacity, Pressable} from 'react-native';
 import moment from 'moment';
+import Str from 'expensify-common/lib/str';
 import Text from '../Text';
 import ArrowIcon from './ArrowIcon';
 import styles from '../../styles/styles';
@@ -18,8 +19,8 @@ class CalendarPicker extends React.PureComponent {
     constructor(props) {
         super(props);
 
-        this.monthNames = moment.localeData(props.preferredLocale).months();
-        this.daysOfWeek = moment.localeData(props.preferredLocale).weekdays();
+        this.monthNames = _.map(moment.localeData(props.preferredLocale).months(), Str.recapitalize);
+        this.daysOfWeek = _.map(moment.localeData(props.preferredLocale).weekdays(), day => day.toUpperCase());
 
         let currentDateView = props.value;
         if (props.selectedYear) {
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index 6eeef6d3fa1b..391dc68cdc04 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -26,6 +26,12 @@ const propTypes = {
     /** The value of the comment box */
     value: PropTypes.string,
 
+    /** Number of lines for the comment */
+    numberOfLines: PropTypes.number,
+
+    /** Callback method to update number of lines for the comment */
+    onNumberOfLinesChange: PropTypes.func,
+
     /** Callback method to handle pasting a file */
     onPasteFile: PropTypes.func,
 
@@ -75,6 +81,8 @@ const propTypes = {
 const defaultProps = {
     defaultValue: undefined,
     value: undefined,
+    numberOfLines: 1,
+    onNumberOfLinesChange: () => {},
     maxLines: -1,
     onPasteFile: () => {},
     shouldClear: false,
@@ -116,7 +124,7 @@ class Composer extends React.Component {
             : `${props.value || ''}`;
 
         this.state = {
-            numberOfLines: 1,
+            numberOfLines: props.numberOfLines,
             selection: {
                 start: initialValue.length,
                 end: initialValue.length,
@@ -162,7 +170,8 @@ class Composer extends React.Component {
         if (prevProps.value !== this.props.value
             || prevProps.defaultValue !== this.props.defaultValue
             || prevProps.isComposerFullSize !== this.props.isComposerFullSize
-            || prevProps.windowWidth !== this.props.windowWidth) {
+            || prevProps.windowWidth !== this.props.windowWidth
+            || prevProps.numberOfLines !== this.props.numberOfLines) {
             this.updateNumberOfLines();
         }
 
@@ -334,11 +343,13 @@ class Composer extends React.Component {
             const lineHeight = parseInt(computedStyle.lineHeight, 10) || 20;
             const paddingTopAndBottom = parseInt(computedStyle.paddingBottom, 10)
             + parseInt(computedStyle.paddingTop, 10);
-            const numberOfLines = getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight);
+            const computedNumberOfLines = getNumberOfLines(this.props.maxLines, lineHeight, paddingTopAndBottom, this.textInput.scrollHeight);
+            const numberOfLines = computedNumberOfLines === 0 ? this.props.numberOfLines : computedNumberOfLines;
             updateIsFullComposerAvailable(this.props, numberOfLines);
             this.setState({
                 numberOfLines,
             });
+            this.props.onNumberOfLinesChange(numberOfLines);
         });
     }
 
@@ -357,7 +368,6 @@ class Composer extends React.Component {
                 selection={this.state.selection}
                 onChange={this.shouldCallUpdateNumberOfLines}
                 onSelectionChange={this.onSelectionChange}
-                numberOfLines={this.state.numberOfLines}
                 style={[
                     propStyles,
 
@@ -367,6 +377,7 @@ class Composer extends React.Component {
                 ]}
                 /* eslint-disable-next-line react/jsx-props-no-spreading */
                 {...propsWithoutStyles}
+                numberOfLines={this.state.numberOfLines}
                 disabled={this.props.isDisabled}
             />
         );
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index 2c5f061327ae..2041d72835c6 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -44,6 +44,7 @@ class CategoryShortcutButton extends PureComponent {
                 ])}
             >
                 <Tooltip
+                    focusable={false}
                     containerStyles={[styles.flex1, styles.alignSelfStretch, styles.alignItemsCenter, styles.justifyContentCenter]}
                     text={this.props.translate(`emojiPicker.headers.${this.props.code}`)}
                     shiftVertical={-4}
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index 1683f01a5c55..369365a8db84 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -78,13 +78,19 @@ class EmojiPicker extends React.Component {
         }
     }
 
-    hideEmojiPicker() {
+    /**
+     * Hide the emoji picker menu.
+     *
+     * @param {Boolean} isNavigating
+     */
+    hideEmojiPicker(isNavigating) {
+        if (isNavigating) { this.onModalHide = () => {}; }
         this.emojiPopoverAnchor = null;
         this.setState({isEmojiPickerVisible: false});
     }
 
     /**
-     * Show the ReportActionContextMenu modal popover.
+     * Show the emoji picker menu.
      *
      * @param {Function} [onModalHide=() => {}] - Run a callback when Modal hides.
      * @param {Function} [onEmojiSelected=() => {}] - Run a callback when Emoji selected.
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 33ea1370bc44..5026c6adb259 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -168,6 +168,13 @@ class EmojiPickerMenu extends Component {
                 return;
             }
 
+            // Return if the key is related to any tab cycling event so that the default logic
+            // can be executed.
+            if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Shift' || keyBoardEvent.key === 'Enter') {
+                this.setState({isUsingKeyboardMovement: true});
+                return;
+            }
+
             // We allow typing in the search box if any key is pressed apart from Arrow keys.
             if (this.searchInput && !this.searchInput.isFocused()) {
                 this.setState({selectTextOnFocus: false});
@@ -453,6 +460,8 @@ class EmojiPickerMenu extends Component {
             ? types[this.props.preferredSkinTone]
             : code;
 
+        const isEmojiFocused = index === this.state.highlightedIndex && this.state.isUsingKeyboardMovement;
+
         return (
             <EmojiPickerMenuItem
                 onPress={emoji => this.addToFrequentAndSelectEmoji(emoji, item)}
@@ -464,6 +473,13 @@ class EmojiPickerMenu extends Component {
                     this.setState({highlightedIndex: -1});
                 }}
                 emoji={emojiCode}
+                onFocus={() => this.setState({highlightedIndex: index})}
+                onBlur={() => this.setState(prevState => ({
+                    // Only clear the highlighted index if the highlighted index is the same,
+                    // meaning that the focus changed to an element that is not an emoji item.
+                    highlightedIndex: prevState.highlightedIndex === index ? -1 : prevState.highlightedIndex,
+                }))}
+                isFocused={isEmojiFocused}
                 isHighlighted={index === this.state.highlightedIndex}
                 isUsingKeyboardMovement={this.state.isUsingKeyboardMovement}
             />
@@ -507,6 +523,7 @@ class EmojiPickerMenu extends Component {
                                 styles.dFlex,
                                 styles.alignItemsCenter,
                                 styles.justifyContentCenter,
+                                styles.flexGrow1,
                                 this.isMobileLandscape() && styles.emojiPickerListLandscape,
                             ]}
                         >
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem.js b/src/components/EmojiPicker/EmojiPickerMenuItem.js
index 60be79adb9d5..c3427059f205 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Pressable} from 'react-native';
 import styles from '../../styles/styles';
@@ -19,40 +19,81 @@ const propTypes = {
     /** Handles what to do when the hover is out */
     onHoverOut: PropTypes.func,
 
+    /** Handles what to do when the pressable is focused */
+    onFocus: PropTypes.func,
+
+    /** Handles what to do when the pressable is blurred */
+    onBlur: PropTypes.func,
+
     /** Whether this menu item is currently highlighted or not */
     isHighlighted: PropTypes.bool,
 
+    /** Whether this menu item is currently focused or not */
+    isFocused: PropTypes.bool,
+
     /** Whether the emoji is highlighted by the keyboard/mouse */
     isUsingKeyboardMovement: PropTypes.bool,
 };
 
-const EmojiPickerMenuItem = props => (
-    <Pressable
-        onPress={() => props.onPress(props.emoji)}
-        onHoverIn={props.onHoverIn}
-        onHoverOut={props.onHoverOut}
-        style={({
-            pressed,
-        }) => ([
-            StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
-            props.isHighlighted && props.isUsingKeyboardMovement ? styles.emojiItemKeyboardHighlighted : {},
-            props.isHighlighted && !props.isUsingKeyboardMovement ? styles.emojiItemHighlighted : {},
-            styles.emojiItem,
-        ])}
-    >
-        <Text style={[styles.emojiText]}>
-            {props.emoji}
-        </Text>
-    </Pressable>
+class EmojiPickerMenuItem extends PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.ref = null;
+    }
+
+    componentDidMount() {
+        if (!this.props.isFocused) {
+            return;
+        }
+        this.ref.focus();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.isFocused === this.props.isFocused) {
+            return;
+        }
+        if (!this.props.isFocused) {
+            return;
+        }
+        this.ref.focus();
+    }
+
+    render() {
+        return (
+            <Pressable
+                onPress={() => this.props.onPress(this.props.emoji)}
+                onHoverIn={this.props.onHoverIn}
+                onHoverOut={this.props.onHoverOut}
+                onFocus={this.props.onFocus}
+                onBlur={this.props.onBlur}
+                ref={ref => this.ref = ref}
+                style={({
+                    pressed,
+                }) => ([
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    this.props.isHighlighted && this.props.isUsingKeyboardMovement ? styles.emojiItemKeyboardHighlighted : {},
+                    this.props.isHighlighted && !this.props.isUsingKeyboardMovement ? styles.emojiItemHighlighted : {},
+                    styles.emojiItem,
+                ])}
+            >
+                <Text style={[styles.emojiText]}>
+                    {this.props.emoji}
+                </Text>
+            </Pressable>
+        );
+    }
+}
 
-);
 EmojiPickerMenuItem.propTypes = propTypes;
-EmojiPickerMenuItem.displayName = 'EmojiPickerMenuItem';
 EmojiPickerMenuItem.defaultProps = {
     isHighlighted: false,
+    isFocused: false,
     isUsingKeyboardMovement: false,
     onHoverIn: () => {},
     onHoverOut: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
 };
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
diff --git a/src/components/Form.js b/src/components/Form.js
index 633a93dfaef2..9ab4e57da392 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -255,6 +255,11 @@ class Form extends React.Component {
                 this.state.inputValues[inputID] = defaultValue;
             }
 
+            // We force the form to set the input value from the defaultValue props if there is a saved valid value
+            if (child.props.shouldUseDefaultValue) {
+                this.state.inputValues[inputID] = child.props.defaultValue;
+            }
+
             if (!_.isUndefined(child.props.value)) {
                 this.state.inputValues[inputID] = child.props.value;
             }
@@ -272,7 +277,6 @@ class Form extends React.Component {
                 ref: (node) => {
                     this.inputRefs[inputID] = node;
 
-                    // Call the original ref, if any
                     const {ref} = child;
                     if (_.isFunction(ref)) {
                         ref(node);
@@ -280,7 +284,7 @@ class Form extends React.Component {
                 },
                 value: this.state.inputValues[inputID],
                 errorText: this.state.errors[inputID] || fieldErrorMessage,
-                onBlur: () => {
+                onBlur: (event) => {
                     // We delay the validation in order to prevent Checkbox loss of focus when
                     // the user are focusing a TextInput and proceeds to toggle a CheckBox in
                     // web and mobile web platforms.
@@ -288,6 +292,10 @@ class Form extends React.Component {
                         this.setTouchedInput(inputID);
                         this.validate(this.state.inputValues);
                     }, 200);
+
+                    if (_.isFunction(child.props.onBlur)) {
+                        child.props.onBlur(event);
+                    }
                 },
                 onInputChange: (value, key) => {
                     const inputKey = key || inputID;
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 8c27cba1f7a8..be8c8a1fc3eb 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -16,6 +16,7 @@ import AnchorForCommentsOnly from '../../AnchorForCommentsOnly';
 import AnchorForAttachmentsOnly from '../../AnchorForAttachmentsOnly';
 import * as Url from '../../../libs/Url';
 import ROUTES from '../../../ROUTES';
+import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 
 const AnchorRenderer = (props) => {
     const htmlAttribs = props.tnode.attributes;
@@ -77,7 +78,7 @@ const AnchorRenderer = (props) => {
     if (isAttachment) {
         return (
             <AnchorForAttachmentsOnly
-                source={attrHref}
+                source={tryResolveUrlFromApiRoot(attrHref)}
                 displayName={displayName}
             />
         );
diff --git a/src/components/HTMLEngineProvider/applyStrikethrough/index.js b/src/components/HTMLEngineProvider/applyStrikethrough/index.js
new file mode 100644
index 000000000000..b754a37dbde9
--- /dev/null
+++ b/src/components/HTMLEngineProvider/applyStrikethrough/index.js
@@ -0,0 +1,5 @@
+function applyStrikethrough(html) {
+    return html;
+}
+
+export default applyStrikethrough;
diff --git a/src/components/HTMLEngineProvider/applyStrikethrough/index.native.js b/src/components/HTMLEngineProvider/applyStrikethrough/index.native.js
new file mode 100644
index 000000000000..266e4eb20f62
--- /dev/null
+++ b/src/components/HTMLEngineProvider/applyStrikethrough/index.native.js
@@ -0,0 +1,8 @@
+function applyStrikethrough(html, isPendingDelete) {
+    if (isPendingDelete) {
+        return `<del>${html}</del>`;
+    }
+    return html;
+}
+
+export default applyStrikethrough;
diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
index 2f10cca0c1e3..12145b93b260 100644
--- a/src/components/Hoverable/index.js
+++ b/src/components/Hoverable/index.js
@@ -69,19 +69,15 @@ class Hoverable extends Component {
                 onMouseEnter: (el) => {
                     this.setIsHovered(true);
 
-                    // Call the original onMouseEnter, if any
-                    const {onMouseEnter} = this.props.children;
-                    if (_.isFunction(onMouseEnter)) {
-                        onMouseEnter(el);
+                    if (_.isFunction(this.props.children.props.onMouseEnter)) {
+                        this.props.children.props.onMouseEnter(el);
                     }
                 },
                 onMouseLeave: (el) => {
                     this.setIsHovered(false);
 
-                    // Call the original onMouseLeave, if any
-                    const {onMouseLeave} = this.props.children;
-                    if (_.isFunction(onMouseLeave)) {
-                        onMouseLeave(el);
+                    if (_.isFunction(this.props.children.props.onMouseLeave)) {
+                        this.props.children.props.onMouseLeave(el);
                     }
                 },
                 onBlur: (el) => {
@@ -89,10 +85,8 @@ class Hoverable extends Component {
                         this.setIsHovered(false);
                     }
 
-                    // Call the original onBlur, if any
-                    const {onBlur} = this.props.children;
-                    if (_.isFunction(onBlur)) {
-                        onBlur(el);
+                    if (_.isFunction(this.props.children.props.onBlur)) {
+                        this.props.children.props.onBlur(el);
                     }
                 },
             });
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
index c65030afc407..269f642d8ed5 100644
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@@ -52,7 +52,7 @@ class Icon extends PureComponent {
         if (this.props.inline) {
             return (
                 <View
-                    accessibilityHint={`${this.props.src.name} Icon`}
+                    testID={`${this.props.src.name} Icon`}
                     style={[StyleUtils.getWidthAndHeightStyle(width, height), styles.bgTransparent, styles.overflowVisible]}
                 >
                     <View style={iconStyles}>
@@ -68,7 +68,7 @@ class Icon extends PureComponent {
 
         return (
             <View
-                accessibilityHint={`${this.props.src.name} Icon`}
+                testID={`${this.props.src.name} Icon`}
                 style={this.props.additionalStyles}
             >
                 <this.props.src
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index a07b95a3675f..c8f9e36f21b2 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -127,7 +127,7 @@ const OptionRowLHN = (props) => {
                             hovered && !props.isFocused ? props.hoverStyle : null,
                         ]}
                     >
-                        <View accessibilityHint="Navigates to a chat" style={sidebarInnerRowStyle}>
+                        <View accessibilityHint={props.translate('accessibilityHints.navigatesToChat')} style={sidebarInnerRowStyle}>
                             <View
                                 style={[
                                     styles.flexRow,
@@ -168,7 +168,7 @@ const OptionRowLHN = (props) => {
                                 <View style={contentContainerStyles}>
                                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, styles.overflowHidden]}>
                                         <DisplayNames
-                                            accessibilityLabel="Chat user display names"
+                                            accessibilityLabel={props.translate('accessibilityHints.chatUserDisplayNames')}
                                             fullTitle={optionItem.text}
                                             displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
                                             tooltipEnabled
@@ -179,7 +179,7 @@ const OptionRowLHN = (props) => {
                                         {optionItem.isChatRoom && (
                                             <TextPill
                                                 style={textPillStyle}
-                                                accessibilityLabel="Workspace name"
+                                                accessibilityLabel={props.translate('accessibilityHints.workspaceName')}
                                                 text={optionItem.subtitle}
                                             />
                                         )}
@@ -188,7 +188,7 @@ const OptionRowLHN = (props) => {
                                         <Text
                                             style={alternateTextStyle}
                                             numberOfLines={1}
-                                            accessibilityLabel="Last chat message preview"
+                                            accessibilityLabel={props.translate('accessibilityHints.lastChatMessagePreview')}
                                         >
                                             {optionItem.alternateText}
                                         </Text>
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 2942f250ce83..653dd180c209 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -63,7 +63,7 @@ const MenuItem = (props) => {
     const descriptionTextStyle = StyleUtils.combineStyles([
         styles.textLabelSupporting,
         (props.icon ? styles.ml3 : undefined),
-        styles.breakAll,
+        styles.breakWord,
         styles.lineHeightNormal,
     ], props.style);
 
diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
index 8c14ee72884a..1e314654bba3 100644
--- a/src/components/Modal/BaseModal.js
+++ b/src/components/Modal/BaseModal.js
@@ -65,6 +65,7 @@ class BaseModal extends PureComponent {
         if (callHideCallback) {
             this.props.onModalHide();
         }
+        Modal.onModalDidClose();
     }
 
     render() {
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 29c2e3c5d0ce..b9e9632dede5 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -105,7 +105,8 @@ class OptionRow extends Component {
             || this.props.option.shouldShowSubscript !== nextProps.option.shouldShowSubscript
             || this.props.option.ownerEmail !== nextProps.option.ownerEmail
             || this.props.option.subtitle !== nextProps.option.subtitle
-            || this.props.option.pendingAction !== nextProps.option.pendingAction;
+            || this.props.option.pendingAction !== nextProps.option.pendingAction
+            || this.props.option.customIcon !== nextProps.option.customIcon;
     }
 
     componentDidUpdate(prevProps) {
@@ -124,7 +125,8 @@ class OptionRow extends Component {
         const textUnreadStyle = (this.props.boldStyle || this.props.option.boldStyle)
             ? [textStyle, styles.sidebarLinkTextBold] : [textStyle];
         const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, textUnreadStyle, this.props.style, styles.pre);
-        const alternateTextStyle = StyleUtils.combineStyles(textStyle, styles.optionAlternateText, styles.textLabelSupporting, this.props.style, styles.pre);
+        const alternateTextStyle = StyleUtils.combineStyles(textStyle, styles.optionAlternateText, styles.textLabelSupporting, this.props.style,
+            lodashGet(this.props.option, 'alternateTextMaxLines', 1) === 1 ? styles.pre : styles.preWrap);
         const contentContainerStyles = [styles.flex1];
         const sidebarInnerRowStyle = StyleSheet.flatten([
             styles.chatLinkRowPressable,
@@ -232,7 +234,7 @@ class OptionRow extends Component {
                                     }
                                     <View style={contentContainerStyles}>
                                         <DisplayNames
-                                            accessibilityLabel="Chat user display names"
+                                            accessibilityLabel={this.props.translate('accessibilityHints.chatUserDisplayNames')}
                                             fullTitle={this.props.option.text}
                                             displayNamesWithTooltips={displayNamesWithTooltips}
                                             tooltipEnabled={this.props.showTitleTooltip}
diff --git a/src/components/Picker/Picker.js b/src/components/Picker/Picker.js
index 98aba4e630c3..fc52a45ff97e 100644
--- a/src/components/Picker/Picker.js
+++ b/src/components/Picker/Picker.js
@@ -78,12 +78,16 @@ const propTypes = {
 
     /** Additional events passed to the core Picker for specific platforms such as web */
     additionalPickerEvents: PropTypes.func,
+
+    /** Hint text that appears below the picker */
+    hintText: PropTypes.string,
 };
 
 const defaultProps = {
     label: '',
     isDisabled: false,
     errorText: '',
+    hintText: '',
     containerStyles: [],
     backgroundColor: undefined,
     inputID: undefined,
@@ -172,6 +176,27 @@ class Picker extends PureComponent {
     render() {
         const hasError = !_.isEmpty(this.props.errorText);
 
+        if (this.props.isDisabled) {
+            return (
+                <View>
+                    {this.props.label && (
+                        <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
+                            {this.props.label}
+                        </Text>
+                    )}
+                    <Text numberOfLines={1}>
+                        {this.props.value}
+                    </Text>
+                    {this.props.hintText
+                    && (
+                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                            {this.props.hintText}
+                        </Text>
+                    )}
+                </View>
+            );
+        }
+
         return (
             <>
                 <View
@@ -230,6 +255,12 @@ class Picker extends PureComponent {
                     />
                 </View>
                 <FormHelpMessage message={this.props.errorText} />
+                {this.props.hintText
+                    && (
+                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                            {this.props.hintText}
+                        </Text>
+                    )}
             </>
         );
     }
diff --git a/src/components/PlaidLink/index.js b/src/components/PlaidLink/index.js
index eea4e045464d..4db1ba2fa389 100644
--- a/src/components/PlaidLink/index.js
+++ b/src/components/PlaidLink/index.js
@@ -5,13 +5,15 @@ import Log from '../../libs/Log';
 
 const PlaidLink = (props) => {
     const [isPlaidLoaded, setIsPlaidLoaded] = useState(false);
-    const onSuccess = useCallback((publicToken, metadata) => {
-        props.onSuccess({publicToken, metadata});
-    }, []);
+    const onSuccess = props.onSuccess;
+    const onError = props.onError;
+    const successCallback = useCallback((publicToken, metadata) => {
+        onSuccess({publicToken, metadata});
+    }, [onSuccess]);
 
     const {open, ready, error} = usePlaidLink({
         token: props.token,
-        onSuccess,
+        onSuccess: successCallback,
         onExit: (exitError, metadata) => {
             Log.info('[PlaidLink] Exit: ', false, {exitError, metadata});
             props.onExit();
@@ -28,7 +30,7 @@ const PlaidLink = (props) => {
 
     useEffect(() => {
         if (error) {
-            props.onError(error);
+            onError(error);
             return;
         }
 
@@ -41,7 +43,7 @@ const PlaidLink = (props) => {
         }
 
         open();
-    }, [ready, error, isPlaidLoaded]);
+    }, [ready, error, isPlaidLoaded, open, onError]);
 
     return null;
 };
diff --git a/src/components/PlaidLink/index.native.js b/src/components/PlaidLink/index.native.js
index 2fa8f6260779..e8cd721ed201 100644
--- a/src/components/PlaidLink/index.native.js
+++ b/src/components/PlaidLink/index.native.js
@@ -1,10 +1,13 @@
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {openLink, useDeepLinkRedirector, usePlaidEmitter} from 'react-native-plaid-link-sdk';
 import Log from '../../libs/Log';
 import CONST from '../../CONST';
 import {plaidLinkPropTypes, plaidLinkDefaultProps} from './plaidLinkPropTypes';
 
 const PlaidLink = (props) => {
+    // We are stashing initial props in a ref since we don't want a new token to trigger the link to open again
+    // and just want openLink() to be called once
+    const propsRef = useRef(props);
     useDeepLinkRedirector();
     usePlaidEmitter((event) => {
         Log.info('[PlaidLink] Handled Plaid Event: ', false, event);
@@ -15,18 +18,17 @@ const PlaidLink = (props) => {
     useEffect(() => {
         openLink({
             tokenConfig: {
-                token: props.token,
+                token: propsRef.current.token,
             },
             onSuccess: ({publicToken, metadata}) => {
-                props.onSuccess({publicToken, metadata});
+                propsRef.current.onSuccess({publicToken, metadata});
             },
             onExit: (exitError, metadata) => {
                 Log.info('[PlaidLink] Exit: ', false, {exitError, metadata});
-                props.onExit();
+                propsRef.current.onExit();
             },
         });
     }, []);
-
     return null;
 };
 
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 3b57771311ab..3037a268327b 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -79,7 +79,7 @@ const AddReactionBubble = (props) => {
     };
 
     return (
-        <Tooltip text={props.translate('reportActionContextMenu.addReactionTooltip')} focusable={false}>
+        <Tooltip text={props.translate('emojiReactions.addReactionTooltip')} focusable={false}>
             <Pressable
                 ref={ref}
                 style={({
@@ -90,6 +90,9 @@ const AddReactionBubble = (props) => {
                     StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, false, props.sizeScale),
                 ]}
                 onPress={onPress}
+
+                // Prevent text input blur when Add reaction is clicked
+                onMouseDown={e => e.preventDefault()}
             >
                 {({
                     hovered,
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index fe7f90ed225d..e43322760812 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -66,6 +66,9 @@ const EmojiReactionBubble = (props) => {
             ]}
             onPress={props.onPress}
             onLongPress={props.onReactionListOpen}
+
+            // Prevent text input blur when emoji reaction is clicked
+            onMouseDown={e => e.preventDefault()}
         >
             <Text style={[
                 styles.emojiReactionText,
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index b84974f3f86f..b91edff422b7 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -85,7 +85,7 @@ const MiniQuickEmojiReactions = (props) => {
                 ref={ref}
                 onPress={openEmojiPicker}
                 isDelayButtonStateComplete={false}
-                tooltipText={props.translate('reportActionContextMenu.addReactionTooltip')}
+                tooltipText={props.translate('emojiReactions.addReactionTooltip')}
             >
                 {({hovered, pressed}) => (
                     <Icon
diff --git a/src/components/Reactions/ReactionTooltipContent.js b/src/components/Reactions/ReactionTooltipContent.js
index 5a190eee863b..0c8b0b1e3f76 100644
--- a/src/components/Reactions/ReactionTooltipContent.js
+++ b/src/components/Reactions/ReactionTooltipContent.js
@@ -52,6 +52,7 @@ const ReactionTooltipContent = (props) => {
                 styles.mt1,
                 styles.textMicroBold,
                 styles.textReactionSenders,
+                styles.textAlignCenter,
             ]}
             >
                 {namesString}
@@ -62,7 +63,7 @@ const ReactionTooltipContent = (props) => {
                 styles.fontColorReactionLabel,
             ]}
             >
-                {`reacted with :${props.emojiName}:`}
+                {`${props.translate('emojiReactions.reactedWith')} :${props.emojiName}:`}
             </Text>
         </View>
     );
diff --git a/src/components/ReportActionItem/IOUQuote.js b/src/components/ReportActionItem/IOUQuote.js
index 032297505a74..f93888d41448 100644
--- a/src/components/ReportActionItem/IOUQuote.js
+++ b/src/components/ReportActionItem/IOUQuote.js
@@ -2,7 +2,6 @@ import React from 'react';
 import {View, Pressable} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import Str from 'expensify-common/lib/str';
 import Text from '../Text';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
@@ -76,14 +75,14 @@ const IOUQuote = props => (
                 <Text style={[styles.flex1, styles.mr2]}>
                     <Text style={props.shouldAllowViewDetails && styles.chatItemMessageLink}>
                         {/* Get first word of IOU message */}
-                        {Str.htmlDecode(fragment.text.split(' ')[0])}
+                        {fragment.text.split(' ')[0]}
                     </Text>
                     <Text style={[styles.chatItemMessage, props.shouldAllowViewDetails
                         ? styles.cursorPointer
                         : styles.cursorDefault]}
                     >
                         {/* Get remainder of IOU message */}
-                        {Str.htmlDecode(fragment.text.substring(fragment.text.indexOf(' ')))}
+                        {fragment.text.substring(fragment.text.indexOf(' '))}
                     </Text>
                 </Text>
                 <Icon src={Expensicons.ArrowRight} fill={props.shouldAllowViewDetails ? StyleUtils.getIconFillColor(getButtonState(props.isHovered)) : themeColors.transparent} />
diff --git a/src/components/ReportTransaction.js b/src/components/ReportTransaction.js
index 5586f5e67c24..be53b11c742e 100644
--- a/src/components/ReportTransaction.js
+++ b/src/components/ReportTransaction.js
@@ -1,7 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
-import Str from 'expensify-common/lib/str';
 import styles from '../styles/styles';
 import CONST from '../CONST';
 import * as IOU from '../libs/actions/IOU';
@@ -77,7 +76,7 @@ class ReportTransaction extends Component {
                         wrapperStyles={[styles.reportTransactionWrapper]}
                     >
                         <Text style={[styles.chatItemMessage]}>
-                            {Str.htmlDecode(this.props.action.message[0].html)}
+                            {this.props.action.message[0].text}
                         </Text>
                     </ReportActionItemSingle>
                     {this.props.canBeRejected && (
diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.js
index 560c93813819..3c6dc7a763af 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.js
@@ -68,7 +68,7 @@ const ReportWelcomeText = (props) => {
         isMultipleParticipant,
     );
     const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(props.report, props.policies);
-    const iouOptions = ReportUtils.getIOUOptions(props.report, participants, props.betas);
+    const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(props.report, participants, props.betas);
     return (
         <>
             <View>
@@ -132,7 +132,7 @@ const ReportWelcomeText = (props) => {
                         ))}
                     </Text>
                 )}
-                {(iouOptions.includes(CONST.IOU.IOU_TYPE.SEND) || iouOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)) && (
+                {(moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)) && (
                     <Text>
                         {/* Need to confirm copy for the below with marketing, and then add to translations. */}
                         {props.translate('reportActionsView.usePlusButton')}
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 5c83dda89619..e47e101c3ea7 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -38,13 +38,7 @@ class ScreenWrapper extends React.Component {
             Navigation.dismissModal();
         }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
 
-        this.unsubscribeTransitionStart = this.props.navigation.addListener('transitionStart', () => {
-            Navigation.setIsNavigating(true);
-        });
-
         this.unsubscribeTransitionEnd = this.props.navigation.addListener('transitionEnd', (event) => {
-            Navigation.setIsNavigating(false);
-
             // Prevent firing the prop callback when user is exiting the page.
             if (lodashGet(event, 'data.closing')) {
                 return;
@@ -85,9 +79,6 @@ class ScreenWrapper extends React.Component {
         if (this.unsubscribeTransitionEnd) {
             this.unsubscribeTransitionEnd();
         }
-        if (this.unsubscribeTransitionStart) {
-            this.unsubscribeTransitionStart();
-        }
         if (this.beforeRemoveSubscription) {
             this.beforeRemoveSubscription();
         }
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.js
index c1512a805bf6..eaae9aec9846 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.js
@@ -15,6 +15,7 @@ import networkPropTypes from './networkPropTypes';
 import compose from '../libs/compose';
 import {withNetwork} from './OnyxProvider';
 import * as ApiUtils from '../libs/ApiUtils';
+import CONFIG from '../CONFIG';
 
 const propTypes = {
     /** User object in Onyx */
@@ -42,15 +43,18 @@ const TestToolMenu = props => (
         </Text>
 
         {/* Option to switch between staging and default api endpoints.
-        This enables QA and internal testers to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. */}
-        <TestToolRow title="Use Staging Server">
-            <Switch
-                isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
-                onToggle={() => User.setShouldUseStagingServer(
-                    !lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()),
-                )}
-            />
-        </TestToolRow>
+        This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
+        This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */}
+        {!CONFIG.IS_USING_LOCAL_WEB && (
+            <TestToolRow title="Use Staging Server">
+                <Switch
+                    isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
+                    onToggle={() => User.setShouldUseStagingServer(
+                        !lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()),
+                    )}
+                />
+            </TestToolRow>
+        )}
 
         {/* When toggled the app will be forced offline. */}
         <TestToolRow title="Force offline">
diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js
index 3fe09cfc87e4..6de484dec74d 100644
--- a/src/components/TextInput/baseTextInputPropTypes.js
+++ b/src/components/TextInput/baseTextInputPropTypes.js
@@ -76,6 +76,9 @@ const propTypes = {
 
     /** Indicate whether pressing Enter on multiline input is allowed to submit the form. */
     submitOnEnter: PropTypes.bool,
+
+    /** Set the default value to the input if there is a valid saved value */
+    shouldUseDefaultValue: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -109,6 +112,7 @@ const defaultProps = {
     shouldDelayFocus: false,
     submitOnEnter: false,
     icon: null,
+    shouldUseDefaultValue: false,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
index 104098b375f0..b84fbd6cb0ed 100644
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@@ -172,10 +172,8 @@ class Tooltip extends PureComponent {
                 onBlur: (el) => {
                     this.hideTooltip();
 
-                    // Call the original onBlur, if any
-                    const {onBlur} = this.props.children;
-                    if (_.isFunction(onBlur)) {
-                        onBlur(el);
+                    if (_.isFunction(this.props.children.props.onBlur)) {
+                        this.props.children.props.onBlur(el);
                     }
                 },
                 focusable: true,
diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
index 795edcaac7de..b5124155b6be 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.js
@@ -5,7 +5,7 @@ import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const UnreadActionIndicator = props => (
-    <View accessibilityLabel="New message line indicator" data-action-id={props.reportActionID} style={styles.unreadIndicatorContainer}>
+    <View accessibilityLabel={props.translate('accessibilityHints.newMessageLineIndicator')} data-action-id={props.reportActionID} style={styles.unreadIndicatorContainer}>
         <View style={styles.unreadIndicatorLine} />
         <Text style={styles.unreadIndicatorText}>
             {props.translate('common.new')}
diff --git a/src/languages/en.js b/src/languages/en.js
index 765be98ed4dc..8c57c7629463 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -124,6 +124,8 @@ export default {
         youAppearToBeOffline: 'You appear to be offline.',
         thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.',
         areYouSure: 'Are you sure?',
+        verify: 'Verify',
+        yesContinue: 'Yes, continue',
         zipCodeExample: 'e.g. 12345, 12345-1234, 12345 1234',
         websiteExample: 'e.g. https://www.expensify.com',
     },
@@ -231,7 +233,10 @@ export default {
         editComment: 'Edit comment',
         deleteComment: 'Delete comment',
         deleteConfirmation: 'Are you sure you want to delete this comment?',
+    },
+    emojiReactions: {
         addReactionTooltip: 'Add reaction',
+        reactedWith: 'reacted with',
     },
     reportActionsView: {
         beginningOfArchivedRoomPartOne: 'You missed the party in ',
@@ -244,7 +249,7 @@ export default {
         beginningOfChatHistoryAnnounceRoomPartTwo: ({workspaceName}) => ` to chat about anything ${workspaceName} related.`,
         beginningOfChatHistoryUserRoomPartOne: 'Collaboration starts here! 🎉\nUse this space to chat about anything ',
         beginningOfChatHistoryUserRoomPartTwo: ' related.',
-        beginningOfChatHistory: 'This is the beginning of your chat history with ',
+        beginningOfChatHistory: 'This is the beginning of your chat with ',
         beginningOfChatHistoryPolicyExpenseChatPartOne: 'Collaboration between ',
         beginningOfChatHistoryPolicyExpenseChatPartTwo: ' and ',
         beginningOfChatHistoryPolicyExpenseChatPartThree: ' starts here! 🎉 This is the place to chat, request money and settle up.',
@@ -276,6 +281,8 @@ export default {
         fabNewChat: 'New chat (Floating action)',
         chatPinned: 'Chat pinned',
         draftedMessage: 'Drafted message',
+        listOfChatMessages: 'List of chat messages',
+        listOfChats: 'List of chats',
     },
     iou: {
         amount: 'Amount',
@@ -345,10 +352,25 @@ export default {
     pronounsPage: {
         pronouns: 'Pronouns',
         isShownOnProfile: 'Your pronouns are shown on your profile.',
+        placeholderText: 'Search to see options',
     },
     contacts: {
         contactMethod: 'Contact method',
         contactMethods: 'Contact methods',
+        helpTextBeforeEmail: 'Add more ways for people to find you, and forward receipts to ',
+        helpTextAfterEmail: ' from multiple email addresses.',
+        pleaseVerify: 'Please verify this contact method',
+        getInTouch: "Whenever we need to get in touch with you, we'll use this contact method.",
+        enterMagicCode: ({contactMethod}) => `Please enter the magic code sent to ${contactMethod}`,
+        yourDefaultContactMethod: 'This is your current default contact method. You will not be able to delete this contact method until you set an alternative default by selecting another contact method and pressing “Set as default”.',
+        removeContactMethod: 'Remove contact method',
+        removeAreYouSure: 'Are you sure you want to remove this contact method? This action cannot be undone.',
+        resendMagicCode: 'Resend magic code',
+        genericFailureMessages: {
+            requestContactMethodValidateCode: 'Failed to send a new magic code. Please wait a bit and try again.',
+            validateSecondaryLogin: 'Failed to validate contact method with given magic code. Please request a new code and try again.',
+            deleteContactMethod: 'Failed to delete contact method. Please reach out to Concierge for help.',
+        },
     },
     pronouns: {
         coCos: 'Co / Cos',
@@ -608,6 +630,7 @@ export default {
             invalidFormatEmailLogin: 'The email entered is invalid. Please fix the format and try again.',
         },
         cannotGetAccountDetails: 'Couldn\'t retrieve account details, please try to sign in again.',
+        loginForm: 'Login form',
     },
     personalDetails: {
         error: {
@@ -905,7 +928,7 @@ export default {
         },
     },
     reimbursementAccountLoadingAnimation: {
-        oneMoment: 'One Moment',
+        oneMoment: 'One moment',
         explanationLine: 'We’re taking a look at your information. You will be able to continue with next steps shortly.',
     },
     session: {
@@ -1024,6 +1047,7 @@ export default {
             nameIsRequiredError: 'You need to define a name for your workspace.',
             currencyInputLabel: 'Default currency',
             currencyInputHelpText: 'All expenses on this workspace will be converted to this currency.',
+            currencyInputDisabledText: 'The default currency can\'t be changed because this workspace is linked to a USD bank account.',
             save: 'Save',
             genericFailureMessage: 'An error occurred updating the workspace, please try again.',
             avatarUploadFailureMessage: 'An error occurred uploading the avatar, please try again.',
@@ -1167,6 +1191,7 @@ export default {
     },
     report: {
         genericAddCommentFailureMessage: 'Unexpected error while posting the comment, please try again later',
+        noActivityYet: 'No activity yet',
     },
     chronos: {
         oooEventSummaryFullDay: ({summary, dayCount, date}) => `${summary} for ${dayCount} ${dayCount === 1 ? 'day' : 'days'} until ${date}`,
@@ -1198,9 +1223,20 @@ export default {
         expensifyOrg: 'Expensify.org',
         investorRelations: 'Investor Relations',
         getStarted: 'Get Started',
-        createAccount: 'Create a new account',
-        logIn: 'Log in',
+        createAccount: 'Create A New Account',
+        logIn: 'Log In',
     },
     allStates: COMMON_CONST.STATES,
     allCountries: CONST.ALL_COUNTRIES,
+    accessibilityHints: {
+        navigateToChatsList: 'Navigate back to chats list',
+        chatWelcomeMessage: 'Chat welcome message',
+        navigatesToChat: 'Navigates to a chat',
+        newMessageLineIndicator: 'New message line indicator',
+        chatMessage: 'Chat message',
+        lastChatMessagePreview: 'Last chat message preview',
+        workspaceName: 'Workspace name',
+        chatUserDisplayNames: 'Chat user display names',
+        scrollToNewestMessages: 'Scroll to newest messages',
+    },
 };
diff --git a/src/languages/es.js b/src/languages/es.js
index f7012c3d6654..5a0c7110cabe 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -32,7 +32,7 @@ export default {
         lastName: 'Apellidos',
         phone: 'teléfono',
         phoneNumber: 'Número de teléfono',
-        phoneNumberPlaceholder: '(prefijo) + (número)',
+        phoneNumberPlaceholder: '(xxx)xxx-xxxx',
         email: 'Email',
         and: 'y',
         details: 'Detalles',
@@ -55,7 +55,7 @@ export default {
         invite: 'Invitar',
         here: 'aquí',
         date: 'Fecha',
-        dob: 'Fecha de Nacimiento',
+        dob: 'Fecha de nacimiento',
         currentYear: 'Año actual',
         currentMonth: 'Mes actual',
         ssnLast4: 'Últimos 4 dígitos de su SSN',
@@ -69,7 +69,7 @@ export default {
         stateOrProvince: 'Estado / Provincia',
         country: 'País',
         zip: 'Código postal',
-        zipPostCode: 'Código Postal',
+        zipPostCode: 'Código postal',
         whatThis: '¿Qué es esto?',
         iAcceptThe: 'Acepto los ',
         remove: 'Eliminar',
@@ -123,6 +123,8 @@ export default {
         youAppearToBeOffline: 'Parece que estás desconectado.',
         thisFeatureRequiresInternet: 'Esta función requiere una conexión a Internet activa para ser utilizada.',
         areYouSure: '¿Estás seguro?',
+        verify: 'Verifique',
+        yesContinue: 'Sí, Continuar',
         zipCodeExample: 'p. ej. 12345, 12345-1234, 12345 1234',
         websiteExample: 'p. ej. https://www.expensify.com',
     },
@@ -143,7 +145,7 @@ export default {
         notAllowedExtension: 'Los archivos adjuntos deben ser de uno de los siguientes tipos: ',
     },
     avatarCropModal: {
-        title: 'Editar Foto',
+        title: 'Editar foto',
         description: 'Arrastra, haz zoom y rota tu imagen para que quede como te gusta.',
     },
     composer: {
@@ -230,7 +232,10 @@ export default {
         editComment: 'Editar comentario',
         deleteComment: 'Eliminar comentario',
         deleteConfirmation: '¿Estás seguro de que quieres eliminar este comentario?',
+    },
+    emojiReactions: {
         addReactionTooltip: 'Añadir una reacción',
+        reactedWith: 'reaccionó con',
     },
     reportActionsView: {
         beginningOfArchivedRoomPartOne: 'Te perdiste la fiesta en ',
@@ -243,7 +248,7 @@ export default {
         beginningOfChatHistoryAnnounceRoomPartTwo: ({workspaceName}) => ` para chatear sobre cualquier cosa relacionada con ${workspaceName}.`,
         beginningOfChatHistoryUserRoomPartOne: 'Este es el lugar para colaborar! 🎉\nUsa este espacio para chatear sobre cualquier cosa relacionada con ',
         beginningOfChatHistoryUserRoomPartTwo: '.',
-        beginningOfChatHistory: 'Aquí comienza tu historial de conversaciones con ',
+        beginningOfChatHistory: 'Aquí comienzan tus conversaciones con ',
         beginningOfChatHistoryPolicyExpenseChatPartOne: '¡La colaboración entre ',
         beginningOfChatHistoryPolicyExpenseChatPartTwo: ' y ',
         beginningOfChatHistoryPolicyExpenseChatPartThree: ' empieza aquí! 🎉 Este es el lugar donde chatear, pedir dinero y pagar.',
@@ -275,6 +280,8 @@ export default {
         fabNewChat: 'Nuevo chat',
         chatPinned: 'Chat fijado',
         draftedMessage: 'Mensaje borrador',
+        listOfChatMessages: 'Lista de mensajes del chat',
+        listOfChats: 'lista de chats',
     },
     iou: {
         amount: 'Importe',
@@ -344,10 +351,25 @@ export default {
     pronounsPage: {
         pronouns: 'Pronombres',
         isShownOnProfile: 'Tus pronombres se muestran en tu perfil.',
+        placeholderText: 'Buscar para ver opciones',
     },
     contacts: {
         contactMethod: 'Método de contacto',
         contactMethods: 'Métodos de contacto',
+        helpTextBeforeEmail: 'Añade más formas de que la gente te encuentre y reenvía los recibos a ',
+        helpTextAfterEmail: ' desde varias direcciones de correo electrónico.',
+        pleaseVerify: 'Por favor verifica este método de contacto',
+        getInTouch: 'Utilizaremos este método de contacto cuando necesitemos contactarte.',
+        enterMagicCode: ({contactMethod}) => `Por favor, introduce el código mágico enviado a ${contactMethod}`,
+        yourDefaultContactMethod: 'Este es tu método de contacto predeterminado. No podrás eliminarlo hasta que añadas otro método de contacto y lo marques como predeterminado pulsando "Establecer como predeterminado".',
+        removeContactMethod: 'Eliminar método de contacto',
+        removeAreYouSure: '¿Estás seguro de que quieres eliminar este método de contacto? Esta acción no se puede deshacer.',
+        resendMagicCode: 'Reenviar código mágico',
+        genericFailureMessages: {
+            requestContactMethodValidateCode: 'No se ha podido enviar un nuevo código mágico. Espera un rato y vuelve a intentarlo.',
+            validateSecondaryLogin: 'No se ha podido validar el método de contacto con el código mágico provisto. Solicita un nuevo código y vuelve a intentarlo.',
+            deleteContactMethod: 'No se ha podido eliminar el método de contacto. Por favor contacta con Concierge para obtener ayuda.',
+        },
     },
     pronouns: {
         coCos: 'Co / Cos',
@@ -607,6 +629,7 @@ export default {
             invalidFormatEmailLogin: 'El email introducido no es válido. Corrígelo e inténtalo de nuevo.',
         },
         cannotGetAccountDetails: 'No se pudieron cargar los detalles de tu cuenta, por favor intenta iniciar sesión de nuevo.',
+        loginForm: 'Formulario de inicio de sesión',
     },
     personalDetails: {
         error: {
@@ -906,7 +929,7 @@ export default {
         },
     },
     reimbursementAccountLoadingAnimation: {
-        oneMoment: 'Un Momento',
+        oneMoment: 'Un momento',
         explanationLine: 'Estamos verificando tu información y podrás continuar con los siguientes pasos en unos momentos.',
     },
     session: {
@@ -1025,6 +1048,7 @@ export default {
             nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.',
             currencyInputLabel: 'Moneda por defecto',
             currencyInputHelpText: 'Todas los gastos en este espacio de trabajo serán convertidos a esta moneda.',
+            currencyInputDisabledText: 'La moneda predeterminada no se puede cambiar porque este espacio de trabajo está vinculado a una cuenta bancaria en USD.',
             save: 'Guardar',
             genericFailureMessage: 'Se produjo un error al guardar el espacio de trabajo. Por favor, inténtalo de nuevo.',
             avatarUploadFailureMessage: 'No se pudo subir el avatar. Por favor, inténtalo de nuevo.',
@@ -1168,6 +1192,7 @@ export default {
     },
     report: {
         genericAddCommentFailureMessage: 'Error inesperado al agregar el comentario, por favor inténtalo más tarde',
+        noActivityYet: 'Sin actividad todavía',
     },
     chronos: {
         oooEventSummaryFullDay: ({summary, dayCount, date}) => `${summary} por ${dayCount} ${dayCount === 1 ? 'día' : 'días'} hasta el ${date}`,
@@ -1669,4 +1694,15 @@ export default {
         ZM: 'Zambia',
         ZW: 'Zimbabue',
     },
+    accessibilityHints: {
+        navigateToChatsList: 'Vuelve a la lista de chats',
+        chatWelcomeMessage: 'Mensaje de bienvenida al chat',
+        navigatesToChat: 'Navega a un chat',
+        newMessageLineIndicator: 'Indicador de nueva línea de mensaje',
+        chatMessage: 'mensaje de chat',
+        lastChatMessagePreview: 'Vista previa del último mensaje del chat',
+        workspaceName: 'Nombre del espacio de trabajo',
+        chatUserDisplayNames: 'Nombres de los usuarios del chat',
+        scrollToNewestMessages: 'Desplázate a los mensajes más recientes',
+    },
 };
diff --git a/src/libs/ApiUtils.js b/src/libs/ApiUtils.js
index 7d7792480901..08533c83b076 100644
--- a/src/libs/ApiUtils.js
+++ b/src/libs/ApiUtils.js
@@ -4,6 +4,7 @@ import ONYXKEYS from '../ONYXKEYS';
 import CONFIG from '../CONFIG';
 import CONST from '../CONST';
 import * as Environment from './Environment/Environment';
+import proxyConfig from '../../config/proxyConfig';
 
 // To avoid rebuilding native apps, native apps use production config for both staging and prod
 // We use the async environment check because it works on all platforms
@@ -17,8 +18,8 @@ Environment.getEnvironment()
         Onyx.connect({
             key: ONYXKEYS.USER,
             callback: (val) => {
-                // Toggling between APIs is not allowed on production
-                if (ENV_NAME === CONST.ENVIRONMENT.PRODUCTION) {
+                // Toggling between APIs is not allowed on production and internal dev environment
+                if (ENV_NAME === CONST.ENVIRONMENT.PRODUCTION || CONFIG.IS_USING_LOCAL_WEB) {
                     shouldUseStagingServer = false;
                     return;
                 }
@@ -41,6 +42,11 @@ function getApiRoot(request) {
     const shouldUseSecure = lodashGet(request, 'shouldUseSecure', false);
 
     if (shouldUseStagingServer) {
+        if (CONFIG.IS_USING_WEB_PROXY) {
+            return shouldUseSecure
+                ? proxyConfig.STAGING_SECURE
+                : proxyConfig.STAGING;
+        }
         return shouldUseSecure
             ? CONFIG.EXPENSIFY.STAGING_SECURE_API_ROOT
             : CONFIG.EXPENSIFY.STAGING_API_ROOT;
diff --git a/src/libs/ErrorUtils.js b/src/libs/ErrorUtils.js
index 89d2029c7457..a51cd080fda9 100644
--- a/src/libs/ErrorUtils.js
+++ b/src/libs/ErrorUtils.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import CONST from '../CONST';
 
 /**
@@ -54,6 +55,27 @@ function getLatestErrorMessage(onyxData) {
         .value();
 }
 
+/**
+ * @param {Object} onyxData
+ * @param {Object} onyxData.errorFields
+ * @param {String} fieldName
+ * @returns {Object}
+ */
+function getLatestErrorField(onyxData, fieldName) {
+    const errorsForField = lodashGet(onyxData, ['errorFields', fieldName], {});
+
+    if (_.isEmpty(errorsForField)) {
+        return {};
+    }
+    return _.chain(errorsForField)
+        .keys()
+        .sortBy()
+        .reverse()
+        .map(key => ({[key]: errorsForField[key]}))
+        .first()
+        .value();
+}
+
 /**
  * Method used to generate error message for given inputID
  * @param {Object} errors - An object containing current errors in the form
@@ -74,8 +96,8 @@ function addErrorMessage(errors, inputID, message) {
 }
 
 export {
-    // eslint-disable-next-line import/prefer-default-export
     getAuthenticateErrorMessage,
     getLatestErrorMessage,
+    getLatestErrorField,
     addErrorMessage,
 };
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index dac8228588e3..776508f27864 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -126,12 +126,10 @@ class AuthScreens extends React.Component {
         // the chat switcher, or new group chat
         // based on the key modifiers pressed and the operating system
         this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(searchShortcutConfig.shortcutKey, () => {
-            Modal.close();
-            Navigation.navigate(ROUTES.SEARCH);
+            Modal.close(() => Navigation.navigate(ROUTES.SEARCH));
         }, searchShortcutConfig.descriptionKey, searchShortcutConfig.modifiers, true);
         this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(groupShortcutConfig.shortcutKey, () => {
-            Modal.close();
-            Navigation.navigate(ROUTES.NEW_GROUP);
+            Modal.close(() => Navigation.navigate(ROUTES.NEW_GROUP));
         }, groupShortcutConfig.descriptionKey, groupShortcutConfig.modifiers, true);
     }
 
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 405ea6c6c332..7b46354e9391 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -280,6 +280,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Settings_ContactMethods',
     },
+    {
+        getComponent: () => {
+            const SettingsContactMethodDetailsPage = require('../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default;
+            return SettingsContactMethodDetailsPage;
+        },
+        name: 'Settings_ContactMethodDetails',
+    },
     {
         getComponent: () => {
             const SettingsAddSecondaryLoginPage = require('../../../pages/settings/Profile/Contacts/AddSecondaryLoginPage').default;
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index 7d1cacc07089..5e04c37546f3 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -30,7 +30,6 @@ let reportScreenIsReadyPromise = new Promise((resolve) => {
 
 let isLoggedIn = false;
 let pendingRoute = null;
-let isNavigating = false;
 
 Onyx.connect({
     key: ONYXKEYS.SESSION,
@@ -56,27 +55,13 @@ function setDidTapNotification() {
  * @returns {Boolean}
  */
 function canNavigate(methodName, params = {}) {
-    if (navigationRef.isReady() && !isNavigating) {
+    if (navigationRef.isReady()) {
         return true;
     }
-
-    if (isNavigating) {
-        Log.hmmm(`[Navigation] ${methodName} failed because navigation is progress`, params);
-        return false;
-    }
-
     Log.hmmm(`[Navigation] ${methodName} failed because navigation ref was not yet ready`, params);
     return false;
 }
 
-/**
- * Sets Navigation State
- * @param {Boolean} isNavigatingValue
- */
-function setIsNavigating(isNavigatingValue) {
-    isNavigating = isNavigatingValue;
-}
-
 /**
  * Opens the LHN drawer.
  * @private
@@ -129,7 +114,6 @@ function goBack(shouldOpenDrawer = true) {
         }
         return;
     }
-
     navigationRef.current.goBack();
 }
 
@@ -331,7 +315,6 @@ export default {
     resetDrawerIsReadyPromise,
     resetIsReportScreenReadyPromise,
     isDrawerRoute,
-    setIsNavigating,
     isReportScreenReady,
     setIsReportScreenIsReady,
 };
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 080b8d148cff..a096a7421867 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -124,6 +124,9 @@ export default {
                         path: ROUTES.SETTINGS_CONTACT_METHODS,
                         exact: true,
                     },
+                    Settings_ContactMethodDetails: {
+                        path: ROUTES.SETTINGS_CONTACT_METHOD_DETAILS,
+                    },
                     Settings_Add_Secondary_Login: {
                         path: ROUTES.SETTINGS_ADD_LOGIN,
                     },
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.js
index 8b00870312cb..170f05aacf76 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.js
@@ -1,6 +1,5 @@
 // Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
 import _ from 'underscore';
-import Str from 'expensify-common/lib/str';
 import focusApp from './focusApp';
 import * as AppUpdate from '../../actions/AppUpdate';
 import EXPENSIFY_ICON_URL from '../../../../assets/images/expensify-logo-round-clearspace.png';
@@ -107,10 +106,10 @@ export default {
      */
     pushReportCommentNotification({reportAction, onClick}, usesIcon = false) {
         const {person, message} = reportAction;
-        const plainTextPerson = Str.htmlDecode(_.map(person, f => f.text).join());
+        const plainTextPerson = _.map(person, f => f.text).join();
 
         // Specifically target the comment part of the message
-        const plainTextMessage = Str.htmlDecode((_.find(message, f => f.type === 'COMMENT') || {}).text);
+        const plainTextMessage = (_.find(message, f => f.type === 'COMMENT') || {}).text;
 
         push({
             title: plainTextPerson,
diff --git a/src/libs/Notification/PushNotification/index.native.js b/src/libs/Notification/PushNotification/index.native.js
index d7a8cecf10bc..c2222fd1ac6c 100644
--- a/src/libs/Notification/PushNotification/index.native.js
+++ b/src/libs/Notification/PushNotification/index.native.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
-import {UrbanAirship, EventType, iOS} from 'urbanairship-react-native';
+import Airship, {EventType, iOS} from '@ua/react-native-airship';
 import lodashGet from 'lodash/get';
 import Log from '../../Log';
 import NotificationType from './NotificationType';
@@ -57,7 +57,7 @@ function pushNotificationEventCallback(eventType, notification) {
  * Check if a user is opted-in to push notifications on this device and update the `pushNotificationsEnabled` NVP accordingly.
  */
 function refreshNotificationOptInStatus() {
-    UrbanAirship.getNotificationStatus()
+    Airship.push.getNotificationStatus()
         .then((notificationStatus) => {
             const isOptedIn = notificationStatus.airshipOptIn && notificationStatus.systemEnabled;
             if (isOptedIn === isUserOptedInToPushNotifications) {
@@ -78,7 +78,7 @@ function refreshNotificationOptInStatus() {
  */
 function init() {
     // Setup event listeners
-    UrbanAirship.addListener(EventType.PushReceived, (notification) => {
+    Airship.addListener(EventType.PushReceived, (notification) => {
         // By default, refresh notification opt-in status to true if we receive a notification
         if (!isUserOptedInToPushNotifications) {
             PushNotification.setPushNotificationOptInStatus(true);
@@ -89,19 +89,20 @@ function init() {
 
     // Note: the NotificationResponse event has a nested PushReceived event,
     // so event.notification refers to the same thing as notification above ^
-    UrbanAirship.addListener(EventType.NotificationResponse, (event) => {
+    Airship.addListener(EventType.NotificationResponse, (event) => {
         pushNotificationEventCallback(EventType.NotificationResponse, event.notification);
     });
 
     // Keep track of which users have enabled push notifications via an NVP.
-    UrbanAirship.addListener(EventType.NotificationOptInStatus, refreshNotificationOptInStatus);
+    Airship.addListener(EventType.NotificationOptInStatus, refreshNotificationOptInStatus);
 
     // This statement has effect on iOS only.
     // It enables the App to display push notifications when the App is in foreground.
     // By default, the push notifications are silenced on iOS if the App is in foreground.
     // More info here https://developer.apple.com/documentation/usernotifications/unusernotificationcenterdelegate/1649518-usernotificationcenter
-    UrbanAirship.setForegroundPresentationOptions([
-        iOS.ForegroundPresentationOption.Alert,
+    Airship.push.iOS.setForegroundPresentationOptions([
+        iOS.ForegroundPresentationOption.List,
+        iOS.ForegroundPresentationOption.Banner,
         iOS.ForegroundPresentationOption.Sound,
         iOS.ForegroundPresentationOption.Badge,
     ]);
@@ -113,13 +114,13 @@ function init() {
  * @param {String|Number} accountID
  */
 function register(accountID) {
-    if (UrbanAirship.getNamedUser() === accountID.toString()) {
+    if (Airship.contact.getNamedUserId() === accountID.toString()) {
         // No need to register again for this accountID.
         return;
     }
 
     // Get permissions to display push notifications (prompts user on iOS, but not Android)
-    UrbanAirship.enableUserPushNotifications()
+    Airship.push.enableUserNotifications()
         .then((isEnabled) => {
             if (isEnabled) {
                 return;
@@ -131,7 +132,7 @@ function register(accountID) {
     // Register this device as a named user in AirshipAPI.
     // Regardless of the user's opt-in status, we still want to receive silent push notifications.
     Log.info(`[PUSH_NOTIFICATIONS] Subscribing to notifications for account ID ${accountID}`);
-    UrbanAirship.setNamedUser(accountID.toString());
+    Airship.contact.identify(accountID.toString());
 
     // Refresh notification opt-in status NVP for the new user.
     refreshNotificationOptInStatus();
@@ -142,9 +143,9 @@ function register(accountID) {
  */
 function deregister() {
     Log.info('[PUSH_NOTIFICATIONS] Unsubscribing from push notifications.');
-    UrbanAirship.setNamedUser(null);
-    UrbanAirship.removeAllListeners(EventType.PushReceived);
-    UrbanAirship.removeAllListeners(EventType.NotificationResponse);
+    Airship.contact.reset();
+    Airship.removeAllListeners(EventType.PushReceived);
+    Airship.removeAllListeners(EventType.NotificationResponse);
 }
 
 /**
@@ -191,7 +192,7 @@ function onSelected(notificationType, callback) {
  * Clear all push notifications
  */
 function clearNotifications() {
-    UrbanAirship.clearNotifications();
+    Airship.push.clearNotifications();
 }
 
 export default {
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 2b91b20462a4..31402a0fd740 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -328,7 +328,7 @@ function createOption(logins, personalDetails, report, reportActions = {}, {
         if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml})) {
             lastMessageTextFromReport = `[${Localize.translateLocal('common.attachment')}]`;
         } else {
-            lastMessageTextFromReport = Str.htmlDecode(report ? report.lastMessageText : '');
+            lastMessageTextFromReport = report ? report.lastMessageText : '';
         }
 
         const lastActorDetails = personalDetailMap[report.lastActorEmail] || null;
@@ -494,9 +494,16 @@ function getOptions(reports, personalDetails, {
             reportMapForLogins[logins[0]] = report;
         }
         const isSearchingSomeonesPolicyExpenseChat = !report.isOwnPolicyExpenseChat && searchValue !== '';
+
+        // Checks to see if the current user is the admin of the policy, if so the policy
+        // name preview will be shown.
+        const isPolicyChatAdmin = ReportUtils.isPolicyExpenseChatAdmin(report, policies);
+
         allReportOptions.push(createOption(logins, personalDetails, report, reportActions, {
             showChatPreviewLine,
-            forcePolicyNamePreview: isPolicyExpenseChat ? isSearchingSomeonesPolicyExpenseChat : forcePolicyNamePreview,
+            forcePolicyNamePreview: isPolicyExpenseChat
+                ? (isSearchingSomeonesPolicyExpenseChat || isPolicyChatAdmin)
+                : forcePolicyNamePreview,
         }));
     });
 
diff --git a/src/libs/PolicyUtils.js b/src/libs/PolicyUtils.js
index 80c837d32557..632fddcf1182 100644
--- a/src/libs/PolicyUtils.js
+++ b/src/libs/PolicyUtils.js
@@ -1,5 +1,6 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import Str from 'expensify-common/lib/str';
 import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
 
@@ -75,10 +76,20 @@ function shouldShowPolicy(policy, isOffline) {
     );
 }
 
+/**
+ * @param {string} email
+ * @returns {boolean}
+ */
+function isExpensifyTeam(email) {
+    const emailDomain = Str.extractEmailDomain(email);
+    return emailDomain === CONST.EXPENSIFY_PARTNER_NAME || emailDomain === CONST.EMAIL.GUIDES_DOMAIN;
+}
+
 export {
     hasPolicyMemberError,
     hasPolicyError,
     hasCustomUnitsError,
     getPolicyBrickRoadIndicatorStatus,
     shouldShowPolicy,
+    isExpensifyTeam,
 };
diff --git a/src/libs/ReimbursementAccountUtils.js b/src/libs/ReimbursementAccountUtils.js
deleted file mode 100644
index e8d3f3b66cf4..000000000000
--- a/src/libs/ReimbursementAccountUtils.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import lodashGet from 'lodash/get';
-
-/**
- * Get the default state for input fields in the VBA flow
- *
- * @param {Object} reimbursementAccountDraft
- * @param {Object} reimbursementAccount
- * @param {String} fieldName
- * @param {*} defaultValue
- *
- * @returns {*}
- */
-function getDefaultStateForField(reimbursementAccountDraft, reimbursementAccount, fieldName, defaultValue = '') {
-    return lodashGet(reimbursementAccountDraft, fieldName, lodashGet(reimbursementAccount, ['achData', fieldName], defaultValue));
-}
-
-export {
-    // eslint-disable-next-line import/prefer-default-export
-    getDefaultStateForField,
-};
diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js
index df55ae49faee..61484b1d983b 100644
--- a/src/libs/ReportActionsUtils.js
+++ b/src/libs/ReportActionsUtils.js
@@ -194,7 +194,7 @@ function getSortedReportActionsForDisplay(reportActions) {
     const sortedReportActions = getSortedReportActions(filteredReportActions, true);
     return _.filter(sortedReportActions, (reportAction) => {
         // Filter out any unsupported reportAction types
-        if (!_.has(CONST.REPORT.ACTIONS.TYPE, reportAction.actionName)) {
+        if (!_.has(CONST.REPORT.ACTIONS.TYPE, reportAction.actionName) && !_.contains(_.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG), reportAction.actionName)) {
             return false;
         }
 
@@ -213,11 +213,16 @@ function getSortedReportActionsForDisplay(reportActions) {
 /**
  * In some cases, there can be multiple closed report actions in a chat report.
  * This method returns the last closed report action so we can always show the correct archived report reason.
+ * Additionally, archived #admins and #announce do not have the closed report action so we will return null if none is found.
  *
  * @param {Object} reportActions
- * @returns {Object}
+ * @returns {Object|null}
  */
 function getLastClosedReportAction(reportActions) {
+    // If closed report action is not present, return early
+    if (!_.some(reportActions, action => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED)) {
+        return null;
+    }
     const filteredReportActions = filterOutDeprecatedReportActions(reportActions);
     const sortedReportActions = getSortedReportActions(filteredReportActions);
     return lodashFindLast(sortedReportActions, action => action.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED);
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index bb07c7d25e34..1b637537f2f5 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -318,6 +318,25 @@ function getPolicyName(report, policies) {
         || Localize.translateLocal('workspace.common.unavailable');
 }
 
+/**
+ * Checks if the current user is the admin of the policy given the policy expense chat.
+ * @param {Object} report
+ * @param {String} report.policyID
+ * @param {Object} policies must have OnyxKey prefix (i.e 'policy_') for keys
+ * @returns {Boolean}
+ */
+function isPolicyExpenseChatAdmin(report, policies) {
+    if (!isPolicyExpenseChat(report)) {
+        return false;
+    }
+
+    const policyRole = lodashGet(policies, [
+        `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'role',
+    ]);
+
+    return policyRole === CONST.POLICY.ROLE.ADMIN;
+}
+
 /**
  * Get either the policyName or domainName the chat is tied to
  * @param {Object} report
@@ -986,7 +1005,6 @@ function getIOUReportActionMessage(type, total, participants, comment, currency,
     const who = displayNames.length < 3
         ? displayNames.join(' and ')
         : `${displayNames.slice(0, -1).join(', ')}, and ${_.last(displayNames)}`;
-
     let paymentMethodMessage;
     switch (paymentType) {
         case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
@@ -1026,7 +1044,7 @@ function getIOUReportActionMessage(type, total, participants, comment, currency,
     }
 
     return [{
-        html: iouMessage,
+        html: getParsedComment(iouMessage),
         text: iouMessage,
         isEdited: false,
         type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
@@ -1588,32 +1606,43 @@ function getReportIDFromLink(url) {
     return reportID;
 }
 
+/**
+ * Users can request money in policy expense chats only if they are in a role of a member in the chat (in other words, if it's their policy expense chat)
+ *
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function canRequestMoney(report) {
+    return (!isPolicyExpenseChat(report) || report.isOwnPolicyExpenseChat);
+}
+
 /**
  * @param {Object} report
  * @param {Array} reportParticipants
  * @param {Array} betas
  * @returns {Array}
  */
-function getIOUOptions(report, reportParticipants, betas) {
+function getMoneyRequestOptions(report, reportParticipants, betas) {
     const participants = _.filter(reportParticipants, email => currentUserPersonalDetails.login !== email);
     const hasExcludedIOUEmails = lodashIntersection(reportParticipants, CONST.EXPENSIFY_EMAILS).length > 0;
     const hasMultipleParticipants = participants.length > 1;
 
-    if (hasExcludedIOUEmails || participants.length === 0 || !Permissions.canUseIOU(betas)) {
+    if (hasExcludedIOUEmails || (participants.length === 0 && !report.isOwnPolicyExpenseChat) || !Permissions.canUseIOU(betas)) {
         return [];
     }
 
     // User created policy rooms and default rooms like #admins or #announce will always have the Split Bill option
     // unless there are no participants at all (e.g. #admins room for a policy with only 1 admin)
-    // DM chats and workspace chats will have the Split Bill option only when there are at least 3 people in the chat.
-    if (isChatRoom(report) || hasMultipleParticipants) {
+    // DM chats will have the Split Bill option only when there are at least 3 people in the chat.
+    // There is no Split Bill option for Workspace chats
+    if (isChatRoom(report) || (hasMultipleParticipants && !isPolicyExpenseChat(report))) {
         return [CONST.IOU.IOU_TYPE.SPLIT];
     }
 
     // DM chats that only have 2 people will see the Send / Request money options.
     // Workspace chats should only see the Request money option, as "easy overages" is not available.
     return [
-        CONST.IOU.IOU_TYPE.REQUEST,
+        ...(canRequestMoney(report) ? [CONST.IOU.IOU_TYPE.REQUEST] : []),
         ...(Permissions.canUseIOUSend(betas) && !isPolicyExpenseChat(report) ? [CONST.IOU.IOU_TYPE.SEND] : []),
     ];
 }
@@ -1666,6 +1695,7 @@ export {
     getPolicyName,
     getPolicyType,
     isArchivedRoom,
+    isPolicyExpenseChatAdmin,
     isPublicRoom,
     isConciergeChatReport,
     hasAutomatedExpensifyEmails,
@@ -1710,7 +1740,9 @@ export {
     hashLogin,
     getDefaultWorkspaceAvatar,
     getCommentLength,
+    getParsedComment,
     getFullSizeAvatar,
     getSmallSizeAvatar,
-    getIOUOptions,
+    getMoneyRequestOptions,
+    canRequestMoney,
 };
diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js
index 3e6fd500c98e..99429caa7e04 100644
--- a/src/libs/SidebarUtils.js
+++ b/src/libs/SidebarUtils.js
@@ -275,9 +275,12 @@ function getOptionData(reportID) {
     }
 
     if (result.isChatRoom || result.isPolicyExpenseChat) {
-        result.alternateText = lastMessageText || subtitle;
+        // Checks to see if the current user is the admin of the policy tied to the policy expense chat,
+        // if so the policy name preview will be shown.
+        const isPolicyChatAdmin = result.isPolicyExpenseChat && ReportUtils.isPolicyExpenseChatAdmin(report, policies);
+        result.alternateText = isPolicyChatAdmin ? subtitle : (lastMessageText || Localize.translate(preferredLocale, 'report.noActivityYet'));
     } else {
-        if (hasMultipleParticipants && !lastMessageText) {
+        if (!lastMessageText) {
             // Here we get the beginning of chat history message and append the display name for each user, adding pronouns if there are any.
             // We also add a fullstop after the final name, the word "and" before the final name and commas between all previous names.
             lastMessageText = Localize.translate(preferredLocale, 'reportActionsView.beginningOfChatHistory')
diff --git a/src/libs/UnreadIndicatorUpdater/updateUnread/index.ios.js b/src/libs/UnreadIndicatorUpdater/updateUnread/index.ios.js
index b9b62a42ea67..62ee00828566 100644
--- a/src/libs/UnreadIndicatorUpdater/updateUnread/index.ios.js
+++ b/src/libs/UnreadIndicatorUpdater/updateUnread/index.ios.js
@@ -1,4 +1,4 @@
-import {UrbanAirship} from 'urbanairship-react-native';
+import Airship from '@ua/react-native-airship';
 
 /**
  * Set the App Icon badge with the number of
@@ -7,7 +7,7 @@ import {UrbanAirship} from 'urbanairship-react-native';
  * @param {Number} totalCount
  */
 function updateUnread(totalCount) {
-    UrbanAirship.setBadgeNumber(totalCount);
+    Airship.push.iOS.setBadgeNumber(totalCount);
 }
 
 export default updateUnread;
diff --git a/src/libs/UserUtils.js b/src/libs/UserUtils.js
new file mode 100644
index 000000000000..748ad18dac69
--- /dev/null
+++ b/src/libs/UserUtils.js
@@ -0,0 +1,68 @@
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import CONST from '../CONST';
+
+/**
+ * Searches through given loginList for any contact method / login with an error.
+ *
+ * Example that should return false:
+ * {{
+ *      test@test.com: {
+ *          errorFields: {
+ *              validateCodeSent: null
+ *          }
+ *      }
+ * }}
+ *
+ * Example that should return true:
+ * {{
+ *      test@test.com: {
+ *          errorFields: {
+ *              validateCodeSent: { 18092081290: 'An error' }
+ *          }
+ *      }
+ * }}
+ *
+ * @param {Object} loginList
+ * @param {Object} loginList.errorFields
+ * @returns {Boolean}
+ */
+function hasLoginListError(loginList) {
+    return _.some(loginList, login => _.some(lodashGet(login, 'errorFields', {}), field => !_.isEmpty(field)));
+}
+
+/**
+ * Searches through given loginList for any contact method / login that requires
+ * an Info brick road status indicator. Currently this only applies if the user
+ * has an unvalidated contact method.
+ *
+ * @param {Object} loginList
+ * @param {String} loginList.validatedDate
+ * @returns {Boolean}
+ */
+function hasLoginListInfo(loginList) {
+    return _.some(loginList, login => _.isEmpty(login.validatedDate));
+}
+
+/**
+ * Gets the appropriate brick road indicator status for a given loginList.
+ * Error status is higher priority, so we check for that first.
+ *
+ * @param {Object} loginList
+ * @returns {String}
+ */
+function getLoginListBrickRoadIndicator(loginList) {
+    if (hasLoginListError(loginList)) {
+        return CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
+    }
+    if (hasLoginListInfo(loginList)) {
+        return CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
+    }
+    return '';
+}
+
+export {
+    hasLoginListError,
+    hasLoginListInfo,
+    getLoginListBrickRoadIndicator,
+};
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index bf642a9ab4c8..9bad1af1a63f 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -193,17 +193,17 @@ function requestMoney(report, amount, currency, recipientEmail, participant, com
         reportActionsFailureData,
     ];
 
+    const parsedComment = ReportUtils.getParsedComment(comment);
     API.write('RequestMoney', {
         debtorEmail,
         amount,
         currency,
-        comment,
+        comment: parsedComment,
         iouReportID: iouReport.reportID,
         chatReportID: chatReport.reportID,
         transactionID: optimisticReportAction.originalMessage.IOUTransactionID,
         reportActionID: optimisticReportAction.reportActionID,
         createdReportActionID: isNewChat ? optimisticCreatedAction.reportActionID : 0,
-        shouldKeyReportActionsByID: true,
     }, {optimisticData, successData, failureData});
     Navigation.navigate(ROUTES.getReportRoute(chatReport.reportID));
 }
@@ -491,17 +491,17 @@ function createSplitsAndOnyxData(participants, currentUserLogin, amount, comment
  */
 function splitBill(participants, currentUserLogin, amount, comment, currency, locale, existingGroupChatReportID = '') {
     const {groupData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, amount, comment, currency, locale, existingGroupChatReportID);
+    const parsedComment = ReportUtils.getParsedComment(comment);
 
     API.write('SplitBill', {
         reportID: groupData.chatReportID,
         amount: Math.round(amount * 100),
         splits: JSON.stringify(splits),
         currency,
-        comment,
+        comment: parsedComment,
         transactionID: groupData.transactionID,
         reportActionID: groupData.reportActionID,
         createdReportActionID: groupData.createdReportActionID,
-        shouldKeyReportActionsByID: true,
     }, onyxData);
 
     Navigation.dismissModal();
@@ -517,17 +517,17 @@ function splitBill(participants, currentUserLogin, amount, comment, currency, lo
  */
 function splitBillAndOpenReport(participants, currentUserLogin, amount, comment, currency, locale) {
     const {groupData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, amount, comment, currency, locale);
+    const parsedComment = ReportUtils.getParsedComment(comment);
 
     API.write('SplitBillAndOpenReport', {
         reportID: groupData.chatReportID,
         amount: Math.round(amount * 100),
         splits: JSON.stringify(splits),
         currency,
-        comment,
+        comment: parsedComment,
         transactionID: groupData.transactionID,
         reportActionID: groupData.reportActionID,
         createdReportActionID: groupData.createdReportActionID,
-        shouldKeyReportActionsByID: true,
     }, onyxData);
 
     Navigation.navigate(ROUTES.getReportRoute(groupData.chatReportID));
@@ -658,12 +658,12 @@ function buildPayPalPaymentUrl(amount, submitterPayPalMeAddress, currency) {
  */
 function getSendMoneyParams(report, amount, currency, comment, paymentMethodType, managerEmail, recipient) {
     const recipientEmail = OptionsListUtils.addSMSDomainIfPhoneNumber(recipient.login);
-
+    const parsedComment = ReportUtils.getParsedComment(comment);
     const newIOUReportDetails = JSON.stringify({
         amount,
         currency,
         requestorEmail: recipientEmail,
-        comment,
+        comment: parsedComment,
         idempotencyKey: Str.guid(),
     });
 
diff --git a/src/libs/actions/Modal.js b/src/libs/actions/Modal.js
index ebf4fd2999c3..466645e3742c 100644
--- a/src/libs/actions/Modal.js
+++ b/src/libs/actions/Modal.js
@@ -2,6 +2,7 @@ import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 
 let closeModal;
+let onModalClose;
 
 /**
  * Allows other parts of the app to call modal close function
@@ -12,9 +13,27 @@ function setCloseModal(onClose) {
     closeModal = onClose;
 }
 
-function close() {
-    if (!closeModal) { return; }
-    closeModal();
+/**
+ * Close modal in other parts of the app
+ *
+ * @param {Function} [onModalCloseCallback]
+ * @param {Boolean} isNavigating
+ */
+function close(onModalCloseCallback, isNavigating = true) {
+    if (!closeModal) {
+        // If modal is already closed, no need to wait for modal close. So immediately call callback.
+        if (onModalCloseCallback) { onModalCloseCallback(); }
+        onModalClose = null;
+        return;
+    }
+    onModalClose = onModalCloseCallback;
+    closeModal(isNavigating);
+}
+
+function onModalDidClose() {
+    if (!onModalClose) { return; }
+    onModalClose();
+    onModalClose = null;
 }
 
 /**
@@ -39,6 +58,7 @@ function willAlertModalBecomeVisible(isVisible) {
 export {
     setCloseModal,
     close,
+    onModalDidClose,
     setModalVisibility,
     willAlertModalBecomeVisible,
 };
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index f1cbb66cbdeb..e04d1719c700 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -271,7 +271,9 @@ function addMembersToWorkspace(memberLogins, welcomeNote, policyID) {
 
     API.write('AddMembersToWorkspace', {
         employees: JSON.stringify(_.map(logins, login => ({email: login}))),
-        welcomeNote,
+
+        // Escape HTML special chars to enable them to appear in the invite email
+        welcomeNote: _.escape(welcomeNote),
         policyID,
     }, {optimisticData, successData, failureData});
 }
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 5db7bd5b48bd..ff896d561c64 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -255,7 +255,6 @@ function addActions(reportID, text = '', file) {
         commentReportActionID: file && reportCommentAction ? reportCommentAction.reportActionID : null,
         reportComment: reportCommentText,
         file,
-        shouldKeyReportActionsByID: true,
     };
 
     const optimisticData = [
@@ -376,7 +375,6 @@ function openReport(reportID, participantList = [], newReportObject = {}) {
     const params = {
         reportID,
         emailList: participantList ? participantList.join(',') : '',
-        shouldKeyReportActionsByID: true,
     };
 
     // If we are creating a new report, we need to add the optimistic report data and a report action
@@ -440,7 +438,6 @@ function reconnect(reportID) {
     API.write('ReconnectToReport',
         {
             reportID,
-            shouldKeyReportActionsByID: true,
         },
         {
             optimisticData: [{
@@ -517,7 +514,6 @@ function openPaymentDetailsPage(chatReportID, iouReportID) {
     API.read('OpenPaymentDetailsPage', {
         reportID: chatReportID,
         iouReportID,
-        shouldKeyReportActionsByID: true,
     }, {
         optimisticData: [
             {
@@ -631,6 +627,15 @@ function saveReportComment(reportID, comment) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, comment);
 }
 
+/**
+ * Saves the number of lines for the comment
+ * @param {String} reportID
+ * @param {Number} numberOfLines
+ */
+function saveReportCommentNumberOfLines(reportID, numberOfLines) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}`, numberOfLines);
+}
+
 /**
  * Immediate indication whether the report has a draft comment.
  *
@@ -760,7 +765,6 @@ function deleteReportComment(reportID, reportAction) {
     const parameters = {
         reportID,
         reportActionID: reportAction.reportActionID,
-        shouldKeyReportActionsByID: true,
     };
     API.write('DeleteComment', parameters, {optimisticData, successData, failureData});
 }
@@ -824,8 +828,8 @@ const handleUserDeletedLinks = (newCommentText, originalHtml) => {
         return newCommentText;
     }
     const htmlWithAutoLinks = parser.replace(newCommentText);
-    const markdownWithAutoLinks = parser.htmlToMarkdown(htmlWithAutoLinks);
-    const markdownOriginalComment = parser.htmlToMarkdown(originalHtml);
+    const markdownWithAutoLinks = parser.htmlToMarkdown(htmlWithAutoLinks).trim();
+    const markdownOriginalComment = parser.htmlToMarkdown(originalHtml).trim();
     const removedLinks = getRemovedMarkdownLinks(markdownOriginalComment, newCommentText);
     return removeLinks(markdownWithAutoLinks, removedLinks);
 };
@@ -854,7 +858,7 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
     let parsedOriginalCommentHTML = originalCommentHTML;
     if (markdownForNewComment.length < CONST.MAX_MARKUP_LENGTH) {
         htmlForNewComment = parser.replace(markdownForNewComment, autolinkFilter);
-        parsedOriginalCommentHTML = parser.replace(parser.htmlToMarkdown(originalCommentHTML), autolinkFilter);
+        parsedOriginalCommentHTML = parser.replace(parser.htmlToMarkdown(originalCommentHTML).trim(), autolinkFilter);
     }
 
     //  Delete the comment if it's empty
@@ -920,7 +924,6 @@ function editReportComment(reportID, originalReportAction, textForNewComment) {
         reportID,
         reportComment: htmlForNewComment,
         reportActionID,
-        shouldKeyReportActionsByID: true,
     };
     API.write('UpdateComment', parameters, {optimisticData, successData, failureData});
 }
@@ -936,6 +939,16 @@ function saveReportActionDraft(reportID, reportActionID, draftMessage) {
     Onyx.set(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_DRAFTS}${reportID}_${reportActionID}`, draftMessage);
 }
 
+/**
+ * Saves the number of lines for the report action draft
+ * @param {String} reportID
+ * @param {Number} reportActionID
+ * @param {Number} numberOfLines
+ */
+function saveReportActionDraftNumberOfLines(reportID, reportActionID, numberOfLines) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${reportActionID}`, numberOfLines);
+}
+
 /**
  * @param {String} reportID
  * @param {String} previousValue
@@ -1398,11 +1411,13 @@ export {
     subscribeToReportCommentPushNotifications,
     unsubscribeFromReportChannel,
     saveReportComment,
+    saveReportCommentNumberOfLines,
     broadcastUserIsTyping,
     togglePinnedState,
     editReportComment,
     handleUserDeletedLinks,
     saveReportActionDraft,
+    saveReportActionDraftNumberOfLines,
     deleteReportComment,
     navigateToConciergeChat,
     setReportWithDraft,
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index 7e7b51e93d3d..1c9a296c975e 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -19,6 +19,7 @@ import * as SequentialQueue from '../Network/SequentialQueue';
 import PusherUtils from '../PusherUtils';
 import * as Report from './Report';
 import * as ReportActionsUtils from '../ReportActionsUtils';
+import DateUtils from '../DateUtils';
 import * as Session from './Session';
 
 let currentUserAccountID = '';
@@ -100,6 +101,61 @@ function resendValidateCode(login) {
     Session.resendValidateCode(login);
 }
 
+/**
+ * Requests a new validate code be sent for the passed contact method
+ *
+ * @param {String} contactMethod - the new contact method that the user is trying to verify
+ */
+function requestContactMethodValidateCode(contactMethod) {
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                validateCodeSent: true,
+                errorFields: {
+                    validateCodeSent: null,
+                },
+                pendingFields: {
+                    validateCodeSent: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                },
+            },
+        },
+    }];
+    const successData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                pendingFields: {
+                    validateCodeSent: null,
+                },
+            },
+        },
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                validateCodeSent: false,
+                errorFields: {
+                    validateCodeSent: {
+                        [DateUtils.getMicroseconds()]: Localize.translateLocal('contacts.genericFailureMessages.requestContactMethodValidateCode'),
+                    },
+                },
+                pendingFields: {
+                    validateCodeSent: null,
+                },
+            },
+        },
+    }];
+
+    API.write('RequestContactMethodValidateCode', {
+        email: contactMethod,
+    }, {optimisticData, successData, failureData});
+}
+
 /**
  * Sets whether or not the user is subscribed to Expensify news
  *
@@ -162,6 +218,78 @@ function setSecondaryLoginAndNavigate(login, password) {
     });
 }
 
+/**
+ * Delete a specific contact method
+ *
+ * @param {String} contactMethod - the contact method being deleted
+ * @param {Object} oldLoginData
+ */
+function deleteContactMethod(contactMethod, oldLoginData) {
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                partnerUserID: '',
+                errorFields: {
+                    deletedLogin: null,
+                },
+                pendingFields: {
+                    deletedLogin: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                },
+            },
+        },
+    }];
+    const successData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: null,
+        },
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                ...oldLoginData,
+                errorFields: {
+                    deletedLogin: {
+                        [DateUtils.getMicroseconds()]: Localize.translateLocal('contacts.genericFailureMessages.deleteContactMethod'),
+                    },
+                },
+                pendingFields: {
+                    deletedLogin: null,
+                },
+            },
+        },
+    }];
+
+    API.write('DeleteContactMethod', {
+        partnerUserID: contactMethod,
+    }, {optimisticData, successData, failureData});
+    Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS);
+}
+
+/**
+ * Clears any possible stored errors for a specific field on a contact method
+ *
+ * @param {String} contactMethod
+ * @param {String} fieldName
+ */
+function clearContactMethodErrors(contactMethod, fieldName) {
+    Onyx.merge(ONYXKEYS.LOGIN_LIST, {
+        [contactMethod]: {
+            errorFields: {
+                [fieldName]: null,
+            },
+            pendingFields: {
+                [fieldName]: null,
+            },
+        },
+    });
+}
+
 /**
  * Validates a login given an accountID and validation code
  *
@@ -187,6 +315,62 @@ function validateLogin(accountID, validateCode) {
     Navigation.navigate(ROUTES.HOME);
 }
 
+/**
+ * Validates a secondary login / contact method
+ *
+ * @param {String} contactMethod - The contact method the user is trying to verify
+ * @param {String} validateCode
+ */
+function validateSecondaryLogin(contactMethod, validateCode) {
+    const optimisticData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                errorFields: {
+                    validateLogin: null,
+                },
+                pendingFields: {
+                    validateLogin: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                },
+            },
+        },
+    }];
+    const successData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                pendingFields: {
+                    validateLogin: null,
+                },
+            },
+        },
+    }];
+    const failureData = [{
+        onyxMethod: CONST.ONYX.METHOD.MERGE,
+        key: ONYXKEYS.LOGIN_LIST,
+        value: {
+            [contactMethod]: {
+                errorFields: {
+                    validateLogin: {
+                        [DateUtils.getMicroseconds()]: Localize.translateLocal('contacts.genericFailureMessages.validateSecondaryLogin'),
+                    },
+                },
+                pendingFields: {
+                    validateLogin: null,
+                },
+            },
+        },
+    }];
+
+    API.write('ValidateSecondaryLogin', {
+        partnerUserID: contactMethod,
+        validateCode,
+    }, {optimisticData, successData, failureData});
+    Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS);
+}
+
 /**
  * Checks the blockedFromConcierge object to see if it has an expiresAt key,
  * and if so whether the expiresAt date of a user's ban is before right now
@@ -474,9 +658,13 @@ export {
     updatePassword,
     closeAccount,
     resendValidateCode,
+    requestContactMethodValidateCode,
     updateNewsletterSubscription,
     setSecondaryLoginAndNavigate,
+    deleteContactMethod,
+    clearContactMethodErrors,
     validateLogin,
+    validateSecondaryLogin,
     isBlockedFromConcierge,
     subscribeToUserEvents,
     updatePreferredSkinTone,
diff --git a/src/libs/fileDownload/index.android.js b/src/libs/fileDownload/index.android.js
index 3b57d0e23496..9cca7eeac182 100644
--- a/src/libs/fileDownload/index.android.js
+++ b/src/libs/fileDownload/index.android.js
@@ -1,4 +1,4 @@
-import {PermissionsAndroid} from 'react-native';
+import {PermissionsAndroid, Platform} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
 import * as FileUtils from './FileUtils';
 
@@ -7,6 +7,12 @@ import * as FileUtils from './FileUtils';
  * @returns {Promise<Boolean>}
  */
 function hasAndroidPermission() {
+    // On Android API Level 33 and above, these permissions do nothing and always return 'never_ask_again'
+    // More info here: https://stackoverflow.com/a/74296799
+    if (Platform.Version >= 33) {
+        return Promise.resolve(true);
+    }
+
     // Read and write permission
     const writePromise = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
     const readPromise = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
diff --git a/src/libs/fileDownload/index.ios.js b/src/libs/fileDownload/index.ios.js
index 083f5b8dc501..30af92d4c791 100644
--- a/src/libs/fileDownload/index.ios.js
+++ b/src/libs/fileDownload/index.ios.js
@@ -1,5 +1,5 @@
 import RNFetchBlob from 'react-native-blob-util';
-import CameraRoll from '@react-native-community/cameraroll';
+import {CameraRoll} from '@react-native-camera-roll/camera-roll';
 import lodashGet from 'lodash/get';
 import * as FileUtils from './FileUtils';
 import CONST from '../../CONST';
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index cf829d3d898b..3b5b83796d43 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, ScrollView} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
@@ -25,6 +26,7 @@ import PressableWithoutFocus from '../components/PressableWithoutFocus';
 import * as Report from '../libs/actions/Report';
 import OfflineWithFeedback from '../components/OfflineWithFeedback';
 import AutoUpdateTime from '../components/AutoUpdateTime';
+import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
@@ -80,20 +82,12 @@ const getPhoneNumber = (details) => {
 };
 
 class DetailsPage extends React.PureComponent {
-    componentDidMount() {
-        if (lodashGet(this.props.route.params, 'login')) {
-            return;
-        }
-
-        // Leave the page when the login information is not available
-        Navigation.dismissModal();
-    }
-
     render() {
-        let details = lodashGet(this.props.personalDetails, lodashGet(this.props.route.params, 'login'));
+        const login = lodashGet(this.props.route.params, 'login', '');
+        const reportID = lodashGet(this.props.route.params, 'reportID', '');
+        let details = lodashGet(this.props.personalDetails, login);
 
         if (!details) {
-            const login = lodashGet(this.props.route.params, 'login');
             details = {
                 login,
                 displayName: ReportUtils.getDisplayNameForParticipant(login),
@@ -105,7 +99,7 @@ class DetailsPage extends React.PureComponent {
 
         // If we have a reportID param this means that we
         // arrived here via the ParticipantsPage and should be allowed to navigate back to it
-        const shouldShowBackButton = Boolean(this.props.route.params.reportID);
+        const shouldShowBackButton = Boolean(reportID);
         const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyEmails([details.login]) && details.timezone;
         let pronouns = details.pronouns;
 
@@ -116,91 +110,93 @@ class DetailsPage extends React.PureComponent {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('common.details')}
-                    shouldShowBackButton={shouldShowBackButton}
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                <View
-                    pointerEvents="box-none"
-                    style={[
-                        styles.containerWithSpaceBetween,
-                    ]}
-                >
-                    {details ? (
-                        <ScrollView>
-                            <View style={styles.avatarSectionWrapper}>
-                                <AttachmentModal
-                                    headerTitle={isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
-                                    source={ReportUtils.getFullSizeAvatar(details.avatar, details.login)}
-                                    isAuthTokenRequired
-                                >
-                                    {({show}) => (
-                                        <PressableWithoutFocus
-                                            style={styles.noOutline}
-                                            onPress={show}
-                                        >
-                                            <OfflineWithFeedback
-                                                pendingAction={lodashGet(details, 'pendingFields.avatar', null)}
+                <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('common.details')}
+                        shouldShowBackButton={shouldShowBackButton}
+                        onBackButtonPress={() => Navigation.goBack()}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                    />
+                    <View
+                        pointerEvents="box-none"
+                        style={[
+                            styles.containerWithSpaceBetween,
+                        ]}
+                    >
+                        {details ? (
+                            <ScrollView>
+                                <View style={styles.avatarSectionWrapper}>
+                                    <AttachmentModal
+                                        headerTitle={isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
+                                        source={ReportUtils.getFullSizeAvatar(details.avatar, details.login)}
+                                        isAuthTokenRequired
+                                    >
+                                        {({show}) => (
+                                            <PressableWithoutFocus
+                                                style={styles.noOutline}
+                                                onPress={show}
                                             >
-                                                <Avatar
-                                                    containerStyles={[styles.avatarLarge, styles.mb3]}
-                                                    imageStyles={[styles.avatarLarge]}
-                                                    source={ReportUtils.getAvatar(details.avatar, details.login)}
-                                                    size={CONST.AVATAR_SIZE.LARGE}
-                                                />
-                                            </OfflineWithFeedback>
-                                        </PressableWithoutFocus>
+                                                <OfflineWithFeedback
+                                                    pendingAction={lodashGet(details, 'pendingFields.avatar', null)}
+                                                >
+                                                    <Avatar
+                                                        containerStyles={[styles.avatarLarge, styles.mb3]}
+                                                        imageStyles={[styles.avatarLarge]}
+                                                        source={ReportUtils.getAvatar(details.avatar, details.login)}
+                                                        size={CONST.AVATAR_SIZE.LARGE}
+                                                    />
+                                                </OfflineWithFeedback>
+                                            </PressableWithoutFocus>
+                                        )}
+                                    </AttachmentModal>
+                                    {details.displayName && (
+                                        <Text style={[styles.textHeadline, styles.mb6, styles.pre]} numberOfLines={1}>
+                                            {isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
+                                        </Text>
                                     )}
-                                </AttachmentModal>
-                                {details.displayName && (
-                                    <Text style={[styles.textHeadline, styles.mb6, styles.pre]} numberOfLines={1}>
-                                        {isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
-                                    </Text>
+                                    {details.login ? (
+                                        <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
+                                            <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
+                                                {this.props.translate(isSMSLogin
+                                                    ? 'common.phoneNumber'
+                                                    : 'common.email')}
+                                            </Text>
+                                            <CommunicationsLink value={isSMSLogin ? getPhoneNumber(details) : details.login}>
+                                                <Tooltip text={isSMSLogin ? getPhoneNumber(details) : details.login}>
+                                                    <Text numberOfLines={1}>
+                                                        {isSMSLogin
+                                                            ? this.props.toLocalPhone(getPhoneNumber(details))
+                                                            : details.login}
+                                                    </Text>
+                                                </Tooltip>
+                                            </CommunicationsLink>
+                                        </View>
+                                    ) : null}
+                                    {pronouns ? (
+                                        <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
+                                            <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
+                                                {this.props.translate('profilePage.preferredPronouns')}
+                                            </Text>
+                                            <Text numberOfLines={1}>
+                                                {pronouns}
+                                            </Text>
+                                        </View>
+                                    ) : null}
+                                    {shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
+                                </View>
+                                {details.login !== this.props.session.email && (
+                                    <MenuItem
+                                        title={`${this.props.translate('common.message')}${details.displayName}`}
+                                        icon={Expensicons.ChatBubble}
+                                        onPress={() => Report.navigateToAndOpenReport([details.login])}
+                                        wrapperStyle={styles.breakAll}
+                                        shouldShowRightIcon
+                                    />
                                 )}
-                                {details.login ? (
-                                    <View style={[styles.mb6, styles.detailsPageSectionContainer, styles.w100]}>
-                                        <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
-                                            {this.props.translate(isSMSLogin
-                                                ? 'common.phoneNumber'
-                                                : 'common.email')}
-                                        </Text>
-                                        <CommunicationsLink value={isSMSLogin ? getPhoneNumber(details) : details.login}>
-                                            <Tooltip text={isSMSLogin ? getPhoneNumber(details) : details.login}>
-                                                <Text numberOfLines={1}>
-                                                    {isSMSLogin
-                                                        ? this.props.toLocalPhone(getPhoneNumber(details))
-                                                        : details.login}
-                                                </Text>
-                                            </Tooltip>
-                                        </CommunicationsLink>
-                                    </View>
-                                ) : null}
-                                {pronouns ? (
-                                    <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
-                                        <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
-                                            {this.props.translate('profilePage.preferredPronouns')}
-                                        </Text>
-                                        <Text numberOfLines={1}>
-                                            {pronouns}
-                                        </Text>
-                                    </View>
-                                ) : null}
-                                {shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
-                            </View>
-                            {details.login !== this.props.session.email && (
-                                <MenuItem
-                                    title={`${this.props.translate('common.message')}${details.displayName}`}
-                                    icon={Expensicons.ChatBubble}
-                                    onPress={() => Report.navigateToAndOpenReport([details.login])}
-                                    wrapperStyle={styles.breakAll}
-                                    shouldShowRightIcon
-                                />
-                            )}
-                        </ScrollView>
-                    ) : null}
-                </View>
+                            </ScrollView>
+                        ) : null}
+                    </View>
+                </FullPageNotFoundView>
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 092e1b5059b8..a17f5f291d1a 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -101,6 +101,7 @@ class BankAccountManualStep extends React.Component {
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         disabled={shouldDisableInputs}
                         shouldSaveDraft
+                        shouldUseDefaultValue={shouldDisableInputs}
                     />
                     <TextInput
                         inputID="accountNumber"
@@ -110,6 +111,7 @@ class BankAccountManualStep extends React.Component {
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         disabled={shouldDisableInputs}
                         shouldSaveDraft
+                        shouldUseDefaultValue={shouldDisableInputs}
                     />
                     <CheckboxWithLabel
                         style={styles.mt4}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 45ef47dd4686..89339e0d7968 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -45,7 +45,7 @@ class BankAccountPlaidStep extends React.Component {
 
     submit() {
         const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
-            plaidAccountID: this.props.getDefaultStateForField('plaidAccountID'),
+            plaidAccountID: lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', ''),
         });
 
         const bankAccountData = {
@@ -65,7 +65,7 @@ class BankAccountPlaidStep extends React.Component {
 
     render() {
         const bankAccountID = lodashGet(this.props.reimbursementAccount, 'achData.bankAccountID') || 0;
-        const selectedPlaidAccountID = this.props.getDefaultStateForField('plaidAccountID', '');
+        const selectedPlaidAccountID = lodashGet(this.props.reimbursementAccountDraft, 'plaidAccountID', '');
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 11490cf58044..e8480b4b9436 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -187,6 +187,7 @@ class CompanyStep extends React.Component {
                         disabled={shouldDisableCompanyName}
                         defaultValue={this.props.getDefaultStateForField('companyName')}
                         shouldSaveDraft
+                        shouldUseDefaultValue={shouldDisableCompanyName}
                     />
                     <AddressForm
                         translate={this.props.translate}
@@ -229,6 +230,7 @@ class CompanyStep extends React.Component {
                         placeholder={this.props.translate('companyStep.taxIDNumberPlaceholder')}
                         defaultValue={this.props.getDefaultStateForField('companyTaxID')}
                         shouldSaveDraft
+                        shouldUseDefaultValue={shouldDisableCompanyTaxID}
                     />
                     <View style={styles.mt4}>
                         <Picker
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 1e61ceeeaabd..d1dc8846549d 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -30,7 +30,6 @@ import ROUTES from '../../ROUTES';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
 import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropTypes';
-import * as ReimbursementAccountUtils from '../../libs/ReimbursementAccountUtils';
 import withPolicy from '../workspace/withPolicy';
 
 const propTypes = {
@@ -128,7 +127,7 @@ class ReimbursementAccountPage extends React.Component {
      * @returns {*}
      */
     getDefaultStateForField(fieldName, defaultValue = '') {
-        return ReimbursementAccountUtils.getDefaultStateForField(this.props.reimbursementAccountDraft, this.props.reimbursementAccount, fieldName, defaultValue);
+        return lodashGet(this.props.reimbursementAccount, ['achData', fieldName], defaultValue);
     }
 
     /**
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index 0c5066e652c5..6594ec21590f 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -93,7 +93,7 @@ const HeaderView = (props) => {
                     <Pressable
                         onPress={props.onNavigationMenuButtonClicked}
                         style={[styles.LHNToggle]}
-                        accessibilityHint="Navigate back to chats list"
+                        accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
                     >
                         <Tooltip text={props.translate('common.back')} shiftVertical={4}>
                             <Icon src={Expensicons.BackArrow} />
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index 2297f8fc5368..5754993fbda5 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -63,7 +63,7 @@ class FloatingMessageCounter extends PureComponent {
     render() {
         return (
             <FloatingMessageCounterContainer
-                accessibilityHint="Scroll to newest messages"
+                accessibilityHint={this.props.translate('accessibilityHints.scrollToNewestMessages')}
                 containerStyles={[styles.floatingMessageCounterTransformation(this.translateY)]}
             >
                 <View style={styles.floatingMessageCounter}>
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 31876d1d6c68..c8352a6fa69b 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -62,6 +62,9 @@ const propTypes = {
     /** The comment left by the user */
     comment: PropTypes.string,
 
+    /** Number of lines for the comment */
+    numberOfLines: PropTypes.number,
+
     /** The ID of the report actions will be created for */
     reportID: PropTypes.string.isRequired,
 
@@ -116,6 +119,7 @@ const propTypes = {
 const defaultProps = {
     betas: [],
     comment: '',
+    numberOfLines: 1,
     modal: {},
     report: {},
     reportActions: [],
@@ -159,10 +163,11 @@ class ReportActionCompose extends React.Component {
         this.isEmojiCode = this.isEmojiCode.bind(this);
         this.setTextInputRef = this.setTextInputRef.bind(this);
         this.getInputPlaceholder = this.getInputPlaceholder.bind(this);
-        this.getIOUOptions = this.getIOUOptions.bind(this);
+        this.getMoneyRequestOptions = this.getMoneyRequestOptions.bind(this);
         this.addAttachment = this.addAttachment.bind(this);
         this.insertSelectedEmoji = this.insertSelectedEmoji.bind(this);
         this.setExceededMaxCommentLength = this.setExceededMaxCommentLength.bind(this);
+        this.updateNumberOfLines = this.updateNumberOfLines.bind(this);
         this.comment = props.comment;
 
         // React Native will retain focus on an input for native devices but web/mWeb behave differently so we have some focus management
@@ -327,7 +332,7 @@ class ReportActionCompose extends React.Component {
      * @param {Array} reportParticipants
      * @returns {Array<object>}
      */
-    getIOUOptions(reportParticipants) {
+    getMoneyRequestOptions(reportParticipants) {
         const options = {
             [CONST.IOU.IOU_TYPE.SPLIT]: {
                 icon: Expensicons.Receipt,
@@ -345,7 +350,7 @@ class ReportActionCompose extends React.Component {
                 onSelected: () => Navigation.navigate(ROUTES.getIOUSendRoute(this.props.reportID)),
             },
         };
-        return _.map(ReportUtils.getIOUOptions(this.props.report, reportParticipants, this.props.betas), option => options[option]);
+        return _.map(ReportUtils.getMoneyRequestOptions(this.props.report, reportParticipants, this.props.betas), option => options[option]);
     }
 
     /**
@@ -561,6 +566,14 @@ class ReportActionCompose extends React.Component {
         }
     }
 
+    /**
+     * Update the number of lines for a comment in Onyx
+     * @param {Number} numberOfLines
+     */
+    updateNumberOfLines(numberOfLines) {
+        Report.saveReportCommentNumberOfLines(this.props.reportID, numberOfLines);
+    }
+
     /**
      * Listens for keyboard shortcuts and applies the action
      *
@@ -767,7 +780,7 @@ class ReportActionCompose extends React.Component {
                                                 onClose={() => this.setMenuVisibility(false)}
                                                 onItemSelected={() => this.setMenuVisibility(false)}
                                                 anchorPosition={styles.createMenuPositionReportActionCompose}
-                                                menuItems={[...this.getIOUOptions(reportParticipants),
+                                                menuItems={[...this.getMoneyRequestOptions(reportParticipants),
                                                     {
                                                         icon: Expensicons.Paperclip,
                                                         text: this.props.translate('reportActionCompose.addAttachment'),
@@ -829,6 +842,8 @@ class ReportActionCompose extends React.Component {
                                             setIsFullComposerAvailable={this.setIsFullComposerAvailable}
                                             isComposerFullSize={this.props.isComposerFullSize}
                                             value={this.state.value}
+                                            numberOfLines={this.props.numberOfLines}
+                                            onNumberOfLinesChange={this.updateNumberOfLines}
                                             onLayout={(e) => {
                                                 const composerHeight = e.nativeEvent.layout.height;
                                                 if (this.state.composerHeight === composerHeight) {
@@ -931,6 +946,9 @@ export default compose(
         comment: {
             key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`,
         },
+        numberOfLines: {
+            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}`,
+        },
         modal: {
             key: ONYXKEYS.MODAL,
         },
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index d06e75de566f..404b660020d2 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -38,6 +38,7 @@ import focusTextInputAfterAnimation from '../../../libs/focusTextInputAfterAnima
 import ChronosOOOListActions from '../../../components/ReportActionItem/ChronosOOOListActions';
 import ReportActionItemReactions from '../../../components/Reactions/ReportActionItemReactions';
 import * as Report from '../../../libs/actions/Report';
+import withLocalize from '../../../components/withLocalize';
 
 const propTypes = {
     /** Report for this action */
@@ -126,7 +127,7 @@ class ReportActionItem extends Component {
         // Newline characters need to be removed here because getCurrentSelection() returns html mixed with newlines, and when
         // <br> tags are converted later to markdown, it creates duplicate newline characters. This means that when the content
         // is pasted, there are extra newlines in the content that we want to avoid.
-        const selection = SelectionScraper.getCurrentSelection().replace(/\n/g, '');
+        const selection = SelectionScraper.getCurrentSelection().replace(/<br>\n/g, '<br>');
         ReportActionContextMenu.showContextMenu(
             ContextMenuActions.CONTEXT_MENU_TYPES.REPORT_ACTION,
             event,
@@ -182,7 +183,10 @@ class ReportActionItem extends Component {
                         ? (
                             <ReportActionItemMessage
                                 action={this.props.action}
-                                style={(!this.props.displayAsGroup && isAttachment) ? [styles.mt2] : undefined}
+                                style={[
+                                    (!this.props.displayAsGroup && isAttachment) ? styles.mt2 : undefined,
+                                    _.contains(_.values(CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG), this.props.action.actionName) ? styles.colorMuted : undefined,
+                                ]}
                             />
                         ) : (
                             <ReportActionItemMessageEdit
@@ -240,7 +244,7 @@ class ReportActionItem extends Component {
             >
                 <Hoverable>
                     {hovered => (
-                        <View accessibilityLabel="Chat message">
+                        <View accessibilityLabel={this.props.translate('accessibilityHints.chatMessage')}>
                             {this.props.shouldDisplayNewMarker && (
                                 <UnreadActionIndicator reportActionID={this.props.action.reportActionID} />
                             )}
@@ -305,6 +309,7 @@ ReportActionItem.defaultProps = defaultProps;
 
 export default compose(
     withWindowDimensions,
+    withLocalize,
     withNetwork(),
     withBlockedFromConcierge({propName: 'blockedFromConcierge'}),
     withReportActionsDrafts({
diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
index 89cda085bdfd..f942b9e05139 100644
--- a/src/pages/home/report/ReportActionItemCreated.js
+++ b/src/pages/home/report/ReportActionItemCreated.js
@@ -16,6 +16,7 @@ import EmptyStateBackgroundImage from '../../../../assets/images/empty-state_bac
 import * as StyleUtils from '../../../styles/StyleUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import compose from '../../../libs/compose';
+import withLocalize from '../../../components/withLocalize';
 
 const propTypes = {
     /** The id of the report */
@@ -57,7 +58,7 @@ const ReportActionItemCreated = (props) => {
                     style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)}
                 />
                 <View
-                    accessibilityLabel="Chat welcome message"
+                    accessibilityLabel={props.translate('accessibilityHints.chatWelcomeMessage')}
                     style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}
                 >
                     <Pressable
@@ -83,6 +84,7 @@ ReportActionItemCreated.displayName = 'ReportActionItemCreated';
 
 export default compose(
     withWindowDimensions,
+    withLocalize,
     withOnyx({
         report: {
             key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
index 04a57a1178a2..e330ee9894b6 100644
--- a/src/pages/home/report/ReportActionItemFragment.js
+++ b/src/pages/home/report/ReportActionItemFragment.js
@@ -15,6 +15,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import compose from '../../../libs/compose';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import {withNetwork} from '../../../components/OnyxProvider';
+import CONST from '../../../CONST';
+import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough';
 
 const propTypes = {
     /** The message fragment needing to be displayed */
@@ -107,8 +110,10 @@ const ReportActionItemFragment = (props) => {
 
             // Only render HTML if we have html in the fragment
             if (!differByLineBreaksOnly) {
+                const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && props.network.isOffline;
                 const editedTag = props.fragment.isEdited ? '<edited></edited>' : '';
-                const htmlContent = html + editedTag;
+                const htmlContent = applyStrikethrough(html + editedTag, isPendingDelete);
+
                 return (
                     <RenderHTML
                         html={props.source === 'email'
@@ -142,7 +147,7 @@ const ReportActionItemFragment = (props) => {
                         numberOfLines={props.isSingleLine ? 1 : undefined}
                         style={[styles.chatItemMessageHeaderSender, (props.isSingleLine ? styles.pre : styles.preWrap)]}
                     >
-                        {Str.htmlDecode(props.fragment.text)}
+                        {props.fragment.text}
                     </Text>
                 </Tooltip>
             );
@@ -172,4 +177,5 @@ ReportActionItemFragment.displayName = 'ReportActionItemFragment';
 export default compose(
     withWindowDimensions,
     withLocalize,
+    withNetwork(),
 )(memo(ReportActionItemFragment));
diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
index 42fe592c3173..722c1d53ebe0 100644
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ b/src/pages/home/report/ReportActionItemMessage.js
@@ -34,6 +34,7 @@ const ReportActionItemMessage = props => (
                 fragment={fragment}
                 isAttachment={props.action.isAttachment}
                 attachmentInfo={props.action.attachmentInfo}
+                pendingAction={props.action.pendingAction}
                 source={lodashGet(props.action, 'originalMessage.source')}
                 loading={props.action.isLoading}
                 style={props.style}
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index bc0c97534019..9f3c29a113e6 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -4,6 +4,7 @@ import {InteractionManager, Keyboard, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
+import {withOnyx} from 'react-native-onyx';
 import reportActionPropTypes from './reportActionPropTypes';
 import styles from '../../../styles/styles';
 import Composer from '../../../components/Composer';
@@ -24,6 +25,7 @@ import CONST from '../../../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState';
+import ONYXKEYS from '../../../ONYXKEYS';
 
 const propTypes = {
     /** All the data of the action */
@@ -32,6 +34,9 @@ const propTypes = {
     /** Draft message */
     draftMessage: PropTypes.string.isRequired,
 
+    /** Number of lines for the draft message */
+    numberOfLines: PropTypes.number,
+
     /** ReportID that holds the comment we're editing */
     reportID: PropTypes.string.isRequired,
 
@@ -57,6 +62,7 @@ const defaultProps = {
     forwardedRef: () => {},
     report: {},
     shouldDisableEmojiPicker: false,
+    numberOfLines: 1,
 };
 
 class ReportActionItemMessageEdit extends React.Component {
@@ -70,13 +76,14 @@ class ReportActionItemMessageEdit extends React.Component {
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
         this.setExceededMaxCommentLength = this.setExceededMaxCommentLength.bind(this);
+        this.updateNumberOfLines = this.updateNumberOfLines.bind(this);
         this.saveButtonID = 'saveButton';
         this.cancelButtonID = 'cancelButton';
         this.emojiButtonID = 'emojiButton';
         this.messageEditInput = 'messageEditInput';
 
         const parser = new ExpensiMark();
-        const draftMessage = parser.htmlToMarkdown(this.props.draftMessage);
+        const draftMessage = parser.htmlToMarkdown(this.props.draftMessage).trim();
 
         this.state = {
             draft: draftMessage,
@@ -136,6 +143,14 @@ class ReportActionItemMessageEdit extends React.Component {
         }
     }
 
+    /**
+     * Update the number of lines for a draft in Onyx
+     * @param {Number} numberOfLines
+     */
+    updateNumberOfLines(numberOfLines) {
+        Report.saveReportActionDraftNumberOfLines(this.props.reportID, this.props.action.reportActionID, numberOfLines);
+    }
+
     /**
      * Delete the draft of the comment being edited. This will take the comment out of "edit mode" with the old content.
      */
@@ -273,6 +288,8 @@ class ReportActionItemMessageEdit extends React.Component {
                         }}
                         selection={this.state.selection}
                         onSelectionChange={this.onSelectionChange}
+                        numberOfLines={this.props.numberOfLines}
+                        onNumberOfLinesChange={this.updateNumberOfLines}
                     />
                     <View style={styles.editChatItemEmojiWrapper}>
                         <EmojiPickerButton
@@ -314,6 +331,12 @@ export default compose(
     withLocalize,
     withWindowDimensions,
     withKeyboardState,
+    withOnyx({
+        numberOfLines: {
+            key: ({reportID, action}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT_NUMBER_OF_LINES}${reportID}_${action.reportActionID}`,
+            initWithStoredValues: false,
+        },
+    }),
 )(React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
     <ReportActionItemMessageEdit {...props} forwardedRef={ref} />
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 38d19864ea5a..2e02a794ed03 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -20,6 +20,7 @@ import CONST from '../../../CONST';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import reportPropTypes from '../../reportPropTypes';
 import networkPropTypes from '../../../components/networkPropTypes';
+import withLocalize from '../../../components/withLocalize';
 
 const propTypes = {
     /** Position of the "New" line marker */
@@ -150,7 +151,7 @@ class ReportActionsList extends React.Component {
         return (
             <Animated.View style={[StyleUtils.fade(this.state.fadeInAnimation), styles.flex1]}>
                 <InvertedFlatList
-                    accessibilityLabel="List of chat messages"
+                    accessibilityLabel={this.props.translate('sidebarScreen.listOfChatMessages')}
                     ref={ReportScrollManager.flatListRef}
                     data={this.props.sortedReportActions}
                     renderItem={this.renderItem}
@@ -208,6 +209,7 @@ ReportActionsList.defaultProps = defaultProps;
 export default compose(
     withDrawerState,
     withWindowDimensions,
+    withLocalize,
     withPersonalDetails(),
     withNetwork(),
 )(ReportActionsList);
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 20e67cd4d56c..a060cada058b 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -140,7 +140,7 @@ class SidebarLinks extends React.Component {
         return (
             <View
                 accessibilityElementsHidden={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}
-                accessibilityLabel="List of chats"
+                accessibilityLabel={this.props.translate('sidebarScreen.listOfChats')}
                 style={[styles.flex1, styles.h100]}
             >
                 <View
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 1fe9a18a8260..0593c10e4fb6 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -34,6 +34,7 @@ import ConfirmModal from '../../components/ConfirmModal';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as Link from '../../libs/actions/Link';
 import OfflineWithFeedback from '../../components/OfflineWithFeedback';
+import * as UserUtils from '../../libs/UserUtils';
 import policyMemberPropType from '../policyMemberPropType';
 
 const propTypes = {
@@ -81,6 +82,15 @@ const propTypes = {
     /** Information about the user accepting the terms for payments */
     walletTerms: walletTermsPropTypes,
 
+    /** Login list for the user that is signed in */
+    loginList: PropTypes.shape({
+        /** Date login was validated, used to show brickroad info status */
+        validatedDate: PropTypes.string,
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
+
     /** List of policy members */
     policyMembers: PropTypes.objectOf(policyMemberPropType),
 
@@ -98,6 +108,7 @@ const defaultProps = {
     walletTerms: {},
     bankAccountList: {},
     cardList: {},
+    loginList: {},
     policyMembers: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -152,6 +163,7 @@ class InitialSettingsPage extends React.Component {
             .filter(policy => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN)
             .find(policy => PolicyUtils.hasPolicyError(policy) || PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers))
             .value() ? 'error' : null;
+        const profileBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(this.props.loginList);
 
         return ([
             {
@@ -166,6 +178,7 @@ class InitialSettingsPage extends React.Component {
                 translationKey: 'common.profile',
                 icon: Expensicons.Profile,
                 action: () => { App.openProfile(); },
+                brickRoadIndicator: profileBrickRoadIndicator,
             },
             {
                 translationKey: 'common.preferences',
@@ -216,7 +229,6 @@ class InitialSettingsPage extends React.Component {
                 iconType={item.iconType}
                 onPress={item.action}
                 iconStyles={item.iconStyles}
-                iconFill={item.iconFill}
                 shouldShowRightIcon
                 iconRight={item.iconRight}
                 badgeText={this.getWalletBalance(isPaymentItem)}
@@ -349,6 +361,9 @@ export default compose(
         walletTerms: {
             key: ONYXKEYS.WALLET_TERMS,
         },
+        loginList: {
+            key: ONYXKEYS.LOGIN_LIST,
+        },
     }),
     withNetwork(),
 )(InitialSettingsPage);
diff --git a/src/pages/settings/Profile/Contacts/AddSecondaryLoginPage.js b/src/pages/settings/Profile/Contacts/AddSecondaryLoginPage.js
index 36571a14d4a6..48232251df5b 100755
--- a/src/pages/settings/Profile/Contacts/AddSecondaryLoginPage.js
+++ b/src/pages/settings/Profile/Contacts/AddSecondaryLoginPage.js
@@ -117,7 +117,7 @@ class AddSecondaryLoginPage extends Component {
                     onCloseButtonPress={() => Navigation.dismissModal()}
                 />
                 {/* We use keyboardShouldPersistTaps="handled" to prevent the keyboard from being hidden when switching focus on input fields  */}
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5} keyboardShouldPersistTaps="handled">
+                <ScrollView style={styles.flex1} contentContainerStyle={[styles.ph5, styles.mv3]} keyboardShouldPersistTaps="handled">
                     <Text style={[styles.mb6]}>
                         {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
                             ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
@@ -134,6 +134,7 @@ class AddSecondaryLoginPage extends Component {
                             keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
                                 ? CONST.KEYBOARD_TYPE.PHONE_PAD : CONST.KEYBOARD_TYPE.EMAIL_ADDRESS}
                             returnKeyType="done"
+                            autoComplete={this.formType === CONST.LOGIN_TYPE.PHONE ? 'tel' : 'email'}
                         />
                     </View>
                     {!Permissions.canUsePasswordlessLogins(this.props.betas) && (
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
new file mode 100644
index 000000000000..eca350a4e691
--- /dev/null
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -0,0 +1,261 @@
+import Str from 'expensify-common/lib/str';
+import lodashGet from 'lodash/get';
+import React, {Component} from 'react';
+import {View, ScrollView} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
+import ScreenWrapper from '../../../../components/ScreenWrapper';
+import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import compose from '../../../../libs/compose';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import MenuItem from '../../../../components/MenuItem';
+import styles from '../../../../styles/styles';
+import * as Expensicons from '../../../../components/Icon/Expensicons';
+import Text from '../../../../components/Text';
+import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
+import ConfirmModal from '../../../../components/ConfirmModal';
+import * as User from '../../../../libs/actions/User';
+import TextInput from '../../../../components/TextInput';
+import CONST from '../../../../CONST';
+import Icon from '../../../../components/Icon';
+import colors from '../../../../styles/colors';
+import Button from '../../../../components/Button';
+import * as ErrorUtils from '../../../../libs/ErrorUtils';
+import themeColors from '../../../../styles/themes/default';
+import NotFoundPage from '../../../ErrorPage/NotFoundPage';
+import * as ValidationUtils from '../../../../libs/ValidationUtils';
+
+const propTypes = {
+    /* Onyx Props */
+
+    /** Login list for the user that is signed in */
+    loginList: PropTypes.shape({
+        /** Value of partner name */
+        partnerName: PropTypes.string,
+
+        /** Phone/Email associated with user */
+        partnerUserID: PropTypes.string,
+
+        /** Date when login was validated */
+        validatedDate: PropTypes.string,
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+
+        /** Field-specific pending states for offline UI status */
+        pendingFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
+
+    /** Current user session */
+    session: PropTypes.shape({
+        email: PropTypes.string.isRequired,
+    }),
+
+    /** Route params */
+    route: PropTypes.shape({
+        params: PropTypes.shape({
+            /** Passed via route /settings/profile/contact-methods/:contactMethod/details */
+            contactMethod: PropTypes.string,
+        }),
+    }),
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    loginList: {},
+    session: {
+        email: null,
+    },
+    route: {
+        params: {
+            contactMethod: '',
+        },
+    },
+};
+
+class ContactMethodDetailsPage extends Component {
+    constructor(props) {
+        super(props);
+
+        this.toggleDeleteModal = this.toggleDeleteModal.bind(this);
+        this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
+        this.resendValidateCode = this.resendValidateCode.bind(this);
+        this.getContactMethod = this.getContactMethod.bind(this);
+        this.validateAndSubmitCode = this.validateAndSubmitCode.bind(this);
+
+        this.state = {
+            formError: '',
+            isDeleteModalOpen: false,
+            validateCode: '',
+        };
+    }
+
+    /**
+     * Gets the current contact method from the route params
+     *
+     * @returns {string}
+     */
+    getContactMethod() {
+        return decodeURIComponent(lodashGet(this.props.route, 'params.contactMethod'));
+    }
+
+    /**
+     * Toggle delete confirm modal visibility
+     * @param {Boolean} isOpen
+     */
+    toggleDeleteModal(isOpen) {
+        this.setState({isDeleteModalOpen: isOpen});
+    }
+
+    /**
+     * Delete the contact method and hide the modal
+     */
+    confirmDeleteAndHideModal() {
+        this.toggleDeleteModal(false);
+        User.deleteContactMethod(this.getContactMethod());
+    }
+
+    /**
+     * Request a validate code / magic code be sent to verify this contact method
+     */
+    resendValidateCode() {
+        User.requestContactMethodValidateCode(this.getContactMethod());
+    }
+
+    /**
+     * Attempt to validate this contact method
+     */
+    validateAndSubmitCode() {
+        if (!this.state.validateCode) {
+            this.setState({formError: 'validateCodeForm.error.pleaseFillMagicCode'});
+        } else if (!ValidationUtils.isValidValidateCode(this.state.validateCode)) {
+            this.setState({formError: 'validateCodeForm.error.incorrectMagicCode'});
+        } else {
+            this.setState({formError: ''});
+            User.validateSecondaryLogin(this.getContactMethod(), this.state.validateCode);
+        }
+    }
+
+    render() {
+        const contactMethod = this.getContactMethod();
+        const loginData = this.props.loginList[contactMethod];
+        if (!contactMethod || !loginData) {
+            return <NotFoundPage />;
+        }
+
+        const isDefaultContactMethod = this.props.session.email === loginData.partnerUserID;
+        const hasMagicCodeBeenSent = lodashGet(this.props.loginList, [contactMethod, 'validateCodeSent'], false);
+        const formErrorText = this.state.formError ? this.props.translate(this.state.formError) : '';
+
+        return (
+            <ScreenWrapper>
+                <HeaderWithCloseButton
+                    title={Str.removeSMSDomain(contactMethod)}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <ScrollView keyboardShouldPersistTaps="handled">
+                    <ConfirmModal
+                        title={this.props.translate('contacts.removeContactMethod')}
+                        onConfirm={this.confirmDeleteAndHideModal}
+                        onCancel={() => this.toggleDeleteModal(false)}
+                        prompt={this.props.translate('contacts.removeAreYouSure')}
+                        confirmText={this.props.translate('common.yesContinue')}
+                        isVisible={this.state.isDeleteModalOpen}
+                        danger
+                    />
+                    {!loginData.validatedDate && (
+                        <View style={[styles.ph5, styles.mt3, styles.mb7]}>
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb1]}>
+                                <Icon src={Expensicons.DotIndicator} fill={colors.green} />
+                                <View style={[styles.flex1, styles.ml4]}>
+                                    <Text>
+                                        {this.props.translate('contacts.enterMagicCode', {contactMethod})}
+                                    </Text>
+                                </View>
+                            </View>
+                            <TextInput
+                                label={this.props.translate('common.magicCode')}
+                                name="validateCode"
+                                value={this.state.validateCode}
+                                onChangeText={text => this.setState({validateCode: text})}
+                                keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                                errorText={formErrorText}
+                            />
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(loginData, 'pendingFields.validateCodeSent', null)}
+                                errors={ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
+                                errorRowStyles={[styles.mt2]}
+                                onClose={() => User.clearContactMethodErrors(contactMethod, 'validateCodeSent')}
+                            >
+                                <View
+                                    style={[styles.mt2, styles.dFlex, styles.flexRow]}
+                                >
+                                    <Text style={[styles.link, styles.mr1]} onPress={this.resendValidateCode}>
+                                        {this.props.translate('contacts.resendMagicCode')}
+                                    </Text>
+                                    {hasMagicCodeBeenSent && (
+                                        <Icon src={Expensicons.Checkmark} fill={colors.green} />
+                                    )}
+                                </View>
+                            </OfflineWithFeedback>
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(loginData, 'pendingFields.validateLogin', null)}
+                                errors={ErrorUtils.getLatestErrorField(loginData, 'validateLogin')}
+                                errorRowStyles={[styles.mt2]}
+                                onClose={() => User.clearContactMethodErrors(contactMethod, 'validateLogin')}
+                            >
+                                <Button
+                                    text={this.props.translate('common.verify')}
+                                    onPress={this.validateAndSubmitCode}
+                                    style={[styles.mt4]}
+                                    success
+                                    pressOnEnter
+                                />
+                            </OfflineWithFeedback>
+                        </View>
+                    )}
+                    {isDefaultContactMethod ? (
+                        <Text style={[styles.ph5, styles.mv3]}>
+                            {this.props.translate('contacts.yourDefaultContactMethod')}
+                        </Text>
+                    ) : (
+                        <OfflineWithFeedback
+                            pendingAction={lodashGet(loginData, 'pendingFields.deletedLogin', null)}
+                            errors={ErrorUtils.getLatestErrorField(loginData, 'deletedLogin')}
+                            errorRowStyles={[styles.mt6]}
+                            onClose={() => User.clearContactMethodErrors(contactMethod, 'deletedLogin')}
+                        >
+                            <MenuItem
+                                title={this.props.translate('common.remove')}
+                                icon={Expensicons.Trashcan}
+                                iconFill={themeColors.danger}
+                                onPress={() => this.toggleDeleteModal(true)}
+                            />
+                        </OfflineWithFeedback>
+                    )}
+                </ScrollView>
+            </ScreenWrapper>
+        );
+    }
+}
+
+ContactMethodDetailsPage.propTypes = propTypes;
+ContactMethodDetailsPage.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        loginList: {
+            key: ONYXKEYS.LOGIN_LIST,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+    }),
+)(ContactMethodDetailsPage);
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index edb998047c11..a205eb7da709 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -1,13 +1,13 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {Component} from 'react';
+import React from 'react';
+import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../../../components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import CONST from '../../../../CONST';
 import compose from '../../../../libs/compose';
@@ -15,124 +15,157 @@ import Navigation from '../../../../libs/Navigation/Navigation';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import ROUTES from '../../../../ROUTES';
 import LoginField from './LoginField';
+import MenuItem from '../../../../components/MenuItem';
+import Text from '../../../../components/Text';
+import styles from '../../../../styles/styles';
+import CopyTextToClipboard from '../../../../components/CopyTextToClipboard';
+import OfflineWithFeedback from '../../../../components/OfflineWithFeedback';
 
 const propTypes = {
     /* Onyx Props */
 
     /** Login list for the user that is signed in */
     loginList: PropTypes.shape({
-        /** Value of partner name */
+        /** The partner creating the account. It depends on the source: website, mobile, integrations, ... */
         partnerName: PropTypes.string,
 
         /** Phone/Email associated with user */
         partnerUserID: PropTypes.string,
 
-        /** Date of when login was validated */
+        /** The date when the login was validated, used to show the brickroad status */
         validatedDate: PropTypes.string,
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+
+        /** Field-specific pending states for offline UI status */
+        pendingFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
+
+    /** Current user session */
+    session: PropTypes.shape({
+        email: PropTypes.string.isRequired,
     }),
 
     ...withLocalizePropTypes,
-    ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     loginList: {},
-    ...withCurrentUserPersonalDetailsDefaultProps,
+    session: {
+        email: null,
+    },
 };
 
-class ContactMethodsPage extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            logins: this.getLogins(),
-        };
-
-        this.getLogins = this.getLogins.bind(this);
-    }
+const ContactMethodsPage = (props) => {
+    let hasPhoneNumberLogin = false;
+    let hasEmailLogin = false;
 
-    componentDidUpdate(prevProps) {
-        let stateToUpdate = {};
+    const loginMenuItems = _.map(props.loginList, (login, loginName) => {
+        const pendingAction = lodashGet(login, 'pendingFields.deletedLogin', null);
+        if (!login.partnerUserID && _.isEmpty(pendingAction)) {
+            return null;
+        }
 
-        // Recalculate logins if loginList has changed
-        if (_.keys(this.props.loginList).length !== _.keys(prevProps.loginList).length) {
-            stateToUpdate = {logins: this.getLogins()};
+        let description = '';
+        if (props.session.email === login.partnerUserID) {
+            description = props.translate('contacts.getInTouch');
+        } else if (!login.validatedDate) {
+            description = props.translate('contacts.pleaseVerify');
+        }
+        let indicator = null;
+        if (_.some(lodashGet(login, 'errorFields', {}), errorField => !_.isEmpty(errorField))) {
+            indicator = CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
+        } else if (!login.validatedDate) {
+            indicator = CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
         }
 
-        if (_.isEmpty(stateToUpdate)) {
-            return;
+        // Temporary checks to determine if we need to show specific LoginField
+        // components. This check will be removed soon by this follow up PR:
+        // https://github.com/Expensify/App/pull/15330
+        // Also we still use login.partnerUserID here even though it could have been
+        // deleted optimistically because if the deletion is pending, we want to show
+        // the option to add a new phone or email login, so we don't want to find
+        // that login type in the list here.
+        if (Str.isValidPhone(Str.removeSMSDomain(login.partnerUserID))) {
+            hasPhoneNumberLogin = true;
+        } else if (Str.isValidEmail(login.partnerUserID)) {
+            hasEmailLogin = true;
         }
 
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState(stateToUpdate);
-    }
-
-    /**
-     * Get the most validated login of each type
-     *
-     * @returns {Object}
-     */
-    getLogins() {
-        return _.reduce(_.values(this.props.loginList), (logins, currentLogin) => {
-            const type = Str.isSMSLogin(currentLogin.partnerUserID) ? CONST.LOGIN_TYPE.PHONE : CONST.LOGIN_TYPE.EMAIL;
-            const login = Str.removeSMSDomain(currentLogin.partnerUserID);
-
-            // If there's already a login type that's validated and/or currentLogin isn't valid then return early
-            if ((login !== lodashGet(this.props.currentUserPersonalDetails, 'login')) && !_.isEmpty(logins[type])
-                && (logins[type].validatedDate || !currentLogin.validatedDate)) {
-                return logins;
-            }
-            return {
-                ...logins,
-                [type]: {
-                    ...currentLogin,
-                    type,
-                    partnerUserID: Str.removeSMSDomain(currentLogin.partnerUserID),
-                },
-            };
-        }, {
-            phone: {},
-            email: {},
-        });
-    }
-
-    render() {
+        // Default to using login key if we deleted login.partnerUserID optimistically
+        // but still need to show the pending login being deleted while offline.
+        const partnerUserID = login.partnerUserID || loginName;
         return (
-            <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('contacts.contactMethods')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+            <OfflineWithFeedback
+                pendingAction={pendingAction}
+                key={partnerUserID}
+            >
+                <MenuItem
+                    title={Str.removeSMSDomain(partnerUserID)}
+                    description={description}
+                    onPress={() => Navigation.navigate(ROUTES.getEditContactMethodRoute(partnerUserID))}
+                    brickRoadIndicator={indicator}
+                    shouldShowBasicTitle
+                    shouldShowRightIcon
+                    disabled={!_.isEmpty(pendingAction)}
                 />
-                <ScrollView>
+            </OfflineWithFeedback>
+        );
+    });
+
+    return (
+        <ScreenWrapper>
+            <HeaderWithCloseButton
+                title={props.translate('contacts.contactMethods')}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+            />
+            <ScrollView>
+                <View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
+                    <Text>
+                        {props.translate('contacts.helpTextBeforeEmail')}
+                        <CopyTextToClipboard
+                            text="receipts@expensify.com"
+                            textStyles={[styles.textBlue]}
+                        />
+                        <Text>{props.translate('contacts.helpTextAfterEmail')}</Text>
+                    </Text>
+                </View>
+                {loginMenuItems}
+                {/* The below fields will be removed soon, when we implement the new Add Contact Method page */}
+                {!hasEmailLogin && (
                     <LoginField
-                        label={this.props.translate('profilePage.emailAddress')}
-                        type="email"
-                        login={this.state.logins.email}
-                        defaultValue={this.state.logins.email}
+                        label={props.translate('profilePage.emailAddress')}
+                        type={CONST.LOGIN_TYPE.EMAIL}
+                        login={{}}
                     />
+                )}
+                {!hasPhoneNumberLogin && (
                     <LoginField
-                        label={this.props.translate('common.phoneNumber')}
-                        type="phone"
-                        login={this.state.logins.phone}
-                        defaultValue={this.state.logins.phone}
+                        label={props.translate('common.phoneNumber')}
+                        type={CONST.LOGIN_TYPE.PHONE}
+                        login={{}}
                     />
-                </ScrollView>
-            </ScreenWrapper>
-        );
-    }
-}
+                )}
+            </ScrollView>
+        </ScreenWrapper>
+    );
+};
 
 ContactMethodsPage.propTypes = propTypes;
 ContactMethodsPage.defaultProps = defaultProps;
+ContactMethodsPage.displayName = 'ContactMethodsPage';
 
 export default compose(
     withLocalize,
-    withCurrentUserPersonalDetails,
     withOnyx({
         loginList: {
             key: ONYXKEYS.LOGIN_LIST,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(ContactMethodsPage);
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 6672198dc7db..3ea4f9abb9f7 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -2,6 +2,8 @@ import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
 import {ScrollView} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import AvatarWithImagePicker from '../../../components/AvatarWithImagePicker';
@@ -20,13 +22,27 @@ import * as ReportUtils from '../../../libs/ReportUtils';
 import ROUTES from '../../../ROUTES';
 import styles from '../../../styles/styles';
 import * as Expensicons from '../../../components/Icon/Expensicons';
+import ONYXKEYS from '../../../ONYXKEYS';
+import * as UserUtils from '../../../libs/UserUtils';
 
 const propTypes = {
+    /* Onyx Props */
+
+    /** Login list for the user that is signed in */
+    loginList: PropTypes.shape({
+        /** Date login was validated, used to show brickroad info status */
+        validatedDate: PropTypes.string,
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
+
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
+    loginList: {},
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -39,6 +55,8 @@ const ProfilePage = (props) => {
         return lodashGet(props.translate('pronouns'), pronounsKey, props.translate('profilePage.selectYourPronouns'));
     };
     const currentUserDetails = props.currentUserPersonalDetails || {};
+    const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList);
+
     const profileSettingsOptions = [
         {
             description: props.translate('displayNamePage.headerTitle'),
@@ -49,6 +67,7 @@ const ProfilePage = (props) => {
             description: props.translate('contacts.contactMethod'),
             title: Str.removeSMSDomain(lodashGet(currentUserDetails, 'login', '')),
             pageRoute: ROUTES.SETTINGS_CONTACT_METHODS,
+            brickRoadIndicator: contactMethodBrickRoadIndicator,
         },
         {
             description: props.translate('pronounsPage.pronouns'),
@@ -94,6 +113,7 @@ const ProfilePage = (props) => {
                             title={detail.title}
                             description={detail.description}
                             onPress={() => Navigation.navigate(detail.pageRoute)}
+                            brickRoadIndicator={detail.brickRoadIndicator}
                         />
                     ))}
                 </View>
@@ -115,4 +135,9 @@ ProfilePage.displayName = 'ProfilePage';
 export default compose(
     withLocalize,
     withCurrentUserPersonalDetails,
+    withOnyx({
+        loginList: {
+            key: ONYXKEYS.LOGIN_LIST,
+        },
+    }),
 )(ProfilePage);
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index aeadeb32a88a..c5f398927b1b 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -106,6 +106,7 @@ class PronounsPage extends Component {
 
     render() {
         const filteredPronounsList = this.getFilteredPronouns();
+        const headerMessage = this.state.searchValue.trim() && !filteredPronounsList.length ? this.props.translate('common.noResultsFound') : '';
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
@@ -122,6 +123,8 @@ class PronounsPage extends Component {
                         </Text>
                         <OptionsSelector
                             textInputLabel={this.props.translate('pronounsPage.pronouns')}
+                            placeholderText={this.props.translate('pronounsPage.placeholderText')}
+                            headerMessage={headerMessage}
                             sections={[{data: filteredPronounsList}]}
                             value={this.state.searchValue}
                             onSelectRow={this.updatePronouns}
diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
index 97d3593eae34..34ec29fcaa9a 100755
--- a/src/pages/signin/LoginForm.js
+++ b/src/pages/signin/LoginForm.js
@@ -168,7 +168,7 @@ class LoginForm extends React.Component {
         const serverErrorText = ErrorUtils.getLatestErrorMessage(this.props.account);
         return (
             <>
-                <View accessibilityLabel="Login form" style={[styles.mt3]}>
+                <View accessibilityLabel={this.props.translate('loginForm.loginForm')} style={[styles.mt3]}>
                     <TextInput
                         ref={el => this.input = el}
                         label={this.props.translate('loginForm.phoneOrEmail')}
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 35239a2abf0b..ada7a6a4cf8e 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import {View, ScrollView, Pressable} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -42,230 +42,206 @@ const defaultProps = {
     ...policyDefaultProps,
 };
 
-class WorkspaceInitialPage extends React.Component {
-    constructor(props) {
-        super(props);
+/**
+ * @param {string} policyID
+ */
+function openEditor(policyID) {
+    Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(policyID));
+}
 
-        this.openEditor = this.openEditor.bind(this);
-        this.toggleDeleteModal = this.toggleDeleteModal.bind(this);
-        this.confirmDeleteAndHideModal = this.confirmDeleteAndHideModal.bind(this);
-        this.hasPolicyCreationError = this.hasPolicyCreationError.bind(this);
-        this.dismissError = this.dismissError.bind(this);
+/**
+ * @param {string} policyID
+ */
+function dismissError(policyID) {
+    Navigation.navigate(ROUTES.SETTINGS_WORKSPACES);
+    Policy.removeWorkspace(policyID);
+}
 
-        this.state = {
-            isDeleteModalOpen: false,
-        };
-    }
-
-    /**
-     * Open Workspace Editor
-     */
-    openEditor() {
-        Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(this.props.policy.id));
-    }
-
-    /**
-     * Toggle delete confirm modal visibility
-     * @param {Boolean} shouldOpen
-     */
-    toggleDeleteModal(shouldOpen) {
-        this.setState({isDeleteModalOpen: shouldOpen});
-    }
+const WorkspaceInitialPage = (props) => {
+    const policy = props.policy;
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const hasPolicyCreationError = Boolean(policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors);
 
     /**
      * Call the delete policy and hide the modal
      */
-    confirmDeleteAndHideModal() {
-        const policyReports = _.filter(this.props.reports, report => report && report.policyID === this.props.policy.id);
-        Policy.deleteWorkspace(this.props.policy.id, policyReports, this.props.policy.name);
-        this.toggleDeleteModal(false);
-        Navigation.navigate(ROUTES.SETTINGS_WORKSPACES);
-    }
-
-    /**
-     * @returns {Boolean}
-     */
-    hasPolicyCreationError() {
-        return Boolean(this.props.policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && this.props.policy.errors);
-    }
-
-    dismissError() {
+    const confirmDeleteAndHideModal = useCallback(() => {
+        const policyReports = _.filter(props.reports, report => report && report.policyID === policy.id);
+        Policy.deleteWorkspace(policy.id, policyReports, policy.name);
+        setIsDeleteModalOpen(false);
         Navigation.navigate(ROUTES.SETTINGS_WORKSPACES);
-        Policy.removeWorkspace(this.props.policy.id);
-    }
-
-    render() {
-        const policy = this.props.policy;
-        const policyName = lodashGet(this.props.policy, 'name', '');
-        const hasMembersError = PolicyUtils.hasPolicyMemberError(this.props.policyMemberList);
-        const hasGeneralSettingsError = !_.isEmpty(lodashGet(this.props.policy, 'errorFields.generalSettings', {}))
-            || !_.isEmpty(lodashGet(this.props.policy, 'errorFields.avatar', {}));
-        const hasCustomUnitsError = PolicyUtils.hasCustomUnitsError(this.props.policy);
-        const menuItems = [
-            {
-                translationKey: 'workspace.common.settings',
-                icon: Expensicons.Gear,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(policy.id)),
-                brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
-            },
-            {
-                translationKey: 'workspace.common.card',
-                icon: Expensicons.ExpensifyCard,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)),
-            },
-            {
-                translationKey: 'workspace.common.reimburse',
-                icon: Expensicons.Receipt,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceReimburseRoute(policy.id)),
-                error: hasCustomUnitsError,
-            },
-            {
-                translationKey: 'workspace.common.bills',
-                icon: Expensicons.Bill,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceBillsRoute(policy.id)),
-            },
-            {
-                translationKey: 'workspace.common.invoices',
-                icon: Expensicons.Invoice,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceInvoicesRoute(policy.id)),
-            },
-            {
-                translationKey: 'workspace.common.travel',
-                icon: Expensicons.Luggage,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceTravelRoute(policy.id)),
-            },
-            {
-                translationKey: 'workspace.common.members',
-                icon: Expensicons.Users,
-                action: () => Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id)),
-                brickRoadIndicator: hasMembersError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
-            },
-            {
-                translationKey: 'workspace.common.bankAccount',
-                icon: Expensicons.Bank,
-                action: () => ReimbursementAccount.navigateToBankAccountRoute(policy.id),
-            },
-        ];
-
-        return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                {({safeAreaPaddingBottomStyle}) => (
-                    <FullPageNotFoundView
-                        shouldShow={_.isEmpty(this.props.policy)}
+    }, [props.reports, policy]);
+
+    const policyName = lodashGet(policy, 'name', '');
+    const hasMembersError = PolicyUtils.hasPolicyMemberError(props.policyMemberList);
+    const hasGeneralSettingsError = !_.isEmpty(lodashGet(policy, 'errorFields.generalSettings', {}))
+        || !_.isEmpty(lodashGet(policy, 'errorFields.avatar', {}));
+    const hasCustomUnitsError = PolicyUtils.hasCustomUnitsError(policy);
+    const menuItems = [
+        {
+            translationKey: 'workspace.common.settings',
+            icon: Expensicons.Gear,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(policy.id)),
+            brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
+        },
+        {
+            translationKey: 'workspace.common.card',
+            icon: Expensicons.ExpensifyCard,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)),
+        },
+        {
+            translationKey: 'workspace.common.reimburse',
+            icon: Expensicons.Receipt,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceReimburseRoute(policy.id)),
+            error: hasCustomUnitsError,
+        },
+        {
+            translationKey: 'workspace.common.bills',
+            icon: Expensicons.Bill,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceBillsRoute(policy.id)),
+        },
+        {
+            translationKey: 'workspace.common.invoices',
+            icon: Expensicons.Invoice,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceInvoicesRoute(policy.id)),
+        },
+        {
+            translationKey: 'workspace.common.travel',
+            icon: Expensicons.Luggage,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceTravelRoute(policy.id)),
+        },
+        {
+            translationKey: 'workspace.common.members',
+            icon: Expensicons.Users,
+            action: () => Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id)),
+            brickRoadIndicator: hasMembersError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
+        },
+        {
+            translationKey: 'workspace.common.bankAccount',
+            icon: Expensicons.Bank,
+            action: () => ReimbursementAccount.navigateToBankAccountRoute(policy.id),
+        },
+    ];
+
+    return (
+        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            {({safeAreaPaddingBottomStyle}) => (
+                <FullPageNotFoundView
+                    shouldShow={_.isEmpty(policy)}
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                >
+                    <HeaderWithCloseButton
+                        title={props.translate('workspace.common.workspace')}
+                        shouldShowBackButton
                         onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
+                        shouldShowThreeDotsButton
+                        shouldShowGetAssistanceButton
+                        guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
+                        threeDotsMenuItems={[
+                            {
+                                icon: Expensicons.Trashcan,
+                                text: props.translate('workspace.common.delete'),
+                                onSelected: () => setIsDeleteModalOpen(true),
+                            },
+                        ]}
+                        threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
+                    />
+                    <ScrollView
+                        contentContainerStyle={[
+                            styles.flexGrow1,
+                            styles.flexColumn,
+                            styles.justifyContentBetween,
+                            safeAreaPaddingBottomStyle,
+                        ]}
                     >
-                        <HeaderWithCloseButton
-                            title={this.props.translate('workspace.common.workspace')}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                            onCloseButtonPress={() => Navigation.dismissModal()}
-                            shouldShowThreeDotsButton
-                            shouldShowGetAssistanceButton
-                            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
-                            threeDotsMenuItems={[
-                                {
-                                    icon: Expensicons.Trashcan,
-                                    text: this.props.translate('workspace.common.delete'),
-                                    onSelected: () => this.setState({isDeleteModalOpen: true}),
-                                },
-                            ]}
-                            threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
-                        />
-                        <ScrollView
-                            contentContainerStyle={[
-                                styles.flexGrow1,
-                                styles.flexColumn,
-                                styles.justifyContentBetween,
-                                safeAreaPaddingBottomStyle,
-                            ]}
+                        <OfflineWithFeedback
+                            pendingAction={policy.pendingAction}
+                            onClose={() => dismissError(policy.id)}
+                            errors={policy.errors}
+                            errorRowStyles={[styles.ph6, styles.pv2]}
                         >
-                            <OfflineWithFeedback
-                                pendingAction={this.props.policy.pendingAction}
-                                onClose={this.dismissError}
-                                errors={this.props.policy.errors}
-                                errorRowStyles={[styles.ph6, styles.pv2]}
-                            >
-                                <View style={[styles.flex1]}>
-                                    <View style={styles.avatarSectionWrapper}>
-                                        <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
+                            <View style={[styles.flex1]}>
+                                <View style={styles.avatarSectionWrapper}>
+                                    <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
+                                        <Pressable
+                                            disabled={hasPolicyCreationError}
+                                            style={[styles.pRelative, styles.avatarLarge]}
+                                            onPress={() => openEditor(policy.id)}
+                                        >
+                                            <Tooltip text={props.translate('workspace.common.settings')}>
+                                                <Avatar
+                                                    containerStyles={styles.avatarLarge}
+                                                    imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                                    source={policy.avatar ? policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policyName)}
+                                                    fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                                    size={CONST.AVATAR_SIZE.LARGE}
+                                                    name={policyName}
+                                                    type={CONST.ICON_TYPE_WORKSPACE}
+                                                />
+                                            </Tooltip>
+                                        </Pressable>
+                                        {!_.isEmpty(policy.name) && (
                                             <Pressable
-                                                disabled={this.hasPolicyCreationError()}
-                                                style={[styles.pRelative, styles.avatarLarge]}
-                                                onPress={this.openEditor}
+                                                disabled={hasPolicyCreationError}
+                                                style={[
+                                                    styles.alignSelfCenter,
+                                                    styles.mt4,
+                                                    styles.w100,
+                                                ]}
+                                                onPress={() => openEditor(policy.id)}
                                             >
-                                                <Tooltip text={this.props.translate('workspace.common.settings')}>
-                                                    <Avatar
-                                                        containerStyles={styles.avatarLarge}
-                                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
-                                                        source={this.props.policy.avatar ? this.props.policy.avatar : ReportUtils.getDefaultWorkspaceAvatar(policyName)}
-                                                        fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                                        size={CONST.AVATAR_SIZE.LARGE}
-                                                        name={policyName}
-                                                        type={CONST.ICON_TYPE_WORKSPACE}
-                                                    />
+                                                <Tooltip text={props.translate('workspace.common.settings')}>
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[
+                                                            styles.textHeadline,
+                                                            styles.alignSelfCenter,
+                                                            styles.pre,
+                                                        ]}
+                                                    >
+                                                        {policy.name}
+                                                    </Text>
                                                 </Tooltip>
                                             </Pressable>
-                                            {!_.isEmpty(this.props.policy.name) && (
-                                                <Pressable
-                                                    disabled={this.hasPolicyCreationError()}
-                                                    style={[
-                                                        styles.alignSelfCenter,
-                                                        styles.mt4,
-                                                        styles.w100,
-                                                    ]}
-                                                    onPress={this.openEditor}
-                                                >
-                                                    <Tooltip text={this.props.translate('workspace.common.settings')}>
-                                                        <Text
-                                                            numberOfLines={1}
-                                                            style={[
-                                                                styles.textHeadline,
-                                                                styles.alignSelfCenter,
-                                                                styles.pre,
-                                                            ]}
-                                                        >
-                                                            {this.props.policy.name}
-                                                        </Text>
-                                                    </Tooltip>
-                                                </Pressable>
-                                            )}
-                                        </View>
+                                        )}
                                     </View>
-                                    {_.map(menuItems, item => (
-                                        <MenuItem
-                                            key={item.translationKey}
-                                            disabled={this.hasPolicyCreationError()}
-                                            interactive={!this.hasPolicyCreationError()}
-                                            title={this.props.translate(item.translationKey)}
-                                            icon={item.icon}
-                                            iconRight={item.iconRight}
-                                            onPress={() => item.action()}
-                                            shouldShowRightIcon
-                                            brickRoadIndicator={item.brickRoadIndicator}
-                                        />
-                                    ))}
                                 </View>
-                            </OfflineWithFeedback>
-                        </ScrollView>
-                        <ConfirmModal
-                            title={this.props.translate('workspace.common.delete')}
-                            isVisible={this.state.isDeleteModalOpen}
-                            onConfirm={this.confirmDeleteAndHideModal}
-                            onCancel={() => this.toggleDeleteModal(false)}
-                            prompt={this.props.translate('workspace.common.deleteConfirmation')}
-                            confirmText={this.props.translate('common.delete')}
-                            cancelText={this.props.translate('common.cancel')}
-                            danger
-                        />
-                    </FullPageNotFoundView>
-                )}
-            </ScreenWrapper>
-        );
-    }
-}
+                                {_.map(menuItems, item => (
+                                    <MenuItem
+                                        key={item.translationKey}
+                                        disabled={hasPolicyCreationError}
+                                        interactive={!hasPolicyCreationError}
+                                        title={props.translate(item.translationKey)}
+                                        icon={item.icon}
+                                        iconRight={item.iconRight}
+                                        onPress={() => item.action()}
+                                        shouldShowRightIcon
+                                        brickRoadIndicator={item.brickRoadIndicator}
+                                    />
+                                ))}
+                            </View>
+                        </OfflineWithFeedback>
+                    </ScrollView>
+                    <ConfirmModal
+                        title={props.translate('workspace.common.delete')}
+                        isVisible={isDeleteModalOpen}
+                        onConfirm={confirmDeleteAndHideModal}
+                        onCancel={() => setIsDeleteModalOpen(false)}
+                        prompt={props.translate('workspace.common.deleteConfirmation')}
+                        confirmText={props.translate('common.delete')}
+                        cancelText={props.translate('common.cancel')}
+                        danger
+                    />
+                </FullPageNotFoundView>
+            )}
+        </ScreenWrapper>
+    );
+};
 
 WorkspaceInitialPage.propTypes = propTypes;
 WorkspaceInitialPage.defaultProps = defaultProps;
+WorkspaceInitialPage.displayName = 'WorkspaceInitialPage';
 
 export default compose(
     withLocalize,
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 812a817dc503..a8eaafffdf2e 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -33,6 +33,8 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import FormHelpMessage from '../../components/FormHelpMessage';
 import TextInput from '../../components/TextInput';
 import KeyboardDismissingFlatList from '../../components/KeyboardDismissingFlatList';
+import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails';
+import * as PolicyUtils from '../../libs/PolicyUtils';
 
 const propTypes = {
     /** The personal details of the person who is logged in */
@@ -127,6 +129,7 @@ class WorkspaceMembersPage extends React.Component {
      * Open the modal to invite a user
      */
     inviteUser() {
+        this.updateSearchValue('');
         Navigation.navigate(ROUTES.getWorkspaceInviteRoute(this.props.route.params.policyID));
     }
 
@@ -247,11 +250,11 @@ class WorkspaceMembersPage extends React.Component {
     }
 
     /**
-     * @param {String} value
+     * @param {String} [value = '']
      * @param {String} keyword
      * @returns {Boolean}
      */
-    isKeywordMatch(value, keyword) {
+    isKeywordMatch(value = '', keyword) {
         return value.trim().toLowerCase().includes(keyword);
     }
 
@@ -335,6 +338,18 @@ class WorkspaceMembersPage extends React.Component {
             || this.isKeywordMatch(member.firstName, searchValue)
             || this.isKeywordMatch(member.lastName, searchValue));
 
+        data = _.reject(data, (member) => {
+            // If this policy is owned by Expensify then show all support (expensify.com or team.expensify.com) emails
+            if (PolicyUtils.isExpensifyTeam(lodashGet(this.props.policy, 'owner'))) {
+                return;
+            }
+
+            // We don't want to show guides as policy members unless the user is not a guide. Some customers get confused when they
+            // see random people added to their policy, but guides having access to the policies help set them up.
+            const isCurrentUserExpensifyTeam = PolicyUtils.isExpensifyTeam(this.props.currentUserPersonalDetails.login);
+            return !isCurrentUserExpensifyTeam && PolicyUtils.isExpensifyTeam(member.login);
+        });
+
         _.each(data, (member) => {
             if (member.login === this.props.session.email || member.login === this.props.policy.owner || member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
                 return;
@@ -359,6 +374,7 @@ class WorkspaceMembersPage extends React.Component {
                             subtitle={policyName}
                             onCloseButtonPress={() => Navigation.dismissModal()}
                             onBackButtonPress={() => {
+                                this.updateSearchValue('');
                                 Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID));
                             }}
                             shouldShowGetAssistanceButton
@@ -426,13 +442,11 @@ class WorkspaceMembersPage extends React.Component {
                                     />
                                 </View>
                             ) : (
-                                !_.isEmpty(policyMemberList) && (
-                                    <View style={[styles.ph5]}>
-                                        <Text style={[styles.textLabel, styles.colorMuted]}>
-                                            {this.props.translate('common.noResultsFound')}
-                                        </Text>
-                                    </View>
-                                )
+                                <View style={[styles.ph5]}>
+                                    <Text style={[styles.textLabel, styles.colorMuted]}>
+                                        {this.props.translate('common.noResultsFound')}
+                                    </Text>
+                                </View>
                             )}
                         </View>
                     </FullPageNotFoundView>
@@ -458,4 +472,5 @@ export default compose(
             key: ONYXKEYS.SESSION,
         },
     }),
+    withCurrentUserPersonalDetails,
 )(WorkspaceMembersPage);
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
index dd31c56d2884..d212e3a75a0e 100644
--- a/src/pages/workspace/WorkspaceSettingsPage.js
+++ b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -7,7 +7,6 @@ import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
-import Text from '../../components/Text';
 import compose from '../../libs/compose';
 import * as Policy from '../../libs/actions/Policy';
 import * as Expensicons from '../../components/Icon/Expensicons';
@@ -143,11 +142,13 @@ class WorkspaceSettingsPage extends React.Component {
                                     items={this.getCurrencyItems()}
                                     isDisabled={hasVBA}
                                     defaultValue={this.props.policy.outputCurrency}
+                                    hintText={
+                                        hasVBA
+                                            ? this.props.translate('workspace.editor.currencyInputDisabledText')
+                                            : this.props.translate('workspace.editor.currencyInputHelpText')
+                                    }
                                 />
                             </View>
-                            <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
-                                {this.props.translate('workspace.editor.currencyInputHelpText')}
-                            </Text>
                         </OfflineWithFeedback>
                     </Form>
                 )}
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index 9b02db7951a9..b1d7408cbfb7 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -23,7 +23,7 @@ const PressOnEnter = (props) => {
     const onPress = useCallback(() => {
         setText('Button Pressed!');
         setTimeout(() => setText(''), 500);
-    });
+    }, []);
     return (
         <Button
         // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js
index 9a7a0ea88c4b..8b9904416bec 100644
--- a/src/stories/Picker.stories.js
+++ b/src/stories/Picker.stories.js
@@ -31,6 +31,7 @@ const Default = Template.bind({});
 Default.args = {
     label: 'Default picker',
     name: 'Default',
+    hintText: 'Default hint text',
     items: [
         {
             label: 'Orange',
@@ -48,6 +49,7 @@ PickerWithValue.args = {
     label: 'Picker with defined value',
     name: 'Picker with defined value',
     value: 'apple',
+    hintText: 'Picker with hint text',
     items: [
         {
             label: 'Orange',
@@ -64,6 +66,7 @@ const ErrorStory = Template.bind({});
 ErrorStory.args = {
     label: 'Picker with error',
     name: 'PickerWithError',
+    hintText: 'Picker hint text',
     errorText: 'This field has an error.',
     items: [
         {
@@ -81,7 +84,9 @@ const Disabled = Template.bind({});
 Disabled.args = {
     label: 'Picker disabled',
     name: 'Disabled',
+    value: 'orange',
     isDisabled: true,
+    hintText: 'Picker hint text',
     items: [
         {
             label: 'Orange',
diff --git a/src/styles/getTooltipStyles.js b/src/styles/getTooltipStyles.js
index cb024f98d6b0..62b61cabcd87 100644
--- a/src/styles/getTooltipStyles.js
+++ b/src/styles/getTooltipStyles.js
@@ -194,6 +194,10 @@ export default function getTooltipStyles(
             fontSize: tooltipFontSize,
             overflow: 'hidden',
             lineHeight: variables.lineHeightSmall,
+
+            // To measure tooltip text width correctly we render it freely i.e. text should not wrap to parent's boundaries.
+            // More info: https://github.com/Expensify/App/issues/15949#issuecomment-1483011998
+            ...(tooltipContentWidth ? {} : styles.pre),
         },
         pointerWrapperStyle: {
             position: 'fixed',
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d59ca9ae9a25..bf37f87b74d8 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1064,49 +1064,18 @@ const styles = {
         width: variables.componentSizeNormal,
     },
 
-    statusIndicator: {
+    statusIndicator: (backgroundColor = themeColors.danger) => ({
         borderColor: themeColors.sidebar,
-        backgroundColor: themeColors.danger,
-        borderRadius: 6,
-        borderWidth: 2,
-        position: 'absolute',
-        right: -1,
-        bottom: -1,
-        height: 12,
-        width: 12,
-        zIndex: 10,
-    },
-
-    statusIndicatorLarge: {
-        borderColor: themeColors.componentBG,
-        backgroundColor: themeColors.danger,
+        backgroundColor,
         borderRadius: 8,
         borderWidth: 2,
         position: 'absolute',
-        right: 4,
-        bottom: 4,
+        right: -2,
+        top: -1,
         height: 16,
         width: 16,
         zIndex: 10,
-    },
-
-    statusIndicatorOnline: {
-        backgroundColor: themeColors.success,
-    },
-
-    avatarWithIndicator: {
-        errorDot: {
-            borderColor: themeColors.sidebar,
-            borderRadius: 6,
-            borderWidth: 2,
-            position: 'absolute',
-            right: -1,
-            bottom: -1,
-            height: 12,
-            width: 12,
-            zIndex: 10,
-        },
-    },
+    }),
 
     floatingActionButtonContainer: {
         position: 'absolute',
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index fd58de57c675..44cc709fe469 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -205,6 +205,10 @@ export default {
         marginBottom: 24,
     },
 
+    mb7: {
+        marginBottom: 28,
+    },
+
     mb8: {
         marginBottom: 32,
     },
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index 5f65d8b20b50..ad2d622a4315 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -24,6 +24,7 @@ import * as User from '../../src/libs/actions/User';
 import * as Pusher from '../../src/libs/Pusher/pusher';
 import PusherConnectionManager from '../../src/libs/PusherConnectionManager';
 import CONFIG from '../../src/CONFIG';
+import * as Localize from '../../src/libs/Localize';
 
 // We need a large timeout here as we are lazy loading React Navigation screens and this test is running against the entire mounted App
 jest.setTimeout(30000);
@@ -51,7 +52,8 @@ beforeAll(() => {
 });
 
 function scrollUpToRevealNewMessagesBadge() {
-    fireEvent.scroll(screen.queryByLabelText('List of chat messages'), {
+    const hintText = Localize.translateLocal('sidebarScreen.listOfChatMessages');
+    fireEvent.scroll(screen.queryByLabelText(hintText), {
         nativeEvent: {
             contentOffset: {
                 y: 250,
@@ -74,7 +76,8 @@ function scrollUpToRevealNewMessagesBadge() {
  * @return {Boolean}
  */
 function isNewMessagesBadgeVisible() {
-    const badge = screen.queryByAccessibilityHint('Scroll to newest messages');
+    const hintText = Localize.translateLocal('accessibilityHints.scrollToNewestMessages');
+    const badge = screen.queryByAccessibilityHint(hintText);
     return Math.round(badge.props.style.transform[0].translateY) === 10;
 }
 
@@ -82,7 +85,8 @@ function isNewMessagesBadgeVisible() {
  * @return {Promise}
  */
 function navigateToSidebar() {
-    const reportHeaderBackButton = screen.queryByAccessibilityHint('Navigate back to chats list');
+    const hintText = Localize.translateLocal('accessibilityHints.navigateToChatsList');
+    const reportHeaderBackButton = screen.queryByAccessibilityHint(hintText);
     fireEvent(reportHeaderBackButton, 'press');
     return waitForPromisesToResolve();
 }
@@ -92,7 +96,8 @@ function navigateToSidebar() {
  * @return {Promise}
  */
 function navigateToSidebarOption(index) {
-    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+    const optionRows = screen.queryAllByAccessibilityHint(hintText);
     fireEvent(optionRows[index], 'press');
     return waitForPromisesToResolve();
 }
@@ -101,7 +106,8 @@ function navigateToSidebarOption(index) {
  * @return {Boolean}
  */
 function isDrawerOpen() {
-    const sidebarLinks = screen.queryAllByLabelText('List of chats');
+    const hintText = Localize.translateLocal('sidebarScreen.listOfChats');
+    const sidebarLinks = screen.queryAllByLabelText(hintText);
     return !lodashGet(sidebarLinks, [0, 'props', 'accessibilityElementsHidden']);
 }
 
@@ -126,7 +132,8 @@ function signInAndGetAppWithUnreadChat() {
     render(<App />);
     return waitForPromisesToResolveWithAct()
         .then(() => {
-            const loginForm = screen.queryAllByLabelText('Login form');
+            const hintText = Localize.translateLocal('loginForm.loginForm');
+            const loginForm = screen.queryAllByLabelText(hintText);
             expect(loginForm).toHaveLength(1);
 
             return TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A');
@@ -201,16 +208,19 @@ describe('Unread Indicators', () => {
             expect(LocalNotification.showCommentNotification.mock.calls).toHaveLength(0);
 
             // Verify the sidebar links are rendered
-            const sidebarLinks = screen.queryAllByLabelText('List of chats');
+            const sidebarLinksHintText = Localize.translateLocal('sidebarScreen.listOfChats');
+            const sidebarLinks = screen.queryAllByLabelText(sidebarLinksHintText);
             expect(sidebarLinks).toHaveLength(1);
             expect(isDrawerOpen()).toBe(true);
 
             // Verify there is only one option in the sidebar
-            const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+            const optionRowsHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+            const optionRows = screen.queryAllByAccessibilityHint(optionRowsHintText);
             expect(optionRows).toHaveLength(1);
 
             // And that the text is bold
-            const displayNameText = screen.queryByLabelText('Chat user display names');
+            const displayNameHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameText = screen.queryByLabelText(displayNameHintText);
             expect(lodashGet(displayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold);
 
             return navigateToSidebarOption(0);
@@ -220,14 +230,17 @@ describe('Unread Indicators', () => {
             expect(isDrawerOpen()).toBe(false);
 
             // That the report actions are visible along with the created action
-            const createdAction = screen.queryByLabelText('Chat welcome message');
+            const welcomeMessageHintText = Localize.translateLocal('accessibilityHints.chatWelcomeMessage');
+            const createdAction = screen.queryByLabelText(welcomeMessageHintText);
             expect(createdAction).toBeTruthy();
-            const reportComments = screen.queryAllByLabelText('Chat message');
+            const reportCommentsHintText = Localize.translateLocal('accessibilityHints.chatMessage');
+            const reportComments = screen.queryAllByLabelText(reportCommentsHintText);
             expect(reportComments).toHaveLength(9);
 
             // Since the last read timestamp is the timestamp of action 3 we should have an unread indicator above the next "unread" action which will
             // have actionID of 4
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(1);
             const reportActionID = lodashGet(unreadIndicator, [0, 'props', 'data-action-id']);
             expect(reportActionID).toBe('4');
@@ -252,7 +265,8 @@ describe('Unread Indicators', () => {
             expect(isDrawerOpen()).toBe(true);
 
             // Verify that the option row in the LHN is no longer bold (since OpenReport marked it as read)
-            const updatedDisplayNameText = screen.queryByLabelText('Chat user display names');
+            const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const updatedDisplayNameText = screen.queryByLabelText(hintText);
             expect(lodashGet(updatedDisplayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(undefined);
 
             // Tap on the chat again
@@ -260,7 +274,8 @@ describe('Unread Indicators', () => {
         })
         .then(() => {
             // Verify the unread indicator is not present
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(0);
             expect(isDrawerOpen()).toBe(false);
 
@@ -334,11 +349,13 @@ describe('Unread Indicators', () => {
         })
         .then(() => {
             // // Verify the new report option appears in the LHN
-            const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+            const optionRowsHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+            const optionRows = screen.queryAllByAccessibilityHint(optionRowsHintText);
             expect(optionRows).toHaveLength(2);
 
             // Verify the text for both chats are bold indicating that nothing has not yet been read
-            const displayNameTexts = screen.queryAllByLabelText('Chat user display names');
+            const displayNameHintTexts = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameTexts = screen.queryAllByLabelText(displayNameHintTexts);
             expect(displayNameTexts).toHaveLength(2);
             const firstReportOption = displayNameTexts[0];
             expect(lodashGet(firstReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold);
@@ -353,7 +370,8 @@ describe('Unread Indicators', () => {
         })
         .then(() => {
             // Verify that report we navigated to appears in a "read" state while the original unread report still shows as unread
-            const displayNameTexts = screen.queryAllByLabelText('Chat user display names');
+            const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameTexts = screen.queryAllByLabelText(hintText);
             expect(displayNameTexts).toHaveLength(2);
             expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined);
             expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('C User');
@@ -373,7 +391,8 @@ describe('Unread Indicators', () => {
         })
         .then(() => {
             // Verify the indicator appears above the last action
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(1);
             const reportActionID = lodashGet(unreadIndicator, [0, 'props', 'data-action-id']);
             expect(reportActionID).toBe('3');
@@ -387,7 +406,8 @@ describe('Unread Indicators', () => {
         .then(navigateToSidebar)
         .then(() => {
             // Verify the report is marked as unread in the sidebar
-            const displayNameTexts = screen.queryAllByLabelText('Chat user display names');
+            const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameTexts = screen.queryAllByLabelText(hintText);
             expect(displayNameTexts).toHaveLength(1);
             expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold);
             expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User');
@@ -398,7 +418,8 @@ describe('Unread Indicators', () => {
         .then(() => navigateToSidebar())
         .then(() => {
             // Verify the report is now marked as read
-            const displayNameTexts = screen.queryAllByLabelText('Chat user display names');
+            const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameTexts = screen.queryAllByLabelText(hintText);
             expect(displayNameTexts).toHaveLength(1);
             expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined);
             expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User');
@@ -407,7 +428,8 @@ describe('Unread Indicators', () => {
             return navigateToSidebarOption(0);
         })
         .then(() => {
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(0);
 
             // Scroll up and verify the "New messages" badge is hidden
@@ -420,7 +442,8 @@ describe('Unread Indicators', () => {
             // Verify we are on the LHN and that the chat shows as unread in the LHN
             expect(isDrawerOpen()).toBe(true);
 
-            const displayNameTexts = screen.queryAllByLabelText('Chat user display names');
+            const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameTexts = screen.queryAllByLabelText(hintText);
             expect(displayNameTexts).toHaveLength(1);
             expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User');
             expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold);
@@ -429,7 +452,8 @@ describe('Unread Indicators', () => {
             return navigateToSidebarOption(0);
         })
         .then(() => {
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(1);
 
             // Leave a comment as the current user and verify the indicator is removed
@@ -437,7 +461,8 @@ describe('Unread Indicators', () => {
             return waitForPromisesToResolve();
         })
         .then(() => {
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(0);
         }));
 
@@ -446,7 +471,8 @@ describe('Unread Indicators', () => {
             // Verify we are on the LHN and that the chat shows as unread in the LHN
             expect(isDrawerOpen()).toBe(true);
 
-            const displayNameTexts = screen.queryAllByLabelText('Chat user display names');
+            const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+            const displayNameTexts = screen.queryAllByLabelText(hintText);
             expect(displayNameTexts).toHaveLength(1);
             expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User');
             expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold);
@@ -455,7 +481,8 @@ describe('Unread Indicators', () => {
             return navigateToSidebarOption(0);
         })
         .then(() => {
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(1);
 
             // Then back to the LHN - then back to the chat again and verify the new line indicator has cleared
@@ -463,7 +490,8 @@ describe('Unread Indicators', () => {
         })
         .then(() => navigateToSidebarOption(0))
         .then(() => {
-            const unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(0);
 
             // Mark a previous comment as unread and verify the unread action indicator returns
@@ -471,7 +499,8 @@ describe('Unread Indicators', () => {
             return waitForPromisesToResolve();
         })
         .then(() => {
-            let unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator');
+            let unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(1);
 
             // Trigger the app going inactive and active again
@@ -479,7 +508,7 @@ describe('Unread Indicators', () => {
             AppState.emitCurrentTestState('active');
 
             // Verify the new line is still present
-            unreadIndicator = screen.queryAllByLabelText('New message line indicator');
+            unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText);
             expect(unreadIndicator).toHaveLength(1);
         }));
 
@@ -512,7 +541,8 @@ describe('Unread Indicators', () => {
             })
             .then(() => {
                 // Verify the chat preview text matches the last comment from the current user
-                const alternateText = screen.queryAllByLabelText('Last chat message preview');
+                const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview');
+                const alternateText = screen.queryAllByLabelText(hintText);
                 expect(alternateText).toHaveLength(1);
                 expect(alternateText[0].props.children).toBe('Current User Comment 1');
 
@@ -520,7 +550,8 @@ describe('Unread Indicators', () => {
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                const alternateText = screen.queryAllByLabelText('Last chat message preview');
+                const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview');
+                const alternateText = screen.queryAllByLabelText(hintText);
                 expect(alternateText).toHaveLength(1);
                 expect(alternateText[0].props.children).toBe('Comment 9');
             });
diff --git a/tests/unit/ReportActionsUtilsTest.js b/tests/unit/ReportActionsUtilsTest.js
index 20bf389969b7..6b8fdbb04fa4 100644
--- a/tests/unit/ReportActionsUtilsTest.js
+++ b/tests/unit/ReportActionsUtilsTest.js
@@ -143,6 +143,12 @@ describe('ReportActionsUtils', () => {
                 },
                 {
                     created: '2022-11-09 22:27:01.825',
+                    reportActionID: '8049485084562457',
+                    actionName: CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.UPDATE_FIELD,
+                    message: [{html: 'updated the Approval Mode from "Submit and Approve" to "Submit and Close"'}],
+                },
+                {
+                    created: '2022-11-08 22:27:01.825',
                     reportActionID: '1661970171066218',
                     actionName: 'REIMBURSED',
                     message: [{html: 'Hello world'}],
diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
index b4383b3c0fd4..1701793edfd1 100644
--- a/tests/unit/ReportUtilsTest.js
+++ b/tests/unit/ReportUtilsTest.js
@@ -308,7 +308,7 @@ describe('ReportUtils', () => {
         });
     });
 
-    describe('getIOUOptions', () => {
+    describe('getMoneyRequestOptions', () => {
         const participants = _.keys(participantsPersonalDetails);
 
         beforeAll(() => {
@@ -324,20 +324,20 @@ describe('ReportUtils', () => {
         describe('return empty iou options if', () => {
             it('participants contains excluded iou emails', () => {
                 const allEmpty = _.every(CONST.EXPENSIFY_EMAILS, (email) => {
-                    const iouOptions = ReportUtils.getIOUOptions({}, [currentUserEmail, email], [CONST.BETAS.IOU]);
-                    return iouOptions.length === 0;
+                    const moneyRequestOptions = ReportUtils.getMoneyRequestOptions({}, [currentUserEmail, email], [CONST.BETAS.IOU]);
+                    return moneyRequestOptions.length === 0;
                 });
                 expect(allEmpty).toBe(true);
             });
 
             it('no participants except self', () => {
-                const iouOptions = ReportUtils.getIOUOptions({}, [currentUserEmail], [CONST.BETAS.IOU]);
-                expect(iouOptions.length).toBe(0);
+                const moneyRequestOptions = ReportUtils.getMoneyRequestOptions({}, [currentUserEmail], [CONST.BETAS.IOU]);
+                expect(moneyRequestOptions.length).toBe(0);
             });
 
             it('no iou permission', () => {
-                const iouOptions = ReportUtils.getIOUOptions({}, [currentUserEmail, participants], []);
-                expect(iouOptions.length).toBe(0);
+                const moneyRequestOptions = ReportUtils.getMoneyRequestOptions({}, [currentUserEmail, participants], []);
+                expect(moneyRequestOptions.length).toBe(0);
             });
         });
 
@@ -353,42 +353,43 @@ describe('ReportUtils', () => {
                         ...LHNTestUtils.getFakeReport(),
                         chatType,
                     };
-                    const iouOptions = ReportUtils.getIOUOptions(report, [currentUserEmail, participants[0]], [CONST.BETAS.IOU]);
-                    return iouOptions.length === 1 && iouOptions.includes(CONST.IOU.IOU_TYPE.SPLIT);
+                    const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(report, [currentUserEmail, participants[0]], [CONST.BETAS.IOU]);
+                    return moneyRequestOptions.length === 1 && moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.SPLIT);
                 });
                 expect(onlyHaveSplitOption).toBe(true);
             });
 
             it('has multiple participants exclude self', () => {
-                const iouOptions = ReportUtils.getIOUOptions({}, [currentUserEmail, ...participants], [CONST.BETAS.IOU]);
-                expect(iouOptions.length).toBe(1);
-                expect(iouOptions.includes(CONST.IOU.IOU_TYPE.SPLIT)).toBe(true);
+                const moneyRequestOptions = ReportUtils.getMoneyRequestOptions({}, [currentUserEmail, ...participants], [CONST.BETAS.IOU]);
+                expect(moneyRequestOptions.length).toBe(1);
+                expect(moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.SPLIT)).toBe(true);
             });
         });
 
         describe('return only iou request option if', () => {
             it(' does not have iou send permission', () => {
-                const iouOptions = ReportUtils.getIOUOptions({}, [currentUserEmail, participants], [CONST.BETAS.IOU]);
-                expect(iouOptions.length).toBe(1);
-                expect(iouOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)).toBe(true);
+                const moneyRequestOptions = ReportUtils.getMoneyRequestOptions({}, [currentUserEmail, participants], [CONST.BETAS.IOU]);
+                expect(moneyRequestOptions.length).toBe(1);
+                expect(moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)).toBe(true);
             });
 
             it('a policy expense chat', () => {
                 const report = {
                     ...LHNTestUtils.getFakeReport(),
                     chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
+                    isOwnPolicyExpenseChat: true,
                 };
-                const iouOptions = ReportUtils.getIOUOptions(report, [currentUserEmail, participants], [CONST.BETAS.IOU, CONST.BETAS.IOU_SEND]);
-                expect(iouOptions.length).toBe(1);
-                expect(iouOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)).toBe(true);
+                const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(report, [currentUserEmail, participants], [CONST.BETAS.IOU, CONST.BETAS.IOU_SEND]);
+                expect(moneyRequestOptions.length).toBe(1);
+                expect(moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)).toBe(true);
             });
         });
 
         it('return both iou send and request money', () => {
-            const iouOptions = ReportUtils.getIOUOptions({}, [currentUserEmail, participants], [CONST.BETAS.IOU, CONST.BETAS.IOU_SEND]);
-            expect(iouOptions.length).toBe(2);
-            expect(iouOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)).toBe(true);
-            expect(iouOptions.includes(CONST.IOU.IOU_TYPE.SEND)).toBe(true);
+            const moneyRequestOptions = ReportUtils.getMoneyRequestOptions({}, [currentUserEmail, participants], [CONST.BETAS.IOU, CONST.BETAS.IOU_SEND]);
+            expect(moneyRequestOptions.length).toBe(2);
+            expect(moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.REQUEST)).toBe(true);
+            expect(moneyRequestOptions.includes(CONST.IOU.IOU_TYPE.SEND)).toBe(true);
         });
     });
 
diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js
index 47ead27d8789..a393199f2d4e 100644
--- a/tests/unit/SidebarFilterTest.js
+++ b/tests/unit/SidebarFilterTest.js
@@ -5,6 +5,7 @@ import * as LHNTestUtils from '../utils/LHNTestUtils';
 import waitForPromisesToResolve from '../utils/waitForPromisesToResolve';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
+import * as Localize from '../../src/libs/Localize';
 
 // Be sure to include the mocked permissions library or else the beta tests won't work
 jest.mock('../../src/libs/Permissions');
@@ -53,7 +54,8 @@ describe('Sidebar', () => {
 
                 // Then no reports are rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(0);
                 });
         });
@@ -79,7 +81,8 @@ describe('Sidebar', () => {
 
                 // Then no reports are rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(0);
                 })
 
@@ -90,7 +93,8 @@ describe('Sidebar', () => {
 
                 // Then there is one report rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(1);
                 });
         });
@@ -116,7 +120,8 @@ describe('Sidebar', () => {
 
                 // Then no reports are rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(0);
                 })
 
@@ -127,7 +132,8 @@ describe('Sidebar', () => {
 
                 // Then there is one report rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(1);
                 });
         });
@@ -163,7 +169,8 @@ describe('Sidebar', () => {
 
                 // Then no reports are rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(0);
                 })
 
@@ -174,7 +181,8 @@ describe('Sidebar', () => {
 
                 // Then all three reports are showing in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(3);
                 });
         });
@@ -206,7 +214,8 @@ describe('Sidebar', () => {
 
                 // Then the report is rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(1);
                 })
 
@@ -215,7 +224,8 @@ describe('Sidebar', () => {
 
                 // Then the report is not rendered in the LHN
                 .then(() => {
-                    const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                    const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    const optionRows = screen.queryAllByAccessibilityHint(hintText);
                     expect(optionRows).toHaveLength(0);
                 });
         });
@@ -295,13 +305,16 @@ describe('Sidebar', () => {
                         .then(() => {
                             if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) {
                                 // Only one report visible
-                                expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(1);
-                                expect(screen.queryAllByLabelText('Chat user display names')).toHaveLength(1);
-                                const displayNames = screen.queryAllByLabelText('Chat user display names');
+                                const displayNamesHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                                const displayNames = screen.queryAllByLabelText(displayNamesHintText);
+                                const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                                expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1);
+                                expect(displayNames).toHaveLength(1);
                                 expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four');
                             } else {
                                 // Both reports visible
-                                expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(2);
+                                const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                                expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2);
                             }
                         });
                 });
@@ -331,7 +344,8 @@ describe('Sidebar', () => {
 
                 // Then the reports 1 and 2 are shown and 3 is not
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(2);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four');
@@ -345,7 +359,8 @@ describe('Sidebar', () => {
 
                 // Then all three chats are showing
                 .then(() => {
-                    expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(3);
+                    const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3);
                 })
 
                 // When report 1 becomes read (it's the active report)
@@ -353,7 +368,8 @@ describe('Sidebar', () => {
 
                 // Then all three chats are still showing
                 .then(() => {
-                    expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(3);
+                    const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3);
                 })
 
                 // When report 2 becomes the active report
@@ -364,7 +380,8 @@ describe('Sidebar', () => {
 
                 // Then report 1 should now disappear
                 .then(() => {
-                    expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(2);
+                    const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2);
                     expect(screen.queryAllByText(/One, Two/)).toHaveLength(0);
                 });
         });
@@ -393,7 +410,8 @@ describe('Sidebar', () => {
 
                 // Then both reports are visible
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(2);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -441,7 +459,8 @@ describe('Sidebar', () => {
 
                 // Then neither reports are visible
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(0);
                 })
 
@@ -461,7 +480,8 @@ describe('Sidebar', () => {
 
                 // Then they are all visible
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                 });
         });
@@ -497,7 +517,8 @@ describe('Sidebar', () => {
 
                 // Then neither reports are visible
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(0);
                 })
 
@@ -514,7 +535,8 @@ describe('Sidebar', () => {
 
                 // Then both rooms are visible
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(2);
                 });
         });
@@ -595,13 +617,16 @@ describe('Sidebar', () => {
                     .then(() => {
                         if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) {
                             // Only one report visible
-                            expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(1);
-                            expect(screen.queryAllByLabelText('Chat user display names')).toHaveLength(1);
-                            const displayNames = screen.queryAllByLabelText('Chat user display names');
+                            const displayNamesHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                            const displayNames = screen.queryAllByLabelText(displayNamesHintText);
+                            const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                            expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1);
+                            expect(displayNames).toHaveLength(1);
                             expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four');
                         } else {
                             // Both reports visible
-                            expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(2);
+                            const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                            expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2);
                         }
                     });
             });
@@ -640,7 +665,8 @@ describe('Sidebar', () => {
 
                     // Then the report is rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(1);
                     })
 
@@ -651,7 +677,8 @@ describe('Sidebar', () => {
 
                     // Then the report is rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(1);
                     });
             });
@@ -687,7 +714,8 @@ describe('Sidebar', () => {
 
                     // Then the report is not rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(0);
                     })
 
@@ -699,7 +727,8 @@ describe('Sidebar', () => {
 
                     // Then the report is rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(1);
                     });
             });
@@ -734,7 +763,8 @@ describe('Sidebar', () => {
 
                     // Then the report is not rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(0);
                     })
 
@@ -743,7 +773,8 @@ describe('Sidebar', () => {
 
                     // Then the report is rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(1);
                     });
             });
@@ -777,7 +808,8 @@ describe('Sidebar', () => {
 
                     // Then the report is not rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(0);
                     })
 
@@ -789,7 +821,8 @@ describe('Sidebar', () => {
 
                     // Then the report is rendered in the LHN
                     .then(() => {
-                        const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat');
+                        const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                        const optionRows = screen.queryAllByAccessibilityHint(hintText);
                         expect(optionRows).toHaveLength(1);
                     });
             });
diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js
index 6072bccca3de..0706ccf2ab97 100644
--- a/tests/unit/SidebarOrderTest.js
+++ b/tests/unit/SidebarOrderTest.js
@@ -5,6 +5,7 @@ import waitForPromisesToResolve from '../utils/waitForPromisesToResolve';
 import * as LHNTestUtils from '../utils/LHNTestUtils';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
+import * as Localize from '../../src/libs/Localize';
 
 // Be sure to include the mocked Permissions and Expensicons libraries or else the beta tests won't work
 jest.mock('../../src/libs/Permissions');
@@ -62,7 +63,8 @@ describe('Sidebar', () => {
                 // Then the component should be rendered with an empty list since it will get past the early return
                 .then(() => {
                     expect(screen.toJSON()).not.toBe(null);
-                    expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(0);
+                    const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat');
+                    expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(0);
                 });
         });
 
@@ -113,7 +115,8 @@ describe('Sidebar', () => {
 
                 // Then the component should be rendered with the mostly recently updated report first
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four');
@@ -147,10 +150,11 @@ describe('Sidebar', () => {
                 // Then there should be a pencil icon and report one should be the first one because putting a draft on the active report should change its location
                 // in the ordered list
                 .then(() => {
-                    const pencilIcon = screen.getAllByAccessibilityHint('Pencil Icon');
+                    const pencilIcon = screen.queryAllByTestId('Pencil Icon');
                     expect(pencilIcon).toHaveLength(1);
 
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); // this has `hasDraft` flag enabled so it will be on top
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six');
@@ -185,7 +189,8 @@ describe('Sidebar', () => {
                 // Then the order of the reports should be 1 > 3 > 2
                 //                                         ^--- (1 goes to the front and pushes other two down)
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six');
@@ -228,7 +233,8 @@ describe('Sidebar', () => {
                 // Then the order of the reports should be 2 > 3 > 1
                 //                                         ^--- (2 goes to the front and pushes 3 down)
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six');
@@ -257,7 +263,7 @@ describe('Sidebar', () => {
 
                 // Then there should be a pencil icon showing
                 .then(() => {
-                    expect(screen.getAllByAccessibilityHint('Pencil Icon')).toHaveLength(1);
+                    expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(1);
                 })
 
                 // When the draft is removed
@@ -265,7 +271,7 @@ describe('Sidebar', () => {
 
                 // Then the pencil icon goes away
                 .then(() => {
-                    expect(screen.queryAllByAccessibilityHint('Pencil Icon')).toHaveLength(0);
+                    expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(0);
                 });
         });
 
@@ -290,7 +296,7 @@ describe('Sidebar', () => {
 
                 // Then there should be a pencil icon showing
                 .then(() => {
-                    expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1);
+                    expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(1);
                 })
 
                 // When the draft is removed
@@ -298,7 +304,7 @@ describe('Sidebar', () => {
 
                 // Then the pencil icon goes away
                 .then(() => {
-                    expect(screen.queryAllByAccessibilityHint('Pin Icon')).toHaveLength(0);
+                    expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(0);
                 });
         });
 
@@ -352,10 +358,11 @@ describe('Sidebar', () => {
                 // there is a pencil icon
                 // there is a pinned icon
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
-                    expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1);
-                    expect(screen.getAllByAccessibilityHint('Pencil Icon')).toHaveLength(1);
+                    expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(1);
+                    expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(1);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four');
@@ -395,7 +402,8 @@ describe('Sidebar', () => {
 
                 // Then the reports are in alphabetical order
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -407,7 +415,8 @@ describe('Sidebar', () => {
 
                 // Then they are still in alphabetical order
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(4);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -449,7 +458,8 @@ describe('Sidebar', () => {
 
                 // Then the reports are in alphabetical order
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -461,7 +471,8 @@ describe('Sidebar', () => {
 
                 // Then they are still in alphabetical order
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(4);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -502,7 +513,8 @@ describe('Sidebar', () => {
 
                 // Then the first report is in last position
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four');
@@ -534,7 +546,8 @@ describe('Sidebar', () => {
 
                 // Then the reports are in alphabetical order
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -546,7 +559,8 @@ describe('Sidebar', () => {
 
                 // Then they are still in alphabetical order
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(4);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -587,7 +601,8 @@ describe('Sidebar', () => {
 
                 // Then the first report is in last position
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four');
@@ -666,7 +681,8 @@ describe('Sidebar', () => {
 
                 // Then the reports are ordered alphabetically since their amounts are the same
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
@@ -704,7 +720,8 @@ describe('Sidebar', () => {
 
                 // Then the reports are ordered alphabetically since their lastVisibleActionCreated are the same
                 .then(() => {
-                    const displayNames = screen.queryAllByLabelText('Chat user display names');
+                    const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                    const displayNames = screen.queryAllByLabelText(hintText);
                     expect(displayNames).toHaveLength(3);
                     expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six');
                     expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two');
diff --git a/web/proxy.js b/web/proxy.js
index 768963d0810c..3bce08514600 100644
--- a/web/proxy.js
+++ b/web/proxy.js
@@ -1,21 +1,18 @@
 const http = require('http');
 const https = require('https');
+const proxyConfig = require('../config/proxyConfig');
 require('dotenv').config();
 
 if (process.env.USE_WEB_PROXY === 'false') {
     process.stdout.write('Skipping proxy as USE_WEB_PROXY was set to false.\n');
     process.exit();
 }
-
-let host = 'www.expensify.com';
-
-// If we are testing against the staging API then we must use the correct host here or nothing with work.
-if (/staging/.test(process.env.EXPENSIFY_URL)) {
-    host = 'staging.expensify.com';
-}
+const host = 'www.expensify.com';
+const stagingHost = 'staging.expensify.com';
+const stagingSecureHost = 'staging-secure.expensify.com';
 
 // eslint-disable-next-line no-console
-console.log(`Creating proxy with host: ${host}`);
+console.log(`Creating proxy with host: ${host} for production API and ${stagingHost} for staging API`);
 
 /**
  * Local proxy server that hits the production endpoint
@@ -24,13 +21,36 @@ console.log(`Creating proxy with host: ${host}`);
  * environment that has no local API.
  */
 const server = http.createServer((request, response) => {
+    let hostname = host;
+    let requestPath = request.url;
+
+    /**
+     * When a request is matching a proxy config path we might direct it to a different host (e.g. staging)
+     * For requests matching proxy config patterns we replace the mapping url (prefix) with the actual path.
+     * This is done because the staging api root is only intended for the proxy,
+     * the actual server request must use the /api path.
+     * For example,
+     * /api?command=OpenReport => request sent to production server
+     * /staging/api?command=OpenReport => request sent to staging server
+     * /staging-secure/api?command=OpenReport => request sent to secure staging server
+     * /chat-attachments/46545... => request sent to production server
+     * /staging/chat-attachments/46545... => request sent to staging server
+     */
+    if (request.url.startsWith(proxyConfig.STAGING_SECURE)) {
+        hostname = stagingSecureHost;
+        requestPath = request.url.replace(proxyConfig.STAGING_SECURE, '/');
+    } else if (request.url.startsWith(proxyConfig.STAGING)) {
+        hostname = stagingHost;
+        requestPath = request.url.replace(proxyConfig.STAGING, '/');
+    }
+
     const proxyRequest = https.request({
-        hostname: host,
+        hostname,
         method: 'POST',
-        path: request.url,
+        path: requestPath,
         headers: {
             ...request.headers,
-            host,
+            host: hostname,
             'user-agent': request.headers['user-agent'].concat(' Development-NewDot/1.0'),
         },
         port: 443,