cozy-ui 88.1.1 → 88.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [88.2.1](https://github.com/cozy/cozy-ui/compare/v88.2.0...v88.2.1) (2023-07-05)
+
+
+### Bug Fixes
+
+* **InstallFlagshipAppDialog:** Assets were not in the good directory ([512bcef](https://github.com/cozy/cozy-ui/commit/512bcef))
+
+# [88.2.0](https://github.com/cozy/cozy-ui/compare/v88.1.1...v88.2.0) (2023-07-05)
+
+
+### Features
+
+* **InstallFlagshipAppDialog:** Add InstallFlagshipAppDialog new component ([6c984e9](https://github.com/cozy/cozy-ui/commit/6c984e9))
+
 ## [88.1.1](https://github.com/cozy/cozy-ui/compare/v88.1.0...v88.1.1) (2023-06-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "88.1.1",
+  "version": "88.2.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/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 'cozy-ui/assets/images/QRCodeInstallFlagshipAppDialog.png'
+import appStoreIcon from 'cozy-ui/assets/images/appstore.png'
+import playStoreIcon from 'cozy-ui/assets/images/playstore.png'
+import withSpecificDialogsLocales from './withSpecificDialogsLocales'
+
+const InstallFlagshipAppDialog = forwardRef(
+  ({ onClose, playStoreUrl, appStoreUrl, QRCode }, ref) => {
+    const { t } = useI18n()
+
+    return (
+      <IllustrationDialog
+        open
+        ref={ref}
+        size="small"
+        onClose={onClose}
+        componentsProps={{ dialogTitle: { className: 'u-pt-2-half' } }}
+        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 = {
+  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)

package/react/CozyDialogs/SpecificDialogs/Readme.md

@@ -0,0 +1,23 @@
+### InstallFlagshipApp dialog
+
+You can customize links and image with `playStoreUrl`, `appStoreUrl` and `QRCode` props.
+
+```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(isTesting());
+
+
+<DemoProvider>
+  { open && (
+    <InstallFlagshipAppDialog
+      onClose={() => { setOpen(false)}}
+    />
+  )}
+  <Buttons onClick={() => { setOpen(true) }} label="Open InstallFlagshipAppDialog" />
+</DemoProvider>
+```

package/react/CozyDialogs/SpecificDialogs/index.jsx

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

package/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"
+  }
+}

package/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"
+  }
+}

package/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)

package/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'

package/react/Paywall/Readme.md

@@ -1,4 +1,7 @@
-A paywall is a modal designed to restrict access to a feature to encourage upgrading. There is different variant for each features so the wording can be different to adapt to the context of use.
+A paywall is a modal designed to restrict access to a feature to encourage upgrading.
+There is different variant for each features so the wording can be different to adapt to the context of use.
+
+On mobile devices, we display "I understand" instead of the action button label for reasons of compatibility with the mobile application store.
 
 ### Variants
 

package/react/Paywall/howto.md

@@ -0,0 +1,26 @@
+### Create new variant
+
+A new variant is essentially a set of translations adapted to a specific context of use.
+
+To create a new one, add your translation to the `src/react/Paywall/locales` directory. The translations for each case (default, premium or public) are grouped together under the name of your variant. A case includes a title, content and a label for the action.
+```static
+"variantNamePaywall": {
+    "premium": {
+      "title": "Upgrade your Cozy!",
+      "content": "Your offer allows you to connect %{max} in your Cozy.  \n  \nTo unlock this feature, or simply support us, you can change your Cozy offer.",
+      "action": "Check our plans"
+    },
+    ...otherCase
+  }
+```
+
+Next, we create a new component returning the `Paywall`, specifying the name of the new variant. You can also use `contentInterpolation` to insert variables into the content translation.
+```js static
+<Paywall
+  variant="variantName"
+  contentInterpolation={{
+    max: 10
+  }}
+  onClose={onClose}
+/>
+```

package/transpiled/react/CozyDialogs/SpecificDialogs/InstallFlagshipAppDialog.js

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { IllustrationDialog } from "cozy-ui/transpiled/react/CozyDialogs";
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import Link from "cozy-ui/transpiled/react/Link";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import DefaultQRCode from 'cozy-ui/assets/images/QRCodeInstallFlagshipAppDialog.png';
+import appStoreIcon from 'cozy-ui/assets/images/appstore.png';
+import playStoreIcon from 'cozy-ui/assets/images/playstore.png';
+import withSpecificDialogsLocales from "cozy-ui/transpiled/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales";
+var InstallFlagshipAppDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onClose = _ref.onClose,
+      playStoreUrl = _ref.playStoreUrl,
+      appStoreUrl = _ref.appStoreUrl,
+      QRCode = _ref.QRCode;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  return /*#__PURE__*/React.createElement(IllustrationDialog, {
+    open: true,
+    ref: ref,
+    size: "small",
+    onClose: onClose,
+    componentsProps: {
+      dialogTitle: {
+        className: 'u-pt-2-half'
+      }
+    },
+    title: /*#__PURE__*/React.createElement(Link, {
+      href: "https://cozy.io/download",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: QRCode,
+      width: "100%",
+      alt: "",
+      "aria-hidden": true
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "u-visuallyhidden"
+    }, t('install-flagship-app-dialog.a11n'))),
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "u-ta-center"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      gutterBottom: true,
+      variant: "h3",
+      color: "textPrimary"
+    }, t('install-flagship-app-dialog.title')), /*#__PURE__*/React.createElement(Typography, {
+      color: "textSecondary",
+      className: "u-ta-center",
+      dangerouslySetInnerHTML: {
+        __html: t('install-flagship-app-dialog.text', {
+          androidUrl: playStoreUrl,
+          androidIconSrc: playStoreIcon,
+          iosUrl: appStoreUrl,
+          iosIconSrc: appStoreIcon
+        })
+      }
+    }))
+  });
+});
+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);

package/transpiled/react/CozyDialogs/SpecificDialogs/index.js

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

package/transpiled/react/CozyDialogs/SpecificDialogs/withSpecificDialogsLocales.js

@@ -0,0 +1,20 @@
+import withOnlyLocales from "cozy-ui/transpiled/react/I18n/withOnlyLocales";
+var en = {
+  "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"
+  }
+};
+var fr = {
+  "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\u2019App 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\u2019app Cloud Personnel Cozy",
+    a11n: "Aller sur la page de t\xE9l\xE9chargement de l'application Cloud Personnel Cozy"
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};
+export default withOnlyLocales(locales);

package/transpiled/react/CozyDialogs/index.js

@@ -6,4 +6,5 @@ export { default as FixedActionsDialog } from './FixedActionsDialog';
 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 { default as TopAnchoredDialog } from './TopAnchoredDialog';
+export { InstallFlagshipAppDialog } from './SpecificDialogs';