cozy-ui 128.2.0 → 128.3.1

package/react/Contacts/AddModal/ContactForm/HasValueCondition.spec.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Form } from 'react-final-form'
+import renderer from 'react-test-renderer'
+
+import HasValueCondition from './HasValueCondition'
+
+describe('HasValueCondition component', () => {
+  it('should render its children if value is truthy', () => {
+    const jsx = (
+      <Form
+        initialValues={{ foo: 'anything' }}
+        onSubmit={jest.fn()}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <HasValueCondition name="foo">
+              <span>Foo should be here</span>
+            </HasValueCondition>
+          </form>
+        )}
+      />
+    )
+    const tree = renderer.create(jsx).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should not render its children if value is falsy', () => {
+    const jsx = (
+      <Form
+        initialValues={{ foo: '' }}
+        onSubmit={jest.fn()}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <HasValueCondition name="foo">
+              <span>Foo should not be here</span>
+            </HasValueCondition>
+          </form>
+        )}
+      />
+    )
+    const tree = renderer.create(jsx).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should render its children if value is falsy but other condition is fulfilled', () => {
+    const jsx = (
+      <Form
+        initialValues={{ foo: '' }}
+        onSubmit={jest.fn()}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <HasValueCondition name="foo" otherCondition={true}>
+              <span>Foo should be here</span>
+            </HasValueCondition>
+          </form>
+        )}
+      />
+    )
+    const tree = renderer.create(jsx).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should not render its children if value is falsy and other condition is not fulfilled', () => {
+    const jsx = (
+      <Form
+        initialValues={{ foo: '' }}
+        onSubmit={jest.fn()}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <HasValueCondition name="foo" otherCondition={false}>
+              <span>Foo should not be here</span>
+            </HasValueCondition>
+          </form>
+        )}
+      />
+    )
+    const tree = renderer.create(jsx).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useForm } from 'react-final-form'
+
+import { makeDisplayName } from 'cozy-client/dist/models/contact'
+
+import ContactsListModal from '../../../ContactsListModal'
+
+export const RelatedContactList = ({ name, onClose, contacts }) => {
+  const { change } = useForm()
+
+  /**
+   * @param {import('cozy-client/types/types').IOCozyContact} contact
+   */
+  const onClickContactsListModal = contact => {
+    // Use `makeDisplayName` because if the contact is newly created, it has no `displayName` attribute. (Creation of a contact when selecting a linked contact)
+    change(name, makeDisplayName(contact))
+    change(`${name}Id`, contact._id)
+    onClose()
+  }
+
+  return (
+    <ContactsListModal
+      dismissAction={onClose}
+      onItemClick={contact => onClickContactsListModal(contact)}
+      contacts={contacts}
+    />
+  )
+}
+
+RelatedContactList.propTypes = {
+  name: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  contacts: PropTypes.shape({
+    data: PropTypes.arrayOf(PropTypes.object)
+  }).isRequired
+}

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

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+import TextFieldSelect from './TextFieldSelect'
+import { makeCustomLabel, makeInitialCustomValue } from './helpers'
+import { locales } from './locales'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+import CustomLabelDialog from '../CustomLabelDialog'
+import { FieldInputWrapperPropTypes } from '../types'
+
+const TextFieldCustomLabelSelect = ({
+  name,
+  value,
+  options,
+  customLabelOptions,
+  onChange,
+  ...props
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [openModal, setOpenModal] = useState(false)
+  const [customValue, setCustomValue] = useState(() =>
+    makeInitialCustomValue(name, value)
+  )
+
+  const customOption = customValue
+    ? [
+        {
+          value: customValue,
+          label: makeCustomLabel(customValue, t),
+          translated: true,
+          onClick: () => {
+            // trigger modal only if customValue is already selected
+            if (value === customValue) {
+              return setOpenModal(true)
+            }
+          }
+        }
+      ]
+    : [
+        {
+          value: 'skip',
+          label: 'Contacts.AddModal.ContactForm.label.custom',
+          onClick: () => setOpenModal(true)
+        }
+      ]
+  const _options = options.concat(customOption)
+
+  return (
+    <>
+      <TextFieldSelect
+        {...props}
+        name={name}
+        value={value}
+        options={_options}
+        onChange={ev => {
+          if (ev.target.value === 'skip') {
+            return
+          }
+
+          onChange(ev)
+        }}
+      />
+      {openModal && (
+        <CustomLabelDialog
+          customValue={customValue}
+          customLabelOptions={customLabelOptions}
+          setCustomValue={setCustomValue}
+          onSubmit={onChange}
+          onClose={() => setOpenModal(false)}
+        />
+      )}
+    </>
+  )
+}
+
+TextFieldCustomLabelSelect.prototype = FieldInputWrapperPropTypes
+
+export default TextFieldCustomLabelSelect

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

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { locales } from './locales'
+import MenuItem from '../../../MenuItem'
+import TextField from '../../../TextField'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+import { FieldInputWrapperPropTypes } from '../types'
+
+const TextFieldSelect = ({ options, ...props }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  const _options = [
+    ...options.map(option => ({
+      ...option,
+      label: option.translated ? option.label : t(option.label)
+    }))
+  ]
+
+  return (
+    <TextField {...props}>
+      {_options.map((option, index) => {
+        return (
+          <MenuItem
+            key={`${props.name}-${index}`}
+            value={option.value}
+            onClick={option.onClick}
+          >
+            {option.label}
+          </MenuItem>
+        )
+      })}
+    </TextField>
+  )
+}
+
+TextFieldSelect.prototype = FieldInputWrapperPropTypes
+
+export default TextFieldSelect

package/react/Contacts/AddModal/ContactForm/__snapshots__/HasValueCondition.spec.jsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HasValueCondition component should not render its children if value is falsy 1`] = `
+<form
+  onSubmit={[Function]}
+/>
+`;
+
+exports[`HasValueCondition component should not render its children if value is falsy and other condition is not fulfilled 1`] = `
+<form
+  onSubmit={[Function]}
+/>
+`;
+
+exports[`HasValueCondition component should render its children if value is falsy but other condition is fulfilled 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <span>
+    Foo should be here
+  </span>
+</form>
+`;
+
+exports[`HasValueCondition component should render its children if value is truthy 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <span>
+    Foo should be here
+  </span>
+</form>
+`;

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

@@ -0,0 +1,99 @@
+import uniqueId from 'lodash/uniqueId'
+
+import { getFormattedAddress } from 'cozy-client/dist/models/contact'
+
+import { fields } from './fieldsConfig'
+import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from './helpers'
+
+const contactToFormValues = (contact, t) => {
+  // initialize the form values, required so that array fields start with at least one editable field
+  const initialFieldValues = fields.reduce(
+    (initialValues, { name, isArray }) => {
+      initialValues[name] = isArray ? [undefined] : undefined
+      return initialValues
+    },
+    {}
+  )
+
+  if (contact) {
+    const {
+      gender,
+      address,
+      birthday,
+      birthplace,
+      company,
+      jobTitle,
+      cozy,
+      email,
+      name,
+      note,
+      phone
+    } = contact
+
+    const addressValue =
+      address && address.length > 0
+        ? movePrimaryToHead(address).map(addressInfo => ({
+            fieldId: uniqueId('fieldId_'),
+            address: getFormattedAddress(addressInfo, t),
+            addressnumber: addressInfo.number,
+            addressstreet:
+              addressInfo.street || getFormattedAddress(addressInfo, t),
+            addresscode: addressInfo.postcode || addressInfo.code,
+            addresscity: addressInfo.city,
+            addressregion: addressInfo.region,
+            addresscountry: addressInfo.country,
+            addresslocality: addressInfo.extendedAddress?.locality,
+            addressbuilding: addressInfo.extendedAddress?.building,
+            addressstairs: addressInfo.extendedAddress?.stairs,
+            addressfloor: addressInfo.extendedAddress?.floor,
+            addressapartment: addressInfo.extendedAddress?.apartment,
+            addressentrycode: addressInfo.extendedAddress?.entrycode,
+            addressLabel: makeItemLabel(addressInfo)
+          }))
+        : [undefined]
+    const cozyValue = cozy && cozy.length > 0 ? cozy[0].url : undefined
+    const cozyLabel =
+      cozy && cozy.length > 0 ? makeItemLabel(cozy[0]) : undefined
+    const emailValue =
+      email && email.length > 0
+        ? movePrimaryToHead(email).map(item => ({
+            fieldId: uniqueId('fieldId_'),
+            email: item?.address,
+            emailLabel: makeItemLabel(item)
+          }))
+        : [undefined]
+    const phoneValue =
+      phone && phone.length > 0
+        ? movePrimaryToHead(phone).map(item => ({
+            fieldId: uniqueId('fieldId_'),
+            phone: item?.number,
+            phoneLabel: makeItemLabel(item)
+          }))
+        : [undefined]
+
+    const relatedContactValue = makeRelatedContact(contact)
+
+    return {
+      gender,
+      givenName: name?.givenName,
+      additionalName: name?.additionalName,
+      surname: name?.surname,
+      familyName: name?.familyName,
+      phone: phoneValue,
+      email: emailValue,
+      address: addressValue,
+      cozy: cozyValue,
+      cozyLabel: cozyLabel,
+      company,
+      jobTitle,
+      birthday,
+      birthplace,
+      note,
+      relatedContact: relatedContactValue
+    }
+  }
+
+  return initialFieldValues
+}
+
+export default contactToFormValues

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

@@ -0,0 +1,128 @@
+/* eslint-disable jest/no-focused-tests */
+import contactToFormValues from './contactToFormValues'
+import { johnDoeContact, johnDoeFormValues } from '../mocks'
+
+describe('contactToFormValues function', () => {
+  const tSpy = jest.fn()
+
+  it('should return default initial values', () => {
+    const expected = {
+      address: [undefined],
+      birthday: undefined,
+      birthplace: undefined,
+      gender: undefined,
+      company: undefined,
+      jobTitle: undefined,
+      cozy: undefined,
+      cozyLabel: undefined,
+      email: [undefined],
+      familyName: undefined,
+      givenName: undefined,
+      note: undefined,
+      phone: [undefined],
+      relatedContact: [undefined]
+    }
+
+    const result = contactToFormValues(null, tSpy)
+    expect(result).toEqual(expected)
+  })
+
+  it('should return initial values when a contact is given (edit)', () => {
+    const expected = { ...johnDoeFormValues, relatedContact: [undefined] }
+    tSpy.mockReturnValue(
+      '426 Runolfsson Knolls 84573 Port Easter Cocos (Keeling) Islands'
+    )
+
+    const result = contactToFormValues(johnDoeContact, tSpy)
+    expect(result).toEqual(expected)
+    expect(tSpy).toHaveBeenCalledWith('formatted.address', {
+      street: '426 Runolfsson Knolls',
+      code: '84573',
+      number: '',
+      city: 'Port Easter',
+      region: '',
+      country: 'Cocos (Keeling) Islands'
+    })
+  })
+
+  it('should return initial values when a contact with missing fields is given', () => {
+    const contact = {
+      id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+      _id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+      _type: 'io.cozy.contacts',
+      _rev: '1-19c313536e8b27473aa26bf105b03269',
+      address: [],
+      birthday: undefined,
+      birthplace: 'somewhere',
+      gender: 'female',
+      company: undefined,
+      jobTitle: undefined,
+      cozy: undefined,
+      email: undefined,
+      name: {
+        givenName: 'Jane',
+        familyName: 'Doe'
+      },
+      note: undefined,
+      phone: []
+    }
+    const expected = {
+      address: [undefined],
+      birthday: undefined,
+      birthplace: 'somewhere',
+      gender: 'female',
+      company: undefined,
+      jobTitle: undefined,
+      cozy: undefined,
+      cozyLabel: undefined,
+      email: [undefined],
+      givenName: 'Jane',
+      familyName: 'Doe',
+      note: undefined,
+      phone: [undefined],
+      relatedContact: [undefined]
+    }
+
+    const result = contactToFormValues(contact, tSpy)
+    expect(result).toEqual(expected)
+  })
+
+  it('should not crash if name is undefined (contacts created via sharing)', () => {
+    const contact = {
+      id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+      _id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+      _type: 'io.cozy.contacts',
+      _rev: '1-19c313536e8b27473aa26bf105b03269',
+      address: [],
+      birthday: undefined,
+      birthplace: '',
+      gender: '',
+      company: undefined,
+      jobTitle: undefined,
+      cozy: undefined,
+      email: undefined,
+      name: undefined,
+      note: 'Eligendi velit eos ab libero molestiae consequatur autem sed.',
+      phone: []
+    }
+    const expected = {
+      address: [undefined],
+      birthday: undefined,
+      birthplace: '',
+      gender: '',
+      company: undefined,
+      jobTitle: undefined,
+      cozy: undefined,
+      cozyLabel: undefined,
+      email: [undefined],
+      givenName: undefined,
+      familyName: undefined,
+      note: 'Eligendi velit eos ab libero molestiae consequatur autem sed.',
+      phone: [undefined],
+      relatedContact: [undefined]
+    }
+
+    const result = contactToFormValues(contact, tSpy)
+    expect(result).toEqual(expected)
+  })
+})