cozy-ui 128.2.0 → 128.3.0

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

@@ -0,0 +1,289 @@
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import React from 'react'
+
+import ContactForm, { isSameContactProp } from './index'
+import DemoProvider from '../../../providers/DemoProvider'
+import { johnDoeContact as contact } from '../mocks'
+
+const dictRequire = lang => require(`../ContactAddressDialog/locales/${lang}`)
+
+const setup = ({ contact }) => {
+  return {
+    contact,
+    onSubmit: () => jest.fn(),
+    onCancel: () => jest.fn()
+  }
+}
+
+const labels = [
+  'Firstname',
+  'Lastname',
+  'Phone',
+  'Email',
+  'Address',
+  'Twake URL',
+  'Company',
+  'Job title',
+  'Birthday',
+  'Notes'
+]
+
+describe('ContactForm', () => {
+  it(`should contains ${labels.length} fields and labels`, () => {
+    const props = setup({ contact: {} })
+    const jsx = (
+      <DemoProvider>
+        <ContactForm {...props} />
+      </DemoProvider>
+    )
+    render(jsx)
+    for (const label of labels) {
+      expect(screen.queryByLabelText(label)).not.toBeNull()
+    }
+  })
+
+  it('should fill form with contact data', () => {
+    const props = setup({ contact })
+    const jsx = (
+      <DemoProvider>
+        <ContactForm {...props} />
+      </DemoProvider>
+    )
+    render(jsx)
+    expect(screen.queryByDisplayValue(contact.name.givenName)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.name.familyName)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.phone[0].number)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.email[0].address)).not.toBeNull()
+    expect(
+      screen.queryByDisplayValue(contact.address[0].formattedAddress)
+    ).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.cozy[0].url)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.company)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.jobTitle)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.note)).not.toBeNull()
+  })
+
+  it('should submit a well formatted contact', () => {
+    const expected = {
+      address: [
+        {
+          city: undefined,
+          code: undefined,
+          country: undefined,
+          region: undefined,
+          formattedAddress: '18 rue des fleurs, Pecado',
+          number: undefined,
+          primary: true,
+          street: '18 rue des fleurs, Pecado',
+          type: undefined
+        }
+      ],
+      birthday: '2015-12-31',
+      birthplace: 'somewhere',
+      gender: 'male',
+      company: 'Cozy CLoud',
+      cozy: [
+        { label: undefined, primary: true, url: 'https://jcvd.cozy.cloud' }
+      ],
+      displayName: 'Jean-Claude Van Cozy',
+      email: [{ address: 'jcvc@cozy.cloud', primary: true, type: undefined }],
+      fullname: 'Jean-Claude Van Cozy',
+      indexes: {
+        byFamilyNameGivenNameEmailCozyUrl:
+          'van cozyjean-claudejcvc@cozy.cloudjcvd.cozy.cloud'
+      },
+      jobTitle: 'Dreamer',
+      metadata: { cozy: true, version: 1 },
+      name: {
+        familyName: 'Van Cozy',
+        givenName: 'Jean-Claude',
+        additionalName: undefined,
+        surname: undefined
+      },
+      note: 'Whatever.',
+      phone: [{ number: '+33678987654', primary: true, type: undefined }],
+      relationships: { groups: { data: [] }, related: { data: [] } }
+    }
+
+    let received = null
+    const onSubmit = contact => {
+      received = contact
+    }
+
+    render(
+      <DemoProvider dictRequire={dictRequire}>
+        <ContactForm onSubmit={onSubmit} onCancel={() => {}} />
+      </DemoProvider>
+    )
+
+    const fields = {
+      gender: 'male',
+      givenName: 'Jean-Claude',
+      familyName: 'Van Cozy',
+      surname: '',
+      additionalName: '',
+      'phone[0].phone': '+33678987654',
+      'email[0].email': 'jcvc@cozy.cloud',
+      cozy: 'https://jcvd.cozy.cloud',
+      company: 'Cozy CLoud',
+      jobTitle: 'Dreamer',
+      birthday: '2015-12-31',
+      birthplace: 'somewhere',
+      note: 'Whatever.'
+    }
+
+    const form = screen.getByRole('form')
+    for (const fieldName of Object.keys(fields)) {
+      act(() => {
+        const field = form.querySelector(`[name='${fieldName}']`)
+        expect(field).not.toBeNull()
+        fireEvent.change(field, { target: { value: fields[fieldName] } })
+      })
+    }
+
+    const addressBtn = form.querySelector('[name="address[0].address"]')
+    fireEvent.click(addressBtn)
+
+    const addressStreet = screen
+      .getAllByRole('textbox')
+      .find(t => t.name == 'address[0].addressstreet')
+
+    act(() => {
+      fireEvent.change(addressStreet, {
+        target: { value: '18 rue des fleurs, Pecado' }
+      })
+    })
+
+    act(() => {
+      fireEvent.click(screen.getByText('Ok'))
+    })
+
+    act(() => {
+      fireEvent.submit(screen.getByRole('form'))
+    })
+
+    expect(received).toEqual(expected)
+  })
+
+  it('should change inputs value', () => {
+    const testFields = {
+      Firstname: 'Jean-Claude',
+      Lastname: 'Van Cozy',
+      Phone: '+33678987654',
+      Email: 'jcvc@cozy.cloud',
+      Address: '18 rue des fleurs, Pecado',
+      'Twake URL': 'https://jcvd.cozy.cloud',
+      Company: 'Cozy CLoud',
+      jobTitle: 'Dreamer',
+      Birthday: '31/12/2015',
+      Notes: 'Whatever.'
+    }
+
+    const props = setup({ contact: {} })
+    const jsx = (
+      <DemoProvider>
+        <ContactForm {...props} />
+      </DemoProvider>
+    )
+    render(jsx)
+
+    for (const label of labels) {
+      act(() => {
+        fireEvent.change(screen.getByLabelText(label), {
+          target: { value: testFields[label] }
+        })
+      })
+    }
+
+    expect(screen.queryByDisplayValue(testFields['Firstname'])).not.toBeNull()
+    expect(screen.queryByDisplayValue(testFields['Notes'])).not.toBeNull()
+  })
+
+  it('should not submit empty fields', () => {
+    const onSubmit = jest.fn()
+
+    render(
+      <DemoProvider>
+        <ContactForm onSubmit={onSubmit} onCancel={() => {}} />
+      </DemoProvider>
+    )
+
+    act(() => {
+      fireEvent.submit(screen.getByRole('form'))
+    })
+
+    expect(onSubmit).not.toBeCalled()
+  })
+
+  describe('isSameContactProp', () => {
+    it('should return true if contacts have the same "related" relationships', () => {
+      const prevProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '2' }]
+            }
+          }
+        }
+      }
+      const nextProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '2' }, { _id: '1' }]
+            }
+          }
+        }
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(true)
+    })
+
+    it('should return false if contacts have different "related" relationships', () => {
+      const prevProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '2' }]
+            }
+          }
+        }
+      }
+      const nextProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '3' }]
+            }
+          }
+        }
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(false)
+    })
+
+    it('should return false if one of the contacts has no "related" relationships', () => {
+      const prevProps = {
+        contact: {
+          relationships: {
+            related: {
+              data: [{ _id: '1' }, { _id: '2' }]
+            }
+          }
+        }
+      }
+      const nextProps = {
+        contact: {}
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(false)
+    })
+
+    it('should return false if both contacts have no "related" relationships', () => {
+      const prevProps = {
+        contact: {}
+      }
+      const nextProps = {
+        contact: {}
+      }
+      expect(isSameContactProp(prevProps, nextProps)).toBe(false)
+    })
+  })
+})

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

@@ -0,0 +1,73 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactForm": {
+        "gender": {
+          "man": "Man",
+          "woman": "Woman"
+        },
+        "fields": {
+          "gender": "Civility",
+          "givenName": "Firstname",
+          "additionalName": "2nd firstname",
+          "surname": "Name in use",
+          "familyName": "Lastname",
+          "phone": "Phone",
+          "email": "Email",
+          "address": "Address",
+          "cozy": "Twake URL",
+          "company": "Company",
+          "jobTitle": "Job title",
+          "birthday": "Birthday",
+          "birthplace": "Birthplace",
+          "relatedContact": "Related contact",
+          "relationship": "Relationship",
+          "note": "Notes",
+          "label": "Label",
+          "required": "One of these fields must be filled in"
+        },
+        "label": {
+          "none": "None",
+          "home": "Personal",
+          "work": "Pro",
+          "custom": "Customised",
+          "phone": {
+            "cell-home": "Cell (personal)",
+            "cell-work": "Cell (pro)",
+            "voice-home": "Voice (personal)",
+            "voice-work": "Voice (pro)",
+            "fax-home": "Fax (personal)",
+            "fax-work": "Fax (pro)"
+          },
+          "address": {
+            "home": "Home (personal)",
+            "work": "Work (pro)"
+          },
+          "relationship": {
+            "parent": "Parent",
+            "child": "Child",
+            "sibling": "Sibling",
+            "spouse": "Spouse",
+            "coResident": "Co-resident",
+            "friend": "Friend",
+            "colleague": "Colleague",
+            "coWorker": "Co-worker",
+            "acquaintance": "Acquaintance",
+            "helper": "Helper",
+            "recipient": "Recipient"
+          }
+        },
+        "addLabel": {
+          "address": "Add an address",
+          "email": "Add an email",
+          "phone": "Add a phone",
+          "relatedContact": "Add a related contact"
+        }
+      }
+    }
+  },
+  "formatted": {
+    "date": "yyyy-LL-dd",
+    "address": "%{number} %{street}, %{code} %{city}, %{country}"
+  }
+}

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

@@ -0,0 +1,73 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "ContactForm": {
+        "gender": {
+          "man": "Homme",
+          "woman": "Femme"
+        },
+        "fields": {
+          "gender": "Civilité",
+          "givenName": "Prénom",
+          "additionalName": "2e prénom",
+          "surname": "Nom d'usage",
+          "familyName": "Nom",
+          "phone": "Téléphone",
+          "email": "Email",
+          "address": "Adresse",
+          "cozy": "URL du Twake",
+          "company": "Entreprise",
+          "jobTitle": "Fonction",
+          "birthday": "Anniversaire",
+          "birthplace": "Lieu de naissance",
+          "relatedContact": "Contact lié",
+          "relationship": "Relation",
+          "note": "Notes",
+          "label": "Libellé",
+          "required": "Un de ces champs doit être renseigné"
+        },
+        "label": {
+          "none": "Aucun",
+          "home": "Perso",
+          "work": "Pro",
+          "custom": "Personnalisé",
+          "phone": {
+            "cell-home": "Mobile (perso)",
+            "cell-work": "Mobile (pro)",
+            "voice-home": "Fixe (perso)",
+            "voice-work": "Fixe (pro)",
+            "fax-home": "Fax (perso)",
+            "fax-work": "Fax (pro)"
+          },
+          "address": {
+            "home": "Domicile (perso)",
+            "work": "Travail (pro)"
+          },
+          "relationship": {
+            "parent": "Parent",
+            "child": "Enfant",
+            "sibling": "Frère/Soeur",
+            "spouse": "Conjoint",
+            "coResident": "Colocataire",
+            "friend": "Ami",
+            "colleague": "Collègue/Collaborateur",
+            "coWorker": "Associé/Partenaire",
+            "acquaintance": "Connaissance",
+            "helper": "Assistant/Aidant",
+            "recipient": "Bénéficiaire/Aidé"
+          }
+        },
+        "addLabel": {
+          "address": "Ajouter une adresse",
+          "email": "Ajouter un email",
+          "phone": "Ajouter un téléphone",
+          "relatedContact": "Ajouter un contact lié"
+        }
+      }
+    }
+  },
+  "formatted": {
+    "date": "dd/LL/yyyy",
+    "address": "%{number} %{street}, %{code} %{city}, %{country}"
+  }
+}

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

@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}

package/react/Contacts/AddModal/ContactForm/styles.styl

@@ -0,0 +1,2 @@
+.contact-form-field__wrapper
+    width calc(100% - 3rem)

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

@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import { locales } from './locales'
+import Button from '../../../Buttons'
+import { ConfirmDialog } from '../../../CozyDialogs'
+import FormControlLabel from '../../../FormControlLabel'
+import RadioGroup from '../../../RadioGroup'
+import Radio from '../../../Radios'
+import TextField from '../../../TextField'
+import { useBreakpoints } from '../../../providers/Breakpoints'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+
+const CustomLabelDialog = ({
+  customValue,
+  setCustomValue,
+  customLabelOptions,
+  onSubmit,
+  onClose
+}) => {
+  const customValueObj = JSON.parse(customValue || '{}')
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
+  const [type, setType] = useState(
+    customValueObj.type || customLabelOptions.defaultType
+  )
+  const [label, setLabel] = useState(
+    customValueObj.label || customLabelOptions.defaultLabel
+  )
+
+  const handleSubmit = () => {
+    setCustomValue(JSON.stringify({ type, label }))
+    onSubmit({ target: { value: JSON.stringify({ type, label }) } })
+    onClose()
+  }
+
+  return (
+    <ConfirmDialog
+      open
+      title={t('Contacts.AddModal.CustomLabelDialog.label.custom')}
+      content={
+        <>
+          <TextField
+            className="u-mt-half"
+            variant="outlined"
+            fullWidth
+            autoFocus
+            value={type}
+            onChange={ev => setType(ev.target.value)}
+          />
+          {!customLabelOptions.hide && (
+            <RadioGroup
+              style={{ flexDirection: 'row' }}
+              className="u-mt-half u-ml-half"
+              aria-label="radio"
+              name="label"
+              value={label}
+              onChange={ev => setLabel(ev.target.value)}
+            >
+              <FormControlLabel
+                value="home"
+                label={t('Contacts.AddModal.CustomLabelDialog.label.home')}
+                control={<Radio />}
+              />
+              <FormControlLabel
+                value="work"
+                label={t('Contacts.AddModal.CustomLabelDialog.label.work')}
+                control={<Radio />}
+              />
+            </RadioGroup>
+          )}
+        </>
+      }
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            fullWidth={isMobile}
+            label={t('Contacts.AddModal.CustomLabelDialog.cancel')}
+            onClick={onClose}
+          />
+          <Button
+            label={t('Contacts.AddModal.CustomLabelDialog.ok')}
+            fullWidth={isMobile}
+            disabled={!type}
+            onClick={handleSubmit}
+          />
+        </>
+      }
+      onClose={onClose}
+    />
+  )
+}
+
+CustomLabelDialog.propTypes = {
+  customValue: PropTypes.string,
+  setCustomValue: PropTypes.func,
+  customLabelOptions: PropTypes.shape({
+    hide: PropTypes.bool,
+    defaultType: PropTypes.string,
+    defaultLabel: PropTypes.string
+  }),
+  onSubmit: PropTypes.func,
+  onClose: PropTypes.func
+}
+
+export default CustomLabelDialog

package/react/Contacts/AddModal/CustomLabelDialog/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "CustomLabelDialog": {
+        "label": {
+          "custom": "Customised label",
+          "home": "Personal",
+          "work": "Pro"
+        },
+        "cancel": "Cancel",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/react/Contacts/AddModal/CustomLabelDialog/locales/fr.json

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "CustomLabelDialog": {
+        "label": {
+          "custom": "Libellé personnalisé",
+          "home": "Perso",
+          "work": "Pro"
+        },
+        "cancel": "Annuler",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/react/Contacts/AddModal/CustomLabelDialog/locales/index.jsx

@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}

package/react/Contacts/AddModal/Readme.md

@@ -0,0 +1,46 @@
+Works with `final-form`, `final-form-arrays`, `react-final-form` and `react-final-form-arrays` packages under the hood.
+
+⚠️ Must be used within `AlertProvider`.
+
+```jsx
+import { useState } from 'react'
+import ContactsAddModal from 'cozy-ui/transpiled/react/Contacts/AddModal'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { johnDoeContact, johnDoeFormValues } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
+import contacts from 'cozy-ui/transpiled/react/ContactsList/_mockContacts.json'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+initialState = { showModal: isTesting() }
+initialVariants = [{ withContact: false }]
+
+const open = () => setState({ showModal: true })
+const close = () => setState({ showModal: false })
+
+const handleSubmit = async formData => {
+  console.info('formData :', formData)
+}
+
+;
+
+<DemoProvider>
+  <AlertProvider>
+    <Variants initialVariants={initialVariants} screenshotAllVariants>
+      {variant => (
+        <>
+          <Button onClick={open} label="Open Modal" />
+          {state.showModal && (
+            <ContactsAddModal
+              contacts={{ data: contacts }}
+              contact={variant.withContact ? johnDoeContact : undefined}
+              onSubmit={handleSubmit}
+              onClose={close}
+            />
+          )}
+        </>
+      )}
+    </Variants>
+  </AlertProvider>
+</DemoProvider>
+```