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