diff --git a/assets/images/product-illustrations/empty-state__biggerscreen.svg b/assets/images/product-illustrations/empty-state__biggerscreen.svg
new file mode 100644
index 000000000000..8b1f6591b39c
--- /dev/null
+++ b/assets/images/product-illustrations/empty-state__biggerscreen.svg
@@ -0,0 +1,98 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/CONST.ts b/src/CONST.ts
index b9e9181afd5b..ed6a54acd012 100755
--- a/src/CONST.ts
+++ b/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
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index 0e39872a3da6..e1c72b77dca2 100644
--- a/src/components/Icon/Illustrations.js
+++ b/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,
};
diff --git a/src/components/LargeDisplayWrapper/LargeDisplayWrapper.js b/src/components/LargeDisplayWrapper/LargeDisplayWrapper.js
new file mode 100644
index 000000000000..5cbf62db89f0
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ }
+ return children;
+}
+
+LargeDisplayWrapper.displayName = 'LargeDisplayWrapper';
+LargeDisplayWrapper.propTypes = propTypes;
+LargeDisplayWrapper.defaultProps = defaultProps;
+
+export default LargeDisplayWrapper;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 4e4bd9376c03..0373a114e6a5 100755
--- a/src/languages/en.ts
+++ b/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',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b90b820aa1b7..9527a6e07e4c 100644
--- a/src/languages/es.ts
+++ b/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',