cozy-ui-plus 1.1.0

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

@@ -0,0 +1,391 @@
+import get from 'lodash/get'
+
+import {
+  moveToHead,
+  makeItemLabel,
+  makeTypeAndLabel,
+  makeImppValues,
+  makeCustomLabel,
+  makeFields,
+  makeInitialCustomValue
+} from './helpers'
+import { locales } from './locales'
+
+const t = x => get(locales.en, x)
+
+describe('makeCustomLabel', () => {
+  it('should return custom type and supported label', () => {
+    const resForWork = makeCustomLabel('{"type":"someType","label":"work"}', t)
+    expect(resForWork).toBe('someType (pro)')
+
+    const resForHome = makeCustomLabel('{"type":"someType","label":"home"}', t)
+    expect(resForHome).toBe('someType (personal)')
+  })
+
+  it('should return label if no type', () => {
+    const resForWork = makeCustomLabel('{"label":"work"}', t)
+    expect(resForWork).toBe('label.work')
+
+    const resForHome = makeCustomLabel('{"label":"home"}', t)
+    expect(resForHome).toBe('label.home')
+  })
+
+  it('should return only custom type if label is not supported or undefined', () => {
+    const resForNotSupported = makeCustomLabel(
+      '{"type":"someType","label":"someLabel"}',
+      t
+    )
+    expect(resForNotSupported).toBe('someType')
+
+    const resForUndefined = makeCustomLabel('{"type":"someType"}', t)
+    expect(resForUndefined).toBe('someType')
+  })
+})
+
+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('makeImppValues', () => {
+  it('should replace only uri for {label: "work", protocol: "matrix"}', () => {
+    const res = makeImppValues(
+      {
+        impp: [
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'home',
+            primary: false
+          },
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'work',
+            primary: false
+          },
+          {
+            uri: 'john@doe.matrix.net',
+            protocol: 'matrix',
+            label: 'work',
+            primary: true
+          },
+          {
+            uri: 'john@doe.matrix.home',
+            protocol: 'matrix',
+            label: 'home'
+          }
+        ]
+      },
+      'newMatrixURI'
+    )
+
+    expect(res).toStrictEqual([
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'home',
+        primary: false
+      },
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'work',
+        primary: false
+      },
+      {
+        uri: 'newMatrixURI',
+        protocol: 'matrix',
+        label: 'work',
+        primary: true
+      },
+      {
+        uri: 'john@doe.matrix.home',
+        protocol: 'matrix',
+        label: 'home'
+      }
+    ])
+  })
+
+  it('should remove correctly', () => {
+    const res = makeImppValues(
+      {
+        impp: [
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'home',
+            primary: false
+          },
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'work',
+            primary: false
+          },
+          {
+            uri: 'john@doe.matrix.net',
+            protocol: 'matrix',
+            label: 'work',
+            primary: true
+          },
+          {
+            uri: 'john@doe.matrix.home',
+            protocol: 'matrix',
+            label: 'home'
+          }
+        ]
+      },
+      ''
+    )
+
+    expect(res).toStrictEqual([
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'home',
+        primary: false
+      },
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'work',
+        primary: false
+      },
+      {
+        uri: 'john@doe.matrix.home',
+        protocol: 'matrix',
+        label: 'home'
+      }
+    ])
+  })
+
+  it('should add the matrix impp values for the first time if no impp attribute', () => {
+    const expected = [
+      {
+        uri: 'newMatrixURI',
+        protocol: 'matrix',
+        label: 'work',
+        primary: true
+      }
+    ]
+
+    expect(makeImppValues({ impp: undefined }, 'newMatrixURI')).toStrictEqual(
+      expected
+    )
+
+    expect(makeImppValues({ impp: [] }, 'newMatrixURI')).toStrictEqual(expected)
+  })
+
+  it('should not add empty object if value is empty', () => {
+    expect(makeImppValues({ impp: undefined }, '')).toStrictEqual([])
+
+    expect(makeImppValues({ impp: [] }, '')).toStrictEqual([])
+  })
+})
+
+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"}')
+    })
+  })
+})
+
+describe('makeFields', () => {
+  it('should return custom fields at custom position', () => {
+    const customFields = [
+      { name: 'middlename', position: 1 },
+      { name: 'birthday', position: 3 }
+    ]
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'firstname' },
+      { name: 'middlename', position: 1 },
+      { name: 'lastname' },
+      { name: 'birthday', position: 3 }
+    ])
+  })
+
+  it('should ignore custom fields without position value', () => {
+    const customFields = [
+      { name: 'middlename', position: 1 },
+      { name: 'field-with-no-position' }
+    ]
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = makeFields(customFields, defaultFields)
+
+    expect(res).toStrictEqual([
+      { name: 'firstname' },
+      { name: 'middlename', position: 1 },
+      { name: 'lastname' }
+    ])
+  })
+
+  it('should not mutate the original arrays', () => {
+    const customFields = [
+      { name: 'middlename', position: 1 },
+      { name: 'field-with-no-position' },
+      { name: 'birthday', position: 3 }
+    ]
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    makeFields(customFields, defaultFields)
+
+    expect(defaultFields).toStrictEqual([
+      { name: 'firstname' },
+      { name: 'lastname' }
+    ])
+
+    expect(customFields).toStrictEqual([
+      { name: 'middlename', position: 1 },
+      { name: 'field-with-no-position' },
+      { name: 'birthday', position: 3 }
+    ])
+  })
+
+  it('should handle undefined custom fields', () => {
+    const defaultFields = [{ name: 'firstname' }, { name: 'lastname' }]
+
+    const res = makeFields(undefined, defaultFields)
+
+    expect(res).toStrictEqual(defaultFields)
+  })
+})

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

@@ -0,0 +1,138 @@
+import arrayMutators from 'final-form-arrays'
+import React, { useState } from 'react'
+import { Form } from 'react-final-form'
+
+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 { locales } from './locales'
+// 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 {{ data: Array<object> }} params.contacts
+ * @param {import('cozy-client/types/types').IOCozyContact} params.contact
+ * @param {Object} params.customFieldsProps
+ * @param {func} params.onSubmit
+ * @returns
+ */
+const ContactForm = ({ contacts, contact, customFieldsProps, onSubmit }) => {
+  const [showSecondaryFields, setShowSecondaryFields] = useState(false)
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { fields, makeCustomFieldsFormValues, makeCustomContactValues } =
+    customFieldsProps
+
+  const _fields = makeFields(fields, defaultFields)
+  const hasSecondaryFields = _fields.some(el => el.isSecondary)
+
+  return (
+    <Form
+      mutators={{ ...arrayMutators }}
+      initialValues={contactToFormValues({
+        contact,
+        makeCustomContactValues,
+        t
+      })}
+      validate={values => validateFields(values, t)}
+      onSubmit={formValues =>
+        onSubmit(
+          formValuesToContact({
+            formValues,
+            oldContact: contact,
+            makeCustomFieldsFormValues,
+            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}
+                showSecondaryFields={showSecondaryFields}
+                formProps={{
+                  valid,
+                  submitFailed,
+                  errors
+                }}
+              />
+            ))}
+            {hasSecondaryFields && !showSecondaryFields && (
+              <div>
+                <Button
+                  className="u-db u-ml-2 u-mt-1"
+                  variant="text"
+                  label={t('Contacts.AddModal.ContactForm.other-fields')}
+                  onClick={() => setShowSecondaryFields(true)}
+                />
+              </div>
+            )}
+          </form>
+        )
+      }}
+    />
+  )
+}
+
+ContactForm.defaultProps = {
+  customFieldsProps: {}
+}
+
+// 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)