cozy-ui 90.3.0 → 90.5.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [90.5.0](https://github.com/cozy/cozy-ui/compare/v90.4.0...v90.5.0) (2023-08-07)
+
+
+### Features
+
+* Add DemoProvider to simplify doc and tests ([73efeb4](https://github.com/cozy/cozy-ui/commit/73efeb4))
+* **useI18n:** Throw error if not used inside I18n provider ([a54de0f](https://github.com/cozy/cozy-ui/commit/a54de0f))
+
+# [90.4.0](https://github.com/cozy/cozy-ui/compare/v90.3.0...v90.4.0) (2023-08-07)
+
+
+### Features
+
+* **Paywall:** Allow to open premium on flagship when iap will be enabled ([b53abad](https://github.com/cozy/cozy-ui/commit/b53abad))
+
 # [90.3.0](https://github.com/cozy/cozy-ui/compare/v90.2.0...v90.3.0) (2023-08-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "90.3.0",
+  "version": "90.5.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ContactPicker/index.spec.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
+import { I18nContext } from '../I18n'
 import DemoProvider from '../ContactsListModal/DemoProvider'
 import { BreakpointsProvider } from '../hooks/useBreakpoints'
 import contacts from '../ContactsList/_mockContacts.json'
@@ -8,9 +9,21 @@ import contacts from '../ContactsList/_mockContacts.json'
 import ContactPicker from '.'
 
 const Wrapper = ({ children }) => {
+  const lang = localStorage.getItem('lang') || 'en'
+
   return (
     <DemoProvider>
-      <BreakpointsProvider>{children}</BreakpointsProvider>
+      <BreakpointsProvider>
+        <I18nContext.Provider
+          value={{
+            t: x => x,
+            f: () => '01 Jan. 2022',
+            lang
+          }}
+        >
+          {children}
+        </I18nContext.Provider>
+      </BreakpointsProvider>
     </DemoProvider>
   )
 }

package/react/ContactsListModal/Readme.md

@@ -21,26 +21,37 @@ client.registerPlugin(RealtimePlugin)
 ```
 
 ```jsx
-import ContactsListModal from 'cozy-ui/transpiled/react/ContactsListModal';
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
-import DemoProvider from './DemoProvider';
+import ContactsListModal from 'cozy-ui/transpiled/react/ContactsListModal'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import { I18nContext } from 'cozy-ui/transpiled/react/I18n'
+import DemoProvider from './DemoProvider'
 
-initialState = { opened: isTesting() };
+initialState = { opened: isTesting() }
+
+;
 
 <DemoProvider>
   <BreakpointsProvider>
-    <button type="button" onClick={() => setState({ opened: true })}>
-      Open contacts list
-    </button>
-    {state.opened && (
-      <ContactsListModal
-        placeholder="Search a contact"
-        dismissAction={() => setState({ opened: false })}
-        onItemClick={contact => alert(`Clicked on ${contact._id}`)}
-        addContactLabel="Add a contact"
-        emptyMessage="No contact"
-      />
-    )}
+    <I18nContext.Provider
+      value={{
+        t: x => x,
+        f: () => '01 Jan. 2022',
+        lang: localStorage.getItem('lang') || 'en'
+      }}
+    >
+      <button type="button" onClick={() => setState({ opened: true })}>
+        Open contacts list
+      </button>
+      {state.opened && (
+        <ContactsListModal
+          placeholder="Search a contact"
+          dismissAction={() => setState({ opened: false })}
+          onItemClick={contact => alert(`Clicked on ${contact._id}`)}
+          addContactLabel="Add a contact"
+          emptyMessage="No contact"
+        />
+      )}
+    </I18nContext.Provider>
   </BreakpointsProvider>
 </DemoProvider>
 ```

package/react/CozyDialogs/Readme.md

@@ -63,7 +63,7 @@ import {
   PermissionDialog
 } from  'cozy-ui/transpiled/react/CozyDialogs'
 
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
@@ -243,7 +243,7 @@ const setFlagshipVars = () => {
 }
 ;
 
-<BreakpointsProvider>
+<DemoProvider>
   <Button
     onClick={() => setFlagshipVars()}
     variant="secondary"
@@ -386,14 +386,15 @@ const setFlagshipVars = () => {
       </>
     )}
   </Variants>
-</BreakpointsProvider>
+</DemoProvider>
 ```
 
 ### Dialogs with title button
 
 ```jsx
 import cx from 'classnames'
-import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 
 import { Dialog } from  'cozy-ui/transpiled/react/CozyDialogs'
 import Button from  'cozy-ui/transpiled/react/Buttons'
@@ -433,11 +434,11 @@ const Modal = () => {
 
 ;
 
-<BreakpointsProvider>
+<DemoProvider>
   <Button label="Open modal" onClick={() => setState({ showModal: true })}/>
 
   {state.showModal && (
     <Modal />
   )}
-</BreakpointsProvider>
+</DemoProvider>
 ```

package/react/CozyDialogs/testing.spec.jsx

@@ -9,7 +9,8 @@ import {
   getBackButton,
   getBackCloseButton
 } from './testing'
-import useBreakpoints, { BreakpointsProvider } from '../hooks/useBreakpoints'
+import useBreakpoints from '../hooks/useBreakpoints'
+import DemoProvider from '../providers/DemoProvider'
 
 jest.mock('../hooks/useBreakpoints', () => ({
   ...jest.requireActual('../hooks/useBreakpoints'),
@@ -22,7 +23,7 @@ describe('testing utils for dialog', () => {
   const setup = ({ isMobile = false, onClose, onBack } = {}) => {
     useBreakpoints.mockReturnValue({ isMobile })
     const root = render(
-      <BreakpointsProvider>
+      <DemoProvider>
         <Dialog
           open
           title="Title"
@@ -30,7 +31,7 @@ describe('testing utils for dialog', () => {
           onClose={onClose}
           onBack={onBack}
         />
-      </BreakpointsProvider>
+      </DemoProvider>
     )
     return { root }
   }

package/react/Dialog/Readme.md

@@ -8,9 +8,8 @@ will make sure that even your custom Dialogs will behave as CozyDialogs.
 ```jsx
 import Dialog, { DialogTitle, DialogActions } from 'cozy-ui/transpiled/react/Dialog'
 import { DialogBackButton, DialogCloseButton, useCozyDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import useBreakpoints, {
-  BreakpointsProvider
-} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 
 import Divider from 'cozy-ui/transpiled/react/Divider'
@@ -134,9 +133,9 @@ const ExampleDialog = ({ open, onClose }) => {
   <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
     Toggle modal
   </button>
-  <BreakpointsProvider>
+  <DemoProvider>
     <Alerter />
     <ExampleDialog open={state.modalOpened} onClose={handleClose} />
-  </BreakpointsProvider>
+  </DemoProvider>
 </>
 ```

package/react/I18n/createUseI18n.jsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+import Polyglot from 'node-polyglot'
+
+import { initFormat } from './format'
+import { useI18n, DEFAULT_LANG } from '.'
+
+const createUseI18n = locales => () => {
+  const { lang } = useI18n() || { lang: DEFAULT_LANG }
+
+  return useMemo(() => {
+    const polyglot = new Polyglot({
+      locale: DEFAULT_LANG,
+      phrases: locales[DEFAULT_LANG]
+    })
+
+    if (lang && lang !== DEFAULT_LANG) {
+      try {
+        polyglot.locale(lang)
+        polyglot.extend(locales[lang])
+      } catch (e) {
+        console.warn(`The dict phrases for "${lang}" can't be loaded`)
+      }
+    }
+
+    const f = initFormat(lang)
+    const t = polyglot.t.bind(polyglot)
+
+    return { t, f, lang }
+  }, [lang])
+}
+
+export default createUseI18n

package/react/I18n/index.jsx

@@ -4,9 +4,8 @@
 
 'use strict'
 
-import React, { Component, useContext, useMemo, forwardRef } from 'react'
+import React, { Component, useContext } from 'react'
 import PropTypes from 'prop-types'
-import Polyglot from 'node-polyglot'
 
 import { initTranslation } from './translation'
 import { initFormat } from './format'
@@ -15,6 +14,18 @@ export const DEFAULT_LANG = 'en'
 
 export const I18nContext = React.createContext()
 
+export const useI18n = () => {
+  const context = useContext(I18nContext)
+
+  if (!context) {
+    throw new Error(
+      '`I18nContext` is missing. `useI18n()` must be used within a `<I18n>`'
+    )
+  }
+
+  return context
+}
+
 // Provider root component
 export class I18n extends Component {
   constructor(props) {
@@ -76,53 +87,8 @@ I18n.childContextTypes = {
   lang: PropTypes.string
 }
 
-// higher order decorator for components that need `t` and/or `f`
-export const translate = () => WrappedComponent => {
-  const Wrapper = forwardRef((props, ref) => {
-    const i18nContext = useContext(I18nContext)
-
-    return (
-      <WrappedComponent
-        {...props}
-        ref={ref}
-        t={i18nContext && i18nContext.t}
-        f={i18nContext && i18nContext.f}
-        lang={i18nContext && i18nContext.lang}
-      />
-    )
-  })
-
-  Wrapper.displayName = `withI18n(${WrappedComponent.displayName ||
-    WrappedComponent.name})`
-
-  return Wrapper
-}
-
-export const useI18n = () => {
-  return useContext(I18nContext)
-}
-
-export const createUseI18n = locales => () => {
-  const { lang } = useI18n() || { lang: DEFAULT_LANG }
-  return useMemo(() => {
-    const polyglot = new Polyglot({
-      locale: DEFAULT_LANG,
-      phrases: locales[DEFAULT_LANG]
-    })
-    if (lang && lang !== DEFAULT_LANG) {
-      try {
-        polyglot.locale(lang)
-        polyglot.extend(locales[lang])
-      } catch (e) {
-        console.warn(`The dict phrases for "${lang}" can't be loaded`)
-      }
-    }
-    const f = initFormat(lang)
-    const t = polyglot.t.bind(polyglot)
-    return { t, f, lang }
-  }, [lang])
-}
-
 export { initTranslation, extend } from './translation'
+export { default as translate } from './translate'
+export { default as createUseI18n } from './createUseI18n'
 
 export default I18n

package/react/I18n/translate.jsx

@@ -0,0 +1,27 @@
+import React, { useContext, forwardRef } from 'react'
+
+import { I18nContext } from '.'
+
+// higher order decorator for components that need `t` and/or `f`
+const translate = () => WrappedComponent => {
+  const Wrapper = forwardRef((props, ref) => {
+    const i18nContext = useContext(I18nContext)
+
+    return (
+      <WrappedComponent
+        {...props}
+        ref={ref}
+        t={i18nContext && i18nContext.t}
+        f={i18nContext && i18nContext.f}
+        lang={i18nContext && i18nContext.lang}
+      />
+    )
+  })
+
+  Wrapper.displayName = `withI18n(${WrappedComponent.displayName ||
+    WrappedComponent.name})`
+
+  return Wrapper
+}
+
+export default translate

package/react/NestedSelect/NestedSelect.md

@@ -6,7 +6,8 @@ import NestedSelectModal from './Modal'
 import ListItem from '../ListItem'
 import ListItemText from '../ListItemText'
 import Checkbox from '../Checkbox'
-import useBreakpoints, { BreakpointsProvider } from '../hooks/useBreakpoints'
+import useBreakpoints from '../hooks/useBreakpoints'
+import DemoProvider from '../providers/DemoProvider'
 import palette from 'cozy-ui/transpiled/react/palette'
 
 const Image = ({ letter }) => (
@@ -170,11 +171,11 @@ const InteractiveExample = () => {
 ;
 
 <>
-  <BreakpointsProvider>
+  <DemoProvider>
     {isTesting()
       ? <StaticExample />
       : <InteractiveExample />
     }
-  </BreakpointsProvider>
+  </DemoProvider>
 </>
 ```

package/react/Paywall/Paywall.jsx

@@ -2,9 +2,10 @@ import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import PropTypes from 'prop-types'
 
-import { isMobileApp, isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 import { useClient } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+import flag from 'cozy-flags'
 
 import useInstance from '../helpers/useInstance'
 import Spinner from '../Spinner'
@@ -39,12 +40,14 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
       />
     )
 
-  const isMobileAppVersion = isMobileApp() || isFlagshipApp()
+  const canOpenPremiumLink =
+    !isFlagshipApp() || (isFlagshipApp() && !!flag('flagship.iap.enabled'))
+
   const link = buildPremiumLink(instance)
   const type = makeType(instance, isPublic, link)
 
   const onAction = () => {
-    return type === 'premium' && !isMobileAppVersion
+    return type === 'premium' && canOpenPremiumLink
       ? window.open(link, '_self')
       : onClose()
   }
@@ -66,9 +69,9 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
         <Button
           onClick={onAction}
           label={
-            isMobileAppVersion
-              ? t(`mobileApp.action`)
-              : t(`${variant}Paywall.${type}.action`)
+            canOpenPremiumLink
+              ? t(`${variant}Paywall.${type}.action`)
+              : t(`mobileApp.action`)
           }
         />
       }

package/react/Paywall/Paywall.spec.jsx

@@ -0,0 +1,206 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+
+import { CozyProvider, createMockClient } from 'cozy-client'
+import { isFlagshipApp } from 'cozy-device-helper'
+import flag from 'cozy-flags'
+
+import { I18n } from '../I18n'
+import Paywall from './Paywall'
+import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import useInstance from '../helpers/useInstance'
+
+jest.mock('../helpers/useInstance')
+jest.mock('cozy-device-helper', () => ({
+  ...jest.requireActual('cozy-device-helper'),
+  isFlagshipApp: 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
+  } = {}) => {
+    useInstance.mockReturnValue({
+      context: {
+        data: {
+          attributes: {
+            enable_premium_links: enablePremiumLinks,
+            manager_url: 'http://mycozy.cloud'
+          }
+        }
+      },
+      instance: {
+        data: {
+          attributes: { uuid: hasUuid ? '123' : null }
+        }
+      },
+      state: 'loaded'
+    })
+
+    isFlagshipApp.mockReturnValue(isFlagshipAppReturnValue)
+    flag.mockReturnValue(isIapEnabled)
+
+    const mockClient = createMockClient({})
+    return render(
+      <CozyProvider client={mockClient}>
+        <BreakpointsProvider>
+          <I18n lang="en" dictRequire={() => {}}>
+            <Paywall
+              variant="onlyOffice"
+              onClose={onCloseSpy}
+              isPublic={isPublic}
+            />
+          </I18n>
+        </BreakpointsProvider>
+      </CozyProvider>
+    )
+  }
+
+  it('should display the default case when nothing is defined', () => {
+    setup()
+
+    expect(screen.getByText('Information')).toBeInTheDocument()
+
+    const actionButton = screen.getByRole('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', () => {
+    setup({
+      hasUuid: true
+    })
+
+    expect(screen.getByText('Information')).toBeInTheDocument()
+
+    const actionButton = screen.getByRole('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', () => {
+    setup({
+      hasUuid: true,
+      enablePremiumLinks: true
+    })
+
+    expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
+
+    const actionButton = screen.getByRole('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)', () => {
+    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 = screen.getByRole('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', () => {
+    setup({
+      hasUuid: true,
+      enablePremiumLinks: false,
+      isPublic: true
+    })
+
+    expect(screen.getByText('Information')).toBeInTheDocument()
+
+    const actionButton = screen.getByRole('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', () => {
+      setup({
+        hasUuid: true,
+        enablePremiumLinks: true,
+        isFlagshipApp: true
+      })
+
+      expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
+
+      const actionButton = screen.getByRole('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', () => {
+      setup({
+        hasUuid: true,
+        enablePremiumLinks: true,
+        isFlagshipApp: true,
+        isIapEnabled: false
+      })
+
+      expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
+
+      const actionButton = screen.getByRole('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', () => {
+      setup({
+        hasUuid: true,
+        enablePremiumLinks: true,
+        isFlagshipApp: true,
+        isIapEnabled: true
+      })
+
+      expect(screen.getByText('Upgrade your plan')).toBeInTheDocument()
+
+      const actionButton = screen.getByRole('button', {
+        name: 'Check our plans'
+      })
+      fireEvent.click(actionButton)
+      expect(openSpy).toBeCalledWith(
+        'http://mycozy.cloud/cozy/instances/123/premium',
+        '_self'
+      )
+    })
+  })
+})

package/react/Paywall/Readme.md

@@ -1,7 +1,7 @@
 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.
 
-On mobile devices, we display "I understand" instead of the action button label for reasons of compatibility with the mobile application store.
+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`
 
 ### Variants
 
@@ -14,8 +14,6 @@ import {
   MaxPapersPaywall,
   QuotaPaywall
 } 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'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Button from  'cozy-ui/transpiled/react/Buttons'

package/react/SelectBox/Readme.md

@@ -293,9 +293,7 @@ the options to be displayed on top of all the layers.
 ```jsx
 import { useState, useEffect } from 'react'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
-import {
-  BreakpointsProvider
-} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -375,10 +373,10 @@ const ExampleDialog = ({ open, onClose }) => {
   <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
     Toggle modal
   </button>
-  <BreakpointsProvider>
+  <DemoProvider>
     { state.modalOpened
       ? <ExampleDialog open={true} onClose={handleClose} />
       : null }
-  </BreakpointsProvider>
+  </DemoProvider>
 </>
 ```

package/react/providers/DemoProvider.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { CozyProvider } from 'cozy-client'
+
+import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import { I18nContext } from '../I18n'
+
+const defaultClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
+}
+
+const DemoProvider = ({ client, children }) => {
+  const lang = localStorage.getItem('lang') || 'en'
+
+  return (
+    <CozyProvider client={client || defaultClient}>
+      <BreakpointsProvider>
+        <I18nContext.Provider
+          value={{
+            t: x => x,
+            f: () => '01 Jan. 2022',
+            lang
+          }}
+        >
+          {children}
+        </I18nContext.Provider>
+      </BreakpointsProvider>
+    </CozyProvider>
+  )
+}
+
+export default DemoProvider

package/transpiled/react/I18n/createUseI18n.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import Polyglot from 'node-polyglot';
+import { initFormat } from "cozy-ui/transpiled/react/I18n/format";
+import { useI18n, DEFAULT_LANG } from "cozy-ui/transpiled/react/I18n";
+
+var createUseI18n = function createUseI18n(locales) {
+  return function () {
+    var _ref = useI18n() || {
+      lang: DEFAULT_LANG
+    },
+        lang = _ref.lang;
+
+    return useMemo(function () {
+      var polyglot = new Polyglot({
+        locale: DEFAULT_LANG,
+        phrases: locales[DEFAULT_LANG]
+      });
+
+      if (lang && lang !== DEFAULT_LANG) {
+        try {
+          polyglot.locale(lang);
+          polyglot.extend(locales[lang]);
+        } catch (e) {
+          console.warn("The dict phrases for \"".concat(lang, "\" can't be loaded"));
+        }
+      }
+
+      var f = initFormat(lang);
+      var t = polyglot.t.bind(polyglot);
+      return {
+        t: t,
+        f: f,
+        lang: lang
+      };
+    }, [lang]);
+  };
+};
+
+export default createUseI18n;

package/transpiled/react/I18n/index.js

@@ -3,7 +3,6 @@
  */
 'use strict';
 
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -16,13 +15,21 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { Component, useContext, useMemo, forwardRef } from 'react';
+import React, { Component, useContext } from 'react';
 import PropTypes from 'prop-types';
-import Polyglot from 'node-polyglot';
 import { initTranslation } from "cozy-ui/transpiled/react/I18n/translation";
 import { initFormat } from "cozy-ui/transpiled/react/I18n/format";
 export var DEFAULT_LANG = 'en';
-export var I18nContext = /*#__PURE__*/React.createContext(); // Provider root component
+export var I18nContext = /*#__PURE__*/React.createContext();
+export var useI18n = function useI18n() {
+  var context = useContext(I18nContext);
+
+  if (!context) {
+    throw new Error('`I18nContext` is missing. `useI18n()` must be used within a `<I18n>`');
+  }
+
+  return context;
+}; // Provider root component
 
 export var I18n = /*#__PURE__*/function (_Component) {
   _inherits(I18n, _Component);
@@ -104,57 +111,8 @@ I18n.childContextTypes = {
   t: PropTypes.func,
   f: PropTypes.func,
   lang: PropTypes.string
-}; // higher order decorator for components that need `t` and/or `f`
-
-export var translate = function translate() {
-  return function (WrappedComponent) {
-    var Wrapper = /*#__PURE__*/forwardRef(function (props, ref) {
-      var i18nContext = useContext(I18nContext);
-      return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
-        ref: ref,
-        t: i18nContext && i18nContext.t,
-        f: i18nContext && i18nContext.f,
-        lang: i18nContext && i18nContext.lang
-      }));
-    });
-    Wrapper.displayName = "withI18n(".concat(WrappedComponent.displayName || WrappedComponent.name, ")");
-    return Wrapper;
-  };
-};
-export var useI18n = function useI18n() {
-  return useContext(I18nContext);
-};
-export var createUseI18n = function createUseI18n(locales) {
-  return function () {
-    var _ref = useI18n() || {
-      lang: DEFAULT_LANG
-    },
-        lang = _ref.lang;
-
-    return useMemo(function () {
-      var polyglot = new Polyglot({
-        locale: DEFAULT_LANG,
-        phrases: locales[DEFAULT_LANG]
-      });
-
-      if (lang && lang !== DEFAULT_LANG) {
-        try {
-          polyglot.locale(lang);
-          polyglot.extend(locales[lang]);
-        } catch (e) {
-          console.warn("The dict phrases for \"".concat(lang, "\" can't be loaded"));
-        }
-      }
-
-      var f = initFormat(lang);
-      var t = polyglot.t.bind(polyglot);
-      return {
-        t: t,
-        f: f,
-        lang: lang
-      };
-    }, [lang]);
-  };
 };
 export { initTranslation, extend } from './translation';
+export { default as translate } from './translate';
+export { default as createUseI18n } from './createUseI18n';
 export default I18n;

package/transpiled/react/I18n/translate.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useContext, forwardRef } from 'react';
+import { I18nContext } from "cozy-ui/transpiled/react/I18n"; // higher order decorator for components that need `t` and/or `f`
+
+var translate = function translate() {
+  return function (WrappedComponent) {
+    var Wrapper = /*#__PURE__*/forwardRef(function (props, ref) {
+      var i18nContext = useContext(I18nContext);
+      return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+        ref: ref,
+        t: i18nContext && i18nContext.t,
+        f: i18nContext && i18nContext.f,
+        lang: i18nContext && i18nContext.lang
+      }));
+    });
+    Wrapper.displayName = "withI18n(".concat(WrappedComponent.displayName || WrappedComponent.name, ")");
+    return Wrapper;
+  };
+};
+
+export default translate;

package/transpiled/react/Paywall/Paywall.js

@@ -7,9 +7,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import PropTypes from 'prop-types';
-import { isMobileApp, isFlagshipApp } from 'cozy-device-helper';
+import { isFlagshipApp } from 'cozy-device-helper';
 import { useClient } from 'cozy-client';
 import { buildPremiumLink } from 'cozy-client/dist/models/instance';
+import flag from 'cozy-flags';
 import useInstance from "cozy-ui/transpiled/react/helpers/useInstance";
 import Spinner from "cozy-ui/transpiled/react/Spinner";
 import { IllustrationDialog } from "cozy-ui/transpiled/react/CozyDialogs";
@@ -47,12 +48,12 @@ var Paywall = function Paywall(_ref) {
     })),
     onClose: onClose
   });
-  var isMobileAppVersion = isMobileApp() || isFlagshipApp();
+  var canOpenPremiumLink = !isFlagshipApp() || isFlagshipApp() && !!flag('flagship.iap.enabled');
   var link = buildPremiumLink(instance);
   var type = makeType(instance, isPublic, link);
 
   var onAction = function onAction() {
-    return type === 'premium' && !isMobileAppVersion ? window.open(link, '_self') : onClose();
+    return type === 'premium' && canOpenPremiumLink ? window.open(link, '_self') : onClose();
   };
 
   return /*#__PURE__*/React.createElement(IllustrationDialog, {
@@ -71,7 +72,7 @@ var Paywall = function Paywall(_ref) {
     }, t("".concat(variant, "Paywall.").concat(type, ".title")))),
     actions: /*#__PURE__*/React.createElement(Button, {
       onClick: onAction,
-      label: isMobileAppVersion ? t("mobileApp.action") : t("".concat(variant, "Paywall.").concat(type, ".action"))
+      label: canOpenPremiumLink ? t("".concat(variant, "Paywall.").concat(type, ".action")) : t("mobileApp.action")
     }),
     content: /*#__PURE__*/React.createElement(ReactMarkdown, {
       source: t("".concat(variant, "Paywall.").concat(type, ".content"), _objectSpread({}, contentInterpolation)),

package/transpiled/react/providers/DemoProvider.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CozyProvider } from 'cozy-client';
+import { BreakpointsProvider } from "cozy-ui/transpiled/react/hooks/useBreakpoints";
+import { I18nContext } from "cozy-ui/transpiled/react/I18n";
+var defaultClient = {
+  plugins: {
+    realtime: {
+      subscribe: function subscribe() {},
+      unsubscribe: function unsubscribe() {},
+      unsubscribeAll: function unsubscribeAll() {}
+    }
+  },
+  getStackClient: function getStackClient() {
+    return {
+      uri: 'https://cozy.io/'
+    };
+  },
+  getInstanceOptions: function getInstanceOptions() {
+    return {
+      subdomain: ''
+    };
+  }
+};
+
+var DemoProvider = function DemoProvider(_ref) {
+  var client = _ref.client,
+      children = _ref.children;
+  var lang = localStorage.getItem('lang') || 'en';
+  return /*#__PURE__*/React.createElement(CozyProvider, {
+    client: client || defaultClient
+  }, /*#__PURE__*/React.createElement(BreakpointsProvider, null, /*#__PURE__*/React.createElement(I18nContext.Provider, {
+    value: {
+      t: function t(x) {
+        return x;
+      },
+      f: function f() {
+        return '01 Jan. 2022';
+      },
+      lang: lang
+    }
+  }, children)));
+};
+
+export default DemoProvider;