feat: Add passwordSharingPaywall

cozy · Mar 31, 2023 · 64a5fa4 · 64a5fa4
1 parent 72da059
commit 64a5fa4
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 99 deletions.
diff --git a/react/Paywall/OnlyOfficePaywall.jsx b/react/Paywall/OnlyOfficePaywall.jsx
@@ -1,97 +1,9 @@
 import React from 'react'
-import ReactMarkdown from 'react-markdown'
 
-import { isMobileApp, isFlagshipApp } from 'cozy-device-helper'
-import { useClient } from 'cozy-client'
-import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+import Paywall from './Paywall'
 
-import useInstance from '../helpers/useInstance'
-import Spinner from '../Spinner'
-import { IllustrationDialog } from '../CozyDialogs'
-import Icon from '../Icon'
-import CozyUpgradeIcon from '../Icons/CozyUpgrade'
-import Button from '../Buttons'
-import Typography from '../Typography'
-import withLocales from '../I18n/withLocales'
-import { makeType } from './helpers'
-import fr from './locales/fr.json'
-import en from './locales/en.json'
-
-const locales = {
-  en,
-  fr
-}
-
-const OnlyOfficePaywall = ({ onClose, isPublic, t } = { isPublic: false }) => {
-  const client = useClient()
-  const instance = useInstance(client)
-
-  if (instance.state === 'loading' && instance.state !== 'loaded')
-    return (
-      <IllustrationDialog
-        open
-        size="small"
-        content={
-          <div className="u-h-5">
-            <Spinner size="xxlarge" noMargin middle />
-          </div>
-        }
-        onClose={onClose}
-      />
-    )
-
-  const isMobileAppVersion = isMobileApp() || isFlagshipApp()
-  const link = buildPremiumLink(instance)
-  const type = makeType(instance, isPublic, link)
-
-  const onAction = () => {
-    return type === 'premium' && !isMobileAppVersion
-      ? window.open(link, 'self')
-      : onClose()
-  }
-
-  return (
-    <IllustrationDialog
-      open
-      size="small"
-      actionsLayout="column"
-      title={
-        <div className="u-flex u-flex-column u-flex-items-center">
-          <Icon icon={CozyUpgradeIcon} width={128} height={128} />
-          <Typography variant="h3" className="u-mt-1">
-            {t(`onlyOfficePaywall.${type}.title`)}
-          </Typography>
-        </div>
-      }
-      actions={
-        <Button
-          onClick={onAction}
-          label={
-            isMobileAppVersion
-              ? t(`mobileApp.action`)
-              : t(`onlyOfficePaywall.${type}.action`)
-          }
-        />
-      }
-      content={
-        type === 'default' ? (
-          <ReactMarkdown
-            source={t('onlyOfficePaywall.default.content', {
-              mail: instance?.context?.data?.attributes?.reply_to
-            })}
-            renderers={{
-              paragraph: props => (
-                <span className="u-mv-0">{props.children}</span>
-              )
-            }}
-          />
-        ) : (
-          t(`onlyOfficePaywall.${type}.content`)
-        )
-      }
-      onClose={onClose}
-    />
-  )
+const OnlyOfficePaywall = props => {
+  return <Paywall variant="onlyOffice" {...props} />
 }
 
-export default withLocales(locales)(OnlyOfficePaywall)
+export default OnlyOfficePaywall
diff --git a/react/Paywall/PasswordSharingPaywall.jsx b/react/Paywall/PasswordSharingPaywall.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import Paywall from './Paywall'
+
+const PasswordSharingPaywall = ({ onClose }) => {
+  return (
+    <Paywall variant="passwordSharing" onClose={onClose} isPublic={false} />
+  )
+}
+
+export default PasswordSharingPaywall
diff --git a/react/Paywall/Paywall.jsx b/react/Paywall/Paywall.jsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+import { isMobileApp, isFlagshipApp } from 'cozy-device-helper'
+import { useClient } from 'cozy-client'
+import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+
+import useInstance from '../helpers/useInstance'
+import Spinner from '../Spinner'
+import { IllustrationDialog } from '../CozyDialogs'
+import Icon from '../Icon'
+import CozyUpgradeIcon from '../Icons/CozyUpgrade'
+import Button from '../Buttons'
+import Typography from '../Typography'
+import withLocales from '../I18n/withLocales'
+import { makeType } from './helpers'
+import fr from './locales/fr.json'
+import en from './locales/en.json'
+
+const locales = {
+  en,
+  fr
+}
+
+const Paywall = ({ variant, onClose, isPublic, t } = { isPublic: false }) => {
+  const client = useClient()
+  const instance = useInstance(client)
+
+  if (instance.state === 'loading' && instance.state !== 'loaded')
+    return (
+      <IllustrationDialog
+        open
+        size="small"
+        content={
+          <div className="u-h-5">
+            <Spinner size="xxlarge" noMargin middle />
+          </div>
+        }
+        onClose={onClose}
+      />
+    )
+
+  const isMobileAppVersion = isMobileApp() || isFlagshipApp()
+  const link = buildPremiumLink(instance)
+  const type = makeType(instance, isPublic, link)
+
+  const onAction = () => {
+    return type === 'premium' && !isMobileAppVersion
+      ? window.open(link, 'self')
+      : onClose()
+  }
+
+  return (
+    <IllustrationDialog
+      open
+      size="small"
+      actionsLayout="column"
+      title={
+        <div className="u-flex u-flex-column u-flex-items-center">
+          <Icon icon={CozyUpgradeIcon} width={128} height={128} />
+          <Typography variant="h3" className="u-mt-1">
+            {t(`${variant}Paywall.${type}.title`)}
+          </Typography>
+        </div>
+      }
+      actions={
+        <Button
+          onClick={onAction}
+          label={
+            isMobileAppVersion
+              ? t(`mobileApp.action`)
+              : t(`${variant}Paywall.${type}.action`)
+          }
+        />
+      }
+      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`)
+        )
+      }
+      onClose={onClose}
+    />
+  )
+}
+
+export default withLocales(locales)(Paywall)
diff --git a/react/Paywall/Readme.md b/react/Paywall/Readme.md
@@ -1,9 +1,9 @@
-This modal is designed to restrict access to a feature to encourage upgrading
+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.
 
-### Paywall for OnlyOffice
+### Variants
 
 ```jsx
-import { OnlyOfficePaywall } from "cozy-ui/transpiled/react/Paywall"
+import { OnlyOfficePaywall, PasswordSharingPaywall } 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'
@@ -38,15 +38,39 @@ const makeClient = (premiumLink) => ({
   })
 })
 
-;
+const PaywallComponent = state.modal
+
+const paywalls = [
+  OnlyOfficePaywall,
+  PasswordSharingPaywall
+]
+
+const togglePaywall = paywall => {
+  setState({
+    modalOpened: !state.modalOpened,
+    modal: paywall
+  })
+};
 
 <Variants initialVariants={initialVariants}>
   {variant => (
     <DemoProvider client={makeClient(variant.premiumLink)}>
       <div>
-        <Button onClick={() => setState({ modalOpened: !state.modalOpened })} label="Toggle modal"/>
+      <div className="u-mt-1">
+          {paywalls.map(paywall => (
+            <Button
+              key={`open-btn-${paywall.name}`}
+              data-testid={`open-btn-${paywall.name}`}
+              className="u-m-half"
+              label={`Open ${paywall.name.replace(/([A-Z])/g, ' $1').trim()}`}
+              variant="ghost"
+              size="small"
+              onClick={() => togglePaywall(paywall)}
+            />
+          ))}
+        </div>
         {state.modalOpened && (
-          <OnlyOfficePaywall
+          <PaywallComponent
             isPublic={variant.isPublic}
             onClose={() => setState({ modalOpened: false })} />
         )}

diff --git a/react/Paywall/index.jsx b/react/Paywall/index.jsx
@@ -1 +1,2 @@
 export { default as OnlyOfficePaywall } from './OnlyOfficePaywall'
+export { default as PasswordSharingPaywall } from './PasswordSharingPaywall'
diff --git a/react/Paywall/locales/en.json b/react/Paywall/locales/en.json
@@ -18,5 +18,17 @@
       "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"
     }
+  },
+  "passwordSharingPaywall": {
+    "premium": {
+      "title": "Extended your Cozy!",
+      "content": "To 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
@@ -18,5 +18,17 @@
       "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"
     }
+  },
+  "passwordSharingPaywall": {
+    "premium": {
+      "title": "Augmenter votre Cozy !",
+      "content": "Pour 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"
+    }
   }
 }
diff --git a/react/index.js b/react/index.js
@@ -74,7 +74,7 @@ export { default as PercentageLine } from './PercentageLine'
 export { default as Popup } from './Popup'
 export { default as IconStack } from './IconStack'
 export { default as QuotaAlert } from './QuotaAlert'
-export { OnlyOfficePaywall } from './Paywall'
+export { OnlyOfficePaywall, PasswordSharingPaywall } from './Paywall'
 export {
   default as ViewStack,
   ModalStack,