feat: Add MaxAccountByKonnectorPaywall

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 (
+    <Paywall
+      variant="maxAccountsByKonnector"
+      contentInterpolation={{
+        maxAccount: t('maxAccount', { smart_count: max }),
+        konnectorName
+      }}
+      onClose={onClose}
+    />
+  )
+}
+
+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)

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' ? (
-          <ReactMarkdown
-            source={t(`${variant}Paywall.default.content`, {
-              mail: instance?.context?.data?.attributes?.reply_to
-            })}
-            renderers={{
-              paragraph: props => (
-                <span className="u-mv-0">{props.children}</span>
-              )
-            }}
-          />
-        ) : (
-          t(`${variant}Paywall.${type}.content`)
-        )
+        <ReactMarkdown
+          source={t(`${variant}Paywall.${type}.content`, {
+            mail: instance?.context?.data?.attributes?.reply_to,
+            ...contentInterpolation
+          })}
+          renderers={{
+            paragraph: ({ children }) => <p className="u-mt-0">{children}</p>
+          }}
+        />
       }
       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)

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 && (
           <PaywallComponent
             isPublic={variant.isPublic}
+            max={4}
+            konnectorName="EDF"
             onClose={() => setState({ modalOpened: false })} />
         )}
       </div>

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'

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

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