feat(mespapiers): Add CategoryItemByKonnector

packages/cozy-mespapiers-lib/src/components/Papers/CategoryItemByKonnector.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useQuery, isQueryLoading } from 'cozy-client'
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+import { buildAccountsQueryBySlug } from '../../helpers/queries'
+import { useScannerI18n } from '../Hooks/useScannerI18n'
+import { addAccountsToKonnectors, makeIsLast } from './helpers'
+import styles from './styles.styl'
+
+const CategoryItemByKonnector = ({
+  konnectorsWithAccounts,
+  konnector,
+  onClick
+}) => {
+  const scannerT = useScannerI18n()
+
+  const queryAccounts = buildAccountsQueryBySlug(konnector.slug)
+  const { data: accounts, ...accountsQueryLeft } = useQuery(
+    queryAccounts.definition,
+    queryAccounts.options
+  )
+  const isLoading = isQueryLoading(accountsQueryLeft)
+
+  if (isLoading) return null
+
+  addAccountsToKonnectors({
+    konnectorsWithAccounts,
+    konnector,
+    accounts
+  })
+
+  if (accounts?.length === 0) {
+    return null
+  }
+
+  const isLast = makeIsLast(konnectorsWithAccounts, konnector)
+
+  return (
+    <>
+      <ListItem
+        button
+        onClick={() => onClick(konnector.qualification_labels[0])}
+      >
+        <ListItemIcon>
+          <div className={styles['emptyKonnectorIcon']} />
+        </ListItemIcon>
+        <ListItemText
+          primary={scannerT(`items.${konnector.qualification_labels[0]}`)}
+        />
+        <Icon icon="right" />
+      </ListItem>
+      {!isLast && <Divider variant="inset" component="li" />}
+    </>
+  )
+}
+
+CategoryItemByKonnector.propTypes = {
+  konnectorsWithAccounts: PropTypes.array,
+  konnector: PropTypes.object,
+  onClick: PropTypes.func
+}
+
+export default CategoryItemByKonnector

packages/cozy-mespapiers-lib/src/components/Papers/helpers.js

@@ -219,3 +219,28 @@ export const makeAccountFromPapers = (papers, accounts) => {
 
   return account
 }
+
+export const addAccountsToKonnectors = ({
+  konnectorsWithAccounts,
+  konnector,
+  accounts
+}) => {
+  const konnectorWithAccounts = konnectorsWithAccounts.find(
+    konnectorWithAccounts => konnectorWithAccounts._id === konnector._id
+  )
+  konnectorWithAccounts.accounts = accounts
+}
+
+export const makeIsLast = (konnectorsWithAccounts, konnector) => {
+  const konnectorsWithAccountsFilteredByAccounts =
+    konnectorsWithAccounts.filter(konnectorWithAccount =>
+      Boolean(konnectorWithAccount.account)
+    )
+
+  return (
+    konnectorsWithAccountsFilteredByAccounts.findIndex(
+      el => el._id === konnector._id
+    ) ===
+    konnectorsWithAccountsFilteredByAccounts.length - 1
+  )
+}

packages/cozy-mespapiers-lib/src/components/Papers/styles.styl

@@ -0,0 +1,5 @@
+.emptyKonnectorIcon
+  border 1px dashed var(--borderMainColor)
+  border-radius 8px
+  width 2rem
+  height 2rem