Merge pull request #15776 from narefyev91/go-back-link-not-found-page

Add go back link to initial route on Not Found Page
Expensify · Mar 10, 2023 · eeeaff3 · eeeaff3
2 parents bcdcfe5 + be57fe9
commit eeeaff3
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 1 deletion.
diff --git 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>
+            ) : null}
     </View>
 );
 

diff --git 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
@@ -641,6 +641,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
@@ -640,6 +640,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
@@ -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>
 );