Feat/placeholder web

src/CONST.ts

@@ -61,6 +61,11 @@ const CONST = {
 
     AVATAR_MAX_ATTACHMENT_SIZE: 6291456,
 
+    EMPTY_STATE_DESKTOP_IMAGE_DIMENSIONS: {
+        HEIGHT: 400,
+        WIDTH: '100%',
+    },
+
     AVATAR_ALLOWED_EXTENSIONS: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'],
 
     // Minimum width and height size in px for a selected image

src/components/Icon/Illustrations.js

@@ -45,6 +45,7 @@ import MoneyBadge from '../../../assets/images/simple-illustrations/simple-illus
 import TreasureChest from '../../../assets/images/simple-illustrations/simple-illustration__treasurechest.svg';
 import ThumbsUpStars from '../../../assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg';
 import Hands from '../../../assets/images/product-illustrations/home-illustration-hands.svg';
+import EmptyStateBiggerScreen from '../../../assets/images/product-illustrations/empty-state__biggerscreen.svg';
 import HandEarth from '../../../assets/images/simple-illustrations/simple-illustration__handearth.svg';
 
 export {
@@ -95,5 +96,6 @@ export {
     TreasureChest,
     ThumbsUpStars,
     Hands,
+    EmptyStateBiggerScreen,
     HandEarth,
 };

src/components/LargeDisplayWrapper/LargeDisplayWrapper.js

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'lodash';
+import useLocalize from '../../hooks/useLocalize';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+import Navigation from '../../libs/Navigation/Navigation';
+import styles from '../../styles/styles';
+import variables from '../../styles/variables';
+import BlockingView from '../BlockingViews/BlockingView';
+import * as Illustrations from '../Icon/Illustrations';
+
+const propTypes = {
+    /** Child elements */
+    children: PropTypes.node,
+
+    /** If true, child components are replaced with a blocking view */
+    shouldBlockContent: PropTypes.bool,
+
+    /** Action to run when clicked on a the link text */
+    onLinkPress: PropTypes.func,
+};
+
+const defaultProps = {
+    children: null,
+    shouldBlockContent: undefined,
+    onLinkPress: () => Navigation.goBack(),
+};
+
+function LargeDisplayWrapper({onLinkPress, children, shouldBlockContent}) {
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const {translate} = useLocalize();
+
+    const shouldShowBlockingView = _.isBoolean(shouldBlockContent) ? shouldBlockContent : isSmallScreenWidth;
+
+    if (shouldShowBlockingView) {
+        return (
+            <View style={[styles.blockingViewContainer, styles.flex1]}>
+                <BlockingView
+                    icon={Illustrations.EmptyStateBiggerScreen}
+                    iconWidth={variables.modalTopIconWidth}
+                    iconHeight={variables.modalTopIconHeight}
+                    title={translate('mobilePlacerHolder.title')}
+                    subtitle={translate('mobilePlacerHolder.subTitle')}
+                    linkKey={translate('mobilePlacerHolder.goBackHome')}
+                    shouldShowLink
+                    onLinkPress={onLinkPress}
+                />
+            </View>
+        );
+    }
+    return children;
+}
+
+LargeDisplayWrapper.displayName = 'LargeDisplayWrapper';
+LargeDisplayWrapper.propTypes = propTypes;
+LargeDisplayWrapper.defaultProps = defaultProps;
+
+export default LargeDisplayWrapper;

src/languages/en.ts

@@ -1097,6 +1097,11 @@ export default {
         noAccess: "You don't have access to this chat",
         goBackHome: 'Go back to home page',
     },
+    mobilePlacerHolder: {
+        goBackHome: 'Go back home',
+        title: "You're gonna need a bigger screen",
+        subTitle: 'This page is only available on wider browsers, like your laptop or desktop computer. Please try again over there.',
+    },
     setPasswordPage: {
         enterPassword: 'Enter a password',
         setPassword: 'Set password',

src/languages/es.ts

@@ -1097,6 +1097,11 @@ export default {
         noAccess: 'No tienes acceso a este chat',
         goBackHome: 'Volver a la página principal',
     },
+    mobilePlacerHolder: {
+        goBackHome: 'Volver a la página principal',
+        title: 'Vas a necesitar una pantalla más grande',
+        subTitle: 'Esta página sólo está disponible en navegadores más amplios, como su ordenador portátil o de sobremesa. Inténtalo de nuevo desde allí.',
+    },
     setPasswordPage: {
         enterPassword: 'Escribe una contraseña',
         setPassword: 'Configura tu contraseña',