Merge pull request Expensify#9165 from Expensify/luke-full-page-offli…

…ne-view

src/components/FullPageOfflineBlockingView.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Icon from './Icon';
+import networkPropTypes from './networkPropTypes';
+import {withNetwork} from './OnyxProvider';
+import Text from './Text';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import * as Expensicons from './Icon/Expensicons';
+import themeColors from '../styles/themes/default';
+import styles from '../styles/styles';
+import compose from '../libs/compose';
+
+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 (
+            <View
+                style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}
+            >
+                <Icon
+                    src={Expensicons.OfflineCloud}
+                    fill={themeColors.offline}
+                    width={50}
+                    height={50}
+                />
+                <Text style={[styles.h1]}>{props.translate('common.youAppearToBeOffline')}</Text>
+                <Text style={[styles.w70, styles.textAlignCenter]}>{props.translate('common.thisFeatureRequiresInternet')}</Text>
+            </View>
+        );
+    }
+
+    return props.children;
+};
+
+FullPageOfflineBlockingView.propTypes = propTypes;
+FullPageOfflineBlockingView.displayName = 'FullPageOfflineBlockingView';
+
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(FullPageOfflineBlockingView);

src/components/Icon/Expensicons.js

@@ -45,6 +45,7 @@ import Monitor from '../../../assets/images/monitor.svg';
 import NewWindow from '../../../assets/images/new-window.svg';
 import NewWorkspace from '../../../assets/images/new-workspace.svg';
 import Offline from '../../../assets/images/offline.svg';
+import OfflineCloud from '../../../assets/images/offline-cloud.svg';
 import Paperclip from '../../../assets/images/paperclip.svg';
 import Paycheck from '../../../assets/images/paycheck.svg';
 import PayPal from '../../../assets/images/paypal.svg';
@@ -135,6 +136,7 @@ export {
     NewWindow,
     NewWorkspace,
     Offline,
+    OfflineCloud,
     Paperclip,
     Paycheck,
     PayPal,

src/languages/en.js

@@ -105,6 +105,8 @@ export default {
         leaveRoom: 'Leave room',
         your: 'your',
         conciergeHelp: 'Please reach out to Concierge for help.',
+        youAppearToBeOffline: 'You appear to be offline.',
+        thisFeatureRequiresInternet: 'This feature requires an active internet connection to be used.',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera permission required',
@@ -158,7 +160,6 @@ export default {
         writeSomething: 'Write something...',
         sayHello: 'Say hello!',
         blockedFromConcierge: 'Communication is barred',
-        youAppearToBeOffline: 'You appear to be offline.',
         fileUploadFailed: 'Upload failed. File is not supported.',
         localTime: ({user, time}) => `It's ${time} for ${user}`,
         edited: '(edited)',

src/languages/es.js

@@ -105,6 +105,8 @@ export default {
         leaveRoom: 'Salir de la sala de chat',
         your: 'tu',
         conciergeHelp: 'Por favor contacta con Concierge para obtener ayuda.',
+        youAppearToBeOffline: 'Parece que estás desconectado.',
+        thisFeatureRequiresInternet: 'Esta función requiere una conexión a Internet activa para ser utilizada.',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Se necesita permiso para usar la cámara',
@@ -158,7 +160,6 @@ export default {
         writeSomething: 'Escribe algo...',
         sayHello: 'Di hola!',
         blockedFromConcierge: 'Comunicación no permitida',
-        youAppearToBeOffline: 'Parece que estás desconectado.',
         fileUploadFailed: 'Subida fallida. El archivo no es compatible.',
         localTime: ({user, time}) => `Son las ${time} para ${user}`,
         edited: '(editado)',