feat: Update QuotaAlert design by exposing QuotaPaywall

react/deprecated/QuotaAlert/Readme.md

@@ -3,47 +3,38 @@
 The link to the manager is only displayed if there is a managerUrl
 in the stack response
 
-```jsx noeditor
+```jsx
 import QuotaAlert from "cozy-ui/transpiled/react/deprecated/QuotaAlert";
-import { CozyProvider } from "cozy-client";
-import { BreakpointsProvider } from "cozy-ui/transpiled/react/hooks/useBreakpoints";
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 
-<BreakpointsProvider>
-  <div>
+const mockClient = {
+  getStackClient: () => ({
+    fetchJSON: (_, url) => {
+      let attributes = {}
+      if(url === '/settings/context') {
+        attributes = {
+          attributes: {
+            enable_premium_links: true,
+            manager_url: "http://mycozy.cloud",
+          }
+        }
+      } else if(url === '/settings/instance') {
+        attributes = {
+          attributes: { uuid: "1223" }
+        }
+      }
+
+      return Promise.resolve({ data: attributes  })
+    }
+  })
+};
+
+<DemoProvider client={mockClient}>
     <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
       Toggle modal
     </button>
-
     {state.modalOpened && (
-      <CozyProvider
-        client={{
-          getStackClient: () => ({
-            fetchJSON: () =>
-              Promise.resolve({
-                data: {
-                  attributes: { uuid: "1223", manager_url: "http://mycozy.cloud" }
-                }
-              })
-          })
-        }}
-      >
-        <QuotaAlert onClose={() => setState({ modalOpened: false })} />
-      </CozyProvider>
+      <QuotaAlert onClose={() => setState({ modalOpened: false })} />
     )}
-  </div>
-</BreakpointsProvider>;
-```
-
-```jsx static
-import QuotaAlert from "cozy-ui/transpiled/react/deprecated/QuotaAlert";
-
-<div>
-  <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
-    Toggle modal
-  </button>
-
-  {state.modalOpened && (
-    <QuotaAlert onClose={() => setState({ modalOpened: false })} />
-  )}
-</div>;
+</DemoProvider>
 ```

react/deprecated/QuotaAlert/index.jsx

@@ -1,74 +1,18 @@
 import React from 'react'
-import get from 'lodash/get'
 
-import { useClient } from 'cozy-client'
-import { isMobileApp } from 'cozy-device-helper'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
+import { QuotaPaywall } from '../../Paywall'
 
-import { Dialog } from '../../CozyDialogs'
-import Button from '../Button'
-
-import useInstance from '../../helpers/useInstance'
-
-import withLocales from '../../I18n/withLocales'
-import en from './locales/en.json'
-import fr from './locales/fr.json'
-
-const locales = {
-  en,
-  fr
-}
-
-const buildPremiumLink = (uuid, managerUrl) =>
-  `${managerUrl}/cozy/instances/${uuid}/premium`
-
-const QuotaModalAlert = withLocales(locales)(({ t, onClose, instance }) => {
-  const uuid = get(instance, 'instance.data.attributes.uuid')
-  const managerUrl = get(instance, 'context.data.attributes.manager_url')
-  return (
-    <Dialog
-      open={true}
-      title={t('quotaalert.title')}
-      content={t('quotaalert.desc')}
-      actions={
-        <>
-          <Button
-            theme="secondary"
-            onClick={onClose}
-            label={t('quotaalert.confirm')}
-          />
-          {uuid && managerUrl && (
-            <Button
-              theme="primary"
-              label={t('quotaalert.increase')}
-              onClick={() =>
-                window.open(buildPremiumLink(uuid, managerUrl), 'self')
-              }
-            />
-          )}
-        </>
-      }
-      onClose={onClose}
-    />
-  )
-})
+const logDeprecatedComponent = createDepreciationLogger()
 
+/**
+ * @deprecated This component is depreacated, please use [QuotaPaywall](#/Paywall) instead.
+ */
 const QuotaAlert = ({ onClose }) => {
-  const client = useClient()
-  /**
-   * We don't want to call useInstance if we are on
-   * mobile since we don't want to create a link to the cozy manager
-   * because Apple and Google have restricted policy about
-   * making a link to an outside purchase.
-   *
-   * So no call, no instance info, no button
-   */
-  if (isMobileApp()) {
-    return <QuotaModalAlert onClose={onClose} />
-  }
-  // TODO: why is there a conditional hook here?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const instanceInfo = useInstance(client)
-  return <QuotaModalAlert instance={instanceInfo} onClose={onClose} />
+  logDeprecatedComponent(
+    'QuotaAlert is now exported from the cozy-ui as QuotaPaywall. Please import the component from "cozy-ui/transpiled/react/Paywall"'
+  )
+  return <QuotaPaywall onClose={onClose} />
 }
 
 export default QuotaAlert