cozy-ui-plus 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.1.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@4.0.0...cozy-ui-plus@4.1.0) (2025-12-10)
+
+### Features
+
+- **ui-plus:** Add possibility to overrides fields in Contacts AddModal ([7224485](https://github.com/cozy/cozy-libs/commit/72244856a99c879d54b1317e402a095afcb8b3f6))
+- **ui-plus:** Change required logic for Contacts AddModal ([cdd5650](https://github.com/cozy/cozy-libs/commit/cdd565070ddb98a515c63ee9f2026b4e2fa1532d))
+- **ui-plus:** Contacts AddModal form input values are now overridable ([50e7502](https://github.com/cozy/cozy-libs/commit/50e7502e5143e0479941c8aeabe67e90796a735c))
+
 # [4.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@3.1.2...cozy-ui-plus@4.0.0) (2025-12-04)
 
 ### Features

package/dist/Contacts/AddModal/ContactForm/FieldInput.js

@@ -56,8 +56,7 @@ var FieldInput = function FieldInput(_ref) {
       error = _ref.error,
       helperText = _ref.helperText,
       label = _ref.label,
-      isInvisible = _ref.isInvisible,
-      required = _ref.required;
+      isInvisible = _ref.isInvisible;
 
   var _useState = (0, _react.useState)((0, _uniqueId.default)('field_')),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
@@ -104,7 +103,6 @@ var FieldInput = function FieldInput(_ref) {
       'u-dn': isInvisible
     })
   }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
-    required: required,
     error: error,
     helperText: helperText,
     label: label,
@@ -153,12 +151,10 @@ FieldInput.propTypes = {
   }),
   // Destructuring props
   id: _propTypes.default.string,
-  label: _propTypes.default.string,
-  required: _propTypes.default.bool
+  label: _propTypes.default.string
 };
 FieldInput.defaultProps = {
-  labelProps: null,
-  required: false
+  labelProps: null
 };
 var _default = FieldInput;
 exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/FieldInputArray.js

@@ -43,15 +43,13 @@ var FieldInputArray = function FieldInputArray(_ref) {
       label = _ref$attributes.label,
       restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
       contacts = _ref.contacts,
-      _ref$formProps = _ref.formProps,
-      valid = _ref$formProps.valid,
-      submitFailed = _ref$formProps.submitFailed,
-      errors = _ref$formProps.errors;
+      formProps = _ref.formProps;
   (0, _twakeI18n.useExtendI18n)(_locales.locales);
 
   var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
+  var errors = formProps.errors;
   return /*#__PURE__*/_react.default.createElement(_reactFinalFormArrays.FieldArray, {
     name: name
   }, function (_ref2) {
@@ -62,7 +60,7 @@ var FieldInputArray = function FieldInputArray(_ref) {
       var key = ((_fields$value$index = fields.value[index]) === null || _fields$value$index === void 0 ? void 0 : _fields$value$index.fieldId) || nameWithIndex;
       var showRemove = (_fields$value$index2 = fields.value[index]) === null || _fields$value$index2 === void 0 ? void 0 : _fields$value$index2[name];
       var inputName = "".concat(nameWithIndex, ".").concat(name);
-      var isError = _helpers.fieldsRequired.includes(inputName) && !valid && submitFailed;
+      var isError = (0, _helpers.makeIsRequiredError)(restAttributes.required, formProps);
       return /*#__PURE__*/_react.default.createElement("div", {
         key: key,
         className: (0, _classnames.default)('u-flex u-flex-items-baseline', {

package/dist/Contacts/AddModal/ContactForm/FieldInputLayout.js

@@ -46,13 +46,11 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
   var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
-  var valid = formProps.valid,
-      submitFailed = formProps.submitFailed,
-      errors = formProps.errors;
+  var errors = formProps.errors;
   var name = attributes.name,
       label = attributes.label,
       restAttributes = (0, _objectWithoutProperties2.default)(attributes, _excluded2);
-  var isError = _helpers.fieldsRequired.includes(name) && !valid && submitFailed;
+  var isError = (0, _helpers.makeIsRequiredError)(restAttributes.required, formProps);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('u-mt-1', {
       'u-flex-items-center': !layout,

package/dist/Contacts/AddModal/ContactForm/FieldInputWrapper.js

@@ -35,7 +35,7 @@ var FieldInputWrapper = function FieldInputWrapper(_ref) {
       fullWidth = _ref.fullWidth,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
   var Component = component || (restAttributes.customLabelOptions ? _TextFieldCustomLabelSelect.default : restAttributes !== null && restAttributes !== void 0 && restAttributes.select ? _TextFieldSelect.default : _TextField.default);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, restAttributes, input, props, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, input, restAttributes, props, {
     variant: variant,
     fullWidth: fullWidth,
     minRows: "2"

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

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateFields = exports.removeRelatedContactRelationships = exports.removeField = exports.removeAsscociatedData = exports.moveToHead = exports.movePrimaryToHead = exports.makeTypeAndLabel = exports.makeRelatedContact = exports.makeItemLabel = exports.makeInitialCustomValue = exports.makeImppValues = exports.makeFields = exports.makeCustomLabel = exports.hasExtendedAddress = exports.getRelatedContactRelationships = exports.fieldsRequired = exports.createAddress = exports.addField = void 0;
+exports.validateFields = exports.removeRelatedContactRelationships = exports.removeField = exports.removeAsscociatedData = exports.moveToHead = exports.movePrimaryToHead = exports.makeTypeAndLabel = exports.makeRelatedContact = exports.makeItemLabel = exports.makeIsRequiredError = exports.makeInitialCustomValue = exports.makeImppValues = exports.makeFields = exports.makeCustomLabel = exports.hasNoValues = exports.hasExtendedAddress = exports.getRelatedContactRelationships = exports.getFirstValueIfArray = exports.createAddress = exports.addField = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -35,27 +35,69 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var fieldsRequired = ['givenName', 'familyName', 'email[0].email', 'cozy'];
+var getFirstValueIfArray = function getFirstValueIfArray(values) {
+  return Object.keys(values).reduce(function (acc, key) {
+    var 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
+ */
+
+
+exports.getFirstValueIfArray = getFirstValueIfArray;
+
+var hasNoValues = function hasNoValues(values, fields) {
+  var _values = getFirstValueIfArray(values);
+
+  return fields.every(function (field) {
+    return !(0, _get.default)(_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
+ */
+
+
+exports.hasNoValues = hasNoValues;
+
+var makeIsRequiredError = function makeIsRequiredError(required, formProps) {
+  var valid = formProps.valid,
+      submitFailed = formProps.submitFailed;
+  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
  */
 
-exports.fieldsRequired = fieldsRequired;
 
-var validateFields = function validateFields(values, t) {
+exports.makeIsRequiredError = makeIsRequiredError;
+
+var validateFields = function validateFields(values, fields, t) {
   var errors = {};
+  var fieldsRequired = fields.filter(function (field) {
+    return field.required;
+  });
 
-  if (fieldsRequired.every(function (field) {
-    return !(0, _get.default)(values, field);
-  })) {
-    fieldsRequired.forEach(function (field) {
-      errors[field] = t('Contacts.AddModal.ContactForm.fields.required');
-    });
-  }
+  var _values = getFirstValueIfArray(values);
 
+  fieldsRequired.forEach(function (field) {
+    if (!(0, _get.default)(_values, field.name)) {
+      errors[field.name] = field.layout === 'array' ? [(0, _defineProperty2.default)({}, field.name, t('Contacts.AddModal.ContactForm.fields.required'))] : t('Contacts.AddModal.ContactForm.fields.required');
+    }
+  });
   return errors;
 };
 /**
@@ -130,10 +172,10 @@ var movePrimaryToHead = moveToHead(function (v) {
 });
 exports.movePrimaryToHead = movePrimaryToHead;
 
-var createAddress = function createAddress(_ref) {
-  var address = _ref.address,
-      oldContact = _ref.oldContact,
-      t = _ref.t;
+var createAddress = function createAddress(_ref2) {
+  var address = _ref2.address,
+      oldContact = _ref2.oldContact,
+      t = _ref2.t;
   return address ? address.filter(function (val) {
     return val && val.address;
   }).map(function (addressField, index) {
@@ -149,9 +191,9 @@ var createAddress = function createAddress(_ref) {
     if (addressHasBeenModified) {
       // Use "code" instead "postcode", to be vcard 4.0 rfc 6350 compliant
       // eslint-disable-next-line no-unused-vars
-      var _ref2 = oldContactAddress || {},
-          postcode = _ref2.postcode,
-          oldContactAddressCleaned = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      var _ref3 = oldContactAddress || {},
+          postcode = _ref3.postcode,
+          oldContactAddressCleaned = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
 
       return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldContactAddressCleaned), {}, {
         formattedAddress: addressField.address,
@@ -229,10 +271,10 @@ exports.getRelatedContactRelationships = getRelatedContactRelationships;
 var removeRelatedContactRelationships = function removeRelatedContactRelationships(contact) {
   if (!(contact !== null && contact !== void 0 && contact.relationships)) return contact;
   var updatedContact = (0, _merge.default)({}, contact);
-  var relationshipsWithoutRelatedContact = Object.entries(updatedContact.relationships).reduce(function (acc, _ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-        relName = _ref4[0],
-        relValue = _ref4[1];
+  var relationshipsWithoutRelatedContact = Object.entries(updatedContact.relationships).reduce(function (acc, _ref4) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        relName = _ref5[0],
+        relValue = _ref5[1];
 
     if ('related' === relName) {
       acc[relName] = relValue;
@@ -257,10 +299,10 @@ exports.removeRelatedContactRelationships = removeRelatedContactRelationships;
 
 var removeAsscociatedData = function removeAsscociatedData(contact) {
   if (!contact) return {};
-  return Object.entries(contact).reduce(function (cleanedContact, _ref5) {
-    var _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
-        key = _ref6[0],
-        value = _ref6[1];
+  return Object.entries(contact).reduce(function (cleanedContact, _ref6) {
+    var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
+        key = _ref7[0],
+        value = _ref7[1];
 
     // Add `groups` condition to keep the old implementation functional, see below
     if (!(value instanceof _cozyClient.Association) || key === 'groups') {
@@ -456,9 +498,24 @@ var makeFields = function makeFields(customFields, defaultFields) {
   }
 
   var fields = (0, _toConsumableArray2.default)(defaultFields);
-  customFields.map(function (customField) {
-    if (customField.position) {
-      fields.splice(customField.position, 0, customField);
+  customFields.forEach(function (customField) {
+    var defaultField = fields.find(function (field) {
+      return field.name === customField.name;
+    });
+
+    var _field = defaultField || customField;
+
+    if (defaultField) {
+      Object.assign(_field, customField);
+    }
+
+    if (_field.position) {
+      if (defaultField) {
+        var fieldIndex = fields.indexOf(defaultField);
+        fields.splice(fieldIndex, 1);
+      }
+
+      fields.splice(_field.position, 0, _field);
     }
   });
   return fields;

package/dist/Contacts/AddModal/ContactForm/index.js

@@ -104,9 +104,14 @@ var ContactForm = function ContactForm(_ref) {
       t: t
     }),
     validate: function validate(values) {
-      return (0, _helpers.validateFields)(values, t);
+      return (0, _helpers.validateFields)(values, _fields, t);
     },
     onSubmit: function onSubmit(formValues) {
+      // avoid creating an empty contact
+      if ((0, _helpers.hasNoValues)(formValues, _fields)) {
+        return;
+      }
+
       return _onSubmit((0, _formValuesToContact.default)({
         formValues: formValues,
         oldContact: contact,

package/dist/Contacts/AddModal/ContactForm/locales/index.js

@@ -32,7 +32,7 @@ var en = {
           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",
@@ -107,7 +107,7 @@ var fr = {
           relationship: "Relation",
           note: "Notes",
           label: "Libell\xE9",
-          required: "Un de ces champs doit \xEAtre renseign\xE9"
+          required: "Tous les champs requis doivent \xEAtre renseign\xE9s"
         },
         label: {
           none: "Aucun",
@@ -182,7 +182,7 @@ var ru = {
           relationship: "\u041E\u0442\u043D\u043E\u0448\u0435\u043D\u0438\u0435",
           note: "\u0417\u0430\u043C\u0435\u0442\u043A\u0438",
           label: "\u041C\u0435\u0442\u043A\u0430",
-          required: "\u041E\u0434\u043D\u043E \u0438\u0437 \u044D\u0442\u0438\u0445 \u043F\u043E\u043B\u0435\u0439 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0437\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u043E"
+          required: "\u0412\u0441\u0435 \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u043F\u043E\u043B\u044F \u0434\u043E\u043B\u0436\u043D\u044B \u0431\u044B\u0442\u044C \u0437\u0430\u043F\u043E\u043B\u043D\u0435\u043D\u044B"
         },
         label: {
           none: "\u041D\u0435\u0442",
@@ -257,7 +257,7 @@ var vi = {
           relationship: "M\u1ED1i quan h\u1EC7",
           note: "Ghi ch\xFA",
           label: "Nh\xE3n",
-          required: "M\u1ED9t trong nh\u1EEFng tr\u01B0\u1EDDng n\xE0y ph\u1EA3i \u0111\u01B0\u1EE3c \u0111i\u1EC1n"
+          required: "T\u1EA5t c\u1EA3 c\xE1c tr\u01B0\u1EDDng b\u1EAFt bu\u1ED9c ph\u1EA3i \u0111\u01B0\u1EE3c \u0111i\u1EC1n"
         },
         label: {
           none: "Kh\xF4ng c\xF3",

package/dist/src/Contacts/AddModal/ContactForm/FieldInput.d.ts

@@ -1,5 +1,5 @@
 export default FieldInput;
-declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, isInvisible, required }: {
+declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, isInvisible }: {
     name: any;
     labelProps: any;
     className: any;
@@ -12,7 +12,6 @@ declare function FieldInput({ name, labelProps, className, attributes: { subFiel
     helperText: any;
     label: any;
     isInvisible: any;
-    required: any;
 }): JSX.Element;
 declare namespace FieldInput {
     namespace propTypes {
@@ -26,12 +25,9 @@ declare namespace FieldInput {
         }>>;
         export let id: PropTypes.Requireable<string>;
         export let label: PropTypes.Requireable<string>;
-        export let required: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
-        export let labelProps: any;
-        let required_1: boolean;
-        export { required_1 as required };
+        let labelProps: any;
     }
 }
 import PropTypes from 'prop-types';

package/dist/src/Contacts/AddModal/ContactForm/FieldInputArray.d.ts

@@ -1,14 +1,10 @@
 export default FieldInputArray;
-declare function FieldInputArray({ attributes: { name, label, ...restAttributes }, contacts, formProps: { valid, submitFailed, errors } }: {
+declare function FieldInputArray({ attributes: { name, label, ...restAttributes }, contacts, formProps }: {
     attributes: {
         [x: string]: any;
         name: any;
         label: any;
     };
     contacts: any;
-    formProps: {
-        valid: any;
-        submitFailed: any;
-        errors: any;
-    };
+    formProps: any;
 }): JSX.Element;

package/dist/src/Contacts/AddModal/ContactForm/helpers.d.ts

@@ -1,5 +1,7 @@
-export const fieldsRequired: string[];
-export function validateFields(values: object, t: func): object;
+export function getFirstValueIfArray(values: any): {};
+export function hasNoValues(values: object, fields: import("../types").Field[]): boolean;
+export function makeIsRequiredError(required: boolean, formProps: object): boolean;
+export function validateFields(values: object, fields: import("../types").Field[], t: Function): object;
 export function makeItemLabel(item?: object): string;
 export function makeTypeAndLabel(itemLabel?: string): {
     type?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -74,5 +74,5 @@
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "b1d504a12eb88b8ecda4a53f82c400482d79452b"
+  "gitHead": "463474b57578fbca2e4fa04165e94abb82627d03"
 }

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

@@ -22,8 +22,7 @@ const FieldInput = ({
   error,
   helperText,
   label,
-  isInvisible,
-  required
+  isInvisible
 }) => {
   const [id] = useState(uniqueId('field_')) // state only use to generate id once and not at each render
   const [hasBeenFocused, setHasBeenFocused] = useState(false)
@@ -57,7 +56,6 @@ const FieldInput = ({
       )}
     >
       <Field
-        required={required}
         error={error}
         helperText={helperText}
         label={label}
@@ -111,13 +109,11 @@ FieldInput.propTypes = {
   }),
   // Destructuring props
   id: PropTypes.string,
-  label: PropTypes.string,
-  required: PropTypes.bool
+  label: PropTypes.string
 }
 
 FieldInput.defaultProps = {
-  labelProps: null,
-  required: false
+  labelProps: null
 }
 
 export default FieldInput

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

@@ -11,16 +11,17 @@ import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 
 import FieldInput from './FieldInput'
-import { fieldsRequired, addField, removeField } from './helpers'
+import { addField, removeField, makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputArray = ({
   attributes: { name, label, ...restAttributes },
   contacts,
-  formProps: { valid, submitFailed, errors }
+  formProps
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
+  const { errors } = formProps
 
   return (
     <FieldArray name={name}>
@@ -31,8 +32,10 @@ const FieldInputArray = ({
               const key = fields.value[index]?.fieldId || nameWithIndex
               const showRemove = fields.value[index]?.[name]
               const inputName = `${nameWithIndex}.${name}`
-              const isError =
-                fieldsRequired.includes(inputName) && !valid && submitFailed
+              const isError = makeIsRequiredError(
+                restAttributes.required,
+                formProps
+              )
 
               return (
                 <div

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

@@ -8,7 +8,7 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import FieldInput from './FieldInput'
 import FieldInputAccordion from './FieldInputAccordion'
 import FieldInputArray from './FieldInputArray'
-import { fieldsRequired } from './helpers'
+import { makeIsRequiredError } from './helpers'
 import { locales } from './locales'
 
 const FieldInputLayout = ({
@@ -19,10 +19,10 @@ const FieldInputLayout = ({
 }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
-  const { valid, submitFailed, errors } = formProps
+  const { errors } = formProps
   const { name, label, ...restAttributes } = attributes
 
-  const isError = fieldsRequired.includes(name) && !valid && submitFailed
+  const isError = makeIsRequiredError(restAttributes.required, formProps)
 
   return (
     <div

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

@@ -25,8 +25,8 @@ const FieldInputWrapper = ({
 
   return (
     <Component
-      {...restAttributes}
       {...input}
+      {...restAttributes}
       {...props}
       variant={variant}
       fullWidth={fullWidth}

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

@@ -10,7 +10,7 @@ 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ó",