cozy-ui-plus 1.1.0

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

@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+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'
+
+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/src/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/src/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/src/Contacts/AddModal/CustomLabelDialog/locales/index.jsx

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

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

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "CustomLabelDialog": {
+        "label": {
+          "custom": "Пользовательская метка",
+          "home": "Личное",
+          "work": "Рабочее"
+        },
+        "cancel": "Отменить",
+        "ok": "ОК"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "CustomLabelDialog": {
+        "label": {
+          "custom": "Nhãn tùy chỉnh",
+          "home": "Cá nhân",
+          "work": "Công việc"
+        },
+        "cancel": "Hủy",
+        "ok": "Ok"
+      }
+    }
+  }
+}

package/src/Contacts/AddModal/Readme.md

@@ -0,0 +1,55 @@
+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 StarIcon from 'cozy-ui/transpiled/react/Icons/Star'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+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 } 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, withCustomFields: false }]
+
+const open = () => setState({ showModal: true })
+const close = () => setState({ showModal: false })
+
+const handleSubmit = async formData => {
+  console.info('formData :', formData)
+}
+
+const customFields = [{ name: 'customField', icon: StarIcon, type: 'text', position: 5, component: TextField }]
+
+;
+
+<DemoProvider dictRequire={() => ({ Contacts: {AddModal: {ContactForm: {fields: {customField: 'Custom field'}}}} })}>
+  <AlertProvider>
+    <Variants initialVariants={initialVariants}>
+      {variant => (
+        <>
+          <Button onClick={open} label="Open Modal" />
+          {state.showModal && (
+            <ContactsAddModal
+              contacts={{ data: contacts }}
+              contact={variant.withContact ? {...johnDoeContact, customField: "Custom field value"} : undefined}
+              customFieldsProps={variant.withCustomFields && {
+                fields: customFields,
+                makeCustomFieldsFormValues: formValues => ({ customField: formValues.customField }),
+                makeCustomContactValues: contact => ({ customField: contact.customField })
+              }}
+              onSubmit={handleSubmit}
+              onClose={close}
+            />
+          )}
+        </>
+      )}
+    </Variants>
+  </AlertProvider>
+</DemoProvider>
+```

package/src/Contacts/AddModal/index.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+
+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'
+
+const AddModal = ({
+  contacts,
+  contact,
+  customFieldsProps,
+  onSubmit,
+  onClose
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const { showAlert } = useAlert()
+  const [isBusy, setIsBusy] = useState(false)
+  // Tip to prevent fields from being filled with old information for a short period of time during form submission.
+  const [selfContact, setSelfContact] = useState(contact)
+
+  const handleClick = event => {
+    const submitContactForm = getSubmitContactForm()
+    submitContactForm(event)
+  }
+
+  /**
+   * @param {import('cozy-client/types/types').IOCozyContact} formData - Contact document (except _id, _rev & _type attrs to create a new contact)
+   */
+  const handleFormSubmit = async formData => {
+    setSelfContact(formData)
+    setIsBusy(true)
+    try {
+      await onSubmit(formData)
+      onClose()
+    } catch (err) {
+      setIsBusy(false)
+      console.warn(err) // eslint-disable-line no-console
+      showAlert({
+        severity: 'error',
+        message: t('Contacts.AddModal.error.save')
+      })
+    }
+  }
+
+  return (
+    <FixedDialog
+      open
+      onClose={onClose}
+      title={
+        contact
+          ? t('Contacts.AddModal.edit-contact')
+          : t('Contacts.AddModal.create_contact')
+      }
+      content={
+        <ContactForm
+          contacts={contacts}
+          contact={selfContact}
+          customFieldsProps={customFieldsProps}
+          onSubmit={handleFormSubmit}
+        />
+      }
+      actions={
+        <>
+          <Button
+            variant="secondary"
+            label={t('Contacts.AddModal.cancel')}
+            onClick={onClose}
+          />
+          <Button
+            className="u-ml-half"
+            type="submit"
+            label={t('Contacts.AddModal.save')}
+            busy={isBusy}
+            onClick={handleClick}
+          />
+        </>
+      }
+    />
+  )
+}
+
+export default AddModal

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

@@ -0,0 +1,13 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "error": {
+        "save": "An error occurred while saving the contact, please try again"
+      },
+      "edit-contact": "Edit contact",
+      "create_contact": "Create a contact",
+      "cancel": "Cancel",
+      "save": "Save"
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "error": {
+        "save": "Une erreur est survenue lors de l'enregistrement du contact, veuillez réessayer"
+      },
+      "edit-contact": "Edit contact",
+      "create_contact": "Créer un contact",
+      "cancel": "Annuler",
+      "save": "Enregistrer"
+    }
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "error": {
+        "save": "Произошла ошибка при сохранении контакта, попробуйте еще раз"
+      },
+      "edit-contact": "Редактировать контакт",
+      "create_contact": "Создать контакт",
+      "cancel": "Отменить",
+      "save": "Сохранить"
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "Contacts": {
+    "AddModal": {
+      "error": {
+        "save": "Có lỗi xảy ra khi lưu liên hệ, vui lòng thử lại"
+      },
+      "edit-contact": "Chỉnh sửa liên hệ",
+      "create_contact": "Tạo liên hệ",
+      "cancel": "Hủy",
+      "save": "Lưu"
+    }
+  }
+}

package/src/Contacts/AddModal/mocks.js

@@ -0,0 +1,299 @@
+export const johnDoeContact = {
+  id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _type: 'io.cozy.contacts',
+  _rev: '1-19c313536e8b27473aa26bf105b03269',
+  address: [
+    {
+      formattedAddress: '94 Hinton Road 05034 Fresno, Singapore',
+      type: 'Home',
+      primary: true
+    },
+    {
+      pobox: '2',
+      street: '426 Runolfsson Knolls',
+      city: 'Port Easter',
+      region: undefined,
+      country: 'Cocos (Keeling) Islands',
+      postcode: '84573',
+      type: 'Work'
+    }
+  ],
+  email: [
+    {
+      address: 'john.doe@posteo.net',
+      type: 'personal',
+      primary: false
+    },
+    {
+      address: 'john.doe@cozycloud.cc',
+      primary: true
+    }
+  ],
+  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'
+    }
+  ],
+  birthday: '1999-5-1',
+  birthplace: 'somewhere',
+  gender: 'male',
+  company: 'Cozy cloud',
+  jobTitle: 'Dreamer',
+  cozy: [
+    {
+      type: 'MyCozy',
+      primary: true,
+      url: 'https://johndoe.mycozy.cloud'
+    }
+  ],
+  fullname: 'John Doe',
+  name: {
+    givenName: 'John',
+    familyName: 'Doe',
+    additionalName: 'J.'
+  },
+  metadata: {
+    cozy: true,
+    version: 1
+  },
+  note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
+  phone: [
+    {
+      number: '+33 (2)0 90 00 54 04',
+      primary: true
+    },
+    {
+      number: '+33 6 77 11 22 33',
+      primary: false
+    },
+    {
+      label: 'Mobile', // could be this when importing from other sources i.e. google
+      number: '0876467998',
+      primary: false,
+      type: 'mobile'
+    }
+  ]
+}
+
+export const johnDoeFormValues = {
+  birthday: '1999-5-1',
+  birthplace: 'somewhere',
+  gender: 'male',
+  cozy: 'https://johndoe.mycozy.cloud',
+  cozyLabel: '{"type":"MyCozy"}',
+  matrix: 'john@doe.matrix.net',
+  address: [
+    {
+      fieldId: 'fieldId_1',
+      address: '94 Hinton Road 05034 Fresno, Singapore',
+      addressLabel: '{"type":"Home"}',
+      addressapartment: undefined,
+      addressbuilding: undefined,
+      addresscity: undefined,
+      addresscode: undefined,
+      addressregion: undefined,
+      addresscountry: undefined,
+      addressentrycode: undefined,
+      addressfloor: undefined,
+      addresslocality: undefined,
+      addressnumber: undefined,
+      addressstairs: undefined,
+      addressstreet: '94 Hinton Road 05034 Fresno, Singapore'
+    },
+    {
+      fieldId: 'fieldId_2',
+      address:
+        '426 Runolfsson Knolls 84573 Port Easter Cocos (Keeling) Islands',
+      addressLabel: '{"type":"Work"}',
+      addressapartment: undefined,
+      addressbuilding: undefined,
+      addresscity: 'Port Easter',
+      addressregion: undefined,
+      addresscode: '84573',
+      addresscountry: 'Cocos (Keeling) Islands',
+      addressentrycode: undefined,
+      addressfloor: undefined,
+      addresslocality: undefined,
+      addressnumber: undefined,
+      addressstairs: undefined,
+      addressstreet: '426 Runolfsson Knolls'
+    }
+  ],
+  email: [
+    {
+      fieldId: 'fieldId_3',
+      email: 'john.doe@cozycloud.cc',
+      emailLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_4',
+      email: 'john.doe@posteo.net',
+      emailLabel: '{"type":"personal"}'
+    }
+  ],
+  phone: [
+    {
+      fieldId: 'fieldId_5',
+      phone: '+33 (2)0 90 00 54 04',
+      phoneLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_6',
+      phone: '+33 6 77 11 22 33',
+      phoneLabel: undefined
+    },
+    {
+      fieldId: 'fieldId_7',
+      phone: '0876467998',
+      phoneLabel: '{"type":"mobile","label":"Mobile"}'
+    }
+  ],
+  givenName: 'John',
+  additionalName: 'J.',
+  familyName: 'Doe',
+  company: 'Cozy cloud',
+  jobTitle: 'Dreamer',
+  note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
+  relatedContact: [
+    {
+      relatedContactId: 'relatedContactID',
+      relatedContactLabel: '{"type":"related"}'
+    }
+  ]
+}
+
+export const johnDoeContactWithRelated = {
+  id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _id: '9ecfbf4b-20e7-4bac-87f1-eea53350857d',
+  _type: 'io.cozy.contacts',
+  _rev: '1-19c313536e8b27473aa26bf105b03269',
+  address: [
+    {
+      formattedAddress: '94 Hinton Road 05034 Fresno, Singapore',
+      type: 'Home',
+      primary: true
+    },
+    {
+      pobox: '2',
+      street: '426 Runolfsson Knolls',
+      city: 'Port Easter',
+      region: undefined,
+      country: 'Cocos (Keeling) Islands',
+      postcode: '84573',
+      type: 'Work'
+    }
+  ],
+  impp: [
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'home',
+      primary: false
+    },
+    {
+      uri: 'john@doe.matrix.net',
+      protocol: 'matrix',
+      label: 'work',
+      primary: true
+    }
+  ],
+  email: [
+    {
+      address: 'john.doe@posteo.net',
+      type: 'personal',
+      primary: false
+    },
+    {
+      address: 'john.doe@cozycloud.cc',
+      primary: true
+    }
+  ],
+  birthday: '1999-5-1',
+  birthplace: 'somewhere',
+  gender: 'male',
+  company: 'Cozy cloud',
+  jobTitle: 'Dreamer',
+  cozy: [
+    {
+      type: 'MyCozy',
+      primary: true,
+      url: 'https://johndoe.mycozy.cloud'
+    }
+  ],
+  fullname: 'John Doe',
+  name: {
+    givenName: 'John',
+    familyName: 'Doe',
+    additionalName: 'J.'
+  },
+  metadata: {
+    cozy: true,
+    version: 1
+  },
+  note: 'Atque cupiditate saepe omnis quos ut molestiae labore voluptates omnis.',
+  phone: [
+    {
+      number: '+33 (2)0 90 00 54 04',
+      primary: true
+    },
+    {
+      number: '+33 6 77 11 22 33',
+      primary: false
+    }
+  ],
+  relationships: {
+    accounts: { data: [] },
+    groups: { data: [] },
+    related: {
+      data: [
+        {
+          metadata: { relationTypes: ['spouse'] },
+          _id: '5b49553c5916cf7b5b2a5f48600078a8',
+          _type: 'io.cozy.contacts'
+        }
+      ]
+    }
+  },
+  related: {
+    target: {
+      id: '4e33fd27e1d8e55a34742bac6d16d3bd',
+      _id: '4e33fd27e1d8e55a34742bac6d16d3bd',
+      _type: 'io.cozy.contacts',
+      _rev: '6-57f4ab78b1fb97bb90ea273ec881f196',
+      company: '',
+      fullname: 'John Doe',
+      me: true,
+      note: ''
+    },
+    name: 'related',
+    doctype: 'io.cozy.contacts',
+    data: [
+      {
+        displayName: 'Alice Doe',
+        _id: '5b49553c5916cf7b5b2a5f48600078a8',
+        _type: 'io.cozy.contacts'
+      }
+    ]
+  }
+}