cozy · JF-Cozy · Dec 12, 2024 · Dec 11, 2024 · Dec 11, 2024
@@ -1,6 +1,6 @@
 const path = require('path')

 const webpackMerge = require('webpack-merge')

 module.exports = {
  title: 'Cozy UI React components',
@@ -96,6 +96,7 @@
         '../react/QualificationGrid',
         '../react/QualificationIconStack',
         '../react/QualificationItem',
+        '../react/QualificationModal',
         '../react/UploadQueue'
       ]
     },

@@ -92,12 +92,12 @@
     "browserslist-config-cozy": "0.4.0",
     "bundlemon": "3.1.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^48.8.0",
+    "cozy-client": "^51.6.0",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
-    "cozy-intent": "1.16.1",
+    "cozy-intent": "^2.29.1",
     "cozy-logger": "^1.9.0",
-    "cozy-stack-client": "^47.4.0",
+    "cozy-stack-client": "^51.6.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.8",
@@ -181,9 +181,9 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=48.8.0",
+    "cozy-client": ">=51.6.0",
     "cozy-device-helper": "^2.0.0",
-    "cozy-intent": ">=1.3.0",
+    "cozy-intent": ">=2.29.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

@@ -42,15 +42,13 @@ describe('Paywall', () => {
     useInstanceInfo.mockReturnValue({
       context: {
         data: {
-          attributes: {
-            enable_premium_links: enablePremiumLinks,
-            manager_url: 'http://mycozy.cloud'
-          }
+          enable_premium_links: enablePremiumLinks,
+          manager_url: 'http://mycozy.cloud'
         }
       },
       instance: {
         data: {
-          attributes: { uuid: hasUuid ? '123' : null }
+          uuid: hasUuid ? '123' : null
         }
       },
       isLoaded: true

@@ -0,0 +1,28 @@
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import QualificationModal from 'cozy-ui/transpiled/react/QualificationModal'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+initialState = { show: isTesting() ? true : false }
+
+const show = () => setState({show: true})
+const hide = () => setState({show: false})
+
+;
+
+<DemoProvider client={{ collection: () => ({ updateMetadataAttribute: () => {}}) }}>
+  <Button label={state.show ? "Close modal" : "Open modal"} variant="ghost" onClick={show} />
+  {state.show &&
+    <QualificationModal
+      file={{ name: "toto.txt", metadata: { qualification: { label: 'isp_invoice' } } }}
+      onClose={hide}
+    />
+  }
+</DemoProvider>
+```
@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+
+import { useClient } from 'cozy-client'
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
+import { getBoundT } from 'cozy-client/dist/models/document/locales'
+import { getQualification } from 'cozy-client/dist/models/document/qualification'
+
+import { locales } from './locales'
+import Icon from '../Icon'
+import FileTypeNoteIcon from '../Icons/FileTypeNote'
+import NestedSelectResponsive from '../NestedSelect/NestedSelectResponsive'
+import QualificationIconStack from '../QualificationIconStack'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const makeOptions = lang => {
+  const qualifT = getBoundT(lang)
+
+  return {
+    children: [
+      {
+        id: 'none',
+        title: qualifT('Scan.themes.none'),
+        icon: <QualificationIconStack />
+      },
+      ...themesList.map(theme => ({
+        id: theme.id,
+        title: qualifT(`Scan.themes.${theme.label}`),
+        icon: <QualificationIconStack theme={theme.label} />,
+        children: theme.items.map(item => ({
+          id: item.label,
+          item,
+          title: qualifT(`Scan.items.${item.label}`),
+          icon: isQualificationNote(item) ? (
+            <Icon icon={FileTypeNoteIcon} size={64} />
+          ) : (
+            <QualificationIconStack qualification={item.label} />
+          )
+        }))
+      }))
+    ]
+  }
+}
+
+const QualificationModal = ({ file, title, onClose }) => {
+  useExtendI18n(locales)
+  const client = useClient()
+  const { t, lang } = useI18n()
+
+  const qualificationLabel = getQualification(file)?.label
+  const options = useMemo(() => makeOptions(lang), [lang])
+
+  const isSelected = ({ id, item }) => {
+    return qualificationLabel
+      ? qualificationLabel === item?.label
+      : id === 'none'
+  }
+
+  const handleClick = async ({ id, item }) => {
+    const fileCollection = client.collection('io.cozy.files')
+    const removeQualification = qualificationLabel && id === 'none'
+
+    /*
+      In the case where we remove the qualification it's necessary to define the attribute to `null` and not `undefined`, with `undefined` the stack does not return the attribute and today the Redux store is not updated for a missing attribute.
+      As a result, the UI is not updated and continues to display the qualification on the document, even though it has been deleted in CouchDB.
+    */
+    await fileCollection.updateMetadataAttribute(file._id, {
+      qualification: removeQualification ? null : item
+    })
+
+    onClose()
+  }
+
+  return (
+    <NestedSelectResponsive
+      title={title || t('QualificationModal.title')}
+      options={options}
+      noDivider
+      document={file}
+      isSelected={isSelected}
+      onSelect={handleClick}
+      onClose={onClose}
+    />
+  )
+}
+
+QualificationModal.propTypes = {
+  file: PropTypes.object,
+  title: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+export default QualificationModal
@@ -0,0 +1,5 @@
+{
+  "QualificationModal": {
+    "title": "Document type"
+  }
+}
@@ -0,0 +1,5 @@
+{
+  "QualificationModal": {
+    "title": "Type de document"
+  }
+}
@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}
@@ -125,6 +125,8 @@ export { default as Thumbnail } from './Thumbnail'
 export { default as ButtonBase } from './ButtonBase'
 export { default as QualificationGrid } from './QualificationGrid'
 export { default as QualificationItem } from './QualificationItem'
+export { default as QualificationIconStack } from './QualificationIconStack'
+export { default as QualificationModal } from './QualificationModal'
 export { default as Timeline } from './Timeline'
 export { default as TimelineConnector } from './TimelineConnector'
 export { default as TimelineContent } from './TimelineContent'

@@ -5969,16 +5969,16 @@ cosmiconfig@^8.3.6:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
-cozy-client@^48.8.0:
-  version "48.8.0"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-48.8.0.tgz#66bfe0d1866013080ca39083faf6dd0d59548c33"
-  integrity sha512-o/TmAlgn0xbdxrV928eVYtORE1g0Xykx32LeT83iQaRe26F4mnz4WVpcwizNH1zV7OTue8LNhLHPHZypCO23AQ==
+cozy-client@^51.6.0:
+  version "51.6.0"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-51.6.0.tgz#22f77a40f316011d8e8a298cc9d4cbc7cfdbbcc0"
+  integrity sha512-H0jhhju5jhoQHCiPZB2tfoRZb4QrhxfArNTRwLs5Lsd3+5WmtaSnPgbQUTBHWPRCv7qxP89Spz7eSgDmpdzA5Q==
   dependencies:
     "@cozy/minilog" "1.0.0"
     "@types/jest" "^26.0.20"
     "@types/lodash" "^4.14.170"
     btoa "^1.2.1"
-    cozy-stack-client "^48.6.0"
+    cozy-stack-client "^51.6.0"
     date-fns "2.29.3"
     json-stable-stringify "^1.0.1"
     lodash "^4.17.13"
@@ -6008,11 +6008,12 @@ cozy-flags@^2.10.1:
   dependencies:
     microee "^0.0.6"
 
-cozy-intent@1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/cozy-intent/-/cozy-intent-1.16.1.tgz#ec75d4eff6db966998b6881580319134c9aec7bd"
-  integrity sha512-5Gl9a+kYicX1xV4s0P3BdAOwfjgrRvTubRKvT2EVIT7rwK0puPwQDidLFf3bbPtdJAtwjdWh/OHEuQ0HqK1gTw==
+cozy-intent@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/cozy-intent/-/cozy-intent-2.29.1.tgz#929d6dfe1e7d619ed5d62447483c5899914b04ed"
+  integrity sha512-Es+7WkPU+mkrMM1RDjuVXZqWeXEYXo0xLZinEBJIYyTrz/gopLLztHcrjfL4bglKqAt9XTdDxrT1KxsenDd1bw==
   dependencies:
+    cozy-minilog "^3.9.1"
     post-me "0.4.5"
 
 cozy-interapp@^0.5.4:
@@ -6028,19 +6029,17 @@ cozy-logger@^1.9.0:
     chalk "^2.4.2"
     json-stringify-safe "5.0.1"
 
-cozy-stack-client@^47.4.0:
-  version "47.4.0"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-47.4.0.tgz#db58f19ecc1f3a4100d24648ca9f87a4a825b6fe"
-  integrity sha512-hwk//fVrM05GZmRodYTQel7tvpK+NZ6gDn1gkpYmjaLvG8hN24PskeWr5+a6iBNzlO1FtDh7qQ1/jU5vw7v6zg==
+cozy-minilog@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/cozy-minilog/-/cozy-minilog-3.9.1.tgz#8a89743664145da7b1808d78cc53daacaa97e758"
+  integrity sha512-UwtNfRWKIWpNA4NK2MovPvUalijmYpFk726r1zxLlMixRTBtHTqVZtEcDF+3PrE5o5UiUAUC8Z+MWiz3ivstbw==
   dependencies:
-    detect-node "^2.0.4"
-    mime "^2.4.0"
-    qs "^6.7.0"
+    microee "0.0.6"
 
-cozy-stack-client@^48.6.0:
-  version "48.6.0"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-48.6.0.tgz#c2d2697fcc9061c87425a2f9abc69aff41a94882"
-  integrity sha512-pYrGc1ZWJPWZ2jshBb+IRvGHl8ByHcRCqkgSaAsEzcrlrZzxPWnkSAVekZrPbSDx+Pwg2UE/d8puCF+wEtk+6w==
+cozy-stack-client@^51.6.0:
+  version "51.6.0"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-51.6.0.tgz#bd81605bdd1e68161d1143856f78bca969086575"
+  integrity sha512-MRBTKtBtQ6jnmS4ij+nYjgeOecSNr9Z9kCNDlKW9884JxnI4VGfpq1w+ihN3EVh3EyqD98vnaQZ8VuYr6czeVQ==
   dependencies:
     detect-node "^2.0.4"
     mime "^2.4.0"