cozy-viewer 1.1.0

package/src/NoViewer/NoViewer.spec.jsx

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import NoViewer from './NoViewer'
+import DemoProvider from '../docs/DemoProvider'
+
+const file = {
+  _id: 'notSupported',
+  class: 'notSupported',
+  mime: 'notSupported',
+  name: 'notSupported.xyz'
+}
+
+const setup = ({ renderFallbackExtraContent } = {}) => {
+  const root = render(
+    <DemoProvider>
+      <NoViewer
+        file={file}
+        renderFallbackExtraContent={renderFallbackExtraContent}
+      />
+    </DemoProvider>
+  )
+
+  return { root }
+}
+
+describe('NoViewer', () => {
+  it('should render the viewer', () => {
+    const { root } = setup()
+    const { container } = root
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render the viewer with specific extra content', () => {
+    const renderFallbackExtraContent = () => (
+      <div>with specific extra content</div>
+    )
+    const { root } = setup({ renderFallbackExtraContent })
+    const { container } = root
+
+    expect(container).toMatchSnapshot()
+  })
+})

package/src/NoViewer/__snapshots__/NoViewer.spec.jsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NoViewer should render the viewer 1`] = `
+<div>
+  <div
+    class="viewer-noviewer"
+  >
+    <svg
+      class="styles__icon___23x3R"
+      height="140"
+      viewBox="0 0 32 32"
+      width="160"
+    >
+      <g
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <path
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+          fill="#D1D5DB"
+        />
+        <path
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+          fill="#A3ACB8"
+        />
+      </g>
+    </svg>
+    <p
+      class="viewer-filename"
+    >
+      notSupported.xyz
+    </p>
+    <button
+      class="styles__c-btn___3kXsk styles__c-btn--center___Nny0n"
+      type="submit"
+    >
+      <span>
+        <span>
+          Download
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`NoViewer should render the viewer with specific extra content 1`] = `
+<div>
+  <div
+    class="viewer-noviewer"
+  >
+    <svg
+      class="styles__icon___23x3R"
+      height="140"
+      viewBox="0 0 32 32"
+      width="160"
+    >
+      <g
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <path
+          d="M3 2.002C3 .896 3.89 0 4.997 0H22l7 7v22.996A2 2 0 0127.003 32H4.997A1.995 1.995 0 013 29.998V2.002z"
+          fill="#D1D5DB"
+        />
+        <path
+          d="M21.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z"
+          fill="#A3ACB8"
+        />
+      </g>
+    </svg>
+    <p
+      class="viewer-filename"
+    >
+      notSupported.xyz
+    </p>
+    <div>
+      with specific extra content
+    </div>
+  </div>
+</div>
+`;

package/src/NoViewer/index.jsx

@@ -0,0 +1 @@
+export { default } from './NoViewer'

package/src/Panel/ActionMenuDesktop.jsx

@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Copy from 'cozy-ui/transpiled/react/Icons/Copy'
+import Edit from 'cozy-ui/transpiled/react/Icons/Rename'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import ActionMenu, {
+  ActionMenuItem
+} from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import styles from './styles.styl'
+
+const ActionMenuDesktop = forwardRef(
+  ({ onClose, isEditable, actions, appLink, appSlug }, ref) => {
+    const { handleCopy, handleEdit } = actions
+    const { t } = useI18n()
+
+    return (
+      <ActionMenu
+        className={styles['ActionMenuDesktop-ActionMenu']}
+        onClose={onClose}
+        anchorElRef={ref}
+      >
+        {isEditable && (
+          <AppLinker app={{ slug: appSlug }} href={appLink}>
+            {({ onClick, href }) => {
+              return (
+                <a href={href} onClick={() => handleEdit(onClick)}>
+                  <ActionMenuItem
+                    left={<Icon icon={Edit} color="var(--iconTextColor)" />}
+                  >
+                    <Typography>
+                      {t(`Viewer.panel.qualification.actions.edit`)}
+                    </Typography>
+                  </ActionMenuItem>
+                </a>
+              )
+            }}
+          </AppLinker>
+        )}
+        <ActionMenuItem
+          onClick={handleCopy}
+          left={<Icon icon={Copy} color="var(--iconTextColor)" />}
+        >
+          <Typography>
+            {t(`Viewer.panel.qualification.actions.copy`)}
+          </Typography>
+        </ActionMenuItem>
+      </ActionMenu>
+    )
+  }
+)
+ActionMenuDesktop.displayName = 'ActionMenuDesktop'
+
+ActionMenuDesktop.propTypes = {
+  onClose: PropTypes.func,
+  isEditable: PropTypes.bool,
+  actions: PropTypes.shape({
+    handleCopy: PropTypes.func,
+    handleEdit: PropTypes.func
+  }),
+  appLink: PropTypes.string,
+  appSlug: PropTypes.string
+}
+
+export default ActionMenuDesktop

package/src/Panel/ActionMenuMobile.jsx

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
+import BottomSheet, {
+  BottomSheetItem
+} from 'cozy-ui/transpiled/react/BottomSheet'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Copy from 'cozy-ui/transpiled/react/Icons/Copy'
+import Edit from 'cozy-ui/transpiled/react/Icons/Rename'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+const ActionMenuMobile = ({
+  onClose,
+  isEditable,
+  actions,
+  appLink,
+  appSlug
+}) => {
+  const { t } = useI18n()
+  const { handleCopy, handleEdit } = actions
+
+  return (
+    <BottomSheet backdrop onClose={onClose}>
+      <BottomSheetItem disableGutters>
+        <List>
+          {isEditable && (
+            <AppLinker app={{ slug: appSlug }} href={appLink}>
+              {({ onClick, href }) => {
+                return (
+                  <ListItem
+                    button
+                    component="a"
+                    href={href}
+                    onClick={() => handleEdit(onClick)}
+                  >
+                    <ListItemIcon>
+                      <Icon icon={Edit} />
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={t(`Viewer.panel.qualification.actions.edit`)}
+                    />
+                  </ListItem>
+                )
+              }}
+            </AppLinker>
+          )}
+          <ListItem button onClick={handleCopy}>
+            <ListItemIcon>
+              <Icon icon={Copy} />
+            </ListItemIcon>
+            <ListItemText
+              primary={t(`Viewer.panel.qualification.actions.copyClipboard`)}
+            />
+          </ListItem>
+        </List>
+      </BottomSheetItem>
+    </BottomSheet>
+  )
+}
+
+ActionMenuMobile.propTypes = {
+  onClose: PropTypes.func,
+  isEditable: PropTypes.bool,
+  actions: PropTypes.shape({
+    handleCopy: PropTypes.func,
+    handleEdit: PropTypes.func
+  }),
+  appLink: PropTypes.string
+}
+
+export default ActionMenuMobile

package/src/Panel/ActionMenuWrapper.jsx

@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
+import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ActionMenuDesktop from './ActionMenuDesktop'
+import ActionMenuMobile from './ActionMenuMobile'
+import {
+  buildEditAttributePath,
+  isEditableAttribute,
+  getCurrentModel
+} from '../helpers'
+import useActionMenuContext from '../providers/ActionMenuProvider'
+
+const mespapiersAppSlug = 'mespapiers'
+
+const ActionMenuWrapper = forwardRef(({ onClose, file, optionFile }, ref) => {
+  const { name, value } = optionFile
+  const editPathByModelProps = useActionMenuContext()
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+  const client = useClient()
+
+  const currentModel = getCurrentModel(name)
+  const editPath = buildEditAttributePath(
+    editPathByModelProps,
+    currentModel,
+    optionFile.name
+  )
+
+  const { fetchStatus, url } = useAppLinkWithStoreFallback(
+    mespapiersAppSlug,
+    client,
+    editPath
+  )
+  const isAppLinkLoaded = fetchStatus === 'loaded'
+  const isEditable = Boolean(editPath) && isEditableAttribute(name, file)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      showAlert({
+        message: t(`Viewer.snackbar.copiedToClipboard.success`),
+        severity: 'success',
+        variant: 'filled',
+        icon: false
+      })
+    } catch (error) {
+      showAlert({
+        message: t(`Viewer.snackbar.copiedToClipboard.error`),
+        severity: 'error',
+        variant: 'filled',
+        icon: false
+      })
+    }
+    onClose()
+  }
+
+  const handleEdit = cb => {
+    if (isAppLinkLoaded) {
+      onClose()
+      cb && cb()
+    }
+  }
+
+  if (isMobile) {
+    return (
+      <ActionMenuMobile
+        onClose={onClose}
+        isEditable={isEditable}
+        actions={{ handleCopy, handleEdit }}
+        appLink={url}
+        appSlug={mespapiersAppSlug}
+      />
+    )
+  }
+
+  return (
+    <ActionMenuDesktop
+      ref={ref}
+      onClose={onClose}
+      isEditable={isEditable}
+      actions={{ handleCopy, handleEdit }}
+      appLink={url}
+      appSlug={mespapiersAppSlug}
+    />
+  )
+})
+ActionMenuWrapper.displayName = 'ActionMenuWrapper'
+
+ActionMenuWrapper.propTypes = {
+  onClose: PropTypes.func,
+  file: PropTypes.object,
+  optionFile: PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.string
+  })
+}
+
+export default ActionMenuWrapper

package/src/Panel/Certifications.jsx

@@ -0,0 +1,63 @@
+import has from 'lodash/has'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
+import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
+import SafeIcon from 'cozy-ui/transpiled/react/Icons/Safe'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
+
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const Certification = ({ icon, title, caption }) => {
+  return (
+    <div className="u-ph-2 u-pv-1">
+      <Media className="u-mb-half" align="top">
+        <Img className="u-mr-half">
+          <Icon icon={icon} />
+        </Img>
+        <Bd>
+          <Typography variant="body1">{title}</Typography>
+        </Bd>
+      </Media>
+      <Typography variant="caption">{caption}</Typography>
+    </div>
+  )
+}
+
+Certification.propTypes = {
+  icon: iconPropType.isRequired,
+  title: PropTypes.string.isRequired,
+  caption: PropTypes.string.isRequired
+}
+
+const Certifications = ({ file, t }) => {
+  const hasCarbonCopy = has(file, 'metadata.carbonCopy')
+  const hasElectronicSafe = has(file, 'metadata.electronicSafe')
+
+  return (
+    <>
+      {hasCarbonCopy && (
+        <Certification
+          icon={CarbonCopyIcon}
+          title={t('Viewer.panel.certifications.carbonCopy.title')}
+          caption={t('Viewer.panel.certifications.carbonCopy.caption')}
+        />
+      )}
+      {hasElectronicSafe && (
+        <Certification
+          icon={SafeIcon}
+          title={t('Viewer.panel.certifications.electronicSafe.title')}
+          caption={t('Viewer.panel.certifications.electronicSafe.caption')}
+        />
+      )}
+    </>
+  )
+}
+
+Certifications.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default withViewerLocales(Certifications)

package/src/Panel/PanelContent.jsx

@@ -0,0 +1,50 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+
+import getPanelBlocks, { getPanelBlocksSpecs } from './getPanelBlocks'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const PanelContent = ({ file, isPublic, t }) => {
+  const panelBlocks = getPanelBlocks({
+    panelBlocksSpecs: getPanelBlocksSpecs(isPublic),
+    file
+  })
+
+  return (
+    <Stack spacing="s" className={cx('u-flex u-flex-column u-h-100')}>
+      <Paper
+        className="u-flex u-flex-items-center u-h-3 u-ph-2 u-flex-shrink-0"
+        elevation={2}
+        square
+      >
+        <Typography variant="h4">{t('Viewer.panel.title')}</Typography>
+      </Paper>
+      {panelBlocks.map((PanelBlock, index) => (
+        <Paper
+          key={index}
+          className={cx({
+            'u-flex-grow-1': index === panelBlocks.length - 1
+          })}
+          elevation={2}
+          square
+        >
+          <Typography variant="h4" className="u-pv-1">
+            <PanelBlock file={file} />
+          </Typography>
+        </Paper>
+      ))}
+    </Stack>
+  )
+}
+
+PanelContent.propTypes = {
+  file: PropTypes.object.isRequired,
+  isPublic: PropTypes.bool
+}
+
+export default withViewerLocales(PanelContent)

package/src/Panel/Qualification.jsx

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState, createRef, useMemo, useEffect } from 'react'
+
+import {
+  isExpiringSoon,
+  formatMetadataQualification,
+  KNOWN_BILLS_ATTRIBUTES_NAMES,
+  getMetadataQualificationType
+} from 'cozy-client/dist/models/paper'
+import List from 'cozy-ui/transpiled/react/List'
+
+import ActionMenuWrapper from './ActionMenuWrapper'
+import QualificationListItemContact from './QualificationListItemContact'
+import QualificationListItemDate from './QualificationListItemDate'
+import QualificationListItemInformation from './QualificationListItemInformation'
+import QualificationListItemOther from './QualificationListItemOther'
+import ExpirationAlert from '../components/ExpirationAlert'
+import { withViewerLocales } from '../hoc/withViewerLocales'
+
+const ComponentFromMetadataQualificationType = {
+  contact: QualificationListItemContact,
+  date: QualificationListItemDate,
+  information: QualificationListItemInformation,
+  other: QualificationListItemOther,
+  bills: QualificationListItemInformation
+}
+
+const isExpirationAlertHidden = file => {
+  return file?.metadata?.hideExpirationAlert ?? false
+}
+
+const Qualification = ({ file }) => {
+  const { metadata = {} } = file
+  const actionBtnRef = useRef([])
+  const [optionFile, setOptionFile] = useState({
+    id: '',
+    name: '',
+    value: ''
+  })
+
+  const hideActionsMenu = () => {
+    setOptionFile({ id: '', name: '', value: '' })
+  }
+
+  const toggleActionsMenu = (id, name, value) => {
+    setOptionFile(prev => {
+      if (prev.value) return { id: '', name: '', value: '' }
+      return { id, name, value }
+    })
+  }
+
+  const formattedMetadataQualification = useMemo(() => {
+    const relatedBills = file.bills?.data?.[0]
+
+    if (relatedBills) {
+      const formattedBillsMetadata = KNOWN_BILLS_ATTRIBUTES_NAMES.map(
+        attrName => ({ name: attrName, value: relatedBills[attrName] })
+      )
+
+      return formatMetadataQualification(metadata).concat(
+        formattedBillsMetadata
+      )
+    }
+
+    return formatMetadataQualification(metadata)
+  }, [metadata, file.bills?.data])
+
+  useEffect(() => {
+    actionBtnRef.current = formattedMetadataQualification.map(
+      (_, idx) => actionBtnRef.current[idx] ?? createRef()
+    )
+  }, [formattedMetadataQualification])
+
+  return (
+    <>
+      {isExpiringSoon(file) && !isExpirationAlertHidden(file) && (
+        <ExpirationAlert file={file} />
+      )}
+      <List className="u-pv-1">
+        {formattedMetadataQualification.map((meta, idx) => {
+          const { name } = meta
+          const metadataQualificationType = getMetadataQualificationType(name)
+          const QualificationListItemComp =
+            ComponentFromMetadataQualificationType[metadataQualificationType]
+
+          return (
+            <QualificationListItemComp
+              key={idx}
+              file={file}
+              ref={actionBtnRef.current[idx]}
+              formattedMetadataQualification={meta}
+              toggleActionsMenu={val => toggleActionsMenu(idx, name, val)}
+            />
+          )
+        })}
+
+        {optionFile.name && (
+          <ActionMenuWrapper
+            onClose={hideActionsMenu}
+            file={file}
+            optionFile={optionFile}
+            ref={actionBtnRef.current[optionFile.id]}
+          />
+        )}
+      </List>
+    </>
+  )
+}
+
+Qualification.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default withViewerLocales(Qualification)

package/src/Panel/QualificationListItemContact.jsx

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types'
+import React, { useRef, useState } from 'react'
+
+import {
+  getTranslatedNameForContact,
+  formatContactValue
+} from 'cozy-client/dist/models/paper'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/ListItemSecondaryAction'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import ActionMenuWrapper from './ActionMenuWrapper'
+import QualificationListItemText from './QualificationListItemText'
+import useReferencedContactName from '../hooks/useReferencedContactName'
+
+const QualificationListItemContact = ({ file }) => {
+  const { lang } = useI18n()
+  const actionBtnRef = useRef()
+  const [optionFile, setOptionFile] = useState({
+    name: '',
+    value: ''
+  })
+
+  const hideActionsMenu = () => setOptionFile({ name: '', value: '' })
+  const toggleActionsMenu = (name, value) =>
+    setOptionFile(prev => {
+      if (prev.value) return { name: '', value: '' }
+      return { name, value }
+    })
+
+  const { contacts, isLoadingContacts } = useReferencedContactName(file)
+
+  if (isLoadingContacts) {
+    return (
+      <ListItem className="u-pl-2 u-pr-3">
+        <Spinner color="var(--secondaryTextColor)" />
+      </ListItem>
+    )
+  }
+
+  const formattedTitle = getTranslatedNameForContact({ lang })
+  const formattedValue = formatContactValue(contacts)
+
+  if (!isLoadingContacts && !formattedValue) {
+    return null
+  }
+
+  return (
+    <>
+      <ListItem className="u-ph-2">
+        <QualificationListItemText
+          primary={formattedTitle}
+          secondary={formattedValue}
+        />
+        <ListItemSecondaryAction>
+          <IconButton
+            ref={actionBtnRef}
+            onClick={() => toggleActionsMenu('contact', formattedValue)}
+          >
+            <Icon icon={Dots} />
+          </IconButton>
+        </ListItemSecondaryAction>
+      </ListItem>
+
+      {optionFile.value && (
+        <ActionMenuWrapper
+          onClose={hideActionsMenu}
+          file={file}
+          optionFile={optionFile}
+          ref={actionBtnRef}
+        />
+      )}
+    </>
+  )
+}
+
+QualificationListItemContact.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default QualificationListItemContact