cozy-ui-plus 1.1.0

package/src/Contacts/AddModal/ContactAddressDialog/helpers.spec.js

@@ -0,0 +1,64 @@
+import { makeFormattedAddressWithSubFields } from './helpers'
+
+describe('makeFormattedAddressWithSubFields', () => {
+  it('should return full formatted address', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: '10' },
+      { name: 'address[0].addressstreet', value: 'rue du test' },
+      { name: 'address[0].addresscode', value: '75056' },
+      { name: 'address[0].addresscity', value: 'Paris' },
+      { name: 'address[0].addresscountry', value: 'France' }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => '10 rue du test, 75056 Paris, France')
+    )
+
+    expect(res).toBe('10 rue du test, 75056 Paris, France')
+  })
+  it('should return formatted address if only "code" & "city" values are defined', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: undefined },
+      { name: 'address[0].addressstreet', value: undefined },
+      { name: 'address[0].addresscode', value: '75056' },
+      { name: 'address[0].addresscity', value: 'Paris' },
+      { name: 'address[0].addresscountry', value: undefined }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => ' , 75056 Paris, ')
+    )
+
+    expect(res).toBe('75056 Paris')
+  })
+  it('should return formatted address if "code" & "city" values are undefined', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: '10' },
+      { name: 'address[0].addressstreet', value: 'rue du test' },
+      { name: 'address[0].addresscode', value: undefined },
+      { name: 'address[0].addresscity', value: undefined },
+      { name: 'address[0].addresscountry', value: 'France' }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => '10 rue du test,  , France')
+    )
+
+    expect(res).toBe('10 rue du test, France')
+  })
+  it('should return formatted address if all values are undefined', () => {
+    const subFieldsStateMock = [
+      { name: 'address[0].addressnumber', value: undefined },
+      { name: 'address[0].addressstreet', value: undefined },
+      { name: 'address[0].addresscode', value: undefined },
+      { name: 'address[0].addresscity', value: undefined },
+      { name: 'address[0].addresscountry', value: undefined }
+    ]
+    const res = makeFormattedAddressWithSubFields(
+      subFieldsStateMock,
+      jest.fn(() => ' ,  , ')
+    )
+
+    expect(res).toBe('')
+  })
+})

package/src/Contacts/AddModal/ContactAddressDialog/index.jsx

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Field, useForm } from 'react-final-form'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { makeFormattedAddressWithSubFields } from './helpers'
+import { locales } from './locales'
+import FieldInputWrapper from '../ContactForm/FieldInputWrapper'
+import { fieldInputAttributesTypes } from '../types'
+
+const ContactAddressModal = ({ onClose, name, subFields }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { getFieldState, change } = useForm()
+
+  const subFieldsState = subFields.map(subField =>
+    getFieldState(`${name}${subField.name}`)
+  )
+
+  const onConfirm = () => {
+    const hasBeenModified = subFieldsState.some(state => !state.pristine)
+    if (!hasBeenModified) {
+      return onClose()
+    }
+
+    const formattedAddress = makeFormattedAddressWithSubFields(
+      subFieldsState,
+      t
+    )
+    change(name, formattedAddress)
+
+    onClose()
+  }
+
+  const onCancel = () => {
+    subFieldsState.forEach(({ name, initial }) => change(name, initial))
+    onClose()
+  }
+
+  return (
+    <FixedDialog
+      open
+      onClose={onClose}
+      size="small"
+      title={t('Contacts.AddModal.ContactAddressDialog.fields.address')}
+      content={subFields.map(subField => (
+        <div key={subField.name} className="u-mt-1">
+          <Field
+            label={t(
+              `Contacts.AddModal.ContactAddressDialog.fields.${subField.name}`
+            )}
+            attributes={{ type: subField.type }}
+            name={`${name}${subField.name}`}
+            component={FieldInputWrapper}
+          />
+        </div>
+      ))}
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('Contacts.AddModal.ContactAddressDialog.cancel')}
+            onClick={onCancel}
+          />
+          <Button
+            className="u-ml-half"
+            label={t('Contacts.AddModal.ContactAddressDialog.ok')}
+            onClick={onConfirm}
+          />
+        </>
+      }
+    />
+  )
+}
+
+ContactAddressModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  subFields: PropTypes.arrayOf(fieldInputAttributesTypes).isRequired
+}
+
+export default ContactAddressModal

package/src/Contacts/AddModal/ContactAddressDialog/locales/en.json

@@ -0,0 +1,25 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactAddressDialog": {
+        "fields": {
+          "address": "Address",
+          "number": "Lane number",
+          "street": "Postal address",
+          "code": "Postal code",
+          "city": "City",
+          "country": "Country",
+          "locality": "Locality",
+          "building": "Building",
+          "stairs": "Stairs",
+          "floor": "Floor",
+          "apartment": "Apartment",
+          "region": "Region",
+          "entrycode": "Entry code"
+        },
+        "cancel": "Cancel",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/src/Contacts/AddModal/ContactAddressDialog/locales/fr.json

@@ -0,0 +1,25 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactAddressDialog": {
+        "fields": {
+          "address": "Adresse",
+          "number": "Numéro de voie",
+          "street": "Adresse postal",
+          "code": "Code postal",
+          "city": "Ville",
+          "country": "Pays",
+          "locality": "Lieu-dit",
+          "building": "Bâtiment",
+          "stairs": "Escalier",
+          "floor": "Etage",
+          "apartment": "Appartement",
+          "region": "Région",
+          "entrycode": "Code d'entrée"
+        },
+        "cancel": "Annuler",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/src/Contacts/AddModal/ContactAddressDialog/locales/index.jsx

@@ -0,0 +1,11 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}

package/src/Contacts/AddModal/ContactAddressDialog/locales/ru.json

@@ -0,0 +1,25 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactAddressDialog": {
+        "fields": {
+          "address": "Адрес",
+          "number": "Номер дома",
+          "street": "Почтовый адрес",
+          "code": "Почтовый индекс",
+          "city": "Город",
+          "country": "Страна",
+          "locality": "Район",
+          "building": "Здание",
+          "stairs": "Подъезд",
+          "floor": "Этаж",
+          "apartment": "Квартира",
+          "region": "Регион",
+          "entrycode": "Код подъезда"
+        },
+        "cancel": "Отменить",
+        "ok": "ОК"
+      }
+    }
+  }
+}

package/src/Contacts/AddModal/ContactAddressDialog/locales/vi.json

@@ -0,0 +1,25 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactAddressDialog": {
+        "fields": {
+          "address": "Địa chỉ",
+          "number": "Số nhà",
+          "street": "Địa chỉ bưu điện",
+          "code": "Mã bưu điện",
+          "city": "Thành phố",
+          "country": "Quốc gia",
+          "locality": "Địa phương",
+          "building": "Tòa nhà",
+          "stairs": "Cầu thang",
+          "floor": "Tầng",
+          "apartment": "Căn hộ",
+          "region": "Vùng",
+          "entrycode": "Mã ra vào"
+        },
+        "cancel": "Hủy",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/src/Contacts/AddModal/ContactForm/FieldInput.jsx

@@ -0,0 +1,124 @@
+import cx from 'classnames'
+import uniqueId from 'lodash/uniqueId'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { Field } from 'react-final-form'
+
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import FieldInputWrapper from './FieldInputWrapper'
+import HasValueCondition from './HasValueCondition'
+import { RelatedContactList } from './RelatedContactList'
+import { locales } from './locales'
+import styles from './styles.styl'
+import ContactAddressDialog from '../ContactAddressDialog'
+import { fieldInputAttributesTypes, labelPropTypes } from '../types'
+
+const FieldInput = ({
+  name,
+  labelProps,
+  className,
+  attributes: { subFields, ...restAttributes },
+  contacts,
+  error,
+  helperText,
+  label,
+  isInvisible,
+  required
+}) => {
+  const [id] = useState(uniqueId('field_')) // state only use to generate id once and not at each render
+  const [hasBeenFocused, setHasBeenFocused] = useState(false)
+  const [isAddressDialogOpen, setIsAddressDialogOpen] = useState(false)
+  const [isRelatedContactDialogOpen, setIsRelatedContactDialogOpen] =
+    useState(false)
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  const handleClick = () => {
+    if (name.includes('address')) {
+      setIsAddressDialogOpen(true)
+    }
+
+    if (name.includes('relatedContact')) {
+      setIsRelatedContactDialogOpen(true)
+    }
+  }
+
+  const onFocus = () => {
+    setHasBeenFocused(true)
+  }
+
+  return (
+    <div
+      className={cx(
+        className,
+        styles['contact-form-field__wrapper'],
+        'u-flex-column-s',
+        { 'u-flex': !isInvisible, 'u-dn': isInvisible }
+      )}
+    >
+      <Field
+        required={required}
+        error={error}
+        helperText={helperText}
+        label={label}
+        id={id}
+        attributes={restAttributes}
+        name={name}
+        component={FieldInputWrapper}
+        onFocus={onFocus}
+        onClick={handleClick}
+      />
+      {isAddressDialogOpen && (
+        <ContactAddressDialog
+          onClose={() => setIsAddressDialogOpen(false)}
+          name={name}
+          subFields={subFields}
+        />
+      )}
+      {isRelatedContactDialogOpen && (
+        <RelatedContactList
+          onClose={() => setIsRelatedContactDialogOpen(false)}
+          name={name}
+          contacts={contacts}
+        />
+      )}
+      {labelProps && (
+        <HasValueCondition name={name} otherCondition={hasBeenFocused}>
+          <div className="u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-auto u-miw-4">
+            <Field
+              attributes={labelProps}
+              name={`${name}Label`}
+              label={t('Contacts.AddModal.ContactForm.fields.label')}
+              component={FieldInputWrapper}
+              onFocus={onFocus}
+            />
+          </div>
+        </HasValueCondition>
+      )}
+    </div>
+  )
+}
+
+FieldInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  labelProps: labelPropTypes,
+  attributes: fieldInputAttributesTypes,
+  /** Whether the field is visible by the user or not (still in the DOM anyway) */
+  isInvisible: PropTypes.bool,
+  contacts: PropTypes.shape({
+    data: PropTypes.arrayOf(PropTypes.object)
+  }),
+  // Destructuring props
+  id: PropTypes.string,
+  label: PropTypes.string,
+  required: PropTypes.bool
+}
+
+FieldInput.defaultProps = {
+  labelProps: null,
+  required: false
+}
+
+export default FieldInput

package/src/Contacts/AddModal/ContactForm/FieldInputAccordion.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import DropdownIcon from 'cozy-ui/transpiled/react/Icons/Dropdown'
+import DropupIcon from 'cozy-ui/transpiled/react/Icons/Dropup'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import FieldInput from './FieldInput'
+import { locales } from './locales'
+
+const FieldInputAccordion = ({
+  attributes: { name, label, subFields, ...restAttributes },
+  contacts,
+  error,
+  helperText
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [showExtended, setShowExtended] = useState(false)
+
+  return (
+    <>
+      <div className="u-flex u-flex-items-baseline">
+        <FieldInput
+          attributes={restAttributes}
+          contacts={contacts}
+          error={error}
+          helperText={helperText}
+          name={name}
+          label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          labelProps={label}
+        />
+        <IconButton
+          className="u-ml-half"
+          size="medium"
+          onClick={() => setShowExtended(v => !v)}
+        >
+          <Icon icon={showExtended ? DropupIcon : DropdownIcon} />
+        </IconButton>
+      </div>
+      {subFields.map(({ name, ...attributes }, index) => {
+        return (
+          <FieldInput
+            key={index}
+            className="u-mt-1"
+            attributes={attributes}
+            name={name}
+            isInvisible={!showExtended}
+            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export default FieldInputAccordion

package/src/Contacts/AddModal/ContactForm/FieldInputArray.jsx

@@ -0,0 +1,81 @@
+import cx from 'classnames'
+import React from 'react'
+import { FieldArray } from 'react-final-form-arrays'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import FieldInput from './FieldInput'
+import { fieldsRequired, addField, removeField } from './helpers'
+import { locales } from './locales'
+
+const FieldInputArray = ({
+  attributes: { name, label, ...restAttributes },
+  contacts,
+  formProps: { valid, submitFailed, errors }
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <FieldArray name={name}>
+      {({ fields }) => {
+        return (
+          <>
+            {fields.map((nameWithIndex, index) => {
+              const key = fields.value[index]?.fieldId || nameWithIndex
+              const showRemove = fields.value[index]?.[name]
+              const inputName = `${nameWithIndex}.${name}`
+              const isError =
+                fieldsRequired.includes(inputName) && !valid && submitFailed
+
+              return (
+                <div
+                  key={key}
+                  className={cx('u-flex u-flex-items-baseline', {
+                    'u-mt-1': index !== 0
+                  })}
+                >
+                  <FieldInput
+                    attributes={restAttributes}
+                    contacts={contacts}
+                    error={isError}
+                    helperText={isError ? errors[inputName] : null}
+                    name={inputName}
+                    label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+                    labelProps={label}
+                  />
+                  {showRemove && (
+                    <ListItemIcon className="u-ml-half">
+                      <IconButton
+                        aria-label="delete"
+                        color="error"
+                        size="medium"
+                        onClick={() => removeField(fields, index)}
+                      >
+                        <Icon icon={CrossCircleIcon} />
+                      </IconButton>
+                    </ListItemIcon>
+                  )}
+                </div>
+              )
+            })}
+            <Button
+              variant="text"
+              startIcon={<Icon icon={PlusIcon} />}
+              onClick={() => addField(fields)}
+              label={t(`Contacts.AddModal.ContactForm.addLabel.${name}`)}
+            />
+          </>
+        )
+      }}
+    </FieldArray>
+  )
+}
+
+export default FieldInputArray

package/src/Contacts/AddModal/ContactForm/FieldInputLayout.jsx

@@ -0,0 +1,77 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import FieldInput from './FieldInput'
+import FieldInputAccordion from './FieldInputAccordion'
+import FieldInputArray from './FieldInputArray'
+import { fieldsRequired } from './helpers'
+import { locales } from './locales'
+
+const FieldInputLayout = ({
+  attributes: { layout, icon, isSecondary, ...attributes }, // ⚠️ `layout` `icon` `isSecondary` here are removed from attributes to avoid DOM propagration
+  contacts,
+  showSecondaryFields,
+  formProps
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { valid, submitFailed, errors } = formProps
+  const { name, label, ...restAttributes } = attributes
+
+  const isError = fieldsRequired.includes(name) && !valid && submitFailed
+
+  return (
+    <div
+      className={cx('u-mt-1', {
+        'u-flex-items-center': !layout,
+        'u-flex-items-baseline': !!layout,
+        'u-flex': !isSecondary || showSecondaryFields,
+        'u-dn': isSecondary && !showSecondaryFields
+      })}
+    >
+      <div className="u-w-2-half">
+        {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
+      </div>
+      <div className="u-w-100">
+        {layout === 'array' ? (
+          <FieldInputArray
+            attributes={attributes}
+            contacts={contacts}
+            formProps={formProps}
+          />
+        ) : layout === 'accordion' ? (
+          <FieldInputAccordion
+            attributes={attributes}
+            contacts={contacts}
+            error={isError}
+            helperText={isError ? errors[name] : null}
+          />
+        ) : (
+          <FieldInput
+            attributes={restAttributes}
+            contacts={contacts}
+            error={isError}
+            helperText={isError ? errors[name] : null}
+            name={name}
+            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+            labelProps={label}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+FieldInputLayout.propTypes = {
+  attributes: PropTypes.object,
+  contacts: PropTypes.shape({
+    data: PropTypes.arrayOf(PropTypes.object)
+  }),
+  formProps: PropTypes.object
+}
+
+export default FieldInputLayout

package/src/Contacts/AddModal/ContactForm/FieldInputWrapper.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import TextField from 'cozy-ui/transpiled/react/TextField'
+
+import TextFieldCustomLabelSelect from './TextFieldCustomLabelSelect'
+import TextFieldSelect from './TextFieldSelect'
+import { FieldInputWrapperPropTypes } from '../types'
+
+// component used to flatten props to ensure compatibility
+// between Field from react-final-form and TextField from Mui
+const FieldInputWrapper = ({
+  input,
+  attributes: { component, ...restAttributes },
+  variant,
+  fullWidth,
+  ...props
+}) => {
+  const Component =
+    component ||
+    (restAttributes.customLabelOptions
+      ? TextFieldCustomLabelSelect
+      : restAttributes?.select
+      ? TextFieldSelect
+      : TextField)
+
+  return (
+    <Component
+      {...restAttributes}
+      {...input}
+      {...props}
+      variant={variant}
+      fullWidth={fullWidth}
+      minRows="2"
+    />
+  )
+}
+
+FieldInputWrapper.propTypes = FieldInputWrapperPropTypes
+FieldInputWrapper.defaultProps = {
+  variant: 'outlined',
+  fullWidth: true
+}
+
+export default FieldInputWrapper

package/src/Contacts/AddModal/ContactForm/HasValueCondition.jsx

@@ -0,0 +1,31 @@
+/*
+  Wrapper for react-final-form field that renders it children only if the field
+  with the given name has a truthy value or if the other condition is fulfilled
+*/
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Field } from 'react-final-form'
+
+const HasValueCondition = ({ children, otherCondition, name }) => {
+  return (
+    <Field name={name} subscription={{ value: true }}>
+      {({ input: { value } }) =>
+        (otherCondition !== undefined && otherCondition) || value
+          ? children
+          : null
+      }
+    </Field>
+  )
+}
+
+HasValueCondition.defaultProps = {
+  otherCondition: undefined
+}
+
+HasValueCondition.propTypes = {
+  children: PropTypes.element.isRequired,
+  name: PropTypes.string.isRequired,
+  otherCondition: PropTypes.bool
+}
+
+export default HasValueCondition