From 7b5429957c10d38f30857934b8c095ba3494aa3b Mon Sep 17 00:00:00 2001
From: cballevre <celestin.ballevre@protonmail.com>
Date: Tue, 12 Dec 2023 17:14:04 +0100
Subject: [PATCH] feat(Paywall): Add IAP support

BREAKING CHANGE:
To check if IAP is available, you need to wrap your Paywall into a `WebviewContext` component
```
import { WebviewIntentProvider } from 'cozy-intent'

<WebviewIntentProvider>
  <Paywall />
</WebviewIntentProvider>
```
---
 react/Paywall/Paywall.jsx                    | 28 +++++++--
 react/Paywall/Paywall.spec.jsx               | 66 ++++++++++++++------
 react/Paywall/Readme.md                      | 15 ++++-
 react/Paywall/locales/en.json                |  5 +-
 react/Paywall/locales/fr.json                |  5 +-
 react/Paywall/locales/withPaywallLocales.jsx |  2 +-
 6 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/react/Paywall/Paywall.jsx b/react/Paywall/Paywall.jsx
index 86288e5b27..8db6cf5cac 100644
--- a/react/Paywall/Paywall.jsx
+++ b/react/Paywall/Paywall.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import PropTypes from 'prop-types'
 
@@ -6,6 +6,7 @@ import { isFlagshipApp } from 'cozy-device-helper'
 import { useInstanceInfo } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
 import flag from 'cozy-flags'
+import { useWebviewIntent } from 'cozy-intent'
 
 import Spinner from '../Spinner'
 import { IllustrationDialog } from '../CozyDialogs'
@@ -24,6 +25,19 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
   const instanceInfo = useInstanceInfo()
   const { t } = useI18n()
 
+  const webviewIntent = useWebviewIntent()
+  const [isFlagshipAppIapAvailable, setFlagshipAppIapAvailable] = useState(null)
+
+  useEffect(() => {
+    const fetchIapAvailability = async () => {
+      const isAvailable =
+        (await webviewIntent?.call('isAvailable', 'iap')) ?? false
+      setFlagshipAppIapAvailable(isAvailable)
+    }
+
+    fetchIapAvailability()
+  }, [webviewIntent])
+
   if (!instanceInfo.isLoaded)
     return (
       <IllustrationDialog
@@ -39,7 +53,10 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
     )
 
   const canOpenPremiumLink =
-    !isFlagshipApp() || (isFlagshipApp() && !!flag('flagship.iap.enabled'))
+    !isFlagshipApp() ||
+    (isFlagshipApp() &&
+      !!flag('flagship.iap.enabled') &&
+      isFlagshipAppIapAvailable)
 
   const link = buildPremiumLink(instanceInfo)
   const type = makeType(instanceInfo, isPublic, link)
@@ -67,10 +84,13 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
         <Button
           onClick={onAction}
           label={
-            canOpenPremiumLink
+            isFlagshipAppIapAvailable === null
+              ? t(`action.loading`)
+              : canOpenPremiumLink
               ? t(`${variant}Paywall.${type}.action`)
-              : t(`mobileApp.action`)
+              : t(`action.withoutIAP`)
           }
+          busy={isFlagshipAppIapAvailable === null}
         />
       }
       content={
diff --git a/react/Paywall/Paywall.spec.jsx b/react/Paywall/Paywall.spec.jsx
index d1ed4f54f9..2d17b4cd32 100644
--- a/react/Paywall/Paywall.spec.jsx
+++ b/react/Paywall/Paywall.spec.jsx
@@ -4,6 +4,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { createMockClient, useInstanceInfo } from 'cozy-client'
 import { isFlagshipApp } from 'cozy-device-helper'
 import flag from 'cozy-flags'
+import { useWebviewIntent } from 'cozy-intent'
 
 import DemoProvider from '../providers/DemoProvider'
 import Paywall from './Paywall'
@@ -16,6 +17,10 @@ jest.mock('cozy-client', () => ({
   ...jest.requireActual('cozy-client'),
   useInstanceInfo: jest.fn()
 }))
+jest.mock('cozy-intent', () => ({
+  ...jest.requireActual('cozy-intent'),
+  useWebviewIntent: jest.fn()
+}))
 jest.mock('cozy-flags')
 
 describe('Paywall', () => {
@@ -31,7 +36,8 @@ describe('Paywall', () => {
     enablePremiumLinks = false,
     hasUuid = false,
     isFlagshipApp: isFlagshipAppReturnValue = false,
-    isIapEnabled = null
+    isIapEnabled = null,
+    isIapAvailable = false
   } = {}) => {
     useInstanceInfo.mockReturnValue({
       context: {
@@ -52,6 +58,10 @@ describe('Paywall', () => {
 
     isFlagshipApp.mockReturnValue(isFlagshipAppReturnValue)
     flag.mockReturnValue(isIapEnabled)
+    const mockCall = jest.fn().mockResolvedValue(isIapAvailable)
+    useWebviewIntent.mockReturnValue({
+      call: mockCall
+    })
 
     const mockClient = createMockClient({})
     return render(
@@ -65,33 +75,33 @@ describe('Paywall', () => {
     )
   }
 
-  it('should display the default case when nothing is defined', () => {
+  it('should display the default case when nothing is defined', async () => {
     setup()
 
     expect(screen.getByText('Information')).toBeInTheDocument()
 
-    const actionButton = screen.getByRole('button', {
+    const actionButton = await screen.findByRole('button', {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
     expect(onCloseSpy).toBeCalledTimes(1)
   })
 
-  it('should display the default case when there is a premium link but it is not enabled', () => {
+  it('should display the default case when there is a premium link but it is not enabled', async () => {
     setup({
       hasUuid: true
     })
 
     expect(screen.getByText('Information')).toBeInTheDocument()
 
-    const actionButton = screen.getByRole('button', {
+    const actionButton = await screen.findByRole('button', {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
     expect(onCloseSpy).toBeCalledTimes(1)
   })
 
-  it('should display the premium case when the premium link is enabled and available', () => {
+  it('should display the premium case when the premium link is enabled and available', async () => {
     setup({
       hasUuid: true,
       enablePremiumLinks: true
@@ -99,7 +109,7 @@ describe('Paywall', () => {
 
     expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
 
-    const actionButton = screen.getByRole('button', {
+    const actionButton = await screen.findByRole('button', {
       name: 'Check our plans'
     })
     fireEvent.click(actionButton)
@@ -109,7 +119,7 @@ describe('Paywall', () => {
     )
   })
 
-  it('should display the public case when the premium link is available in public context (eg. sharing view)', () => {
+  it('should display the public case when the premium link is available in public context (eg. sharing view)', async () => {
     setup({
       hasUuid: true,
       enablePremiumLinks: true,
@@ -122,14 +132,14 @@ describe('Paywall', () => {
       )
     ).toBeInTheDocument()
 
-    const actionButton = screen.getByRole('button', {
+    const actionButton = await screen.findByRole('button', {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
     expect(onCloseSpy).toBeCalledTimes(1)
   })
 
-  it('should display the default case when the premium link is not available in public context', () => {
+  it('should display the default case when the premium link is not available in public context', async () => {
     setup({
       hasUuid: true,
       enablePremiumLinks: false,
@@ -138,7 +148,7 @@ describe('Paywall', () => {
 
     expect(screen.getByText('Information')).toBeInTheDocument()
 
-    const actionButton = screen.getByRole('button', {
+    const actionButton = await screen.findByRole('button', {
       name: 'I understand'
     })
     fireEvent.click(actionButton)
@@ -146,7 +156,7 @@ describe('Paywall', () => {
   })
 
   describe('on flagship', () => {
-    it('should display the premium case without an action button to access the premium link', () => {
+    it('should display the premium case without an action button to access the premium link', async () => {
       setup({
         hasUuid: true,
         enablePremiumLinks: true,
@@ -155,14 +165,14 @@ describe('Paywall', () => {
 
       expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
 
-      const actionButton = screen.getByRole('button', {
+      const actionButton = await screen.findByRole('button', {
         name: 'I understand'
       })
       fireEvent.click(actionButton)
       expect(onCloseSpy).toBeCalledTimes(1)
     })
 
-    it('should display the premium case without an action button to access the premium link when flag flagship.iap.enabled is false', () => {
+    it('should display the premium case without an action button to access the premium link when flag flagship.iap.enabled is false', async () => {
       setup({
         hasUuid: true,
         enablePremiumLinks: true,
@@ -172,24 +182,44 @@ describe('Paywall', () => {
 
       expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
 
-      const actionButton = screen.getByRole('button', {
+      const actionButton = await screen.findByRole('button', {
         name: 'I understand'
       })
       fireEvent.click(actionButton)
       expect(onCloseSpy).toBeCalledTimes(1)
     })
 
-    it('should display the premium case with an action button to access the premium link when flag flagship.iap.enabled is true', () => {
+    it('should display the premium case without an action button to access the premium link when flag flagship.iap.enabled is false and iap is unavailable', async () => {
+      setup({
+        hasUuid: true,
+        enablePremiumLinks: true,
+        isFlagshipApp: true,
+        isIapEnabled: false,
+        isIapAvailable: false
+      })
+
+      expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
+
+      const actionButton = await screen.findByRole('button', {
+        name: 'I understand'
+      })
+
+      fireEvent.click(actionButton)
+      expect(onCloseSpy).toBeCalledTimes(1)
+    })
+
+    it('should display the premium case with an action button to access the premium link when flag flagship.iap.enabled is true and iap is available', async () => {
       setup({
         hasUuid: true,
         enablePremiumLinks: true,
         isFlagshipApp: true,
-        isIapEnabled: true
+        isIapEnabled: true,
+        isIapAvailable: true
       })
 
       expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
 
-      const actionButton = screen.getByRole('button', {
+      const actionButton = await screen.findByRole('button', {
         name: 'Check our plans'
       })
       fireEvent.click(actionButton)
diff --git a/react/Paywall/Readme.md b/react/Paywall/Readme.md
index 89f72a05fb..18c251f7ea 100644
--- a/react/Paywall/Readme.md
+++ b/react/Paywall/Readme.md
@@ -1,7 +1,16 @@
 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.
 
-When we're in our mobile app called Flagship, we can't display the premium action instead, we just display "I understand" which closes the paywall. This is because our subscription process does not comply with the app store policies. When In app payement (iap) will be implemented we can display premium action back with flag `flagship.iap.enabled`
+When we are in our mobile application called Flagship, we only display the premium action when IAP (In-App Payment) is activated.
+Otherwise our web subscription process does not comply with the app store policies.
+To check if IAP is enabled, the following points are verified:
+
+1. The functionality is available with `cozy-intent`.
+2. The flag `flagship.iap.enabled` is set to true.
+
+### Usage
+
+To use the Paywall component, it should be wrapped into a `WebviewContext` component.
 
 ### Variants
 
@@ -17,7 +26,7 @@ import {
 import Variants from 'cozy-ui/docs/components/Variants'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import { createDemoClient } from 'cozy-client'
+import { createFakeClient } from 'cozy-client'
 
 const initialVariants = [
   {
@@ -63,7 +72,7 @@ const togglePaywall = paywall => {
 }
 
 const makeClient = premiumLink =>
-  createDemoClient({
+  createFakeClient({
     queries: {
       'io.cozy.settings/io.cozy.settings.instance': {
         doctype: 'io.cozy.settings',
diff --git a/react/Paywall/locales/en.json b/react/Paywall/locales/en.json
index f205f190c8..57bfbad747 100644
--- a/react/Paywall/locales/en.json
+++ b/react/Paywall/locales/en.json
@@ -1,6 +1,7 @@
 {
-  "mobileApp": {
-    "action": "I understand"
+  "action": {
+    "loading": "Loading...",
+    "withoutIAP": "I understand"
   },
   "onlyOfficePaywall": {
     "premium": {
diff --git a/react/Paywall/locales/fr.json b/react/Paywall/locales/fr.json
index c9800c35f0..7ff52f1211 100644
--- a/react/Paywall/locales/fr.json
+++ b/react/Paywall/locales/fr.json
@@ -1,6 +1,7 @@
 {
-  "mobileApp": {
-    "action": "J'ai compris"
+  "action": {
+    "loading": "Chargement...",
+    "withoutIAP": "J'ai compris"
   },
   "onlyOfficePaywall": {
     "premium": {
diff --git a/react/Paywall/locales/withPaywallLocales.jsx b/react/Paywall/locales/withPaywallLocales.jsx
index 741c2c71f6..2fc686b9b8 100644
--- a/react/Paywall/locales/withPaywallLocales.jsx
+++ b/react/Paywall/locales/withPaywallLocales.jsx
@@ -3,7 +3,7 @@ import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 import en from './en.json'
 import fr from './fr.json'
 
-export const locales = {
+const locales = {
   en,
   fr
 }