diff --git a/react/Paywall/MaxAccountsByKonnectorPaywall.jsx b/react/Paywall/MaxAccountsByKonnectorPaywall.jsx
new file mode 100644
index 0000000000..d1275934eb
--- /dev/null
+++ b/react/Paywall/MaxAccountsByKonnectorPaywall.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Paywall from './Paywall'
+import { useI18n } from '../I18n'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reach the maximum accounts allowed for a konnector
+ */
+const MaxAccountsByKonnectorPaywall = ({ max, konnectorName, onClose }) => {
+ const { t } = useI18n()
+
+ return (
+
+ )
+}
+
+MaxAccountsByKonnectorPaywall.propTypes = {
+ /** Maximum accounts allowed for the konnector */
+ max: PropTypes.number.isRequired,
+ /** Name of the konnector */
+ konnectorName: PropTypes.string.isRequired,
+ /** Callback used when the user close the paywall */
+ onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxAccountsByKonnectorPaywall)
diff --git a/react/Paywall/Paywall.jsx b/react/Paywall/Paywall.jsx
index 63e92e3016..55d7c6e1fc 100644
--- a/react/Paywall/Paywall.jsx
+++ b/react/Paywall/Paywall.jsx
@@ -20,7 +20,7 @@ import withPaywallLocales from './locales/withPaywallLocales'
/**
* Component with the core logic of the paywall, which is then declined in several variants to adapt to the user case
*/
-const Paywall = ({ variant, onClose, isPublic }) => {
+const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
const client = useClient()
const instance = useInstance(client)
const { t } = useI18n()
@@ -73,20 +73,15 @@ const Paywall = ({ variant, onClose, isPublic }) => {
/>
}
content={
- type === 'default' ? (
- (
- {props.children}
- )
- }}
- />
- ) : (
- t(`${variant}Paywall.${type}.content`)
- )
+ {children}
+ }}
+ />
}
onClose={onClose}
/>
@@ -99,11 +94,14 @@ Paywall.propTypes = {
/** Callback used when the user close the paywall */
onClose: PropTypes.func.isRequired,
/** Whether paywall is display in a public context */
- isPublic: PropTypes.bool
+ isPublic: PropTypes.bool,
+ /** Translation interpolation for the content of the paywall */
+ contentInterpolation: PropTypes.object
}
Paywall.defaultProps = {
- isPublic: false
+ isPublic: false,
+ contentInterpolation: {}
}
export default withPaywallLocales(Paywall)
diff --git a/react/Paywall/Readme.md b/react/Paywall/Readme.md
index 016f79be1a..a531d09e2f 100644
--- a/react/Paywall/Readme.md
+++ b/react/Paywall/Readme.md
@@ -3,7 +3,11 @@ A paywall is a modal designed to restrict access to a feature to encourage upgra
### Variants
```jsx
-import { OnlyOfficePaywall, PasswordSharingPaywall } from "cozy-ui/transpiled/react/Paywall"
+import {
+ OnlyOfficePaywall,
+ PasswordSharingPaywall,
+ MaxAccountsByKonnectorPaywall
+} from "cozy-ui/transpiled/react/Paywall"
import { CozyProvider } from "cozy-client"
import { BreakpointsProvider } from "cozy-ui/transpiled/react/hooks/useBreakpoints"
import Variants from 'cozy-ui/docs/components/Variants'
@@ -48,6 +52,10 @@ const paywalls = [
{
name: 'PasswordSharingPaywall',
component: PasswordSharingPaywall
+ },
+ {
+ name: 'MaxAccountsByKonnectorPaywall',
+ component: MaxAccountsByKonnectorPaywall
}
]
@@ -78,6 +86,8 @@ const togglePaywall = paywall => {
{state.modalOpened && (
setState({ modalOpened: false })} />
)}
diff --git a/react/Paywall/index.jsx b/react/Paywall/index.jsx
index 615ea7a2b0..0ee9b40bfe 100644
--- a/react/Paywall/index.jsx
+++ b/react/Paywall/index.jsx
@@ -1,2 +1,5 @@
export { default as OnlyOfficePaywall } from './OnlyOfficePaywall'
export { default as PasswordSharingPaywall } from './PasswordSharingPaywall'
+export {
+ default as MaxAccountsByKonnectorPaywall
+} from './MaxAccountsByKonnectorPaywall'
diff --git a/react/Paywall/locales/en.json b/react/Paywall/locales/en.json
index f7d621372f..e74f8a1119 100644
--- a/react/Paywall/locales/en.json
+++ b/react/Paywall/locales/en.json
@@ -30,5 +30,18 @@
"content": "Your current offer does not allow you to take advantage of this feature. Please [contact us](mailto:%{mail}) to update your subscription.",
"action": "I understood"
}
+ },
+ "maxAccount": "%{smart_count} account |||| %{smart_count} accounts",
+ "maxAccountsByKonnectorPaywall": {
+ "premium": {
+ "title": "Upgrade your Cozy!",
+ "content": "Your offer allows you to connect %{maxAccount} %{konnectorName} in your Cozy. \n \nTo unlock this feature, or simply support us, you can change your Cozy offer.",
+ "action": "Check our plans"
+ },
+ "default": {
+ "title": "Information",
+ "content": "Your current offer does not allow you to take advantage of this feature. Please [contact us](mailto:%{mail}) to update your subscription.",
+ "action": "I understood"
+ }
}
}
diff --git a/react/Paywall/locales/fr.json b/react/Paywall/locales/fr.json
index 5e4f8e0cb0..6b60c3c799 100644
--- a/react/Paywall/locales/fr.json
+++ b/react/Paywall/locales/fr.json
@@ -30,5 +30,18 @@
"content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité. Merci de [nous contacter](mailto:%{mail}) afin de mettre à jour votre abonnement.",
"action": "J'ai compris"
}
+ },
+ "maxAccount": "%{smart_count} compte |||| %{smart_count} comptes",
+ "maxAccountsByKonnectorPaywall": {
+ "premium": {
+ "title": "Augmenter votre Cozy !",
+ "content": "Votre offre vous permet de connecter %{maxAccount} %{konnectorName} dans votre Cozy. \n \nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
+ "action": "Voir les offres"
+ },
+ "default": {
+ "title": "Information",
+ "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité. Merci de [nous contacter](mailto:%{mail}) afin de mettre à jour votre abonnement.",
+ "action": "J'ai compris"
+ }
}
}