From 8d800fee70f933330fe48fa132e0245bfbf47c87 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Tue, 21 Dec 2021 22:35:04 +0530
Subject: [PATCH 01/26] feat(error-page): First draft of the page with the
 content

---
 .../ErrorBoundary/BaseErrorBoundary.js        |  3 +-
 src/components/GenericErrorView/index.js      | 65 +++++++++++++++++++
 src/languages/en.js                           |  8 +++
 src/styles/styles.js                          |  4 ++
 src/styles/variables.js                       |  1 +
 5 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/components/GenericErrorView/index.js

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index 69dee3ecfc86..3f96e3ad280e 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BootSplash from '../../libs/BootSplash';
+import GenericErrorView from '../GenericErrorView';
 
 const propTypes = {
     /* A message posted to `logError` (along with error data) when this component intercepts an error */
@@ -43,7 +44,7 @@ class BaseErrorBoundary extends React.Component {
     render() {
         if (this.state.hasError) {
             // For the moment we've decided not to render any fallback UI
-            return null;
+            return <GenericErrorView />;
         }
 
         return this.props.children;
diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
new file mode 100644
index 000000000000..a6bb9e6f58e7
--- /dev/null
+++ b/src/components/GenericErrorView/index.js
@@ -0,0 +1,65 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '../Icon';
+import defaultTheme from '../../styles/themes/default';
+import * as Expensicons from '../Icon/Expensicons';
+import ExpensifyText from '../ExpensifyText';
+import Button from '../Button';
+import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import variables from '../../styles/variables';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const GenericErrorView = (props) => {
+    const refreshPage = () => {
+
+    };
+
+    return (
+        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+
+            <View style={[styles.flexColumn, styles.alignItemsStart]}>
+                <View style={[styles.mb5]}>
+                    <Icon
+                        src={Expensicons.Bug}
+                        height={variables.componentSizeNormal}
+                        width={variables.componentSizeNormal}
+                        fill={defaultTheme.iconSuccessFill}
+                    />
+                </View>
+                <View style={[styles.mb5]}>
+                    <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
+                        {props.translate('genericErrorView.title')}
+                    </ExpensifyText>
+                </View>
+                <ExpensifyText>
+                    {props.translate('genericErrorView.body.helpTextMobile')}
+                </ExpensifyText>
+
+                <ExpensifyText>
+                    {props.translate('genericErrorView.body.helpTextConcierge')}
+                </ExpensifyText>
+
+                <View style={styles.flexWrap}>
+                    <Button
+                        success
+                        onPress={refreshPage}
+                        text={props.translate('genericErrorView.refresh')}
+                    />
+                </View>
+            </View>
+            <View styles={[styles.alignSelfEnd]}>
+                <LogoWordmark height={30} width={80} />
+            </View>
+
+        </View>
+    );
+};
+
+GenericErrorView.propTypes = propTypes;
+
+export default withLocalize(GenericErrorView);
diff --git a/src/languages/en.js b/src/languages/en.js
index 1da746d0b82f..4cb0574b6880 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -829,4 +829,12 @@ export default {
         screenShare: 'Screen share',
         screenShareRequest: 'Expensify is inviting you to a screen share',
     },
+    genericErrorView: {
+        title: 'Uh-oh, something went wrong!',
+        body: {
+            helpTextMobile: 'Please try closing and reopening the app or switching to web.',
+            helpTextConcierge: 'If the problem persists, reach out to concierge@expensify.com.',
+        },
+        refresh: 'Refresh',
+    },
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c09831f4683a..8eefaf3a3415 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -237,6 +237,10 @@ const styles = {
         fontSize: variables.fontSizeLarge,
     },
 
+    textXXLarge: {
+        fontSize: variables.fontSizeXXLarge,
+    },
+
     textXXXLarge: {
         color: themeColors.heading,
         fontFamily: fontFamily.GTA_BOLD,
diff --git a/src/styles/variables.js b/src/styles/variables.js
index a5781398c22b..a9f26048c109 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -19,6 +19,7 @@ export default {
     fontSizeLarge: 17,
     fontSizeHero: 36,
     fontSizeh1: 19,
+    fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
     fontSizeNormalHeight: 20,
     lineHeightHero: 40,

From a9df0267321e4091bc4a01544b92de505058ea8d Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Tue, 21 Dec 2021 22:48:51 +0530
Subject: [PATCH 02/26] feat(error-page): Additional styling and alignment

---
 src/components/GenericErrorView/index.js | 65 +++++++++++++-----------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index a6bb9e6f58e7..f531a2941d48 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -20,42 +20,45 @@ const GenericErrorView = (props) => {
     };
 
     return (
-        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+        <View style={[styles.flex1, styles.m5]}>
+            <View style={[styles.flexColumn, styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <View style={[styles.flexColumn, styles.flexColumn, styles.alignItemsStart]}>
+                    <View style={[styles.mb5]}>
+                        <Icon
+                            src={Expensicons.Bug}
+                            height={variables.componentSizeNormal}
+                            width={variables.componentSizeNormal}
+                            fill={defaultTheme.iconSuccessFill}
+                        />
+                    </View>
+                    <View style={[styles.mb5]}>
+                        <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
+                            {props.translate('genericErrorView.title')}
+                        </ExpensifyText>
+                    </View>
+                    <View style={[styles.mb5]}>
+                        <ExpensifyText>
+                            {props.translate('genericErrorView.body.helpTextMobile')}
+                        </ExpensifyText>
 
-            <View style={[styles.flexColumn, styles.alignItemsStart]}>
-                <View style={[styles.mb5]}>
-                    <Icon
-                        src={Expensicons.Bug}
-                        height={variables.componentSizeNormal}
-                        width={variables.componentSizeNormal}
-                        fill={defaultTheme.iconSuccessFill}
-                    />
-                </View>
-                <View style={[styles.mb5]}>
-                    <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
-                        {props.translate('genericErrorView.title')}
-                    </ExpensifyText>
-                </View>
-                <ExpensifyText>
-                    {props.translate('genericErrorView.body.helpTextMobile')}
-                </ExpensifyText>
-
-                <ExpensifyText>
-                    {props.translate('genericErrorView.body.helpTextConcierge')}
-                </ExpensifyText>
-
-                <View style={styles.flexWrap}>
-                    <Button
-                        success
-                        onPress={refreshPage}
-                        text={props.translate('genericErrorView.refresh')}
-                    />
+                        <ExpensifyText>
+                            {props.translate('genericErrorView.body.helpTextConcierge')}
+                        </ExpensifyText>
+                    </View>
+                    <View style={styles.flexWrap}>
+                        <Button
+                            success
+                            onPress={refreshPage}
+                            text={props.translate('genericErrorView.refresh')}
+                        />
+                    </View>
                 </View>
             </View>
             <View styles={[styles.alignSelfEnd]}>
-                <LogoWordmark height={30} width={80} />
+                <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                    <LogoWordmark height={30} width={80} />
+                </View>
             </View>
-
         </View>
     );
 };

From bacc6060b5675bfbf49d412a05d77890a16cc1ee Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 22 Dec 2021 00:35:36 +0530
Subject: [PATCH 03/26] feat(error-page):  Added link styling and design
 adjustment

---
 .../GenericErrorView/ErrorBodyText/index.js   |  5 +++++
 .../ErrorBodyText/index.native.js             | 22 +++++++++++++++++++
 src/components/GenericErrorView/index.js      | 12 ++++++----
 src/languages/en.js                           |  5 +++--
 src/languages/es.js                           |  9 ++++++++
 5 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 src/components/GenericErrorView/ErrorBodyText/index.js
 create mode 100644 src/components/GenericErrorView/ErrorBodyText/index.native.js

diff --git a/src/components/GenericErrorView/ErrorBodyText/index.js b/src/components/GenericErrorView/ErrorBodyText/index.js
new file mode 100644
index 000000000000..57775f4b2bf8
--- /dev/null
+++ b/src/components/GenericErrorView/ErrorBodyText/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+    <></>
+);
diff --git a/src/components/GenericErrorView/ErrorBodyText/index.native.js b/src/components/GenericErrorView/ErrorBodyText/index.native.js
new file mode 100644
index 000000000000..278cb06cda72
--- /dev/null
+++ b/src/components/GenericErrorView/ErrorBodyText/index.native.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import ExpensifyText from '../../ExpensifyText';
+import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
+import TextLink from '../../TextLink';
+import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const ErrorBodyText = props => (
+    <ExpensifyText>
+        {props.translate('genericErrorView.bodyText.helpTextWeb')}
+        <TextLink href={CONST.PRIVACY_URL} style={[styles.link]}>
+            {props.translate('genericErrorView.bodyText.helpTextWeb')}
+        </TextLink>
+    </ExpensifyText>
+);
+
+ErrorBodyText.propTypes = propTypes;
+export default withLocalize(ErrorBodyText);
diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index f531a2941d48..d217cc0810f7 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -9,6 +9,9 @@ import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
+import ErrorBodyText from './ErrorBodyText';
+import TextLink from '../TextLink';
+import CONST from '../../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -37,12 +40,13 @@ const GenericErrorView = (props) => {
                         </ExpensifyText>
                     </View>
                     <View style={[styles.mb5]}>
-                        <ExpensifyText>
-                            {props.translate('genericErrorView.body.helpTextMobile')}
-                        </ExpensifyText>
-
+                        <ErrorBodyText />
                         <ExpensifyText>
                             {props.translate('genericErrorView.body.helpTextConcierge')}
+                            <TextLink href={CONST.EMAIL.CONCIERGE} style={[styles.link]}>
+                                {CONST.EMAIL.CONCIERGE}
+                            </TextLink>
+
                         </ExpensifyText>
                     </View>
                     <View style={styles.flexWrap}>
diff --git a/src/languages/en.js b/src/languages/en.js
index 4cb0574b6880..707cb9cfb82b 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -832,8 +832,9 @@ export default {
     genericErrorView: {
         title: 'Uh-oh, something went wrong!',
         body: {
-            helpTextMobile: 'Please try closing and reopening the app or switching to web.',
-            helpTextConcierge: 'If the problem persists, reach out to concierge@expensify.com.',
+            helpTextMobile: 'Please try closing and reopening the app or switching to ',
+            helpTextWeb: 'web.',
+            helpTextConcierge: 'If the problem persists, reach out to ',
         },
         refresh: 'Refresh',
     },
diff --git a/src/languages/es.js b/src/languages/es.js
index 7a76a87101a6..1d421b1af15d 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -831,4 +831,13 @@ export default {
         screenShare: 'Compartir pantalla',
         screenShareRequest: 'Expensify te está invitando a compartir la pantalla',
     },
+    genericErrorView: {
+        title: '¡Uh-oh, algo salió mal!',
+        body: {
+            helpTextMobile: 'Intente cerrar y volver a abrir la aplicación o cambiar a la ',
+            helpTextWeb: 'web.',
+            helpTextConcierge: 'Si el problema persiste, comuníquese con ',
+        },
+        refresh: 'Refresh',
+    },
 };

From 83fc0e2ffeeaf75dec05156d6b28b2bd70ebfcf2 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 22 Dec 2021 00:41:30 +0530
Subject: [PATCH 04/26] feat(error-page): Fixed button size for small screen
 devices

---
 src/components/GenericErrorView/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index d217cc0810f7..3e767b3dadd6 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -7,7 +7,10 @@ import ExpensifyText from '../ExpensifyText';
 import Button from '../Button';
 import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import compose from '../../libs/compose';
 import variables from '../../styles/variables';
+
 import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
 import TextLink from '../TextLink';
@@ -15,6 +18,7 @@ import CONST from '../../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
 };
 
 const GenericErrorView = (props) => {
@@ -52,6 +56,7 @@ const GenericErrorView = (props) => {
                     <View style={styles.flexWrap}>
                         <Button
                             success
+                            small={props.isSmallScreenWidth}
                             onPress={refreshPage}
                             text={props.translate('genericErrorView.refresh')}
                         />
@@ -69,4 +74,7 @@ const GenericErrorView = (props) => {
 
 GenericErrorView.propTypes = propTypes;
 
-export default withLocalize(GenericErrorView);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(GenericErrorView);

From 5bf449b877be2b15fe70b1462872d8d9137145fb Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 22 Dec 2021 00:55:46 +0530
Subject: [PATCH 05/26] feat(error-page): Added alignment for mobile devices
 and fixed function call

---
 .../GenericErrorView/ErrorBodyText/index.native.js    |  6 +++---
 src/components/GenericErrorView/index.js              |  7 +++----
 src/libs/Navigation/Navigation.js                     | 11 +++++++++++
 src/styles/styles.js                                  |  4 ++++
 src/styles/utilities/spacing.js                       |  4 ++++
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/GenericErrorView/ErrorBodyText/index.native.js b/src/components/GenericErrorView/ErrorBodyText/index.native.js
index 278cb06cda72..4c9eb0231458 100644
--- a/src/components/GenericErrorView/ErrorBodyText/index.native.js
+++ b/src/components/GenericErrorView/ErrorBodyText/index.native.js
@@ -11,9 +11,9 @@ const propTypes = {
 
 const ErrorBodyText = props => (
     <ExpensifyText>
-        {props.translate('genericErrorView.bodyText.helpTextWeb')}
-        <TextLink href={CONST.PRIVACY_URL} style={[styles.link]}>
-            {props.translate('genericErrorView.bodyText.helpTextWeb')}
+        {props.translate('genericErrorView.body.helpTextMobile')}
+        <TextLink href={CONST.NEW_EXPENSIFY_URL} style={[styles.link]}>
+            {props.translate('genericErrorView.body.helpTextWeb')}
         </TextLink>
     </ExpensifyText>
 );
diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index 3e767b3dadd6..db6b6e45912c 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -10,7 +10,7 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
-
+import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
 import TextLink from '../TextLink';
@@ -23,11 +23,11 @@ const propTypes = {
 
 const GenericErrorView = (props) => {
     const refreshPage = () => {
-
+        Navigation.navigate(Navigation.getCurrentRoute());
     };
 
     return (
-        <View style={[styles.flex1, styles.m5]}>
+        <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
             <View style={[styles.flexColumn, styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <View style={[styles.flexColumn, styles.flexColumn, styles.alignItemsStart]}>
                     <View style={[styles.mb5]}>
@@ -50,7 +50,6 @@ const GenericErrorView = (props) => {
                             <TextLink href={CONST.EMAIL.CONCIERGE} style={[styles.link]}>
                                 {CONST.EMAIL.CONCIERGE}
                             </TextLink>
-
                         </ExpensifyText>
                     </View>
                     <View style={styles.flexWrap}>
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index 9e0312aef2f1..a0b99d24806a 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -185,6 +185,16 @@ function isActiveRoute(routePath) {
     return path === routePath;
 }
 
+/**
+ * Returns the current route of the navigation stack
+ * @returns {String}
+ */
+function getCurrentRoute() {
+    return navigationRef.current && navigationRef.current.getCurrentRoute().name
+        ? getPathFromState(navigationRef.current.getState(), linkingConfig.config).substring(1)
+        : '';
+}
+
 /**
  * Alternative to the `Navigation.dismissModal()` function that we can use inside
  * the render function of other components to avoid breaking React rules about side-effects.
@@ -222,6 +232,7 @@ export default {
     closeDrawer,
     getDefaultDrawerState,
     setDidTapNotification,
+    getCurrentRoute,
 };
 
 export {
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 8eefaf3a3415..3a0aea01582d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2344,6 +2344,10 @@ const styles = {
         backgroundColor: colors.black,
         flex: 1,
     },
+
+    errorPageContainer: {
+        backgroundColor: themeColors.componentBG,
+    },
 };
 
 export default styles;
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index 6c585dc6c78e..63be7d1faf6b 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -220,6 +220,10 @@ export default {
         paddingVertical: 20,
     },
 
+    pv10: {
+        paddingVertical: 40,
+    },
+
     ph0: {
         paddingHorizontal: 0,
     },

From c123dd187dbbc97c032272aa9c2a3959475b5161 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Wed, 22 Dec 2021 02:04:31 +0530
Subject: [PATCH 06/26] feat(error-page): Code cleanup

---
 .../GenericErrorView/ErrorBodyText/index.js          |  6 +-----
 src/components/GenericErrorView/index.js             | 12 ++++++------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/GenericErrorView/ErrorBodyText/index.js b/src/components/GenericErrorView/ErrorBodyText/index.js
index 57775f4b2bf8..461f67a0a4bc 100644
--- a/src/components/GenericErrorView/ErrorBodyText/index.js
+++ b/src/components/GenericErrorView/ErrorBodyText/index.js
@@ -1,5 +1 @@
-import React from 'react';
-
-export default () => (
-    <></>
-);
+export default () => null;
diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index db6b6e45912c..7ca7e9017a43 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -28,9 +28,9 @@ const GenericErrorView = (props) => {
 
     return (
         <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
-            <View style={[styles.flexColumn, styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                <View style={[styles.flexColumn, styles.flexColumn, styles.alignItemsStart]}>
-                    <View style={[styles.mb5]}>
+            <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <View style={styles.alignItemsStart}>
+                    <View style={styles.mb5}>
                         <Icon
                             src={Expensicons.Bug}
                             height={variables.componentSizeNormal}
@@ -38,12 +38,12 @@ const GenericErrorView = (props) => {
                             fill={defaultTheme.iconSuccessFill}
                         />
                     </View>
-                    <View style={[styles.mb5]}>
+                    <View style={styles.mb5}>
                         <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
                             {props.translate('genericErrorView.title')}
                         </ExpensifyText>
                     </View>
-                    <View style={[styles.mb5]}>
+                    <View style={styles.mb5}>
                         <ErrorBodyText />
                         <ExpensifyText>
                             {props.translate('genericErrorView.body.helpTextConcierge')}
@@ -62,7 +62,7 @@ const GenericErrorView = (props) => {
                     </View>
                 </View>
             </View>
-            <View styles={[styles.alignSelfEnd]}>
+            <View styles={styles.alignSelfEnd}>
                 <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
                     <LogoWordmark height={30} width={80} />
                 </View>

From 719d3c258a04a554759753e6f8baf8ca3ece1930 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 23 Dec 2021 05:51:05 +0530
Subject: [PATCH 07/26] feat(error-page): Link fixes and removed unused code

---
 src/components/GenericErrorView/index.js |  2 +-
 src/libs/Navigation/Navigation.js        | 11 -----------
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index 7ca7e9017a43..8682835365d7 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -47,7 +47,7 @@ const GenericErrorView = (props) => {
                         <ErrorBodyText />
                         <ExpensifyText>
                             {props.translate('genericErrorView.body.helpTextConcierge')}
-                            <TextLink href={CONST.EMAIL.CONCIERGE} style={[styles.link]}>
+                            <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
                                 {CONST.EMAIL.CONCIERGE}
                             </TextLink>
                         </ExpensifyText>
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index a0b99d24806a..9e0312aef2f1 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -185,16 +185,6 @@ function isActiveRoute(routePath) {
     return path === routePath;
 }
 
-/**
- * Returns the current route of the navigation stack
- * @returns {String}
- */
-function getCurrentRoute() {
-    return navigationRef.current && navigationRef.current.getCurrentRoute().name
-        ? getPathFromState(navigationRef.current.getState(), linkingConfig.config).substring(1)
-        : '';
-}
-
 /**
  * Alternative to the `Navigation.dismissModal()` function that we can use inside
  * the render function of other components to avoid breaking React rules about side-effects.
@@ -232,7 +222,6 @@ export default {
     closeDrawer,
     getDefaultDrawerState,
     setDidTapNotification,
-    getCurrentRoute,
 };
 
 export {

From 68a0a3be0dbe807878c96611edddcf36c0c07bdd Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 23 Dec 2021 05:51:25 +0530
Subject: [PATCH 08/26] feat(error-page): Added reload for web and desktop

---
 src/components/GenericErrorView/index.js | 5 +++--
 src/libs/AppRestart/index.js             | 7 +++++++
 src/libs/AppRestart/index.native.js      | 7 +++++++
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 src/libs/AppRestart/index.js
 create mode 100644 src/libs/AppRestart/index.native.js

diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
index 8682835365d7..5c33c66c5e6f 100644
--- a/src/components/GenericErrorView/index.js
+++ b/src/components/GenericErrorView/index.js
@@ -10,11 +10,11 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import compose from '../../libs/compose';
 import variables from '../../styles/variables';
-import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
 import TextLink from '../TextLink';
 import CONST from '../../CONST';
+import AppRestart from '../../libs/AppRestart';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -23,11 +23,12 @@ const propTypes = {
 
 const GenericErrorView = (props) => {
     const refreshPage = () => {
-        Navigation.navigate(Navigation.getCurrentRoute());
+        AppRestart.reloadApp();
     };
 
     return (
         <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
+
             <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <View style={styles.alignItemsStart}>
                     <View style={styles.mb5}>
diff --git a/src/libs/AppRestart/index.js b/src/libs/AppRestart/index.js
new file mode 100644
index 000000000000..2289d8d66bd5
--- /dev/null
+++ b/src/libs/AppRestart/index.js
@@ -0,0 +1,7 @@
+function reloadApp() {
+    window.location.reload();
+}
+
+export default {
+    reloadApp,
+};
diff --git a/src/libs/AppRestart/index.native.js b/src/libs/AppRestart/index.native.js
new file mode 100644
index 000000000000..c539f5d31ff5
--- /dev/null
+++ b/src/libs/AppRestart/index.native.js
@@ -0,0 +1,7 @@
+function reloadApp() {
+
+}
+
+export default {
+    reloadApp,
+};

From 748719dd0fca14065629c792ed5f2212b2a4c8d3 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 23 Dec 2021 06:11:57 +0530
Subject: [PATCH 09/26] feat(error-page): Added app reload functionality

---
 package-lock.json                   | 5 +++++
 package.json                        | 1 +
 src/libs/AppRestart/index.native.js | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index fb46fcee407d..bece31e79c66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36920,6 +36920,11 @@
         }
       }
     },
+    "react-native-restart": {
+      "version": "0.0.22",
+      "resolved": "https://registry.npmjs.org/react-native-restart/-/react-native-restart-0.0.22.tgz",
+      "integrity": "sha512-XwCqAMAKsO8yCM3xACPFKvkDQZe41lcavOuO0gUEu803IuTLtciualCq/qs83ryRDCDh1jkXYRqFjsGjLMCN3Q=="
+    },
     "react-native-safe-area-context": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.8.tgz",
diff --git a/package.json b/package.json
index 7ee9236751ee..83d22f38ebe3 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "react-native-plaid-link-sdk": "^7.1.0",
     "react-native-reanimated": "2.3.0-alpha.1",
     "react-native-render-html": "6.3.1",
+    "react-native-restart": "0.0.22",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",
diff --git a/src/libs/AppRestart/index.native.js b/src/libs/AppRestart/index.native.js
index c539f5d31ff5..af8bf74afec9 100644
--- a/src/libs/AppRestart/index.native.js
+++ b/src/libs/AppRestart/index.native.js
@@ -1,5 +1,7 @@
-function reloadApp() {
+import RNRestart from 'react-native-restart';
 
+function reloadApp() {
+    RNRestart.Restart();
 }
 
 export default {

From a02579717eaf64ad19ae40204223522dd0658b44 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 23 Dec 2021 06:15:52 +0530
Subject: [PATCH 10/26] feat(error-page): Added comments

---
 src/libs/AppRestart/index.js        | 3 +++
 src/libs/AppRestart/index.native.js | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/libs/AppRestart/index.js b/src/libs/AppRestart/index.js
index 2289d8d66bd5..4d924418112e 100644
--- a/src/libs/AppRestart/index.js
+++ b/src/libs/AppRestart/index.js
@@ -1,3 +1,6 @@
+/**
+ * Reload the webpage with current route
+ */
 function reloadApp() {
     window.location.reload();
 }
diff --git a/src/libs/AppRestart/index.native.js b/src/libs/AppRestart/index.native.js
index af8bf74afec9..c9685e128243 100644
--- a/src/libs/AppRestart/index.native.js
+++ b/src/libs/AppRestart/index.native.js
@@ -1,5 +1,8 @@
 import RNRestart from 'react-native-restart';
 
+/**
+ * Reload the app with current route
+ */
 function reloadApp() {
     RNRestart.Restart();
 }

From eb5e43c636be66ea1d47be4fa0bdb962b63c84fa Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 30 Dec 2021 22:59:23 +0530
Subject: [PATCH 11/26] fix: Removed unwanted package

---
 package-lock.json                   | 5 -----
 package.json                        | 1 -
 src/libs/AppRestart/index.native.js | 3 +--
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bece31e79c66..fb46fcee407d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36920,11 +36920,6 @@
         }
       }
     },
-    "react-native-restart": {
-      "version": "0.0.22",
-      "resolved": "https://registry.npmjs.org/react-native-restart/-/react-native-restart-0.0.22.tgz",
-      "integrity": "sha512-XwCqAMAKsO8yCM3xACPFKvkDQZe41lcavOuO0gUEu803IuTLtciualCq/qs83ryRDCDh1jkXYRqFjsGjLMCN3Q=="
-    },
     "react-native-safe-area-context": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.8.tgz",
diff --git a/package.json b/package.json
index 83d22f38ebe3..7ee9236751ee 100644
--- a/package.json
+++ b/package.json
@@ -97,7 +97,6 @@
     "react-native-plaid-link-sdk": "^7.1.0",
     "react-native-reanimated": "2.3.0-alpha.1",
     "react-native-render-html": "6.3.1",
-    "react-native-restart": "0.0.22",
     "react-native-safe-area-context": "^3.1.4",
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",
diff --git a/src/libs/AppRestart/index.native.js b/src/libs/AppRestart/index.native.js
index c9685e128243..7ac33987e111 100644
--- a/src/libs/AppRestart/index.native.js
+++ b/src/libs/AppRestart/index.native.js
@@ -1,10 +1,9 @@
-import RNRestart from 'react-native-restart';
 
 /**
  * Reload the app with current route
  */
 function reloadApp() {
-    RNRestart.Restart();
+
 }
 
 export default {

From ad552c6ea6fc275b6cd3a933c4ea4489d27d43ed Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 30 Dec 2021 23:11:08 +0530
Subject: [PATCH 12/26] Moved the component to pages

---
 .../ErrorBoundary/BaseErrorBoundary.js        |  9 +-
 src/components/GenericErrorView/index.js      | 80 -----------------
 src/languages/en.js                           |  2 +-
 src/languages/es.js                           |  2 +-
 .../GenericErrorPage}/ErrorBodyText/index.js  |  0
 .../ErrorBodyText/index.native.js             |  0
 src/pages/GenericErrorPage/index.js           | 85 +++++++++++++++++++
 7 files changed, 94 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/GenericErrorView/index.js
 rename src/{components/GenericErrorView => pages/GenericErrorPage}/ErrorBodyText/index.js (100%)
 rename src/{components/GenericErrorView => pages/GenericErrorPage}/ErrorBodyText/index.native.js (100%)
 create mode 100644 src/pages/GenericErrorPage/index.js

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index 3f96e3ad280e..9bf8f4a121a0 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BootSplash from '../../libs/BootSplash';
-import GenericErrorView from '../GenericErrorView';
+import GenericErrorPage from '../../pages/GenericErrorPage';
 
 const propTypes = {
     /* A message posted to `logError` (along with error data) when this component intercepts an error */
@@ -27,6 +27,7 @@ class BaseErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = {hasError: false};
+        this.onRefresh = this.onRefresh.bind(this);
     }
 
     static getDerivedStateFromError() {
@@ -41,10 +42,14 @@ class BaseErrorBoundary extends React.Component {
         BootSplash.hide({fade: true});
     }
 
+    onRefresh() {
+        this.setState({hasError: false});
+    }
+
     render() {
         if (this.state.hasError) {
             // For the moment we've decided not to render any fallback UI
-            return <GenericErrorView />;
+            return <GenericErrorPage />;
         }
 
         return this.props.children;
diff --git a/src/components/GenericErrorView/index.js b/src/components/GenericErrorView/index.js
deleted file mode 100644
index 5c33c66c5e6f..000000000000
--- a/src/components/GenericErrorView/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import Icon from '../Icon';
-import defaultTheme from '../../styles/themes/default';
-import * as Expensicons from '../Icon/Expensicons';
-import ExpensifyText from '../ExpensifyText';
-import Button from '../Button';
-import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
-import compose from '../../libs/compose';
-import variables from '../../styles/variables';
-import styles from '../../styles/styles';
-import ErrorBodyText from './ErrorBodyText';
-import TextLink from '../TextLink';
-import CONST from '../../CONST';
-import AppRestart from '../../libs/AppRestart';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
-};
-
-const GenericErrorView = (props) => {
-    const refreshPage = () => {
-        AppRestart.reloadApp();
-    };
-
-    return (
-        <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
-
-            <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                <View style={styles.alignItemsStart}>
-                    <View style={styles.mb5}>
-                        <Icon
-                            src={Expensicons.Bug}
-                            height={variables.componentSizeNormal}
-                            width={variables.componentSizeNormal}
-                            fill={defaultTheme.iconSuccessFill}
-                        />
-                    </View>
-                    <View style={styles.mb5}>
-                        <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
-                            {props.translate('genericErrorView.title')}
-                        </ExpensifyText>
-                    </View>
-                    <View style={styles.mb5}>
-                        <ErrorBodyText />
-                        <ExpensifyText>
-                            {props.translate('genericErrorView.body.helpTextConcierge')}
-                            <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
-                                {CONST.EMAIL.CONCIERGE}
-                            </TextLink>
-                        </ExpensifyText>
-                    </View>
-                    <View style={styles.flexWrap}>
-                        <Button
-                            success
-                            small={props.isSmallScreenWidth}
-                            onPress={refreshPage}
-                            text={props.translate('genericErrorView.refresh')}
-                        />
-                    </View>
-                </View>
-            </View>
-            <View styles={styles.alignSelfEnd}>
-                <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
-                    <LogoWordmark height={30} width={80} />
-                </View>
-            </View>
-        </View>
-    );
-};
-
-GenericErrorView.propTypes = propTypes;
-
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-)(GenericErrorView);
diff --git a/src/languages/en.js b/src/languages/en.js
index 52211efe36d8..c483cc4bb0fe 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -846,7 +846,7 @@ export default {
         screenShare: 'Screen share',
         screenShareRequest: 'Expensify is inviting you to a screen share',
     },
-    genericErrorView: {
+    genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
         body: {
             helpTextMobile: 'Please try closing and reopening the app or switching to ',
diff --git a/src/languages/es.js b/src/languages/es.js
index fb718d895c90..40b63d379b59 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -848,7 +848,7 @@ export default {
         screenShare: 'Compartir pantalla',
         screenShareRequest: 'Expensify te está invitando a compartir la pantalla',
     },
-    genericErrorView: {
+    genericErrorPage: {
         title: '¡Uh-oh, algo salió mal!',
         body: {
             helpTextMobile: 'Intente cerrar y volver a abrir la aplicación o cambiar a la ',
diff --git a/src/components/GenericErrorView/ErrorBodyText/index.js b/src/pages/GenericErrorPage/ErrorBodyText/index.js
similarity index 100%
rename from src/components/GenericErrorView/ErrorBodyText/index.js
rename to src/pages/GenericErrorPage/ErrorBodyText/index.js
diff --git a/src/components/GenericErrorView/ErrorBodyText/index.native.js b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
similarity index 100%
rename from src/components/GenericErrorView/ErrorBodyText/index.native.js
rename to src/pages/GenericErrorPage/ErrorBodyText/index.native.js
diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
new file mode 100644
index 000000000000..9ec828256c57
--- /dev/null
+++ b/src/pages/GenericErrorPage/index.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Icon from '../../components/Icon';
+import defaultTheme from '../../styles/themes/default';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import ExpensifyText from '../../components/ExpensifyText';
+import Button from '../../components/Button';
+import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
+import compose from '../../libs/compose';
+import * as Session from '../../libs/actions/Session';
+import variables from '../../styles/variables';
+import styles from '../../styles/styles';
+import ErrorBodyText from './ErrorBodyText';
+import TextLink from '../../components/TextLink';
+import CONST from '../../CONST';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
+
+    /** Function call on Refresh button click */
+    onRefresh: PropTypes.func.isRequired,
+};
+
+const genericErrorPage = props => (
+    <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
+
+        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={styles.alignItemsStart}>
+                <View style={styles.mb5}>
+                    <Icon
+                        src={Expensicons.Bug}
+                        height={variables.componentSizeNormal}
+                        width={variables.componentSizeNormal}
+                        fill={defaultTheme.iconSuccessFill}
+                    />
+                </View>
+                <View style={styles.mb5}>
+                    <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
+                        {props.translate('genericErrorPage.title')}
+                    </ExpensifyText>
+                </View>
+                <View style={styles.mb5}>
+                    <ErrorBodyText />
+                    <ExpensifyText>
+                        {props.translate('genericErrorPage.body.helpTextConcierge')}
+                        <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
+                            {CONST.EMAIL.CONCIERGE}
+                        </TextLink>
+                    </ExpensifyText>
+                </View>
+                <View style={styles.flexWrap}>
+                    <View style={[styles.flexRow, styles.justifyContentBetween]}>
+                        <Button
+                            success
+                            small={props.isSmallScreenWidth}
+                            onPress={props.onRefresh}
+                            text={props.translate('genericErrorPage.refresh')}
+                        />
+                        <Button
+                            small={props.isSmallScreenWidth}
+                            onPress={Session.signOut}
+                            text={props.translate('genericErrorPage.refresh')}
+                        />
+                    </View>
+                </View>
+            </View>
+        </View>
+        <View styles={styles.alignSelfEnd}>
+            <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                <LogoWordmark height={30} width={80} />
+            </View>
+        </View>
+    </View>
+);
+
+genericErrorPage.propTypes = propTypes;
+
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(genericErrorPage);

From 37699b7b62d5f289ca3d445df77199b451ecaefd Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 30 Dec 2021 23:24:08 +0530
Subject: [PATCH 13/26] fix: Fixed imports and props

---
 src/components/ErrorBoundary/BaseErrorBoundary.js        | 2 +-
 src/pages/GenericErrorPage/ErrorBodyText/index.native.js | 6 +++---
 src/pages/GenericErrorPage/index.js                      | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index 9bf8f4a121a0..73b0ef939267 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -49,7 +49,7 @@ class BaseErrorBoundary extends React.Component {
     render() {
         if (this.state.hasError) {
             // For the moment we've decided not to render any fallback UI
-            return <GenericErrorPage />;
+            return <GenericErrorPage onRefresh={this.onRefresh} />;
         }
 
         return this.props.children;
diff --git a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
index 4c9eb0231458..05d8c1bf5d75 100644
--- a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
+++ b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import ExpensifyText from '../../ExpensifyText';
-import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
-import TextLink from '../../TextLink';
+import ExpensifyText from '../../../components/ExpensifyText';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import TextLink from '../../../components/TextLink';
 import CONST from '../../../CONST';
 import styles from '../../../styles/styles';
 
diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 9ec828256c57..7083a94d9be6 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -52,8 +52,8 @@ const genericErrorPage = props => (
                         </TextLink>
                     </ExpensifyText>
                 </View>
-                <View style={styles.flexWrap}>
-                    <View style={[styles.flexRow, styles.justifyContentBetween]}>
+                <View style={[styles.flexWrap, styles.w100]}>
+                    <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
                         <Button
                             success
                             small={props.isSmallScreenWidth}
@@ -63,7 +63,7 @@ const genericErrorPage = props => (
                         <Button
                             small={props.isSmallScreenWidth}
                             onPress={Session.signOut}
-                            text={props.translate('genericErrorPage.refresh')}
+                            text={props.translate('initialSettingsPage.signOut')}
                         />
                     </View>
                 </View>

From e9064d5a7cdd8f957c7a1d19a321caeb048e8c2c Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 30 Dec 2021 23:42:21 +0530
Subject: [PATCH 14/26] fix: Added signOut and redirect

---
 src/pages/GenericErrorPage/index.js | 94 +++++++++++++++--------------
 1 file changed, 50 insertions(+), 44 deletions(-)

diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 7083a94d9be6..447f1a76c000 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -25,57 +25,63 @@ const propTypes = {
     onRefresh: PropTypes.func.isRequired,
 };
 
-const genericErrorPage = props => (
-    <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
+const genericErrorPage = (props) => {
+    const onSignOutClick = () => {
+        Session.signOut();
+        props.onRefresh();
+    };
 
-        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-            <View style={styles.alignItemsStart}>
-                <View style={styles.mb5}>
-                    <Icon
-                        src={Expensicons.Bug}
-                        height={variables.componentSizeNormal}
-                        width={variables.componentSizeNormal}
-                        fill={defaultTheme.iconSuccessFill}
-                    />
-                </View>
-                <View style={styles.mb5}>
-                    <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
-                        {props.translate('genericErrorPage.title')}
-                    </ExpensifyText>
-                </View>
-                <View style={styles.mb5}>
-                    <ErrorBodyText />
-                    <ExpensifyText>
-                        {props.translate('genericErrorPage.body.helpTextConcierge')}
-                        <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
-                            {CONST.EMAIL.CONCIERGE}
-                        </TextLink>
-                    </ExpensifyText>
-                </View>
-                <View style={[styles.flexWrap, styles.w100]}>
-                    <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
-                        <Button
-                            success
-                            small={props.isSmallScreenWidth}
-                            onPress={props.onRefresh}
-                            text={props.translate('genericErrorPage.refresh')}
-                        />
-                        <Button
-                            small={props.isSmallScreenWidth}
-                            onPress={Session.signOut}
-                            text={props.translate('initialSettingsPage.signOut')}
+    return (
+        <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
+            <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <View style={styles.alignItemsStart}>
+                    <View style={styles.mb5}>
+                        <Icon
+                            src={Expensicons.Bug}
+                            height={variables.componentSizeNormal}
+                            width={variables.componentSizeNormal}
+                            fill={defaultTheme.iconSuccessFill}
                         />
                     </View>
+                    <View style={styles.mb5}>
+                        <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
+                            {props.translate('genericErrorPage.title')}
+                        </ExpensifyText>
+                    </View>
+                    <View style={styles.mb5}>
+                        <ErrorBodyText />
+                        <ExpensifyText>
+                            {props.translate('genericErrorPage.body.helpTextConcierge')}
+                            <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
+                                {CONST.EMAIL.CONCIERGE}
+                            </TextLink>
+                        </ExpensifyText>
+                    </View>
+                    <View style={[styles.flexWrap, styles.w100]}>
+                        <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
+                            <Button
+                                success
+                                small={props.isSmallScreenWidth}
+                                onPress={props.onRefresh}
+                                text={props.translate('genericErrorPage.refresh')}
+                            />
+                            <Button
+                                small={props.isSmallScreenWidth}
+                                onPress={onSignOutClick}
+                                text={props.translate('initialSettingsPage.signOut')}
+                            />
+                        </View>
+                    </View>
                 </View>
             </View>
-        </View>
-        <View styles={styles.alignSelfEnd}>
-            <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
-                <LogoWordmark height={30} width={80} />
+            <View styles={styles.alignSelfEnd}>
+                <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                    <LogoWordmark height={30} width={80} />
+                </View>
             </View>
         </View>
-    </View>
-);
+    );
+};
 
 genericErrorPage.propTypes = propTypes;
 

From 07e08e533f4f0ca62a1319125bab5fabd8da3757 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 30 Dec 2021 23:44:33 +0530
Subject: [PATCH 15/26] fix: Corrected translation keys

---
 src/pages/GenericErrorPage/ErrorBodyText/index.native.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
index 05d8c1bf5d75..6021b25473bb 100644
--- a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
+++ b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
@@ -11,9 +11,9 @@ const propTypes = {
 
 const ErrorBodyText = props => (
     <ExpensifyText>
-        {props.translate('genericErrorView.body.helpTextMobile')}
+        {props.translate('genericErrorPage.body.helpTextMobile')}
         <TextLink href={CONST.NEW_EXPENSIFY_URL} style={[styles.link]}>
-            {props.translate('genericErrorView.body.helpTextWeb')}
+            {props.translate('genericErrorPage.body.helpTextWeb')}
         </TextLink>
     </ExpensifyText>
 );

From b47b6ee0b5bda8b79f751d937d837099e371e6f7 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 30 Dec 2021 23:52:47 +0530
Subject: [PATCH 16/26] fix: Styling for button alignment in mobile devices

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

diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 447f1a76c000..558f41cb185a 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -57,7 +57,7 @@ const genericErrorPage = (props) => {
                             </TextLink>
                         </ExpensifyText>
                     </View>
-                    <View style={[styles.flexWrap, styles.w100]}>
+                    <View style={[styles.dFlex, styles.flexRow, styles.w100]}>
                         <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
                             <Button
                                 success

From fa1205cc36a8bf5c0200c8ed39529ddc968aaf30 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Fri, 31 Dec 2021 00:28:00 +0530
Subject: [PATCH 17/26] fix: Update refs to Text component

---
 .../GenericErrorPage/ErrorBodyText/index.native.js     |  6 +++---
 src/pages/GenericErrorPage/index.js                    | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
index 6021b25473bb..8fa9d5e77a99 100644
--- a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
+++ b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ExpensifyText from '../../../components/ExpensifyText';
+import Text from '../../../components/Text';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import TextLink from '../../../components/TextLink';
 import CONST from '../../../CONST';
@@ -10,12 +10,12 @@ const propTypes = {
 };
 
 const ErrorBodyText = props => (
-    <ExpensifyText>
+    <Text>
         {props.translate('genericErrorPage.body.helpTextMobile')}
         <TextLink href={CONST.NEW_EXPENSIFY_URL} style={[styles.link]}>
             {props.translate('genericErrorPage.body.helpTextWeb')}
         </TextLink>
-    </ExpensifyText>
+    </Text>
 );
 
 ErrorBodyText.propTypes = propTypes;
diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 558f41cb185a..ff83792917c1 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import Icon from '../../components/Icon';
 import defaultTheme from '../../styles/themes/default';
 import * as Expensicons from '../../components/Icon/Expensicons';
-import ExpensifyText from '../../components/ExpensifyText';
+import Text from '../../components/Text';
 import Button from '../../components/Button';
 import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -44,18 +44,18 @@ const genericErrorPage = (props) => {
                         />
                     </View>
                     <View style={styles.mb5}>
-                        <ExpensifyText style={[styles.headerText, styles.textXXLarge]}>
+                        <Text style={[styles.headerText, styles.textXXLarge]}>
                             {props.translate('genericErrorPage.title')}
-                        </ExpensifyText>
+                        </Text>
                     </View>
                     <View style={styles.mb5}>
                         <ErrorBodyText />
-                        <ExpensifyText>
+                        <Text>
                             {props.translate('genericErrorPage.body.helpTextConcierge')}
                             <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
                                 {CONST.EMAIL.CONCIERGE}
                             </TextLink>
-                        </ExpensifyText>
+                        </Text>
                     </View>
                     <View style={[styles.dFlex, styles.flexRow, styles.w100]}>
                         <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>

From 65599762b71de5f20236614cba9f6ecfb8245ce5 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 1 Jan 2022 09:15:25 +0530
Subject: [PATCH 18/26] fix: Corrected component name and moved Signout to
 props

---
 .../ErrorBoundary/BaseErrorBoundary.js        |   9 +-
 src/pages/GenericErrorPage/index.js           | 106 +++++++++---------
 2 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index 73b0ef939267..7041608bb990 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BootSplash from '../../libs/BootSplash';
 import GenericErrorPage from '../../pages/GenericErrorPage';
+import * as Session from '../../libs/actions/Session';
 
 const propTypes = {
     /* A message posted to `logError` (along with error data) when this component intercepts an error */
@@ -28,6 +29,7 @@ class BaseErrorBoundary extends React.Component {
         super(props);
         this.state = {hasError: false};
         this.onRefresh = this.onRefresh.bind(this);
+        this.onSignOut = this.onSignOut.bind(this);
     }
 
     static getDerivedStateFromError() {
@@ -46,10 +48,15 @@ class BaseErrorBoundary extends React.Component {
         this.setState({hasError: false});
     }
 
+    onSignOut() {
+        Session.signOut();
+        this.onRefresh();
+    }
+
     render() {
         if (this.state.hasError) {
             // For the moment we've decided not to render any fallback UI
-            return <GenericErrorPage onRefresh={this.onRefresh} />;
+            return <GenericErrorPage onRefresh={this.onRefresh} onSignOut={this.onSignOut} />;
         }
 
         return this.props.children;
diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index ff83792917c1..8c9f0b6d5484 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -10,7 +10,6 @@ import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import compose from '../../libs/compose';
-import * as Session from '../../libs/actions/Session';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
@@ -21,71 +20,68 @@ const propTypes = {
     ...withLocalizePropTypes,
     ...windowDimensionsPropTypes,
 
-    /** Function call on Refresh button click */
+    /** Callback to call on refresh button click */
     onRefresh: PropTypes.func.isRequired,
-};
 
-const genericErrorPage = (props) => {
-    const onSignOutClick = () => {
-        Session.signOut();
-        props.onRefresh();
-    };
+    /** Callback to call on signOut button click */
+    onSignOut: PropTypes.func.isRequired,
+};
 
-    return (
-        <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
-            <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                <View style={styles.alignItemsStart}>
-                    <View style={styles.mb5}>
-                        <Icon
-                            src={Expensicons.Bug}
-                            height={variables.componentSizeNormal}
-                            width={variables.componentSizeNormal}
-                            fill={defaultTheme.iconSuccessFill}
+const GenericErrorPage = props => (
+    <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
+        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={styles.alignItemsStart}>
+                <View style={styles.mb5}>
+                    <Icon
+                        src={Expensicons.Bug}
+                        height={variables.componentSizeNormal}
+                        width={variables.componentSizeNormal}
+                        fill={defaultTheme.iconSuccessFill}
+                    />
+                </View>
+                <View style={styles.mb5}>
+                    <Text style={[styles.headerText, styles.textXXLarge]}>
+                        {props.translate('genericErrorPage.title')}
+                    </Text>
+                </View>
+                <View style={styles.mb5}>
+                    <ErrorBodyText />
+                    <Text>
+                        {props.translate('genericErrorPage.body.helpTextConcierge')}
+                        <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
+                            {CONST.EMAIL.CONCIERGE}
+                        </TextLink>
+                    </Text>
+                </View>
+                <View style={[styles.dFlex, styles.flexRow, styles.w100]}>
+                    <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
+                        <Button
+                            success
+                            small={props.isSmallScreenWidth}
+                            onPress={props.onRefresh}
+                            text={props.translate('genericErrorPage.refresh')}
+                        />
+                        <Button
+                            small={props.isSmallScreenWidth}
+                            onPress={props.onSignOut}
+                            text={props.translate('initialSettingsPage.signOut')}
                         />
-                    </View>
-                    <View style={styles.mb5}>
-                        <Text style={[styles.headerText, styles.textXXLarge]}>
-                            {props.translate('genericErrorPage.title')}
-                        </Text>
-                    </View>
-                    <View style={styles.mb5}>
-                        <ErrorBodyText />
-                        <Text>
-                            {props.translate('genericErrorPage.body.helpTextConcierge')}
-                            <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
-                                {CONST.EMAIL.CONCIERGE}
-                            </TextLink>
-                        </Text>
-                    </View>
-                    <View style={[styles.dFlex, styles.flexRow, styles.w100]}>
-                        <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
-                            <Button
-                                success
-                                small={props.isSmallScreenWidth}
-                                onPress={props.onRefresh}
-                                text={props.translate('genericErrorPage.refresh')}
-                            />
-                            <Button
-                                small={props.isSmallScreenWidth}
-                                onPress={onSignOutClick}
-                                text={props.translate('initialSettingsPage.signOut')}
-                            />
-                        </View>
                     </View>
                 </View>
             </View>
-            <View styles={styles.alignSelfEnd}>
-                <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
-                    <LogoWordmark height={30} width={80} />
-                </View>
+        </View>
+        <View styles={styles.alignSelfEnd}>
+            <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                <LogoWordmark height={30} width={80} />
             </View>
         </View>
-    );
-};
+    </View>
+);
 
-genericErrorPage.propTypes = propTypes;
+GenericErrorPage.propTypes = propTypes;
+GenericErrorPage.displayName = 'GenericErrorPage';
 
 export default compose(
     withWindowDimensions,
     withLocalize,
-)(genericErrorPage);
+)(GenericErrorPage);

From 5d0ef598fa41f062afb357d0301b345ec46ed576 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 1 Jan 2022 09:22:57 +0530
Subject: [PATCH 19/26] fix: Made buttons left aligned

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

diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 8c9f0b6d5484..f47e7d1b965f 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -54,12 +54,13 @@ const GenericErrorPage = props => (
                     </Text>
                 </View>
                 <View style={[styles.dFlex, styles.flexRow, styles.w100]}>
-                    <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
+                    <View style={[styles.flex1, styles.flexRow]}>
                         <Button
                             success
                             small={props.isSmallScreenWidth}
                             onPress={props.onRefresh}
                             text={props.translate('genericErrorPage.refresh')}
+                            style={styles.mr4}
                         />
                         <Button
                             small={props.isSmallScreenWidth}

From f3ea35d4111728b0a7aabd8426e0f770d0a433a2 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 1 Jan 2022 17:14:57 +0530
Subject: [PATCH 20/26] fix: Removed unwated props

---
 src/components/ErrorBoundary/BaseErrorBoundary.js      | 10 +---------
 .../GenericErrorPage/ErrorBodyText/index.native.js     |  1 +
 src/pages/GenericErrorPage/index.js                    |  9 +++++----
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index 7041608bb990..da4947e0e8eb 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BootSplash from '../../libs/BootSplash';
 import GenericErrorPage from '../../pages/GenericErrorPage';
-import * as Session from '../../libs/actions/Session';
 
 const propTypes = {
     /* A message posted to `logError` (along with error data) when this component intercepts an error */
@@ -29,7 +28,6 @@ class BaseErrorBoundary extends React.Component {
         super(props);
         this.state = {hasError: false};
         this.onRefresh = this.onRefresh.bind(this);
-        this.onSignOut = this.onSignOut.bind(this);
     }
 
     static getDerivedStateFromError() {
@@ -48,15 +46,9 @@ class BaseErrorBoundary extends React.Component {
         this.setState({hasError: false});
     }
 
-    onSignOut() {
-        Session.signOut();
-        this.onRefresh();
-    }
-
     render() {
         if (this.state.hasError) {
-            // For the moment we've decided not to render any fallback UI
-            return <GenericErrorPage onRefresh={this.onRefresh} onSignOut={this.onSignOut} />;
+            return <GenericErrorPage onRefresh={this.onRefresh} />;
         }
 
         return this.props.children;
diff --git a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
index 8fa9d5e77a99..2f6fee0d1ee0 100644
--- a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
+++ b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
@@ -18,5 +18,6 @@ const ErrorBodyText = props => (
     </Text>
 );
 
+ErrorBodyText.displayName = 'ErrorBodyText';
 ErrorBodyText.propTypes = propTypes;
 export default withLocalize(ErrorBodyText);
diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index f47e7d1b965f..e3b29b3d4733 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -10,6 +10,7 @@ import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import compose from '../../libs/compose';
+import * as Session from '../../libs/actions/Session';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
@@ -22,9 +23,6 @@ const propTypes = {
 
     /** Callback to call on refresh button click */
     onRefresh: PropTypes.func.isRequired,
-
-    /** Callback to call on signOut button click */
-    onSignOut: PropTypes.func.isRequired,
 };
 
 const GenericErrorPage = props => (
@@ -64,7 +62,10 @@ const GenericErrorPage = props => (
                         />
                         <Button
                             small={props.isSmallScreenWidth}
-                            onPress={props.onSignOut}
+                            onPress={() => {
+                                Session.signOut();
+                                props.onRefresh();
+                            }}
                             text={props.translate('initialSettingsPage.signOut')}
                         />
                     </View>

From c839bcd6b61a460ba135cfc103ebc685b59aab05 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Tue, 4 Jan 2022 00:04:04 +0530
Subject: [PATCH 21/26] fix: Added medium button style

---
 src/components/Button.js |  6 ++++++
 src/styles/styles.js     | 17 +++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/Button.js b/src/components/Button.js
index b0990f2ad911..efa1baeb0b7d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -23,6 +23,9 @@ const propTypes = {
     /** Large sized button */
     large: PropTypes.bool,
 
+    /** medium sized button */
+    medium: PropTypes.bool,
+
     /** Indicates whether the button should be disabled and in the loading state */
     isLoading: PropTypes.bool,
 
@@ -76,6 +79,7 @@ const defaultProps = {
     isDisabled: false,
     small: false,
     large: false,
+    medium: false,
     onPress: () => {},
     onLongPress: () => {},
     onPressIn: () => {},
@@ -138,6 +142,7 @@ class Button extends Component {
                 style={[
                     styles.buttonText,
                     this.props.small && styles.buttonSmallText,
+                    this.props.medium && styles.buttonMediumText,
                     this.props.large && styles.buttonLargeText,
                     this.props.success && styles.buttonSuccessText,
                     this.props.danger && styles.buttonDangerText,
@@ -185,6 +190,7 @@ class Button extends Component {
                         style={[
                             styles.button,
                             this.props.small ? styles.buttonSmall : undefined,
+                            this.props.medium ? styles.buttonMedium : undefined,
                             this.props.large ? styles.buttonLarge : undefined,
                             this.props.success ? styles.buttonSuccess : undefined,
                             this.props.danger ? styles.buttonDanger : undefined,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 95d927a20072..8feaf49d1d0a 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -328,6 +328,16 @@ const styles = {
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
+    buttonMedium: {
+        borderRadius: variables.componentBorderRadiusNormal,
+        height: variables.componentSizeNormal,
+        paddingTop: 6,
+        paddingRight: 12,
+        paddingBottom: 6,
+        paddingLeft: 12,
+        backgroundColor: themeColors.buttonDefaultBG,
+    },
+
     buttonLarge: {
         borderRadius: variables.componentBorderRadius,
         height: variables.componentSizeLarge,
@@ -344,6 +354,13 @@ const styles = {
         textAlign: 'center',
     },
 
+    buttonMediumText: {
+        fontSize: variables.fontSizeLabel,
+        fontFamily: fontFamily.GTA_BOLD,
+        fontWeight: fontWeightBold,
+        textAlign: 'center',
+    },
+
     buttonLargeText: {
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.GTA_BOLD,

From d4fa9ffffce23eb666fc6bc300b85a6c41b2d8ec Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Tue, 4 Jan 2022 00:04:37 +0530
Subject: [PATCH 22/26] fix: Changed button style to medium

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

diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index e3b29b3d4733..dd2a3a270549 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -55,13 +55,13 @@ const GenericErrorPage = props => (
                     <View style={[styles.flex1, styles.flexRow]}>
                         <Button
                             success
-                            small={props.isSmallScreenWidth}
+                            medium
                             onPress={props.onRefresh}
                             text={props.translate('genericErrorPage.refresh')}
                             style={styles.mr4}
                         />
                         <Button
-                            small={props.isSmallScreenWidth}
+                            medium
                             onPress={() => {
                                 Session.signOut();
                                 props.onRefresh();

From ea9178cedce077bd354b5add9aa8dbe098f98992 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Tue, 4 Jan 2022 00:05:27 +0530
Subject: [PATCH 23/26] fix: Removed windowDimensions

---
 src/pages/GenericErrorPage/index.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index dd2a3a270549..6c74e3e599a9 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -8,8 +8,6 @@ import Text from '../../components/Text';
 import Button from '../../components/Button';
 import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
-import compose from '../../libs/compose';
 import * as Session from '../../libs/actions/Session';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
@@ -19,7 +17,6 @@ import CONST from '../../CONST';
 
 const propTypes = {
     ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
 
     /** Callback to call on refresh button click */
     onRefresh: PropTypes.func.isRequired,
@@ -83,7 +80,4 @@ const GenericErrorPage = props => (
 GenericErrorPage.propTypes = propTypes;
 GenericErrorPage.displayName = 'GenericErrorPage';
 
-export default compose(
-    withWindowDimensions,
-    withLocalize,
-)(GenericErrorPage);
+export default withLocalize(GenericErrorPage);

From 0e924d4dec7aa4edd7ebd725b95f99cd65989aef Mon Sep 17 00:00:00 2001
From: Manan <manan.jadhav@gmail.com>
Date: Tue, 4 Jan 2022 01:59:16 +0530
Subject: [PATCH 24/26] fix: Reduced the margin between buttons

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

diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 6c74e3e599a9..7fad9a82dfbd 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -55,7 +55,7 @@ const GenericErrorPage = props => (
                             medium
                             onPress={props.onRefresh}
                             text={props.translate('genericErrorPage.refresh')}
-                            style={styles.mr4}
+                            style={styles.mr3}
                         />
                         <Button
                             medium

From 5101d2ef04a020212a73b8e704699a647a7e4f97 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 13 Jan 2022 01:32:54 +0530
Subject: [PATCH 25/26] fix: Code cleanup

---
 src/components/ErrorBoundary/BaseErrorBoundary.js        | 4 ++--
 src/languages/en.js                                      | 4 ++--
 src/languages/es.js                                      | 4 ++--
 src/pages/GenericErrorPage/ErrorBodyText/index.native.js | 2 +-
 src/pages/GenericErrorPage/index.js                      | 2 +-
 src/styles/styles.js                                     | 1 +
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index da4947e0e8eb..0c6e7b2508d8 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -42,13 +42,13 @@ class BaseErrorBoundary extends React.Component {
         BootSplash.hide({fade: true});
     }
 
-    onRefresh() {
+    clearError() {
         this.setState({hasError: false});
     }
 
     render() {
         if (this.state.hasError) {
-            return <GenericErrorPage onRefresh={this.onRefresh} />;
+            return <GenericErrorPage onRefresh={this.clearError} />;
         }
 
         return this.props.children;
diff --git a/src/languages/en.js b/src/languages/en.js
index 8ee4d49f6a70..eae8e6f0f4c4 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -875,9 +875,9 @@ export default {
     genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
         body: {
-            helpTextMobile: 'Please try closing and reopening the app or switching to ',
+            helpTextMobile: 'Please try closing and reopening the app or switching to',
             helpTextWeb: 'web.',
-            helpTextConcierge: 'If the problem persists, reach out to ',
+            helpTextConcierge: 'If the problem persists, reach out to',
         },
         refresh: 'Refresh',
     },
diff --git a/src/languages/es.js b/src/languages/es.js
index abf338017863..05214657aedb 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -877,9 +877,9 @@ export default {
     genericErrorPage: {
         title: '¡Uh-oh, algo salió mal!',
         body: {
-            helpTextMobile: 'Intente cerrar y volver a abrir la aplicación o cambiar a la ',
+            helpTextMobile: 'Intente cerrar y volver a abrir la aplicación o cambiar a la',
             helpTextWeb: 'web.',
-            helpTextConcierge: 'Si el problema persiste, comuníquese con ',
+            helpTextConcierge: 'Si el problema persiste, comuníquese con',
         },
         refresh: 'Refresh',
     },
diff --git a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
index 2f6fee0d1ee0..34883ffeb5bb 100644
--- a/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
+++ b/src/pages/GenericErrorPage/ErrorBodyText/index.native.js
@@ -11,7 +11,7 @@ const propTypes = {
 
 const ErrorBodyText = props => (
     <Text>
-        {props.translate('genericErrorPage.body.helpTextMobile')}
+        {`${props.translate('genericErrorPage.body.helpTextMobile')} `}
         <TextLink href={CONST.NEW_EXPENSIFY_URL} style={[styles.link]}>
             {props.translate('genericErrorPage.body.helpTextWeb')}
         </TextLink>
diff --git a/src/pages/GenericErrorPage/index.js b/src/pages/GenericErrorPage/index.js
index 6c74e3e599a9..208247b1832d 100644
--- a/src/pages/GenericErrorPage/index.js
+++ b/src/pages/GenericErrorPage/index.js
@@ -42,7 +42,7 @@ const GenericErrorPage = props => (
                 <View style={styles.mb5}>
                     <ErrorBodyText />
                     <Text>
-                        {props.translate('genericErrorPage.body.helpTextConcierge')}
+                        {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
                         <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
                             {CONST.EMAIL.CONCIERGE}
                         </TextLink>
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 06a08dab879d..ec31acee7f6e 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -345,6 +345,7 @@ const styles = {
         paddingRight: 12,
         paddingBottom: 8,
         paddingLeft: 12,
+        backgroundColor: themeColors.buttonDefaultBG,
     },
 
     buttonSmallText: {

From 964ee334c8aa8de7e868b05a5368b1d6138811bc Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Thu, 13 Jan 2022 01:38:57 +0530
Subject: [PATCH 26/26] fix: Renamed func ref

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

diff --git a/src/components/ErrorBoundary/BaseErrorBoundary.js b/src/components/ErrorBoundary/BaseErrorBoundary.js
index 0c6e7b2508d8..70d010a80aad 100644
--- a/src/components/ErrorBoundary/BaseErrorBoundary.js
+++ b/src/components/ErrorBoundary/BaseErrorBoundary.js
@@ -27,7 +27,7 @@ class BaseErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = {hasError: false};
-        this.onRefresh = this.onRefresh.bind(this);
+        this.clearError = this.clearError.bind(this);
     }
 
     static getDerivedStateFromError() {