feat: Add MaxDaysToCapturePaywall component

Author: cballevre

react/Paywall/MaxDaysToCapturePaywall.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Paywall from './Paywall'
+import withPaywallLocales from './locales/withPaywallLocales'
+
+/**
+ * Paywall displayed when the user reach the maximum days allowed of capture geolocated data
+ */
+const MaxDaysToCapturePaywall = ({ days, onClose }) => {
+  return (
+    <Paywall
+      variant="maxDaysToCapture"
+      contentInterpolation={{ smart_count: days }}
+      onClose={onClose}
+    />
+  )
+}
+
+MaxDaysToCapturePaywall.propTypes = {
+  /** Maximum days allowed of capture geolocated data */
+  days: PropTypes.number.isRequired,
+  /** Callback used when the user close the paywall */
+  onClose: PropTypes.func.isRequired
+}
+
+export default withPaywallLocales(MaxDaysToCapturePaywall)

react/Paywall/Readme.md

@@ -21,7 +21,8 @@ import {
   MaxAccountsByKonnectorPaywall,
   MaxAccountsPaywall,
   MaxPapersPaywall,
-  QuotaPaywall
+  QuotaPaywall,
+  MaxDaysToCapturePaywall
 } from 'cozy-ui/transpiled/react/Paywall'
 import Variants from 'cozy-ui/docs/components/Variants'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
@@ -61,6 +62,10 @@ const paywalls = [
   {
     name: 'QuotaPaywall',
     component: QuotaPaywall
+  },
+  {
+    name: 'MaxDaysToCapturePaywall',
+    component: MaxDaysToCapturePaywall
   }
 ]
 
@@ -130,6 +135,7 @@ const makeClient = premiumLink =>
           <PaywallComponent
             isPublic={variant.isPublic}
             max={4}
+            days={30}
             konnectorName="EDF"
             onClose={() => setState({ modalOpened: false })}
           />

react/Paywall/index.jsx

@@ -6,3 +6,4 @@ export {
 export { default as MaxAccountsPaywall } from './MaxAccountsPaywall'
 export { default as MaxPapersPaywall } from './MaxPapersPaywall'
 export { default as QuotaPaywall } from './QuotaPaywall'
+export { default as MaxDaysToCapturePaywall } from './MaxDaysToCapturePaywall'

react/Paywall/locales/en.json

@@ -79,5 +79,17 @@
       "content": "Your disk storage is full.\n\nPlease remove files, empty your trash before uploading files.",
       "action": "I understand"
     }
+  },
+  "maxDaysToCapturePaywall": {
+    "premium": {
+      "title": "Upgrade your plan",
+      "content": "Your plan allows you to capture only **%{smart_count} day of trips**.\n\nTo unlock this feature, or simply support us, you can change your Cozy plan. |||| Your plan allows you to capture only **%{smart_count} days of trips**.\n\nTo unlock this feature, or simply support us, you can change your Cozy plan.",
+      "action": "Check our plans"
+    },
+    "default": {
+      "title": "Information",
+      "content": "Your current plan does not allow you to take advantage of this feature.",
+      "action": "I understand"
+    }
   }
 }

react/Paywall/locales/fr.json

@@ -79,5 +79,17 @@
       "content": "Votre espace de stockage est plein.\n\nVeuillez supprimer des fichiers, et vider votre corbeille avant d'importer de nouveaux fichiers.",
       "action": "J'ai compris"
     }
+  },
+  "maxDaysToCapturePaywall": {
+    "premium": {
+      "title": "Augmentez votre offre",
+      "content": "Vous avez atteint la limite de **%{smart_count} jour de trajet sauvegardé** inclus dans votre offre.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Vous avez atteint la limite des **%{smart_count} jours de trajets sauvegardés** inclus dans votre offre.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
+      "action": "Check our plans"
+    },
+    "default": {
+      "title": "Information",
+      "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité.",
+      "action": "J'ai compris"
+    }
   }
 }