cozy-ui-plus 3.1.2 → 4.1.0

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

@@ -9,26 +9,63 @@ import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
 
 import contactToFormValues from './contactToFormValues'
 
-export const fieldsRequired = [
-  'givenName',
-  'familyName',
-  'email[0].email',
-  'cozy'
-]
+export const getFirstValueIfArray = values => {
+  return Object.keys(values).reduce((acc, key) => {
+    const val = values[key]
+    acc[key] = Array.isArray(val) ? val[0] : val
+    return acc
+  }, {})
+}
 
 /**
- * Returns errors if all required fields are empty
+ * Returns true if all fields have no values
  * @param {object} values - Fields values
- * @param {func} t - Translation function
+ * @param {import('../types').Field[]} fields - Fields configuration
+ * @returns {boolean} True if all fields have no values
+ */
+export const hasNoValues = (values, fields) => {
+  const _values = getFirstValueIfArray(values)
+
+  return fields.every(field => !get(_values, field.name))
+}
+
+/**
+ * Returns true if the input is required and the form is invalid
+ * @param {boolean} required - Whether the input is required
+ * @param {object} formProps - The form props
+ * @returns {boolean} True if the input is required and the form is invalid
+ */
+export const makeIsRequiredError = (required, formProps) => {
+  const { valid, submitFailed } = formProps
+
+  return required && !valid && submitFailed
+}
+
+/**
+ * Returns errors for required fields that are empty
+ * @param {object} values - Fields values
+ * @param {import('../types').Field[]} fields - Fields configuration
+ * @param {Function} t - Translation function
  * @returns {object} Errors
  */
-export const validateFields = (values, t) => {
+export const validateFields = (values, fields, t) => {
   const errors = {}
-  if (fieldsRequired.every(field => !get(values, field))) {
-    fieldsRequired.forEach(field => {
-      errors[field] = t('Contacts.AddModal.ContactForm.fields.required')
-    })
-  }
+  const fieldsRequired = fields.filter(field => field.required)
+  const _values = getFirstValueIfArray(values)
+
+  fieldsRequired.forEach(field => {
+    if (!get(_values, field.name)) {
+      errors[field.name] =
+        field.layout === 'array'
+          ? [
+              {
+                [field.name]: t('Contacts.AddModal.ContactForm.fields.required')
+              }
+            ]
+          : t('Contacts.AddModal.ContactForm.fields.required')
+    }
+  })
+
   return errors
 }
 
@@ -384,9 +421,20 @@ export const makeFields = (customFields, defaultFields) => {
 
   const fields = [...defaultFields]
 
-  customFields.map(customField => {
-    if (customField.position) {
-      fields.splice(customField.position, 0, customField)
+  customFields.forEach(customField => {
+    const defaultField = fields.find(field => field.name === customField.name)
+    const _field = defaultField || customField
+
+    if (defaultField) {
+      Object.assign(_field, customField)
+    }
+
+    if (_field.position) {
+      if (defaultField) {
+        const fieldIndex = fields.indexOf(defaultField)
+        fields.splice(fieldIndex, 1)
+      }
+      fields.splice(_field.position, 0, _field)
     }
   })
 

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

@@ -7,7 +7,10 @@ import {
   makeImppValues,
   makeCustomLabel,
   makeFields,
-  makeInitialCustomValue
+  makeInitialCustomValue,
+  hasNoValues,
+  getFirstValueIfArray,
+  validateFields
 } from './helpers'
 import { locales } from './locales'
 
@@ -388,4 +391,344 @@ describe('makeFields', () => {
 
     expect(res).toStrictEqual(defaultFields)
   })
+
+  it('should replace default fields values by custom fields', () => {
+    const defaultFields = [
+      { name: 'firstname', type: 'text', layout: 'accordion' },
+      { name: 'lastname' }
+    ]
+    const customFields = [
+      { name: 'firstname', isSecondary: true, layout: 'array' }
+    ]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'firstname', type: 'text', isSecondary: true, layout: 'array' },
+      { name: 'lastname' }
+    ])
+  })
+
+  it('should replace default fields values and add custom fields at custom position', () => {
+    const defaultFields = [
+      { name: 'firstname', type: 'text', layout: 'accordion' },
+      { name: 'lastname' }
+    ]
+    const customFields = [
+      { name: 'firstname', isSecondary: true, layout: 'array', position: 1 }
+    ]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'lastname' },
+      {
+        name: 'firstname',
+        type: 'text',
+        isSecondary: true,
+        layout: 'array',
+        position: 1
+      }
+    ])
+  })
+})
+
+describe('hasNoValues', () => {
+  it('should return true when all fields have no values', () => {
+    const values = {}
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+
+  it('should return true when all field values are undefined', () => {
+    const values = { firstname: undefined, lastname: undefined }
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+
+  it('should return true when all field values are null', () => {
+    const values = { firstname: null, lastname: null }
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+
+  it('should return true when all field values are empty strings', () => {
+    const values = { firstname: '', lastname: '' }
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+
+  it('should return true when all field values are empty arrays', () => {
+    const values = { email: [], phone: [] }
+    const fields = [{ name: 'email' }, { name: 'phone' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+
+  it('should return false when at least one field has a value', () => {
+    const values = { firstname: 'John', lastname: undefined }
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(false)
+  })
+
+  it('should return false when at least one field has a non-empty string', () => {
+    const values = { firstname: '', lastname: 'Doe' }
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(false)
+  })
+
+  it('should return false when at least one field has a non-empty array', () => {
+    const values = { email: [{ address: 'john.doe@cozycloud.cc' }], phone: [] }
+    const fields = [{ name: 'email' }, { name: 'phone' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(false)
+  })
+
+  it('should return true for nested field paths with no values', () => {
+    const values = { phone: [{ number: undefined }] }
+    const fields = [{ name: 'phone[0].number' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+
+  it('should handle mixed array and non-array values', () => {
+    const values = { firstname: 'John', lastname: ['Doe'] }
+    const fields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(false)
+  })
+
+  it('should return true when fields array is empty', () => {
+    const values = { firstname: 'John', lastname: 'Doe' }
+    const fields = []
+
+    const res = hasNoValues(values, fields)
+
+    expect(res).toBe(true)
+  })
+})
+
+describe('getFirstValueIfArray', () => {
+  it('should return the first value of arrays', () => {
+    const values = {
+      phone: [{ phone: '123' }, { phone: '456' }],
+      email: [{ email: 'test@example.com' }],
+      name: 'John'
+    }
+
+    const res = getFirstValueIfArray(values)
+
+    expect(res).toEqual({
+      phone: { phone: '123' },
+      email: { email: 'test@example.com' },
+      name: 'John'
+    })
+  })
+
+  it('should return undefined for empty arrays', () => {
+    const values = {
+      phone: [],
+      email: [{ email: 'test@example.com' }]
+    }
+
+    const res = getFirstValueIfArray(values)
+
+    expect(res).toEqual({
+      phone: undefined,
+      email: { email: 'test@example.com' }
+    })
+  })
+
+  it('should not mutate the original object', () => {
+    const values = {
+      phone: [{ phone: '123' }, { phone: '456' }],
+      name: 'John'
+    }
+    const originalValues = JSON.parse(JSON.stringify(values))
+
+    getFirstValueIfArray(values)
+
+    expect(values).toEqual(originalValues)
+  })
+
+  it('should handle non-array values', () => {
+    const values = {
+      name: 'John',
+      age: 30,
+      active: true,
+      address: null
+    }
+
+    const res = getFirstValueIfArray(values)
+
+    expect(res).toEqual({
+      name: 'John',
+      age: 30,
+      active: true,
+      address: null
+    })
+  })
+
+  it('should handle mixed array and non-array values', () => {
+    const values = {
+      phone: [{ phone: '123' }],
+      name: 'John',
+      email: []
+    }
+
+    const res = getFirstValueIfArray(values)
+
+    expect(res).toEqual({
+      phone: { phone: '123' },
+      name: 'John',
+      email: undefined
+    })
+  })
+
+  it('should return empty object for empty input', () => {
+    const values = {}
+
+    const res = getFirstValueIfArray(values)
+
+    expect(res).toEqual({})
+  })
+})
+
+describe('validateFields', () => {
+  it('should return errors for required fields that are empty (non-array fields)', () => {
+    const values = {
+      name: '',
+      email: undefined
+    }
+    const fields = [
+      { name: 'name', required: true },
+      { name: 'email', required: true },
+      { name: 'phone', required: false }
+    ]
+
+    const res = validateFields(values, fields, t)
+
+    expect(res).toEqual({
+      name: 'All required fields must be filled in',
+      email: 'All required fields must be filled in'
+    })
+  })
+
+  it('should return errors for required array fields that are empty', () => {
+    const values = {
+      phone: []
+    }
+    const fields = [{ name: 'phone', required: true, layout: 'array' }]
+
+    const res = validateFields(values, fields, t)
+
+    expect(res).toEqual({
+      phone: [
+        {
+          phone: 'All required fields must be filled in'
+        }
+      ]
+    })
+  })
+
+  it('should not return errors for required array fields with valid first element', () => {
+    const values = {
+      phone: [{ phone: '123456789' }]
+    }
+    const fields = [{ name: 'phone', required: true, layout: 'array' }]
+
+    const res = validateFields(values, fields, t)
+
+    expect(res).toEqual({})
+  })
+
+  it('should not return errors for non-required fields', () => {
+    const values = {
+      name: '',
+      phone: []
+    }
+    const fields = [
+      { name: 'name', required: false },
+      { name: 'phone', required: false, layout: 'array' }
+    ]
+
+    const res = validateFields(values, fields, t)
+
+    expect(res).toEqual({})
+  })
+
+  it('should handle mixed array and non-array required fields', () => {
+    const values = {
+      name: '',
+      phone: []
+    }
+    const fields = [
+      { name: 'name', required: true },
+      { name: 'phone', required: true, layout: 'array' }
+    ]
+
+    const res = validateFields(values, fields, t)
+
+    expect(res).toEqual({
+      name: 'All required fields must be filled in',
+      phone: [
+        {
+          phone: 'All required fields must be filled in'
+        }
+      ]
+    })
+  })
+
+  it('should use getFirstValueIfArray to check only first element of arrays', () => {
+    const values = {
+      phone: [{ phone: '123' }, {}]
+    }
+    const fields = [{ name: 'phone', required: true, layout: 'array' }]
+
+    const res = validateFields(values, fields, t)
+
+    // Should not return error because first element has phone value
+    expect(res).toEqual({})
+  })
+
+  it('should return empty errors object when no required fields are empty', () => {
+    const values = {
+      name: 'John',
+      phone: [{ phone: '123456789' }]
+    }
+    const fields = [
+      { name: 'name', required: true },
+      { name: 'phone', required: true, layout: 'array' }
+    ]
+
+    const res = validateFields(values, fields, t)
+
+    expect(res).toEqual({})
+  })
 })

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

@@ -1,16 +1,16 @@
 import arrayMutators from 'final-form-arrays'
 import React, { useState } from 'react'
 import { Form } from 'react-final-form'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { getHasManyItems } from 'cozy-client/dist/associations/HasMany'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import FieldInputLayout from './FieldInputLayout'
 import contactToFormValues from './contactToFormValues'
 import { fields as defaultFields } from './fieldsConfig'
 import formValuesToContact from './formValuesToContact'
-import { validateFields, makeFields } from './helpers'
+import { validateFields, makeFields, hasNoValues } from './helpers'
 import { locales } from './locales'
 // import { fullContactPropTypes } from '../../ContactPropTypes' // !!
 
@@ -55,9 +55,14 @@ const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
         makeCustomContactValues,
         t
       })}
-      validate={values => validateFields(values, t)}
-      onSubmit={formValues =>
-        onSubmit(
+      validate={values => validateFields(values, _fields, t)}
+      onSubmit={formValues => {
+        // avoid creating an empty contact
+        if (hasNoValues(formValues, _fields)) {
+          return
+        }
+
+        return onSubmit(
           formValuesToContact({
             formValues,
             oldContact: contact,
@@ -65,7 +70,7 @@ const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
             t
           })
         )
-      }
+      }}
       render={({ handleSubmit, valid, submitFailed, errors }) => {
         setSubmitContactForm(handleSubmit)
         return (

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

@@ -26,7 +26,7 @@
           "relationship": "Relationship",
           "note": "Notes",
           "label": "Label",
-          "required": "One of these fields must be filled in"
+          "required": "All required fields must be filled in"
         },
         "label": {
           "none": "None",

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

@@ -26,7 +26,7 @@
           "relationship": "Relation",
           "note": "Notes",
           "label": "Libellé",
-          "required": "Un de ces champs doit être renseigné"
+          "required": "Tous les champs requis doivent être renseignés"
         },
         "label": {
           "none": "Aucun",

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

@@ -26,7 +26,7 @@
           "relationship": "Отношение",
           "note": "Заметки",
           "label": "Метка",
-          "required": "Одно из этих полей должно быть заполнено"
+          "required": "Все обязательные поля должны быть заполнены"
         },
         "label": {
           "none": "Нет",

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

@@ -26,7 +26,7 @@
           "relationship": "Mối quan hệ",
           "note": "Ghi chú",
           "label": "Nhãn",
-          "required": "Một trong những trường này phải được điền"
+          "required": "Tất cả các trường bắt buộc phải được điền"
         },
         "label": {
           "none": "Không có",

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
@@ -8,7 +9,6 @@ import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
 import Radio from 'cozy-ui/transpiled/react/Radios'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { locales } from './locales'
 

package/src/Contacts/AddModal/index.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import ContactForm, { getSubmitContactForm } from './ContactForm'
 import { locales } from './locales'

package/src/Contacts/GroupsSelect/GroupCreation.jsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React, { Component } from 'react'
+import { translate } from 'twake-i18n'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import Input from 'cozy-ui/transpiled/react/legacy/Input'
-import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from './styles.styl'
 

package/src/Contacts/GroupsSelect/GroupsSelectProvider.jsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from 'react'
-
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { translatedDefaultSelectedGroup } from './helpers'
 import { locales } from './locales'

package/src/Contacts/GroupsSelect/SelectBox/Control.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { locales } from '../locales'
 

package/src/Contacts/GroupsSelect/useGroupSelect.jsx

@@ -1,7 +1,7 @@
 import get from 'lodash/get'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { useSelectedGroup } from './GroupsSelectProvider'
 import { isExistingGroup } from './helpers'

package/src/Contacts/Header/GroupsSelection.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { ControlDefault } from 'cozy-ui/transpiled/react/SelectBox'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { locales } from './locales'
 import GroupsSelect from '../GroupsSelect/GroupsSelect'

package/src/Contacts/Header/ImportDropdown.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { useClient, generateWebLink } from 'cozy-client'
 import { CONTACTS_DOCTYPE } from 'cozy-client/dist/models/contact'
@@ -10,7 +11,6 @@ import Link from 'cozy-ui/transpiled/react/Link'
 import ActionMenu, {
   ActionMenuItem
 } from 'cozy-ui/transpiled/react/deprecated/ActionMenu'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { locales } from './locales'
 import AppIcon from '../../AppIcon'

package/src/Contacts/Header/index.jsx

@@ -1,12 +1,12 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PersonAddIcon from 'cozy-ui/transpiled/react/Icons/PersonAdd'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import GroupsSelection from './GroupsSelection'
 import ImportDropdown from './ImportDropdown'

package/src/ContactsList/Contacts/ContactIdentity.jsx

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { getInitials } from 'cozy-client/dist/models/contact'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
-import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import ContactName from './ContactName'
 import { locales } from '../locales/withContactsListLocales'

package/src/ContactsList/ContactsList.jsx

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import { useI18n } from 'twake-i18n'
 
 import List from 'cozy-ui/transpiled/react/List'
 import ListSubheader from 'cozy-ui/transpiled/react/ListSubheader'
 import { Table } from 'cozy-ui/transpiled/react/deprecated/Table'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
-import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import ContactRow from './ContactRow'
 import { sortContacts, categorizeContacts, sortHeaders } from './helpers'