cozy-ui 128.1.0 → 128.3.0

package/react/Contacts/AddModal/ContactForm/helpers.js

@@ -0,0 +1,324 @@
+import get from 'lodash/get'
+import isEqual from 'lodash/isEqual'
+import merge from 'lodash/merge'
+import uniqueId from 'lodash/uniqueId'
+
+import { Association } from 'cozy-client'
+import { makeDisplayName } from 'cozy-client/dist/models/contact'
+import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
+
+import contactToFormValues from './contactToFormValues'
+
+export const fieldsRequired = [
+  'givenName',
+  'familyName',
+  'email[0].email',
+  'cozy'
+]
+
+/**
+ * Returns errors if all required fields are empty
+ * @param {object} values - Fields values
+ * @param {func} t - Translation function
+ * @returns {object} Errors
+ */
+export const validateFields = (values, t) => {
+  const errors = {}
+  if (fieldsRequired.every(field => !get(values, field))) {
+    fieldsRequired.forEach(field => {
+      errors[field] = t('Contacts.AddModal.ContactForm.fields.required')
+    })
+  }
+  return errors
+}
+
+/**
+ * @param {object} [item] - Contact attribute
+ * @returns {string} Stringified object
+ */
+export const makeItemLabel = item => {
+  if (!item) return undefined
+
+  const res =
+    item.label || item.type
+      ? JSON.stringify({ type: item.type, label: item.label })
+      : undefined
+
+  return res
+}
+
+/**
+ *
+ * @param {string} [itemLabel] - Value of the label for a contact attribute
+ * @returns {{ type?: string, label?: string }}
+ */
+export const makeTypeAndLabel = itemLabel => {
+  if (!itemLabel) {
+    return { type: undefined, label: undefined }
+  }
+
+  const itemLabelObj = JSON.parse(itemLabel)
+
+  const res = { type: itemLabelObj.type, label: itemLabelObj.label }
+
+  return res
+}
+
+/**
+ * @param {object} addressField
+ * @returns {boolean} True if addressField has extended address
+ */
+export const hasExtendedAddress = addressField => {
+  if (!addressField) return false
+  const extendedAddressKeys = [
+    'addresslocality',
+    'addressbuilding',
+    'addressstairs',
+    'addressfloor',
+    'addressapartment',
+    'addressentrycode'
+  ]
+  return Object.keys(addressField).some(ext =>
+    extendedAddressKeys.includes(ext)
+  )
+}
+
+export const moveToHead = shouldBeHead => items =>
+  items.reduce((arr, v) => (shouldBeHead(v) ? [v, ...arr] : [...arr, v]), [])
+
+export const movePrimaryToHead = moveToHead(v => v?.primary)
+
+export const createAddress = ({ address, oldContact, t }) => {
+  return address
+    ? address
+        .filter(val => val && val.address)
+        .map((addressField, index) => {
+          const oldContactAddress = oldContact?.address?.[index]
+          const oldContactFormValues = contactToFormValues(oldContact, t)
+            ?.address?.[index]
+
+          const addressHasBeenModified = !isEqual(
+            addressField,
+            oldContactFormValues
+          )
+
+          if (addressHasBeenModified) {
+            // Use "code" instead "postcode", to be vcard 4.0 rfc 6350 compliant
+            // eslint-disable-next-line no-unused-vars
+            const { postcode, ...oldContactAddressCleaned } =
+              oldContactAddress || {}
+            return {
+              // For keep other properties form connectors
+              ...oldContactAddressCleaned,
+              formattedAddress: addressField.address,
+              number: addressField.addressnumber,
+              street: addressField.addressstreet,
+              code: addressField.addresscode,
+              city: addressField.addresscity,
+              region: addressField.addressregion,
+              country: addressField.addresscountry,
+              ...(hasExtendedAddress(addressField) && {
+                extendedAddress: {
+                  ...oldContactAddressCleaned.extendedAddress,
+                  locality: addressField.addresslocality,
+                  building: addressField.addressbuilding,
+                  stairs: addressField.addressstairs,
+                  floor: addressField.addressfloor,
+                  apartment: addressField.addressapartment,
+                  entrycode: addressField.addressentrycode
+                }
+              }),
+              ...makeTypeAndLabel(addressField.addressLabel),
+              primary: index === 0
+            }
+          }
+          return oldContactAddress
+        })
+    : []
+}
+
+/**
+ * @param {(import('../../../types').RelatedContact|undefined)[]} relatedContact - The related contacts array
+ * @returns {Record<string, { data: { _id: string, _type: string }[] }>} - The related contacts relationships
+ */
+export const getRelatedContactRelationships = relatedContact => {
+  // Tips filter Boolean to remove undefined value from array when relatedContact is empty (see contactToFormValues)
+  const data = relatedContact.filter(Boolean).reduce((acc, curr) => {
+    const relationType = curr.relatedContactLabel
+      ? JSON.parse(curr.relatedContactLabel).type
+      : 'related'
+
+    const existingIndex = acc.findIndex(
+      item => item._id === curr.relatedContactId
+    )
+
+    if (existingIndex !== -1) {
+      acc[existingIndex].metadata.relationTypes = Array.from(
+        new Set([...acc[existingIndex].metadata.relationTypes, relationType])
+      )
+    } else {
+      acc.push({
+        _id: curr.relatedContactId,
+        _type: CONTACTS_DOCTYPE,
+        metadata: {
+          relationTypes: [relationType]
+        }
+      })
+    }
+    return acc
+  }, [])
+
+  // `data` can be empty, you still have to return an object to override the behavior of the cozy-client store, otherwise it will keep the old value, and without refreshing the page, the data will not be up to date in the store and therefore on the interface
+  return { related: { data } }
+}
+
+/**
+ * When changing the type of relationship, it must be ensured that no empty relationship remains.
+ * The old and new ones are merged into `formValuesToContact`.
+ *
+ * @param {import('cozy-client/types/types').IOCozyContact} contact - The contact object with all relationships
+ * @returns {import('cozy-client/types/types').IOCozyContact} - The contact object without the related contacts relationships
+ */
+export const removeRelatedContactRelationships = contact => {
+  if (!contact?.relationships) return contact
+  const updatedContact = merge({}, contact)
+
+  const relationshipsWithoutRelatedContact = Object.entries(
+    updatedContact.relationships
+  ).reduce((acc, [relName, relValue]) => {
+    if ('related' === relName) {
+      acc[relName] = relValue
+    }
+    return acc
+  }, {})
+
+  updatedContact.relationships = relationshipsWithoutRelatedContact
+
+  return updatedContact
+}
+
+// TODO : Update dehydrate function to HasMany class in cozy-client
+/**
+ * This function is used to clean the contact object from the associated data
+ * cozy-client dehydrates the document before saving it (via the `HasMany` method), but by doing it manually, we ensure that all hydrated relationships in the document (and without data of course) are not saved in the `relationships` of the document, which adds unnecessary data.
+ *
+ * @param {import('cozy-client/types/types').IOCozyContact} contact - The contact object with associated data
+ * @returns {import('cozy-client/types/types').IOCozyContact} - The contact object without associated data
+ */
+export const removeAsscociatedData = contact => {
+  if (!contact) return {}
+  return Object.entries(contact).reduce((cleanedContact, [key, value]) => {
+    // Add `groups` condition to keep the old implementation functional, see below
+    if (!(value instanceof Association) || key === 'groups') {
+      cleanedContact[key] = value
+    }
+    return cleanedContact
+  }, {})
+}
+
+/**
+ * @param {import('cozy-client/types/types').IOCozyContact} contact
+ * @returns {import('../../../types').RelatedContact[]}
+ */
+export const makeRelatedContact = contact => {
+  if (
+    !(contact.related instanceof Association) ||
+    !contact.relationships?.related
+  ) {
+    return [undefined]
+  }
+
+  const relatedData = contact.related.data.reduce((acc, curr) => {
+    // Use `makeDisplayName` because if the contact is newly created, it has no `displayName` attribute. (Creation of a contact when selecting a linked contact)
+    acc[curr._id] = curr.displayName || makeDisplayName(curr)
+    return acc
+  }, {})
+
+  const res = contact.relationships.related.data.flatMap(item => {
+    return item.metadata.relationTypes.map(type => {
+      return {
+        relatedContactId: item._id,
+        relatedContact: relatedData[item._id],
+        relatedContactLabel: makeItemLabel({
+          type: type === 'related' ? '' : type
+        })
+      }
+    })
+  })
+
+  // Useful because a contact always has at least the `related` relationships (see `getRelatedContactRelationships`)
+  return res.length > 0 ? res : [undefined]
+}
+
+export const addField = fields => fields.push({ fieldId: uniqueId('fieldId_') })
+
+export const removeField = (fields, index) => {
+  const isLastRemainingField = fields.length === 1
+
+  if (isLastRemainingField) {
+    fields.update(index, undefined)
+  } else {
+    fields.remove(index)
+  }
+}
+
+/**
+ *
+ * @param {string} value
+ * @param {func} t
+ * @returns {string}
+ */
+export const makeCustomLabel = (value, t) => {
+  const { type, label } = JSON.parse(value)
+
+  const firstString = type || ''
+  const secondString = label
+    ? type
+      ? ` (${t(`Contacts.AddModal.ContactForm.label.${label}`)})`.toLowerCase()
+      : `label.${label}`
+    : ''
+
+  return firstString + secondString || null
+}
+
+/**
+ *
+ * @param {string} name
+ * @param {string} value
+ * @returns {string}
+ */
+export const makeInitialCustomValue = (name, value) => {
+  // gender input doesn't support custom label
+  if (!name || !value || name === 'gender') return undefined
+
+  const valueObj = JSON.parse(value)
+
+  // Voluntarily before the "backwards compatibility" condition
+  if (name.includes('relatedContactLabel')) {
+    if (!'related' === valueObj.type) {
+      return JSON.stringify({ type: valueObj.type })
+    }
+    return undefined
+  }
+
+  // for backwards compatiblity - historically there is only type and no label
+  if (valueObj.type && !valueObj.label) {
+    return JSON.stringify({ type: valueObj.type })
+  }
+
+  // for phone label
+  if (name.includes('phoneLabel')) {
+    // but unsupported one
+    if (!['cell', 'voice', 'fax'].includes(valueObj.type)) {
+      return JSON.stringify({ type: valueObj.type, label: valueObj.label })
+    }
+
+    // we don't want to create a custom label if supported
+    return undefined
+  }
+
+  // at this point if label and type are both present, it's a custom label
+  if (valueObj.type && valueObj.label) {
+    return JSON.stringify({ type: valueObj.type, label: valueObj.label })
+  }
+}

package/react/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -0,0 +1,152 @@
+import {
+  moveToHead,
+  makeItemLabel,
+  makeTypeAndLabel,
+  makeInitialCustomValue
+} from './helpers'
+
+describe('moveToHead function', () => {
+  it('should move an item to head of the array', () => {
+    const items = [1, 5, 657, 42, 3, 27, 88, 3, 4]
+    const shouldBeHead = v => v === 42
+    const expected = [42, 1, 5, 657, 3, 27, 88, 3, 4]
+    const actual = moveToHead(shouldBeHead)(items)
+    expect(actual).toEqual(expected)
+  })
+})
+
+describe('makeItemLabel', () => {
+  it('should return undefined if no arg', () => {
+    const res = makeItemLabel()
+
+    expect(res).toBe(undefined)
+  })
+
+  it('should return undefined if nothing defined', () => {
+    const res = makeItemLabel({ type: undefined, label: undefined })
+
+    expect(res).toBe(undefined)
+  })
+
+  it('should return correct type and label', () => {
+    const res = makeItemLabel({ type: 'cell', label: 'work' })
+
+    expect(res).toBe('{"type":"cell","label":"work"}')
+  })
+
+  it('should return only label if no type', () => {
+    const res = makeItemLabel({ type: undefined, label: 'work' })
+
+    expect(res).toBe('{"label":"work"}')
+  })
+
+  it('should return only type if no label', () => {
+    const res = makeItemLabel({ type: 'cell', label: undefined })
+
+    expect(res).toBe('{"type":"cell"}')
+  })
+})
+
+describe('makeTypeAndLabel', () => {
+  it('should return undefined if no arg', () => {
+    const res = makeTypeAndLabel()
+
+    expect(res).toStrictEqual({ type: undefined, label: undefined })
+  })
+
+  it('should return correct type and label', () => {
+    const res = makeTypeAndLabel('{"type":"cell","label":"work"}')
+
+    expect(res).toStrictEqual({ type: 'cell', label: 'work' })
+  })
+
+  it('should return only label', () => {
+    const res = makeTypeAndLabel('{"label":"work"}')
+
+    expect(res).toStrictEqual({ type: undefined, label: 'work' })
+  })
+
+  it('should return only type', () => {
+    const res = makeTypeAndLabel('{"type":"cell"}')
+
+    expect(res).toStrictEqual({ type: 'cell', label: undefined })
+  })
+})
+
+describe('makeInitialCustomValue', () => {
+  it('should return undefined if no name', () => {
+    const res = makeInitialCustomValue(
+      undefined,
+      '{"type":"fax","label":"work"}'
+    )
+
+    expect(res).toStrictEqual(undefined)
+  })
+
+  it('should return undefined if no value', () => {
+    const res = makeInitialCustomValue('phone[0].phoneLabel', undefined)
+
+    expect(res).toStrictEqual(undefined)
+  })
+
+  it('should return undefined if no name/value', () => {
+    const res = makeInitialCustomValue(undefined, undefined)
+
+    expect(res).toStrictEqual(undefined)
+  })
+
+  it('should return undefined for gender input', () => {
+    const res = makeInitialCustomValue(
+      'gender',
+      '{"type":"fax","label":"work"}'
+    )
+
+    expect(res).toStrictEqual(undefined)
+  })
+
+  it('should return the type if no label to ensure backwards compatibility', () => {
+    const res = makeInitialCustomValue('someInput', '{"type":"someType"}')
+
+    expect(res).toStrictEqual('{"type":"someType"}')
+  })
+
+  it('should return type and label if present', () => {
+    const res = makeInitialCustomValue(
+      'someInput',
+      '{"type":"someType","label":"work"}'
+    )
+
+    expect(res).toStrictEqual('{"type":"someType","label":"work"}')
+  })
+
+  describe('for phone input', () => {
+    const name = 'phone[0].phoneLabel'
+
+    it('should not return a custom label if the value is supported', () => {
+      const res = makeInitialCustomValue(name, '{"type":"fax","label":"work"}')
+
+      expect(res).toStrictEqual(undefined)
+    })
+
+    it('should return the custom label', () => {
+      const res = makeInitialCustomValue(name, '{"type":"someType"}')
+
+      expect(res).toStrictEqual('{"type":"someType"}')
+    })
+
+    it('should return the custom label', () => {
+      const res = makeInitialCustomValue(name, '{"label":"work"}')
+
+      expect(res).toStrictEqual('{"label":"work"}')
+    })
+
+    it('should return the custom value if the type is not supported even if there is a label', () => {
+      const res = makeInitialCustomValue(
+        name,
+        '{"type":"someType","label":"work"}'
+      )
+
+      expect(res).toStrictEqual('{"type":"someType","label":"work"}')
+    })
+  })
+})

package/react/Contacts/AddModal/ContactForm/index.jsx

@@ -0,0 +1,104 @@
+import arrayMutators from 'final-form-arrays'
+import React from 'react'
+import { Form } from 'react-final-form'
+
+import { getHasManyItems } from 'cozy-client/dist/associations/HasMany'
+
+import FieldInputLayout from './FieldInputLayout'
+import contactToFormValues from './contactToFormValues'
+import { fields } from './fieldsConfig'
+import formValuesToContact from './formValuesToContact'
+import { validateFields } from './helpers'
+import { locales } from './locales'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+// import { fullContactPropTypes } from '../../ContactPropTypes' // !!
+
+// this variable will be set in the form's render prop
+// and used by the submit button in ContactFormModal
+// to be able to trigger the submit from outside the form
+// See react-final-form examples here: https://www.npmjs.com/package/react-final-form#external-submit
+let _submitContactForm
+
+function setSubmitContactForm(handleSubmit) {
+  _submitContactForm = handleSubmit
+}
+
+export function getSubmitContactForm() {
+  return _submitContactForm
+}
+
+/**
+ *
+ * @param {object} params
+ * @param {import('cozy-client/types/types').IOCozyContact} params.contact
+ * @param {func} params.onSubmit
+ * @param {{ data: Array<object> }} params.contacts
+ * @returns
+ */
+const ContactForm = ({ contact, onSubmit, contacts }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  return (
+    <Form
+      mutators={{ ...arrayMutators }}
+      validate={values => validateFields(values, t)}
+      onSubmit={formValues =>
+        onSubmit(formValuesToContact({ formValues, oldContact: contact, t }))
+      }
+      initialValues={contactToFormValues(contact, t)}
+      render={({ handleSubmit, valid, submitFailed, errors }) => {
+        setSubmitContactForm(handleSubmit)
+        return (
+          <form
+            role="form"
+            onSubmit={handleSubmit}
+            className="u-flex u-flex-column"
+          >
+            {fields.map((attributes, index) => (
+              <FieldInputLayout
+                key={index}
+                attributes={attributes}
+                contacts={contacts}
+                formProps={{
+                  valid,
+                  submitFailed,
+                  errors
+                }}
+              />
+            ))}
+          </form>
+        )
+      }}
+    />
+  )
+}
+
+// Used to avoid unnecessary multiple rendering of ContactForm when creating a new contact in another way.
+// These unnecessary renderings prevented the addition of a newly created linked contact. (Creation of a contact when selecting a linked contact)
+export const isSameContactProp = (prevProps, nextProps) => {
+  if (!prevProps.contact?.relationships || !nextProps.contact?.relationships) {
+    return false
+  }
+
+  const prevContactIdsRelated = getHasManyItems(
+    prevProps.contact,
+    'related'
+  ).map(r => r._id)
+  const nextContactIdsRelated = getHasManyItems(
+    nextProps.contact,
+    'related'
+  ).map(r => r._id)
+
+  if (
+    prevContactIdsRelated.length !== nextContactIdsRelated.length ||
+    !prevContactIdsRelated.every(id => nextContactIdsRelated.includes(id))
+  ) {
+    return false
+  }
+
+  return true
+}
+
+// export default ContactForm
+export default React.memo(ContactForm, isSameContactProp)