diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index 7286295ed7..3438bd63b6 100644 --- a/docs/styleguide.config.js +++ b/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', diff --git a/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx b/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx new file mode 100644 index 0000000000..fc560bf856 --- /dev/null +++ b/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.jsx @@ -0,0 +1,80 @@ +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( + ({ onClose, playStoreUrl, appStoreUrl, QRCode }, ref) => { + const { t } = useI18n() + + return ( + + + + {t('install-flagship-app-dialog.a11n')} + + + } + content={ +
+ + {t('install-flagship-app-dialog.title')} + + +
+ } + /> + ) + } +) + +InstallFlagshipAppDialog.propTypes = { + 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 +} + +InstallFlagshipAppDialog.displayName = 'InstallFlagshipAppDialog' + +export default withSpecificDialogsLocales(InstallFlagshipAppDialog) diff --git a/react/CozyDialogs/SpecificDialogs/Readme.md b/react/CozyDialogs/SpecificDialogs/Readme.md new file mode 100644 index 0000000000..f8792f832b --- /dev/null +++ b/react/CozyDialogs/SpecificDialogs/Readme.md @@ -0,0 +1,47 @@ +### 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); + + + + { open && ( + { setOpen(false)}} + /> + )} + { setOpen(true) }} label="Open  InstallFlagshipAppDialog" /> + +``` + +#### 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); + + + + { open && ( + { 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" + /> + )} + { setOpen(true) }} label="Open  InstallFlagshipAppDialog" /> + +``` diff --git a/react/CozyDialogs/SpecificDialogs/assets/QRCodeInstallFlagshipAppDialog.png b/react/CozyDialogs/SpecificDialogs/assets/QRCodeInstallFlagshipAppDialog.png new file mode 100644 index 0000000000..f6fb371da4 Binary files /dev/null and b/react/CozyDialogs/SpecificDialogs/assets/QRCodeInstallFlagshipAppDialog.png differ diff --git a/react/CozyDialogs/SpecificDialogs/assets/appstore.png b/react/CozyDialogs/SpecificDialogs/assets/appstore.png new file mode 100644 index 0000000000..9d8353225e Binary files /dev/null and b/react/CozyDialogs/SpecificDialogs/assets/appstore.png differ diff --git a/react/CozyDialogs/SpecificDialogs/assets/playstore.png b/react/CozyDialogs/SpecificDialogs/assets/playstore.png new file mode 100644 index 0000000000..7d5761bceb Binary files /dev/null and b/react/CozyDialogs/SpecificDialogs/assets/playstore.png differ diff --git a/react/CozyDialogs/SpecificDialogs/index.jsx b/react/CozyDialogs/SpecificDialogs/index.jsx new file mode 100644 index 0000000000..bbba582699 --- /dev/null +++ b/react/CozyDialogs/SpecificDialogs/index.jsx @@ -0,0 +1 @@ +export { default as InstallFlagshipAppDialog } from './InstallFlagshipAppDialog' diff --git a/react/CozyDialogs/SpecificDialogs/locales/en.json b/react/CozyDialogs/SpecificDialogs/locales/en.json new file mode 100644 index 0000000000..4c375dfd80 --- /dev/null +++ b/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 App Store
or Play Store to install the Cozy Cloud app", + "a11n": "Go to the Cozy Cloud application download page" + } +} diff --git a/react/CozyDialogs/SpecificDialogs/locales/fr.json b/react/CozyDialogs/SpecificDialogs/locales/fr.json new file mode 100644 index 0000000000..b72053df60 --- /dev/null +++ b/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 l’App Store
ou sur le Play Store pour installer l’app Cloud Personnel Cozy", + "a11n": "Aller sur la page de téléchargement de l'application Cloud Personnel Cozy" + } +} diff --git a/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx b/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.jsx new file mode 100644 index 0000000000..2f8e19ad73 --- /dev/null +++ b/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) diff --git a/react/CozyDialogs/index.jsx b/react/CozyDialogs/index.jsx index b0ddfe03f0..c73231b028 100644 --- a/react/CozyDialogs/index.jsx +++ b/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'