feat(InstallFlagshipAppDialog): Add InstallFlagshipAppDialog new comp…

…onent

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

docs/styleguide.config.js

@@ -139,6 +139,7 @@ module.exports = {
         '../react/ContactsListModal',
         '../react/ContactPicker',
         '../react/CozyDialogs',
+        '../react/CozyDialogs/SpecificDialogs',
         '../react/CozyTheme',
         '../react/FileImageLoader',
         '../react/FilePicker',

react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { IllustrationDialog } from '..'
+import { useI18n } from '../../I18n'
+import Link from '../../Link'
+import Typography from '../../Typography'
+
+import DefaultQRCode from './assets/QRCodeInstallFlagshipAppDialog.png'
+import appStoreIcon from './assets/appstore.png'
+import playStoreIcon from './assets/playstore.png'
+import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+
+const InstallFlagshipAppDialog = forwardRef(
+  ({ open, onClose, playStoreUrl, appStoreUrl, QRCode, ...props }) => {
+    const { t } = useI18n()
+
+    return (
+      <IllustrationDialog
+        open={open}
+        size="small"
+        onClose={onClose}
+        componentsProps={{ dialogTitle: { className: 'u-pt-2' } }}
+        {...props}
+        title={
+          <Link
+            href={`https://cozy.io/download`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img src={QRCode} width="100%" alt="" aria-hidden />
+            <span className="u-visuallyhidden">
+              {t('install-flagship-app-dialog.a11n')}
+            </span>
+          </Link>
+        }
+        content={
+          <div className="u-ta-center">
+            <Typography gutterBottom variant="h3" color="textPrimary">
+              {t('install-flagship-app-dialog.title')}
+            </Typography>
+            <Typography
+              color="textSecondary"
+              className="u-ta-center"
+              dangerouslySetInnerHTML={{
+                __html: t('install-flagship-app-dialog.text', {
+                  androidUrl: playStoreUrl,
+                  androidIconSrc: playStoreIcon,
+                  iosUrl: appStoreUrl,
+                  iosIconSrc: appStoreIcon
+                })
+              }}
+            />
+          </div>
+        }
+      />
+    )
+  }
+)
+
+InstallFlagshipAppDialog.propTypes = {
+  open: PropTypes.bool,
+  onClose: PropTypes.func,
+  /** Url to the Play Store link in the dialog description */
+  playStoreUrl: PropTypes.string,
+  /** Url to the App Store link in the dialog description */
+  appStoreUrl: PropTypes.string,
+  /** An image representing a QR code to a link where you can download the flagship app */
+  QRCode: PropTypes.any
+}
+
+InstallFlagshipAppDialog.defaultProps = {
+  playStoreUrl:
+    'https://play.google.com/store/apps/details?id=io.cozy.flagship.mobile',
+  appStoreUrl: 'https://apps.apple.com/app/my-cozy/id1600636174',
+  QRCode: DefaultQRCode
+}
+
+export default withSpecificDialogsLocales(InstallFlagshipAppDialog)

react/CozyDialogs/SpecificDialogs/Readme.md

@@ -0,0 +1,45 @@
+### InstallFlagshipApp dialog
+
+#### With default URLs
+
+```jsx
+import { useState } from 'react';
+
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import { InstallFlagshipAppDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import Buttons from 'cozy-ui/transpiled/react/Buttons';
+
+const [open, setOpen] = useState(false);
+
+
+<DemoProvider>
+  <InstallFlagshipAppDialog
+    open={open}
+    onClose={() => { setOpen(false)}}
+  />
+  <Buttons onClick={() => { setOpen(true) }} label="Open  InstallFlagshipAppDialog" />
+</DemoProvider>
+```
+
+#### With custom URLS
+
+```jsx
+import { useState } from 'react';
+
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider';
+import { InstallFlagshipAppDialog } from 'cozy-ui/transpiled/react/CozyDialogs';
+import Buttons from 'cozy-ui/transpiled/react/Buttons';
+
+const [open, setOpen] = useState(false);
+
+
+<DemoProvider>
+  <InstallFlagshipAppDialog
+    open={open}
+    onClose={() => { setOpen(false)}}
+    playStoreUrl="https://play.google.com/store/apps/details?id=io.cozy.flagship.mobile&data=123"
+    appStoreUrl="https://apps.apple.com//app/my-cozy/id1600636174?data=123"
+  />
+  <Buttons onClick={() => { setOpen(true) }} label="Open  InstallFlagshipAppDialog" />
+</DemoProvider>
+```

react/CozyDialogs/SpecificDialogs/index.jsx

@@ -0,0 +1 @@
+export { default as InstallFlagshipAppDialog } from './InstallFlagshipAppDialog'

react/CozyDialogs/SpecificDialogs/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "install-flagship-app-dialog": {
+    "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/CozyDialogs/SpecificDialogs/locales/fr.json

@@ -0,0 +1,7 @@
+{
+  "install-flagship-app-dialog": {
+    "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/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx

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

react/CozyDialogs/index.jsx

@@ -8,3 +8,4 @@ export { default as FixedDialog } from './FixedDialog'
 export { default as IllustrationDialog } from './IllustrationDialog'
 export { default as useCozyDialog } from './useCozyDialog'
 export { default as TopAnchoredDialog } from './TopAnchoredDialog'
+export { InstallFlagshipAppDialog } from './SpecificDialogs'