Merge pull request #9649 from Expensify/arosiclair-full-page-not-foun…

…d-view

Add FullPageNotFoundView

src/components/BlockingViews/BlockingView.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import styles from '../../styles/styles';
+import variables from '../../styles/variables';
+import Icon from '../Icon';
+import Text from '../Text';
+import themeColors from '../../styles/themes/default';
+
+const propTypes = {
+    /** Expensicon for the page */
+    icon: PropTypes.func.isRequired,
+
+    /** Color for the icon (should be from theme) */
+    iconColor: PropTypes.string,
+
+    /** Title message below the icon */
+    title: PropTypes.string.isRequired,
+
+    /** Subtitle message below the title */
+    subtitle: PropTypes.string.isRequired,
+};
+
+const defaultProps = {
+    iconColor: themeColors.offline,
+};
+
+const BlockingView = props => (
+    <View
+        style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}
+    >
+        <Icon
+            src={props.icon}
+            fill={props.iconColor}
+            width={variables.iconSizeSuperLarge}
+            height={variables.iconSizeSuperLarge}
+        />
+        <Text style={[styles.headerText, styles.textLarge, styles.mt5]}>{props.title}</Text>
+        <Text style={[styles.w70, styles.textAlignCenter]}>{props.subtitle}</Text>
+    </View>
+);
+
+BlockingView.propTypes = propTypes;
+BlockingView.defaultProps = defaultProps;
+BlockingView.displayName = 'BlockingView';
+
+export default BlockingView;

src/components/BlockingViews/FullPageNotFoundView.js

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import BlockingView from './BlockingView';
+import * as Expensicons from '../Icon/Expensicons';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    /** Props to fetch translation features */
+    ...withLocalizePropTypes,
+
+    /** Child elements */
+    children: PropTypes.node.isRequired,
+
+    /** If true, child components are replaced with a blocking "not found" view */
+    shouldShow: PropTypes.bool,
+};
+
+const defaultProps = {
+    shouldShow: false,
+};
+
+// eslint-disable-next-line rulesdir/no-negated-variables
+const FullPageNotFoundView = (props) => {
+    if (props.shouldShow) {
+        return (
+            <BlockingView
+                icon={Expensicons.QuestionMark}
+                title={props.translate('notFound.notHere')}
+                subtitle={props.translate('notFound.pageNotFound')}
+            />
+        );
+    }
+
+    return props.children;
+};
+
+FullPageNotFoundView.propTypes = propTypes;
+FullPageNotFoundView.defaultProps = defaultProps;
+FullPageNotFoundView.displayName = 'FullPageNotFoundView';
+
+export default withLocalize(FullPageNotFoundView);

src/components/BlockingViews/FullPageOfflineBlockingView.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import networkPropTypes from '../networkPropTypes';
+import {withNetwork} from '../OnyxProvider';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import * as Expensicons from '../Icon/Expensicons';
+import compose from '../../libs/compose';
+import BlockingView from './BlockingView';
+
+const propTypes = {
+    /** Child elements */
+    children: PropTypes.node.isRequired,
+
+    /** Props to fetch translation features */
+    ...withLocalizePropTypes,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
+};
+
+const FullPageOfflineBlockingView = (props) => {
+    if (props.network.isOffline) {
+        return (
+            <BlockingView
+                icon={Expensicons.OfflineCloud}
+                title={props.translate('common.youAppearToBeOffline')}
+                subtitle={props.translate('common.thisFeatureRequiresInternet')}
+            />
+        );
+    }
+
+    return props.children;
+};
+
+FullPageOfflineBlockingView.propTypes = propTypes;
+FullPageOfflineBlockingView.displayName = 'FullPageOfflineBlockingView';
+
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(FullPageOfflineBlockingView);

src/languages/en.js

@@ -507,6 +507,8 @@ export default {
         chatYouLookingForCannotBeFound: 'The chat you are looking for cannot be found.',
         getMeOutOfHere: 'Get me out of here',
         iouReportNotFound: 'The payment details you are looking for cannot be found.',
+        notHere: "Hmm... it's not here",
+        pageNotFound: 'That page is nowhere to be found.',
     },
     setPasswordPage: {
         enterPassword: 'Enter a password',

src/languages/es.js

@@ -507,6 +507,8 @@ export default {
         chatYouLookingForCannotBeFound: 'El chat que estás buscando no se ha podido encontrar.',
         getMeOutOfHere: 'Sácame de aquí',
         iouReportNotFound: 'Los detalles del pago que estás buscando no se han podido encontrar.',
+        notHere: 'Hmm… no está aquí',
+        pageNotFound: 'La página que buscas no existe.',
     },
     setPasswordPage: {
         enterPassword: 'Escribe una contraseña',