feat(InstallAppDialog): Add InstallAppDialog new component

Displays a dialog with a QR code to install the flagship app

docs/styleguide.config.js

@@ -143,6 +143,7 @@ module.exports = {
         '../react/FileImageLoader',
         '../react/FilePicker',
         '../react/HistoryRow',
+        '../react/InstallAppDialog',
         '../react/IntentDialogOpener/IntentDialogOpener.jsx',
         '../react/IntentIframe/IntentIframe.jsx',
         '../react/Layout/Layout.jsx',

react/InstallAppDialog/Readme.md

@@ -0,0 +1,21 @@
+### Usage
+
+
+```jsx
+import { useState } from 'react';
+
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import InstallAppDialog from 'cozy-ui/transpiled/react/InstallAppDialog';
+import Buttons from 'cozy-ui/transpiled/react/Buttons';
+
+const [open, setOpen] = useState(false);
+
+
+<DemoProvider>
+  <InstallAppDialog
+    open={open}
+    onClose={() => { setOpen(false)}}
+  />
+  <Buttons onClick={() => { setOpen(true) }} label="Open InstallAppDialog" />
+</DemoProvider>
+```

react/InstallAppDialog/index.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { IllustrationDialog } from '../CozyDialogs'
+import { useI18n } from '../I18n'
+import Link from '../Link'
+import Typography from '../Typography'
+
+import QRCode from './assets/QRCode.png'
+import appStoreIcon from './assets/appstore.png'
+import playStoreIcon from './assets/playstore.png'
+import withInstallAppDialogLocales from './locales/withInstallAppDialogLocales'
+
+const ANDROID_APP_URL =
+  'https://play.google.com/store/apps/details?id=io.cozy.flagship.mobile&hl'
+const IOS_APP_URL = 'https://apps.apple.com/fr/app/my-cozy/id1600636174'
+
+const InstallAppDialog = ({ open, onClose }) => {
+  const { t, lang } = useI18n()
+
+  return (
+    <IllustrationDialog
+      open={open}
+      size="small"
+      transitionDuration={0}
+      onClose={onClose}
+      componentsProps={{ dialogTitle: { className: 'u-pt-2' } }}
+      title={
+        <Link
+          href={`https://cozy.io/${lang}/download`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src={QRCode} width="100%" alt="" aria-hidden />
+          <span className="u-visuallyhidden">{t('a11n')}</span>
+        </Link>
+      }
+      content={
+        <div className="u-ta-center">
+          <Typography gutterBottom variant="h3" color="textPrimary">
+            {t('title')}
+          </Typography>
+          <Typography
+            color="textSecondary"
+            className="u-ta-center"
+            dangerouslySetInnerHTML={{
+              __html: t('text', {
+                androidUrl: ANDROID_APP_URL,
+                androidIconSrc: playStoreIcon,
+                iosUrl: IOS_APP_URL,
+                iosIconSrc: appStoreIcon
+              })
+            }}
+          />
+        </div>
+      }
+    />
+  )
+}
+
+InstallAppDialog.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func
+}
+
+export default withInstallAppDialogLocales(InstallAppDialog)

react/InstallAppDialog/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "title": "Scan the QR Code",
+  "text": "or go directly to the <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>App Store</a><br>or <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> to install the Cozy Cloud app",
+  "a11n": "Go to the Cozy Cloud application download page"
+}

react/InstallAppDialog/locales/fr.json

@@ -0,0 +1,5 @@
+{
+  "title": "Scannez le QR Code",
+  "text": "ou rendez vous directement sur <img src=%{iosIconSrc} /> <a href='%{iosUrl}' class='u-link' target='_blank' rel='noopener'>l’App Store</a><br>ou sur le <img src=%{androidIconSrc} /> <a href='%{androidUrl}' class='u-link' target='_blank' rel='noopener'>Play Store</a> pour installer l’app Cloud Personnel - Cozy",
+  "a11n": "Aller sur la page de téléchargement de l'application Cloud Personnel - Cozy"
+}

react/InstallAppDialog/locales/withInstallAppDialogLocales.jsx

@@ -0,0 +1,11 @@
+import withOnlyLocales from '../../I18n/withOnlyLocales'
+
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withOnlyLocales(locales)

react/index.js

@@ -121,3 +121,4 @@ export { default as InputAdornment } from './InputAdornment'
 export { default as InputBase } from './InputBase'
 export { default as SearchBar } from './SearchBar'
 export { default as Thumbnail } from './Thumbnail'
+export { default as InstallAppDialog } from './InstallAppDialog'