cozy-ui 131.2.0 → 133.0.0-beta.1

package/react/Paywall/Paywall.spec.jsx

@@ -1,230 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react'
-import React from 'react'
-
-import { createMockClient, useInstanceInfo } from 'cozy-client'
-import { isFlagshipApp } from 'cozy-device-helper'
-import flag from 'cozy-flags'
-import { useWebviewIntent } from 'cozy-intent'
-
-import Paywall from './Paywall'
-import DemoProvider from '../providers/DemoProvider'
-
-jest.mock('cozy-device-helper', () => ({
-  ...jest.requireActual('cozy-device-helper'),
-  isFlagshipApp: jest.fn()
-}))
-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', () => {
-  const onCloseSpy = jest.fn()
-  const openSpy = jest.spyOn(window, 'open').mockImplementation()
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  const setup = ({
-    isPublic,
-    enablePremiumLinks = false,
-    hasUuid = false,
-    isFlagshipApp: isFlagshipAppReturnValue = false,
-    isIapEnabled = null,
-    isIapAvailable = false
-  } = {}) => {
-    useInstanceInfo.mockReturnValue({
-      context: {
-        data: {
-          enable_premium_links: enablePremiumLinks,
-          manager_url: 'http://mycozy.cloud'
-        }
-      },
-      instance: {
-        data: {
-          uuid: hasUuid ? '123' : null
-        }
-      },
-      isLoaded: true
-    })
-
-    isFlagshipApp.mockReturnValue(isFlagshipAppReturnValue)
-    flag.mockReturnValue(isIapEnabled)
-    const mockCall = jest.fn().mockResolvedValue(isIapAvailable)
-    useWebviewIntent.mockReturnValue({
-      call: mockCall
-    })
-
-    const mockClient = createMockClient({})
-    return render(
-      <DemoProvider client={mockClient}>
-        <Paywall
-          variant="onlyOffice"
-          onClose={onCloseSpy}
-          isPublic={isPublic}
-        />
-      </DemoProvider>
-    )
-  }
-
-  it('should display the default case when nothing is defined', async () => {
-    setup()
-
-    expect(screen.getByText('Information')).toBeInTheDocument()
-
-    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', async () => {
-    setup({
-      hasUuid: true
-    })
-
-    expect(screen.getByText('Information')).toBeInTheDocument()
-
-    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', async () => {
-    setup({
-      hasUuid: true,
-      enablePremiumLinks: true
-    })
-
-    expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
-
-    const actionButton = await screen.findByRole('button', {
-      name: 'Check our plans'
-    })
-    fireEvent.click(actionButton)
-    expect(openSpy).toBeCalledWith(
-      'http://mycozy.cloud/cozy/instances/123/premium',
-      '_self'
-    )
-  })
-
-  it('should display the public case when the premium link is available in public context (eg. sharing view)', async () => {
-    setup({
-      hasUuid: true,
-      enablePremiumLinks: true,
-      isPublic: true
-    })
-
-    expect(
-      screen.getByText(
-        'You cannot edit this file online. Please ask the document owner to update their Cozy subscription.'
-      )
-    ).toBeInTheDocument()
-
-    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', async () => {
-    setup({
-      hasUuid: true,
-      enablePremiumLinks: false,
-      isPublic: true
-    })
-
-    expect(screen.getByText('Information')).toBeInTheDocument()
-
-    const actionButton = await screen.findByRole('button', {
-      name: 'I understand'
-    })
-    fireEvent.click(actionButton)
-    expect(onCloseSpy).toBeCalledTimes(1)
-  })
-
-  describe('on flagship', () => {
-    it('should display the premium case without an action button to access the premium link', async () => {
-      setup({
-        hasUuid: true,
-        enablePremiumLinks: true,
-        isFlagshipApp: true
-      })
-
-      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 without an action button to access the premium link when flag flagship.iap.enabled is false', async () => {
-      setup({
-        hasUuid: true,
-        enablePremiumLinks: true,
-        isFlagshipApp: true,
-        isIapEnabled: 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 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,
-        isIapAvailable: true
-      })
-
-      expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
-
-      const actionButton = await screen.findByRole('button', {
-        name: 'Check our plans'
-      })
-      fireEvent.click(actionButton)
-      expect(openSpy).toBeCalledWith(
-        'http://mycozy.cloud/cozy/instances/123/premium',
-        '_self'
-      )
-    })
-  })
-})

package/react/Paywall/QuotaPaywall.jsx

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import Paywall from './Paywall'
-
-/**
- * Paywall displayed when user disk space is full
- */
-const QuotaPaywall = ({ onClose }) => {
-  return <Paywall variant="quota" onClose={onClose} />
-}
-
-QuotaPaywall.propTypes = {
-  /** Callback used when the user close the paywall */
-  onClose: PropTypes.func.isRequired
-}
-
-export default QuotaPaywall

package/react/Paywall/Readme.md

@@ -1,137 +0,0 @@
-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 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
-
-```jsx
-import {
-  OnlyOfficePaywall,
-  PasswordSharingPaywall,
-  MaxAccountsByKonnectorPaywall,
-  MaxAccountsPaywall,
-  MaxPapersPaywall,
-  QuotaPaywall,
-  MaxDaysToCapturePaywall
-} from 'cozy-ui/transpiled/react/Paywall'
-import Variants from 'cozy-ui/docs/components/Variants'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import Button from 'cozy-ui/transpiled/react/Buttons'
-
-const initialVariants = [
-  {
-    isPublic: false,
-    premiumLink: false
-  }
-]
-
-const PaywallComponent = state.modal
-
-const paywalls = [
-  {
-    name: 'OnlyOfficePaywall',
-    component: OnlyOfficePaywall
-  },
-  {
-    name: 'PasswordSharingPaywall',
-    component: PasswordSharingPaywall
-  },
-  {
-    name: 'MaxAccountsByKonnectorPaywall',
-    component: MaxAccountsByKonnectorPaywall
-  },
-  {
-    name: 'MaxAccountsPaywall',
-    component: MaxAccountsPaywall
-  },
-  {
-    name: 'MaxPapersPaywall',
-    component: MaxPapersPaywall
-  },
-  {
-    name: 'QuotaPaywall',
-    component: QuotaPaywall
-  },
-  {
-    name: 'MaxDaysToCapturePaywall',
-    component: MaxDaysToCapturePaywall
-  }
-]
-
-const togglePaywall = paywall => {
-  setState({
-    modalOpened: !state.modalOpened,
-    modal: paywall
-  })
-}
-
-const makeClient = premiumLink => ({
-  store: {
-    getState: () => {},
-    subscribe: () => {},
-    unsubscribe: () => {}
-  },
-  getInstanceOptions: () => {},
-  query: () => {},
-  getQueryFromState: queryName => {
-    if (queryName === 'io.cozy.settings/io.cozy.settings.instance') {
-      return {
-        data: {
-          uuid: '1223'
-        }
-      }
-    } else if (queryName === 'io.cozy.settings/io.cozy.settings.context') {
-      return {
-        data: {
-          enable_premium_links: premiumLink,
-          manager_url: 'http://mycozy.cloud',
-          reply_to: 'support@cozy.io'
-        }
-      }
-    }
-  }
-})
-
-;
-
-<Variants initialVariants={initialVariants}>
-  {variant => (
-    <DemoProvider client={makeClient(variant.premiumLink)}>
-      <div>
-        <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.component)}
-            />
-          ))}
-        </div>
-        {state.modalOpened && (
-          <PaywallComponent
-            isPublic={variant.isPublic}
-            max={4}
-            days={30}
-            konnectorName="EDF"
-            onClose={() => setState({ modalOpened: false })}
-          />
-        )}
-      </div>
-    </DemoProvider>
-  )}
-</Variants>
-```

package/react/Paywall/helpers.js

@@ -1,22 +0,0 @@
-import { arePremiumLinksEnabled } from 'cozy-client/dist/models/instance'
-
-/**
- * Determine the type of paywall to display
- * @param {import("cozy-client/types").InstanceInfo} instanceInfo - Instance info (instance, context)
- * @param {boolean} isPublic - Is the document public
- * @param {string} link - Link to check
- * @returns {string} - Type of paywall to display
- */
-export const makeType = (instanceInfo, isPublic, link) => {
-  const hasPremiumEnabled = arePremiumLinksEnabled(instanceInfo)
-
-  if (hasPremiumEnabled && isPublic) {
-    return 'public'
-  }
-
-  if (hasPremiumEnabled && link) {
-    return 'premium'
-  }
-
-  return 'default'
-}

package/react/Paywall/howto.md

@@ -1,28 +0,0 @@
-### Create new variant
-
-A new variant is essentially a set of translations adapted to a specific context of use.
-
-To create a new one, add your translation to the `src/react/Paywall/locales` directory. The translations for each case (default, premium or public) are grouped together under the name of your variant. A case includes a title, content and a label for the action.
-
-```static
-"variantNamePaywall": {
-    "premium": {
-      "title": "Upgrade your Cozy!",
-      "content": "Your offer allows you to connect %{max} in your Cozy.  \n  \nTo unlock this feature, or simply support us, you can change your Cozy offer.",
-      "action": "Check our plans"
-    },
-    ...otherCase
-  }
-```
-
-Next, we create a new component returning the `Paywall`, specifying the name of the new variant. You can also use `contentInterpolation` to insert variables into the content translation.
-
-```js static
-<Paywall
-  variant="variantName"
-  contentInterpolation={{
-    max: 10
-  }}
-  onClose={onClose}
-/>
-```

package/react/Paywall/index.jsx

@@ -1,7 +0,0 @@
-export { default as OnlyOfficePaywall } from './OnlyOfficePaywall'
-export { default as PasswordSharingPaywall } from './PasswordSharingPaywall'
-export { default as MaxAccountsByKonnectorPaywall } from './MaxAccountsByKonnectorPaywall'
-export { default as MaxAccountsPaywall } from './MaxAccountsPaywall'
-export { default as MaxPapersPaywall } from './MaxPapersPaywall'
-export { default as QuotaPaywall } from './QuotaPaywall'
-export { default as MaxDaysToCapturePaywall } from './MaxDaysToCapturePaywall'

package/react/Paywall/locales/en.json

@@ -1,95 +0,0 @@
-{
-  "action": {
-    "loading": "Loading...",
-    "withoutIAP": "I understand"
-  },
-  "onlyOfficePaywall": {
-    "premium": {
-      "title": "Upgrade your plan",
-      "content": "Your plan doesn't allow you to **modify your documents online**.\n\nTo unlock this feature, or simply support us, you can change your Cozy plan.",
-      "action": "Check our plans"
-    },
-    "public": {
-      "title": "Information",
-      "content": "You cannot edit this file online. Please ask the document owner to update their Cozy subscription.",
-      "action": "I understand"
-    },
-    "default": {
-      "title": "Information",
-      "content": "Your current plan does not allow you to take advantage of this feature.",
-      "action": "I understand"
-    }
-  },
-  "passwordSharingPaywall": {
-    "premium": {
-      "title": "Upgrade your plan",
-      "content": "Your plan doesn't allow you to **share your passwords**.\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"
-    }
-  },
-  "maxAccountsByKonnectorPaywall": {
-    "premium": {
-      "title": "Upgrade your plan",
-      "content": "Your plan allows you to connect up to **%{smart_count} account %{konnectorName}** in your Cozy.\n\nTo unlock this feature, or simply support us, you can change your Cozy plan. |||| Your plan allows you to connect up to **%{smart_count} accounts %{konnectorName}** in your Cozy.\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"
-    }
-  },
-  "maxAccountsPaywall": {
-    "premium": {
-      "title": "Upgrade your plan",
-      "content": "Your plan allows you to connect up to **%{smart_count} account** in your Cozy.\n\nTo unlock this feature, or simply support us, you can change your Cozy plan. |||| Your plan allows you to connect up to **%{smart_count} accounts** in your Cozy.\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"
-    }
-  },
-  "maxPapersPaywall": {
-    "premium": {
-      "title": "Upgrade your plan",
-      "content": "Your plan allows you to manually add up to **%{smart_count} paper**.\n\nTo unlock this feature, or simply support us, you can modify the plan of your Cozy. |||| Your plan allows you to manually add up to **%{smart_count} papers**.\n\nTo unlock this feature, or simply support us, you can modify the plan of your Cozy.",
-      "action": "Check our plans"
-    },
-    "default": {
-      "title": "Information",
-      "content": "Your current plan does not allow you to take advantage of this feature.",
-      "action": "I understand"
-    }
-  },
-  "quotaPaywall": {
-    "premium": {
-      "title": "Upgrade your plan",
-      "content": "Your disk storage is full.\n\nPlease remove files, empty your trash or upgrade your plan before uploading files.",
-      "action": "Check our plans"
-    },
-    "default": {
-      "title": "Information",
-      "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"
-    }
-  }
-}

package/react/Paywall/locales/fr.json

@@ -1,95 +0,0 @@
-{
-  "action": {
-    "loading": "Chargement...",
-    "withoutIAP": "J'ai compris"
-  },
-  "onlyOfficePaywall": {
-    "premium": {
-      "title": "Augmentez votre offre",
-      "content": "Votre offre ne vous permet pas de **modifier vos documents en ligne**.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy.",
-      "action": "Voir les offres"
-    },
-    "public": {
-      "title": "Information",
-      "content": "Vous ne pouvez pas éditer ce fichier en ligne. Merci de demander au propriétaire du document de mettre à jour son abonnement Cozy.",
-      "action": "J'ai compris"
-    },
-    "default": {
-      "title": "Information",
-      "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité.",
-      "action": "J'ai compris"
-    }
-  },
-  "passwordSharingPaywall": {
-    "premium": {
-      "title": "Augmentez votre offre",
-      "content": "Votre offre ne vous permet pas de **partager vos mots de passe**.\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é.",
-      "action": "J'ai compris"
-    }
-  },
-  "maxAccountsByKonnectorPaywall": {
-    "premium": {
-      "title": "Augmentez votre offre",
-      "content": "Votre offre vous permet de connecter jusqu'à **%{smart_count} compte %{konnectorName}** dans votre Cozy.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Votre offre vous permet de connecter jusqu'à **%{smart_count} comptes %{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é.",
-      "action": "J'ai compris"
-    }
-  },
-  "maxAccountsPaywall": {
-    "premium": {
-      "title": "Augmentez votre offre",
-      "content": "Votre offre vous permet de connecter jusqu'à **%{smart_count} compte** dans votre Cozy.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Votre offre vous permet de connecter jusqu'à **%{smart_count} comptes** 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é.",
-      "action": "J'ai compris"
-    }
-  },
-  "maxPapersPaywall": {
-    "premium": {
-      "title": "Augmentez votre offre",
-      "content": "Votre offre vous permet d'ajouter manuellement jusqu'à **%{smart_count} papier**.\n\nPour débloquer cette fonctionnalité, ou simplement nous soutenir, vous pouvez modifier l'offre de votre Cozy. |||| Votre offre vous permet d'ajouter manuellement jusqu'à **%{smart_count} papiers**.\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é.",
-      "action": "J'ai compris"
-    }
-  },
-  "quotaPaywall": {
-    "premium": {
-      "title": "Augmentez votre offre",
-      "content": "Votre espace de stockage est plein.\n\nVeuillez supprimer des fichiers, vider votre corbeille ou changer d'offre avant d'importer de nouveaux fichiers.",
-      "action": "Voir les offres"
-    },
-    "default": {
-      "title": "Information",
-      "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": "Voir les offres"
-    },
-    "default": {
-      "title": "Information",
-      "content": "Votre offre actuelle ne vous permet pas de profiter de cette fonctionnalité.",
-      "action": "J'ai compris"
-    }
-  }
-}