diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index f4b0d36e4726..4267d696af8f 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 => (
/>
{props.title}
{props.subtitle}
+ {props.shouldShowBackHomeLink
+ ? (
+ Navigation.navigate(ROUTES.REPORT)}
+ style={[styles.link, styles.mt2]}
+ >
+ {props.link}
+
+ ) : null}
);
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}
/>
>
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 = () => (
-
+
);