From 70938b779f95fe97cc9551a1b7cd689ba0980228 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Thu, 9 Mar 2023 17:27:08 +0200
Subject: [PATCH 1/2] Add go back link to initial route on Not Found Page

---
 src/components/BlockingViews/BlockingView.js  | 20 +++++++++++++++++++
 .../BlockingViews/FullPageNotFoundView.js     | 10 ++++++++++
 src/languages/en.js                           |  1 +
 src/languages/es.js                           |  1 +
 src/pages/ErrorPage/NotFoundPage.js           |  2 +-
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index f4b0d36e4726..efdb69579d1e 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -6,6 +6,9 @@ import variables from '../../styles/variables';
 import Icon from '../Icon';
 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 */
@@ -19,10 +22,18 @@ const propTypes = {
 
     /** Subtitle message below the title */
     subtitle: PropTypes.string.isRequired,
+
+    /** Link message below the subtitle */
+    link: PropTypes.string,
+
+    /** Whether we should show a go back home link */
+    shouldShowBackHomeLink: PropTypes.bool,
 };
 
 const defaultProps = {
     iconColor: themeColors.offline,
+    shouldShowBackHomeLink: false,
+    link: 'notFound.goBackHome',
 };
 
 const BlockingView = props => (
@@ -37,6 +48,15 @@ const BlockingView = props => (
         />
         <Text style={[styles.notFoundTextHeader]}>{props.title}</Text>
         <Text style={[styles.textAlignCenter]}>{props.subtitle}</Text>
+        {!!props.shouldShowBackHomeLink
+            && (
+                <TextLink
+                    onPress={() => Navigation.navigate(ROUTES.REPORT)}
+                    style={[styles.link, styles.mt2]}
+                >
+                    {props.link}
+                </TextLink>
+            )}
     </View>
 );
 
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index 84014c43d148..5f0a5b5cebcc 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -31,6 +31,12 @@ const propTypes = {
     /** Whether we should show a close button */
     shouldShowCloseButton: PropTypes.bool,
 
+    /** Whether we should show a go back home link */
+    shouldShowBackHomeLink: PropTypes.bool,
+
+    /** The key in the translations file to use for the go back link */
+    linkKey: PropTypes.string,
+
     /** Method to trigger when pressing the back button of the header */
     onBackButtonPress: PropTypes.func,
 };
@@ -40,7 +46,9 @@ const defaultProps = {
     shouldShow: false,
     titleKey: 'notFound.notHere',
     subtitleKey: 'notFound.pageNotFound',
+    linkKey: 'notFound.goBackHome',
     shouldShowBackButton: true,
+    shouldShowBackHomeLink: false,
     shouldShowCloseButton: true,
     onBackButtonPress: () => Navigation.dismissModal(),
 };
@@ -61,6 +69,8 @@ const FullPageNotFoundView = (props) => {
                         icon={Expensicons.QuestionMark}
                         title={props.translate(props.titleKey)}
                         subtitle={props.translate(props.subtitleKey)}
+                        link={props.translate(props.linkKey)}
+                        shouldShowBackHomeLink={props.shouldShowBackHomeLink}
                     />
                 </View>
             </>
diff --git a/src/languages/en.js b/src/languages/en.js
index a47b9410a000..19969013b9f1 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -642,6 +642,7 @@ export default {
         notHere: "Hmm... it's not here",
         pageNotFound: 'That page is nowhere to be found.',
         noAccess: 'You don\'t have access to this chat',
+        goBackHome: 'Go back to Home page',
     },
     setPasswordPage: {
         enterPassword: 'Enter a password',
diff --git a/src/languages/es.js b/src/languages/es.js
index 7c80857ec75e..849d7736f53f 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -641,6 +641,7 @@ export default {
         notHere: 'Hmm… no está aquí',
         pageNotFound: 'La página que buscas no existe.',
         noAccess: 'No tienes acceso a este chat',
+        goBackHome: 'Volver a la página principal',
     },
     setPasswordPage: {
         enterPassword: 'Escribe una contraseña',
diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.js
index 10b65f0d4ad7..68581353bfad 100644
--- a/src/pages/ErrorPage/NotFoundPage.js
+++ b/src/pages/ErrorPage/NotFoundPage.js
@@ -5,7 +5,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 // eslint-disable-next-line rulesdir/no-negated-variables
 const NotFoundPage = () => (
     <ScreenWrapper>
-        <FullPageNotFoundView shouldShow />
+        <FullPageNotFoundView shouldShow shouldShowBackHomeLink />
     </ScreenWrapper>
 );
 

From be57fe917e2dad2a831d16b3233cb9187b42ec5d Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 10 Mar 2023 14:27:57 +0200
Subject: [PATCH 2/2] Use same patter of checks

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

diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index efdb69579d1e..4267d696af8f 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -48,15 +48,15 @@ const BlockingView = props => (
         />
         <Text style={[styles.notFoundTextHeader]}>{props.title}</Text>
         <Text style={[styles.textAlignCenter]}>{props.subtitle}</Text>
-        {!!props.shouldShowBackHomeLink
-            && (
+        {props.shouldShowBackHomeLink
+            ? (
                 <TextLink
                     onPress={() => Navigation.navigate(ROUTES.REPORT)}
                     style={[styles.link, styles.mt2]}
                 >
                     {props.link}
                 </TextLink>
-            )}
+            ) : null}
     </View>
 );
 
