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 = () => ( - + );