cozy-ui-plus 1.1.0

package/src/Intent/IntentDialogOpener/index.jsx

@@ -0,0 +1,110 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Dialog from 'cozy-ui/transpiled/react/Dialog'
+
+import IntentIframe, { iframeProps } from '../IntentIframe'
+
+/**
+ * Wrapper that adds an `onClick` handler to its children that opens a dialog
+ * for the specified intent.
+ */
+const IntentDialogOpener = props => {
+  const {
+    options,
+    action,
+    doctype,
+    children,
+    closable,
+    showCloseButton,
+    create,
+    tag,
+    onComplete,
+    onDismiss,
+    iframeProps,
+    Component,
+    ...componentProps
+  } = props
+  const [modalOpened, setModalOpened] = useState(false)
+
+  const openModal = ev => {
+    ev.preventDefault()
+    ev.stopPropagation()
+    setModalOpened(true)
+  }
+  const closeModal = () => setModalOpened(false)
+
+  const handleComplete = result => {
+    closeModal()
+    onComplete && onComplete(result)
+  }
+
+  const handleDismiss = () => {
+    closeModal()
+    onDismiss && onDismiss()
+  }
+
+  const Tag = tag // React needs uppercase element names
+  const elements = [
+    React.cloneElement(children, { key: 'opener', onClick: openModal })
+  ]
+
+  if (modalOpened) {
+    elements.push(
+      <Component
+        key="intent-modal"
+        open={modalOpened}
+        onClose={closable && handleDismiss}
+        {...componentProps}
+      >
+        {closable && showCloseButton && (
+          <DialogCloseButton onClick={handleDismiss} />
+        )}
+        <IntentIframe
+          action={action}
+          type={doctype}
+          data={options}
+          create={create}
+          onCancel={handleDismiss}
+          onTerminate={handleComplete}
+          iframeProps={iframeProps}
+        />
+      </Component>
+    )
+  }
+
+  return <Tag>{elements}</Tag>
+}
+
+IntentDialogOpener.propTypes = {
+  /** Element on which the onClick handler will be added */
+  children: PropTypes.element.isRequired,
+  /** What should happen when the intent has completed */
+  onComplete: PropTypes.func,
+  /** What should happen when the intent has dismissed */
+  onDismiss: PropTypes.func,
+  /** Action you want to execute */
+  action: PropTypes.string.isRequired,
+  /** Doctype on which you want to execute the action */
+  doctype: PropTypes.string.isRequired,
+  /** Whether the dialog is closable by itself (not by the Intent) with a button or by clicking outside of it */
+  closable: PropTypes.bool.isRequired,
+  /** Whether the dialog close button is shown */
+  showCloseButton: PropTypes.bool.isRequired,
+  /** Tag used to wrap children */
+  tag: PropTypes.string.isRequired,
+  /** Component to be used instead of the dialog */
+  Component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /** Props to be passed to the iframe */
+  iframeProps: iframeProps
+}
+
+IntentDialogOpener.defaultProps = {
+  tag: 'span',
+  closable: true,
+  Component: Dialog,
+  showCloseButton: true
+}
+
+export default IntentDialogOpener

package/src/Intent/IntentIframe/Readme.md

@@ -0,0 +1,80 @@
+### Simple usecase
+
+The IntentIframe is the basic and minimal component to open an intent.
+See [the documentation](https://docs.cozy.io/en/cozy-stack/intents/) for more information about intents.
+
+Here a simple example :
+
+```jsx
+import IntentIframe from 'cozy-ui/transpiled/react/IntentIframe'
+import utils from '../../docs/utils'
+
+;
+
+<IntentIframe
+  action="PICK"
+  create={utils.fakeIntentCreate}
+  data={{folder: '840af7e7be6c41bed3c5b76d03f66328'}}
+  type="io.cozy.files"
+  onCancel={() => alert('intent cancelled')}
+  onError={(error) => alert('intent has failed with error: ' + error.message)}
+  onTerminate={doc => alert('intent has completed ! ' + JSON.stringify(doc))}
+/>
+```
+
+### Within an application side controled Dialog
+
+Sometimes you have to render an Intent inside a modal, and handle the modal opening state on the application side. You can then use IntentIframe wrapped in a Dialog for that use case, instead of using IntentDialogOpener component (that is useful to start a new intent modal from a click on a button).
+
+This method replaces deprecated `IntentModal` component.
+
+```jsx
+import { withStyles } from 'cozy-ui/transpiled/react/styles'
+import { DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs'
+import Dialog from 'cozy-ui/transpiled/react/Dialog'
+import IntentIframe from 'cozy-ui/transpiled/react/IntentIframe'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+initialState = { modalOpened: false}
+
+const onClose = () => setState({ modalOpened: false })
+
+const IntentDialog = () => {
+  const { isMobile } = useBreakpoints()
+  return (
+    <Dialog
+      open={state.modalOpened}
+      classes={{ paper: 'u-h-100' }}
+      fullScreen={isMobile}
+      fullWidth
+      maxWidth="md"
+      onClose={onClose}
+    >
+      <DialogCloseButton onClick={onClose} />
+      <IntentIframe
+        onCancel={onClose}
+        onTerminate={res => {
+            setState({ modalOpened: false })
+            alert('intent has completed ! ' + JSON.stringify(res))
+          }
+        }
+        action='OPEN'
+        type='io.cozy.files'
+        // you would not pass create normally as it defaults to
+        // cozy.client.intents.create
+        create={utils.fakeIntentCreate}
+      />
+    </Dialog>
+  )
+}
+
+;
+
+<DemoProvider>
+  <button onClick={()=>setState({ modalOpened: !state.modalOpened })}>
+    Toggle an IntentDialog OPEN io.cozy.files
+  </button>
+  <IntentDialog />
+</DemoProvider>
+```

package/src/Intent/IntentIframe/index.jsx

@@ -0,0 +1,112 @@
+/* eslint-disable no-console */
+
+import get from 'lodash/get'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { withClient } from 'cozy-client'
+import { Intents } from 'cozy-interapp'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+
+import styles from './styles.styl'
+
+const DEFAULT_DATA = {
+  // TODO remove `closeable` since it is only there for backward compatibility
+  // https://mattermost.cozycloud.cc/test-team/pl/t1iagfhqp3n8mqf3nchp6bxsur
+  closeable: false,
+  exposeIntentFrameRemoval: true
+}
+
+class IntentIframe extends React.Component {
+  state = { loading: false }
+
+  componentDidMount() {
+    const { action, data, type, onCancel, onError, onTerminate, client } =
+      this.props
+
+    console.warn(
+      'Be carful to use `withBreakpoints()` and not `useBreakpoints()` in intents. See https://github.com/cozy/cozy-ui/issues/1807'
+    )
+
+    let create
+    if (this.props.create) {
+      create = this.props.create
+    } else {
+      const intents = new Intents({ client })
+      create = intents.create
+    }
+
+    this.setState({ loading: true })
+    create(action, type, {
+      ...DEFAULT_DATA,
+      ...data
+    })
+      .start(
+        this.intentViewer,
+        this.onFrameLoaded,
+        this.props.onHideCross,
+        this.props.onShowCross
+      )
+      .then(result => {
+        // eslint-disable-next-line promise/always-return
+        result ? onTerminate && onTerminate(result) : onCancel()
+      })
+      .catch(error => {
+        onError?.(error)
+        this.setState({ error: error, loading: false })
+        this.props.iframeProps?.setIsLoading?.(false)
+      })
+  }
+
+  onFrameLoaded = () => {
+    this.setState({ loading: false })
+    this.props.iframeProps?.setIsLoading?.(false)
+  }
+
+  render() {
+    const { iframeProps } = this.props
+    const { error, loading } = this.state
+
+    return (
+      <div
+        ref={intentViewer => (this.intentViewer = intentViewer)}
+        className={styles.intentContainer}
+        aria-busy={loading}
+        {...get(iframeProps, 'wrapperProps')}
+      >
+        {loading && (
+          <Spinner size="xxlarge" {...get(iframeProps, 'spinnerProps')} />
+        )}
+        {error && (
+          <div className={styles.intentContainer__error}>{error.message}</div>
+        )}
+        {/* intent iframe will be appended here */}
+      </div>
+    )
+  }
+}
+
+export const iframeProps = PropTypes.shape({
+  wrapperProps: PropTypes.object,
+  spinnerProps: PropTypes.object,
+  setIsLoading: PropTypes.func
+})
+
+IntentIframe.propTypes = {
+  action: PropTypes.string.isRequired,
+  create: PropTypes.func,
+  type: PropTypes.string.isRequired,
+  data: PropTypes.object,
+  onCancel: PropTypes.func,
+  onError: PropTypes.func,
+  onTerminate: PropTypes.func.isRequired,
+  iframeProps: iframeProps,
+  onHideCross: PropTypes.func,
+  onShowCross: PropTypes.func
+}
+
+IntentIframe.defaultProps = {
+  data: {}
+}
+
+export default withClient(IntentIframe)

package/src/Intent/IntentIframe/styles.styl

@@ -0,0 +1,21 @@
+iframe
+    width 100%
+    height 100%
+    border 0
+
+.intentContainer,
+.intentPlaceHolder
+    height 100%
+    width 100%
+    display flex
+    justify-content center
+    align-items center
+
+/* Don't mess with the spinner centering until the iframe is fully loaded. */
+.intentContainer[aria-busy=true] iframe
+    height 0
+    width 0
+
+.intentContainer__error
+    color var(--errorColor)
+    font-size 1.5em

package/src/ListItem/ExpandedAttributes/ExpandedAttribute.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
+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 Typography from 'cozy-ui/transpiled/react/Typography'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { copyToClipboard } from './helpers'
+
+const ExpandedAttribute = ({ label, value, setAlertProps }) => {
+  const { t } = useI18n()
+
+  return (
+    <ListItem
+      className="u-pl-2"
+      button
+      onClick={copyToClipboard({ value, setAlertProps, t })}
+    >
+      <ListItemIcon>
+        <Icon icon={CopyIcon} />
+      </ListItemIcon>
+      <ListItemText
+        primary={<Typography variant="caption">{label}</Typography>}
+        secondary={<Typography variant="body2">{value}</Typography>}
+      />
+    </ListItem>
+  )
+}
+
+ExpandedAttribute.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  setAlertProps: PropTypes.func
+}
+
+export default ExpandedAttribute

package/src/ListItem/ExpandedAttributes/helpers.js

@@ -0,0 +1,214 @@
+import get from 'lodash/get'
+
+import {
+  getTranslatedNameForInformationMetadata,
+  KNOWN_INFORMATION_METADATA_NAMES,
+  KNOWN_DATE_METADATA_NAMES,
+  formatInformationMetadataValue,
+  formatDateMetadataValue
+} from 'cozy-client/dist/models/paper'
+
+export const normalizeExpandedAttribute = attr =>
+  attr
+    .replaceAll(':', '.')
+    .replace('flexsearchProps.', '')
+    .replace('translated.', '')
+
+// attributes not considered as specific expanded attributes
+// and then fallback to default expanded attributes
+export const notExpandedAttributes = {
+  'io.cozy.contacts': ['fullname', 'civility', 'note'],
+  'io.cozy.files': [
+    ...KNOWN_DATE_METADATA_NAMES.map(x => `metadata.${x}`),
+    'metadata.noticePeriod',
+    'name',
+    'flexsearchProps:translated:qualificationLabel',
+    'flexsearchProps:translated:driverLicense',
+    'flexsearchProps:translated:paymentProofFamilyAllowance',
+    'flexsearchProps:translated:caf',
+    'flexsearchProps:translated:vehicleRegistration',
+    'flexsearchProps:translated:nationalIdCard',
+    'flexsearchProps:translated:bankDetails',
+    'flexsearchProps:translated:paySheet',
+    'flexsearchProps:translated:passport',
+    'flexsearchProps:translated:residencePermit'
+  ]
+}
+
+// attributes that we want to display if no attribute of the document is related to the search
+export const defaultExpandedAttributes = {
+  'io.cozy.contacts': ['email', 'phone', 'address', 'birthday'],
+  'io.cozy.files': [
+    ...KNOWN_INFORMATION_METADATA_NAMES.map(x => `metadata.${x}`),
+    ...KNOWN_DATE_METADATA_NAMES.map(x => `metadata.${x}`)
+  ].filter(x => !notExpandedAttributes['io.cozy.files'].includes(x))
+}
+
+export const hasAllElement = (arr1, arr2) => arr1?.every(x => arr2.includes(x))
+
+export const makeDefaultExpandedAttributes = (doc, expandedAttributes) => {
+  const doctype = doc?._type
+
+  if (!doc || !doctype) return undefined
+
+  // checks if there are any expanded attributes.
+  // If there are none, the default expanded attributes are returned
+  if (
+    !expandedAttributes ||
+    hasAllElement(expandedAttributes, notExpandedAttributes[doctype])
+  ) {
+    return defaultExpandedAttributes[doctype]
+  }
+
+  return expandedAttributes
+    .map(expandedAttribute =>
+      notExpandedAttributes[doctype].includes(expandedAttribute)
+        ? undefined
+        : normalizeExpandedAttribute(expandedAttribute)
+    )
+    .filter(x => x)
+}
+
+export const copyToClipboard =
+  ({ value, setAlertProps, t }) =>
+  async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setAlertProps({
+        open: true,
+        severity: 'success',
+        message: t(`ListItem.snackbar.copyToClipboard.success`)
+      })
+    } catch (error) {
+      setAlertProps({
+        open: true,
+        severity: 'error',
+        message: t(`ListItem.snackbar.copyToClipboard.error`)
+      })
+    }
+  }
+
+export const isDate = value => {
+  if (!isNaN(value)) return false
+  const dateTime = new Date(value).getTime()
+  const dateParsedValue = Date.parse(value)
+
+  return dateTime === dateParsedValue
+}
+
+export const getAttrValue = (doc, attrName) => {
+  const attrValue = get(doc, attrName)
+  if (!attrValue || attrValue.length === 0) return undefined
+
+  switch (true) {
+    case attrName === 'email':
+      return attrValue.find(x => x.primary === true)?.address
+
+    case attrName === 'address':
+      return attrValue.find(x => x.primary === true)?.formattedAddress
+
+    case attrName === 'phone':
+      return attrValue.find(x => x.primary === true)?.number
+
+    default:
+      return attrValue
+  }
+}
+
+export const makeAttrsValues = (doc, expandedAttributes) => {
+  const attrsValues = expandedAttributes
+    .map(attrName => {
+      const attrValue = getAttrValue(doc, attrName)
+
+      if (!attrValue) return undefined
+
+      return {
+        attrName,
+        attrValue
+      }
+    })
+    .filter(x => x)
+    .slice(0, 3)
+
+  return attrsValues
+}
+
+// could be use in apps
+export const hasExpandedAttributesDisplayed = ({ doc, expandedAttributes }) => {
+  const defaultExpandedAttributes = makeDefaultExpandedAttributes(
+    doc,
+    expandedAttributes
+  )
+
+  const attrsValues = makeAttrsValues(doc, defaultExpandedAttributes)
+
+  return attrsValues?.length > 0 || false
+}
+
+export const getFormattedValue = ({
+  attrName,
+  attrValue,
+  qualificationLabel,
+  f,
+  lang
+}) => {
+  if (isDate(attrValue)) {
+    return formatDateMetadataValue(attrValue, { f, lang })
+  }
+
+  if (qualificationLabel) {
+    return formatInformationMetadataValue(attrValue, {
+      lang,
+      name: attrName.split('metadata.')[1],
+      qualificationLabel
+    })
+  }
+
+  return attrValue
+}
+
+export const makeLabel = ({ attrName, qualificationLabel, t, lang }) => {
+  if (qualificationLabel) {
+    const name = attrName.split('metadata.')[1]
+    const label = getTranslatedNameForInformationMetadata(name, {
+      lang,
+      qualificationLabel
+    })
+    return label
+  }
+
+  return t(`ListItem.attributes.${attrName}`)
+}
+
+export const makeAttrsLabelAndFormattedValue = ({
+  doc,
+  expandedAttributes,
+  t,
+  f,
+  lang
+}) => {
+  const attrsKeyAndFormattedValue = makeAttrsValues(doc, expandedAttributes)
+
+  return attrsKeyAndFormattedValue.map(({ attrName, attrValue }) => {
+    const _attrName =
+      attrName.match(/\[.+\]/g) !== null ? attrName.split('[')[0] : attrName
+    const qualificationLabel = doc.metadata?.qualification?.label
+
+    const label = makeLabel({
+      attrName: _attrName,
+      qualificationLabel,
+      t,
+      lang
+    })
+
+    const value = getFormattedValue({
+      attrName: _attrName,
+      attrValue,
+      qualificationLabel,
+      f,
+      lang
+    })
+
+    return { label, value }
+  })
+}