From 4948cd33c947130902dd982be784684c64024901 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Poizat?= Date: Mon, 3 Jul 2023 12:18:12 +0200 Subject: [PATCH] feat(InstallAppDialog): Add InstallAppDialog new component Displays a dialog with a QR code to install the flagship app --- docs/styleguide.config.js | 1 + react/InstallAppDialog/Readme.md | 21 ++++++ react/InstallAppDialog/assets/QRCode.png | Bin 0 -> 15490 bytes react/InstallAppDialog/assets/appstore.png | Bin 0 -> 339 bytes react/InstallAppDialog/assets/playstore.png | Bin 0 -> 305 bytes react/InstallAppDialog/index.jsx | 66 ++++++++++++++++++ react/InstallAppDialog/locales/en.json | 5 ++ react/InstallAppDialog/locales/fr.json | 5 ++ .../locales/withInstallAppDialogLocales.jsx | 11 +++ react/index.js | 1 + 10 files changed, 110 insertions(+) create mode 100644 react/InstallAppDialog/Readme.md create mode 100644 react/InstallAppDialog/assets/QRCode.png create mode 100644 react/InstallAppDialog/assets/appstore.png create mode 100644 react/InstallAppDialog/assets/playstore.png create mode 100644 react/InstallAppDialog/index.jsx create mode 100644 react/InstallAppDialog/locales/en.json create mode 100644 react/InstallAppDialog/locales/fr.json create mode 100644 react/InstallAppDialog/locales/withInstallAppDialogLocales.jsx diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index 7286295ed7..17742f1871 100644 --- a/docs/styleguide.config.js +++ b/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', diff --git a/react/InstallAppDialog/Readme.md b/react/InstallAppDialog/Readme.md new file mode 100644 index 0000000000..bed9e4c853 --- /dev/null +++ b/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); + + + + { setOpen(false)}} + /> + { setOpen(true) }} label="Open InstallAppDialog" /> + +``` diff --git a/react/InstallAppDialog/assets/QRCode.png b/react/InstallAppDialog/assets/QRCode.png new file mode 100644 index 0000000000000000000000000000000000000000..9c4ab5ba726d1e165bfda17b639502eb4025482a GIT binary patch literal 15490 zcmeHu2UJt-)+R-Xq7W6O6Hq}=P*g|0$|&<=epee#r+q z@0T_Q-{eLN#9m|@+tPI(B%AP_rwNiakFJ~ z-8u;hDqmK7wQwnDk(pnfvPvDF-Aw(yy12aAH@%VdbCrH4vs%dFzB9&52Zi%n)^;HI zeh#mPRISwYtW|Wb1(q&@ITY6{%B`p+LAzh9qB^tCW=Z?ng9Pa6o5j7ts*KER@eL~? zAhEi8jYl_ep0e37zK;F8ayNSEeeH@?*dm*({chg#U;EdOxsL5QdU+S8IG0+mQwBxI zX@KL3|Dg+@goFgYN%;}0AKY3WrZ3d6(9y{$sa#gld5kC4`of){^NHO^|MbKCM@fj^oK=)*Z|8wMo2y0x9u%H@k0#}U ztKjWhRpUqS2|%Wpk>h?+3sx^IyYvNQffoJVdG|6{kQ_Q@eJUQnw|$$Jnvs*6^YLhY3Y^gUfrkLL=8qpZ<=qK`Vv3BDZY|GHb$2g$5@)6bs>ya=XJ zC-;p%@fUj~^;`loRroYgOTV^bFp7W*3eH+}K-iaXdo1+UX|?Jak?C0V{p_%yv})PZ zcfOh-tJx+;=hP7{=TrB8E6IGh{>DO-Z+4mD(?@jGm5$Tl9#n^SquAaMa8roF312nF z#nnMR;T2Y+D8Jxd37K$N>h0vbjqeVg)H`tSo#* zh>B6&qyJ9&_qBIWrw^#FMa=INhmtcq9Ynj@oq#d`kkvWa8kh>GE;zSI{Wn zWJH?LZAgSHkk>Wf9qOD`AX5V1hV0W{13S*70{FUMHh7;?e-~eCf$qOV>DV-MRV$d7Zk0p2O&CY?Q#GIK}jf z{Fh?bPxY9AtY+y+4?s>E3`yoyW@IGEBnK!WoG!AmD)O&|y0CR!X{p^Prhj?hW8ym{ zD_*UGj5|xWK1?68yuc-z7VJxdXlI&J{GaY9X0Ls8?x$5{H}i}4K+`{LHfYc(+78YQnl?=&2O?1i&F!81l;PQ zO4F3Vf(EBwi+4NV6PlTiAKVY>uoZHXB3X+YYe)v}*e`$l z6!ATK_h!PZb=pqx$}n?pl_J9RBEpjYW_9*hw^1-@C79&45l5Y|c7ww2fmQcFL+=TG zmv25y@VB(X8+W|HJy&)i|V{aoNN8PtA|e214*2$`pTc zFCV2{7v3w)1pe**tDbleBPTUJX&!uv=H@xiV!?dTU@Bs%bEvF4 z2HZ~#nEcSQV(1g`V=_F6-u6Jijy^Vq1WReBGQ{6tyaVqssE0K9;uP=NRW|JKIC)@a z+0|ORHo)E=+ip=)If*LsC+A9Y+uOnKaiCZbQ*RXfK7o3fKu<{m-<6u%5lT9%GxfCl z$QI{#_g3LaE?&VOsYjzVTpidBHas>oF{^WqD(~p=CylgSs=tKrVuCplzko4S>*Dd1 z=eJNF4mO;)~Tu0)t$o+7WydTKr4{?#*>m=zPN^8IUZjEa6v$Uep~ zY^8p2$=J<0(5v0<+KwD1$(BPbB~pEi6WGBYP51fMQb3App1@7N$cex$xk`@c=CT{} zx&-lia!tWvJKAH9mBnwVkL?YyTuG}Yi(NeLdf=-^>~Eq`ti!`Ll^vqbBqI>N(Z;>` zdO4e+4K>+cZT^G~V_QGIHVQW%n)xpFr*{ZjQ@Fe~e=g7PRuZFRNFKGfRO-x`q8D<7c(?A;xK_t1#YR4IrT^l?^9kTFo_Wdf zB^~q6XK%1%wq>u#mr!f0YC5N2=+Y%+_#erKJJd`NhngY zu!I8?i$4HjfW)jZ&u>!%7=H

wSmkm7^s}af&h5PJFbDQC}Ft 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 literal 0 HcmV?d00001 diff --git a/react/InstallAppDialog/assets/playstore.png b/react/InstallAppDialog/assets/playstore.png new file mode 100644 index 0000000000000000000000000000000000000000..005735dc9e4a6f4bb268d6f32d6f387ec3ae1231 GIT binary patch literal 305 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$3?vg*uel1OasqrpT!FMx>! zSrPo&+0=Tv5bUqX)C&#DR1MQP63GxeOc%V=( z@c#XS2ls*C{DJvE&`^*N;GmE6vi80}4FM0bF;h`&C-|e&657 z(zXAO%4sK!7iEHz7*(_stQZ$W)XC^%EMb3bWa8C!HMe8Mw+s3=L-?dVDoRxxlihgt p4&(Qtuh%V;td1T^KW2A@Kj0es`rA2~W { + const { t, lang } = useI18n() + + return ( + + + {t('a11n')} + + } + content={ +

+ + {t('title')} + + +
+ } + /> + ) +} + +InstallAppDialog.propTypes = { + open: PropTypes.bool, + onClose: PropTypes.func +} + +export default withInstallAppDialogLocales(InstallAppDialog) diff --git a/react/InstallAppDialog/locales/en.json b/react/InstallAppDialog/locales/en.json new file mode 100644 index 0000000000..c929252a49 --- /dev/null +++ b/react/InstallAppDialog/locales/en.json @@ -0,0 +1,5 @@ +{ + "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/InstallAppDialog/locales/fr.json b/react/InstallAppDialog/locales/fr.json new file mode 100644 index 0000000000..087ade2b3a --- /dev/null +++ b/react/InstallAppDialog/locales/fr.json @@ -0,0 +1,5 @@ +{ + "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/InstallAppDialog/locales/withInstallAppDialogLocales.jsx b/react/InstallAppDialog/locales/withInstallAppDialogLocales.jsx new file mode 100644 index 0000000000..db56941511 --- /dev/null +++ b/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) diff --git a/react/index.js b/react/index.js index e5a6646f40..e961f75ed5 100644 --- a/react/index.js +++ b/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'