cozy-ui 85.9.0 → 86.1.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+# [86.1.0](https://github.com/cozy/cozy-ui/compare/v86.0.0...v86.1.0) (2023-06-20)
+
+
+### Features
+
+* Remove `mespapiers.migrated.metadata` flag ([43bcc3e](https://github.com/cozy/cozy-ui/commit/43bcc3e))
+
+# [86.0.0](https://github.com/cozy/cozy-ui/compare/v85.9.0...v86.0.0) (2023-06-20)
+
+
+### Bug Fixes
+
+* **ActionsMenu:** Divider actions wasn't spreading ref ([15a9554](https://github.com/cozy/cozy-ui/commit/15a9554))
+* **ActionsMenu:** Now force autofocus on first item for better a11y ([4264903](https://github.com/cozy/cozy-ui/commit/4264903))
+* **ActionsMenu:** Now spread props first to avoid override ([c30e183](https://github.com/cozy/cozy-ui/commit/c30e183))
+* **ActionsMenu:** Prop `doc` was spread to ActionsMenuItem child ([a2160c1](https://github.com/cozy/cozy-ui/commit/a2160c1))
+* **Divider:** Ref wasn't spreaded ([8220dba](https://github.com/cozy/cozy-ui/commit/8220dba))
+* **I18n:** Translate() wasn't spreading ref ([b23c16f](https://github.com/cozy/cozy-ui/commit/b23c16f))
+* **I18n:** WithOnlyLocales wasn't spreading ref ([5ca4004](https://github.com/cozy/cozy-ui/commit/5ca4004))
+* **ListItem:** Remove autoFocus and set focus on mount in RenameInput ([04d9985](https://github.com/cozy/cozy-ui/commit/04d9985))
+
+
+### Features
+
+* **ActionsMenu:** Add possibility to spread props to ActionsItems ([20534cb](https://github.com/cozy/cozy-ui/commit/20534cb))
+* **ListItemContact:** Use new ActionsMenu to get better accessibility ([e77d043](https://github.com/cozy/cozy-ui/commit/e77d043))
+
+
+### BREAKING CHANGES
+
+* **ActionsMenu:** `ActionsItems` no longer support `isLast` and `setIsRenaming` props. You have to use `actionOptions` to pass them. You should not be worried about this BC, `ActionsItems` is generally not used directly in apps
+
 # [85.9.0](https://github.com/cozy/cozy-ui/compare/v85.8.1...v85.9.0) (2023-06-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "85.9.0",
+  "version": "86.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/Actions/call.js

@@ -6,6 +6,7 @@ import ActionsMenuItem from '../ActionsMenuItem'
 import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
 import Icon from '../../Icon'
 import ListItemText from '../../ListItemText'
+import { useI18n } from '../../I18n'
 
 export const call = () => {
   return {
@@ -15,8 +16,9 @@ export const call = () => {
       !!phoneNumber && window.open(`tel:${phoneNumber}`, '_self')
     },
     Component: withActionsLocales(
-      // eslint-disable-next-line no-unused-vars
-      forwardRef(({ t, f, lang, ...props }, ref) => {
+      forwardRef((props, ref) => {
+        const { t } = useI18n()
+
         return (
           <ActionsMenuItem {...props} ref={ref}>
             <ListItemIcon>

package/react/ActionsMenu/Actions/divider.js

@@ -1,12 +1,12 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import Divider from '../../MuiCozyTheme/Divider'
 
 export const divider = () => {
   return {
     name: 'divider',
-    Component: function divider() {
-      return <Divider className="u-mv-half" />
-    }
+    Component: forwardRef((props, ref) => {
+      return <Divider className="u-mv-half" ref={ref} />
+    })
   }
 }

package/react/ActionsMenu/Actions/emailTo.js

@@ -6,6 +6,7 @@ import ActionsMenuItem from '../ActionsMenuItem'
 import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
 import Icon from '../../Icon'
 import ListItemText from '../../ListItemText'
+import { useI18n } from '../../I18n'
 
 export const emailTo = () => {
   return {
@@ -15,8 +16,9 @@ export const emailTo = () => {
       !!emailAddress && window.open(`mailto:${emailAddress}`, '_self')
     },
     Component: withActionsLocales(
-      // eslint-disable-next-line no-unused-vars
-      forwardRef(({ t, f, lang, ...props }, ref) => {
+      forwardRef((props, ref) => {
+        const { t } = useI18n()
+
         return (
           <ActionsMenuItem {...props} ref={ref}>
             <ListItemIcon>

package/react/ActionsMenu/Actions/locales/withActionsLocales.jsx

@@ -1,4 +1,4 @@
-import withLocales from '../../../I18n/withLocales'
+import withOnlyLocales from '../../../I18n/withOnlyLocales'
 
 import en from '../../../ActionMenu/Actions/locales/en.json'
 import fr from '../../../ActionMenu/Actions/locales/fr.json'
@@ -8,9 +8,4 @@ export const locales = {
   fr
 }
 
-/**
- * TODO: We should use something else than withLocales here. Because it's an HOC
- * so it spreads t, f, lang into child props.
- * We don't use HOC anymore, so we just want to use new I18n context with new locales
- */
-export default withLocales(locales)
+export default withOnlyLocales(locales)

package/react/ActionsMenu/Actions/modify.js

@@ -8,6 +8,7 @@ import Icon from '../../Icon'
 import PenIcon from '../../Icons/Pen'
 import ActionsMenuItem from '../ActionsMenuItem'
 import withActionsLocales from './locales/withActionsLocales'
+import { useI18n } from '../../I18n'
 
 export const modify = () => {
   return {
@@ -26,8 +27,9 @@ export const modify = () => {
       window.open(webLink, '_blank')
     },
     Component: withActionsLocales(
-      // eslint-disable-next-line no-unused-vars
-      forwardRef(({ t, f, lang, ...props }, ref) => {
+      forwardRef((props, ref) => {
+        const { t } = useI18n()
+
         return (
           <ActionsMenuItem ref={ref} {...props}>
             <ListItemIcon>

package/react/ActionsMenu/Actions/smsTo.js

@@ -6,6 +6,7 @@ import ActionsMenuItem from '../ActionsMenuItem'
 import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
 import Icon from '../../Icon'
 import ListItemText from '../../ListItemText'
+import { useI18n } from '../../I18n'
 
 export const smsTo = () => {
   return {
@@ -15,8 +16,9 @@ export const smsTo = () => {
       !!phoneNumber && window.open(`sms:${phoneNumber}`, '_self')
     },
     Component: withActionsLocales(
-      // eslint-disable-next-line no-unused-vars
-      forwardRef(({ t, f, lang, ...props }, ref) => {
+      forwardRef((props, ref) => {
+        const { t } = useI18n()
+
         return (
           <ActionsMenuItem {...props} ref={ref}>
             <ListItemIcon>

package/react/ActionsMenu/Actions/viewInContacts.js

@@ -8,6 +8,7 @@ import ActionsMenuItem from '../ActionsMenuItem'
 import ListItemIcon from '../../MuiCozyTheme/ListItemIcon'
 import Icon from '../../Icon'
 import ListItemText from '../../ListItemText'
+import { useI18n } from '../../I18n'
 
 export const viewInContacts = () => {
   return {
@@ -26,8 +27,9 @@ export const viewInContacts = () => {
       window.open(webLink, '_blank')
     },
     Component: withActionsLocales(
-      // eslint-disable-next-line no-unused-vars
-      forwardRef(({ t, f, lang, ...props }, ref) => {
+      forwardRef((props, ref) => {
+        const { t } = useI18n()
+
         return (
           <ActionsMenuItem ref={ref} {...props}>
             <ListItemIcon>

package/react/ActionsMenu/ActionsItems.jsx

@@ -6,7 +6,7 @@ import { useI18n } from '../I18n'
 import { getActionName, getOnlyNeededActions } from './Actions/helpers'
 
 const ActionsItems = forwardRef(
-  ({ doc, actions, isLast, setIsRenaming, onClick, ...props }, ref) => {
+  ({ doc, actions, actionOptions, onClick, ...props }, ref) => {
     const client = useClient()
     const { t } = useI18n()
     const cleanedActions = useMemo(() => getOnlyNeededActions(actions, doc), [
@@ -21,8 +21,7 @@ const ActionsItems = forwardRef(
       const { Component: ActionComponent, action, disabled } = actionDefinition
 
       const handleClick = () => {
-        action && action(doc, { client, t, isLast })
-        actionName === 'rename' && setIsRenaming(true)
+        action && action(doc, { client, t, ...actionOptions })
         onClick && onClick()
       }
 
@@ -32,6 +31,7 @@ const ActionsItems = forwardRef(
           ref={ref}
           key={actionName + idx}
           doc={doc}
+          autoFocus={idx === 0}
           disabled={disabled}
           onClick={handleClick}
         />
@@ -43,8 +43,8 @@ const ActionsItems = forwardRef(
 ActionsItems.propTypes = {
   doc: PropTypes.object,
   actions: PropTypes.array,
-  isLast: PropTypes.bool,
-  setIsRenaming: PropTypes.func,
+  /** Props spread to action method of Actions component */
+  actionOptions: PropTypes.object,
   onClick: PropTypes.func
 }
 

package/react/ActionsMenu/ActionsMenuItem.jsx

@@ -1,13 +1,21 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import omit from 'lodash/omit'
 
 import MenuItem from '../MenuItem'
 import ListItem from '../MuiCozyTheme/ListItem'
 
+const cleanPropsForDOM = props => {
+  const nonDOMProps = ['doc']
+
+  return omit(props, nonDOMProps)
+}
+
 const ActionsMenuItem = forwardRef(({ isListItem, ...props }, ref) => {
   const Component = isListItem ? ListItem : MenuItem
+  const compProps = cleanPropsForDOM(props)
 
-  return <Component {...props} ref={ref} button ellipsis={false} />
+  return <Component {...compProps} ref={ref} button ellipsis={false} />
 })
 
 ActionsMenuItem.displayName = 'ActionsMenuItem'

package/react/ActionsMenu/index.jsx

@@ -12,20 +12,36 @@ const useTransformOrigin = ({ vertical, horizontal }) => {
 }
 
 const ActionsMenu = forwardRef(
-  ({ doc, actions, anchorOrigin, children, ...props }, ref) => {
+  (
+    {
+      doc,
+      actions,
+      anchorOrigin,
+      children,
+      componentsProps,
+      onClose,
+      ...props
+    },
+    ref
+  ) => {
     const transformOrigin = useTransformOrigin(anchorOrigin)
 
     return (
       <ActionsMenuWrapper
+        {...props}
         anchorEl={ref.current}
         getContentAnchorEl={null}
         anchorOrigin={anchorOrigin}
         transformOrigin={transformOrigin}
         keepMounted
-        {...props}
+        onClose={onClose}
       >
         {children}
-        <ActionsItems doc={doc} actions={actions} />
+        <ActionsItems
+          {...componentsProps.actionsItems}
+          doc={doc}
+          actions={actions}
+        />
       </ActionsMenuWrapper>
     )
   }
@@ -36,7 +52,8 @@ ActionsMenu.defaultProps = {
     vertical: 'bottom',
     horizontal: 'left'
   },
-  autoClose: true
+  autoClose: true,
+  componentsProps: {}
 }
 
 ActionsMenu.propTypes = {
@@ -53,6 +70,14 @@ ActionsMenu.propTypes = {
   }),
   /** Whether the menu should automatically close itself when an item is clicked */
   autoClose: PropTypes.bool,
+  /* Props passed to components with the same name */
+  componentsProps: PropTypes.shape({
+    /** Props spread to ActionsItems component */
+    actionsItems: PropTypes.shape({
+      /** Props spread to action method of Actions component */
+      actionOptions: PropTypes.object
+    })
+  }),
   /** Function triggered when closing the menu */
   onClose: PropTypes.func
 }

package/react/I18n/index.jsx

@@ -4,7 +4,7 @@
 
 'use strict'
 
-import React, { Component, useContext, useMemo } from 'react'
+import React, { Component, useContext, useMemo, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import Polyglot from 'node-polyglot'
 
@@ -78,19 +78,23 @@ I18n.childContextTypes = {
 
 // higher order decorator for components that need `t` and/or `f`
 export const translate = () => WrappedComponent => {
-  const Wrapper = props => {
+  const Wrapper = forwardRef((props, ref) => {
     const i18nContext = useContext(I18nContext)
+
     return (
       <WrappedComponent
         {...props}
+        ref={ref}
         t={i18nContext && i18nContext.t}
         f={i18nContext && i18nContext.f}
         lang={i18nContext && i18nContext.lang}
       />
     )
-  }
+  })
+
   Wrapper.displayName = `withI18n(${WrappedComponent.displayName ||
     WrappedComponent.name})`
+
   return Wrapper
 }
 

package/react/I18n/withOnlyLocales.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { I18n, useI18n } from '.'
 
 /**
@@ -13,15 +13,15 @@ const withOnlyLocales = localesOrRequire => Component => {
       ? localesOrRequire
       : localeCode => localesOrRequire[localeCode]
 
-  const Wrapped = props => {
+  const Wrapped = forwardRef((props, ref) => {
     const { lang } = useI18n()
 
     return (
       <I18n dictRequire={requireLocale} lang={lang}>
-        <Component {...props} />
+        <Component {...props} ref={ref} />
       </I18n>
     )
-  }
+  })
 
   Wrapped.propTypes = {
     ...(Component.propTypes || {})

package/react/MuiCozyTheme/Divider/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import MuiDivider from '@material-ui/core/Divider'
 
 import { withStyles } from '../../styles'
@@ -9,12 +9,15 @@ import TextDivider from './TextDivider'
  * @desc If this component is provided a string children, it will render a `<TextDivider>` component
  * and will handle the `textAlign` prop that accepts a `"center"` or undefined value
  */
-const Divider = props =>
+const Divider = forwardRef((props, ref) =>
   typeof props.children === 'string' ? (
-    <TextDivider {...props} />
+    <TextDivider {...props} ref={ref} />
   ) : (
-    <MuiDivider {...props} />
+    <MuiDivider {...props} ref={ref} />
   )
+)
+
+Divider.displayName = 'Divider'
 
 Divider.propTypes = {
   ...TextDivider.propTypes

package/react/MuiCozyTheme/ListItem/ListItemBase/Renaming/RenameInput.jsx

@@ -42,22 +42,6 @@ const RenameInput = ({ file, onClose }) => {
   const [isModalOpened, setIsModalOpened] = useState(false)
   const defaultValue = file.name
 
-  const handleKeyDown = async event => {
-    if (event.key === KEYS.ENTER) {
-      await check()
-    } else if (event.key === KEYS.ESCAPE) {
-      await cancel()
-    }
-  }
-
-  const handleBlur = async () => {
-    // On top of "normal" blurs, the event happens all the time after a submit or a cancel, because this component is removed from the DOM while having the focus.
-    // we want to do things only on "normal" blurs, *not* after a cancel
-    if (!isModalOpened && !isBusy) {
-      await check()
-    }
-  }
-
   const check = async () => {
     const { value } = textInput.current
     if (value === '' || value === '.' || value === '..') {
@@ -96,13 +80,34 @@ const RenameInput = ({ file, onClose }) => {
     onClose()
   }
 
-  useEffect(() => {
+  const handleKeyDown = async event => {
+    if (event.key === KEYS.ENTER) {
+      await check()
+    } else if (event.key === KEYS.ESCAPE) {
+      await cancel()
+    }
+  }
+
+  const handleBlur = async () => {
+    // On top of "normal" blurs, the event happens all the time after a submit or a cancel, because this component is removed from the DOM while having the focus.
+    // we want to do things only on "normal" blurs, *not* after a cancel
+    if (!isModalOpened && !isBusy) {
+      await check()
+    }
+  }
+
+  const handleFocus = () => {
     const { length } = splitFilename({
       name: defaultValue,
       type: 'file'
     }).filename
+
     textInput.current.setSelectionRange(0, length)
-  }, [defaultValue])
+  }
+
+  useEffect(() => {
+    textInput.current.focus()
+  }, [])
 
   return (
     <InputGroup className={styles.inputGroup}>
@@ -110,9 +115,9 @@ const RenameInput = ({ file, onClose }) => {
         ref={textInput}
         type="text"
         defaultValue={defaultValue}
-        autoFocus
         disabled={isModalOpened || isBusy}
         onBlur={handleBlur}
+        onFocus={handleFocus}
         onKeyDown={handleKeyDown}
       />
       {(isModalOpened || isBusy) && <Spinner className={styles.spinner} />}

package/react/MuiCozyTheme/ListItem/ListItemBase/index.jsx

@@ -9,13 +9,11 @@ import IconButton from '../../../IconButton'
 import Icon from '../../../Icon'
 import DotsIcon from '../../../Icons/Dots'
 import ExpandedAttributes from '../ExpandedAttributes'
-import ActionMenuWithClose from '../../../ActionMenu/ActionMenuWithClose'
-import { ActionMenuHeader } from '../../../ActionMenu'
-import ActionsItems from '../../../ActionMenu/Actions/ActionsItems'
-import useBreakpoints from '../../../hooks/useBreakpoints'
+import ActionsMenu from '../../../ActionsMenu'
 import RenameInput from './Renaming/RenameInput'
 import withListItemLocales from '../hoc/withListItemLocales'
 import Checkbox from '../../../Checkbox'
+import ActionsMenuMobileHeader from '../../../ActionsMenu/ActionsMenuMobileHeader'
 
 const ListItemBase = ({
   doc,
@@ -31,11 +29,10 @@ const ListItemBase = ({
   const [showActionMenu, setShowActionMenu] = useState(false)
   const [isRenaming, setIsRenaming] = useState(false)
   const anchorRef = useRef()
-  const { isMobile } = useBreakpoints()
 
   const toggleMenu = () => setShowActionMenu(v => !v)
 
-  const showActionMenuHeader = isMobile && actionMenuComp?.Header
+  const showActionMenuHeader = actionMenuComp?.Header
   const isButton = !isRenaming && !!onClick
   const handleClick =
     !isRenaming && !isSelected && onClick ? onClick : undefined
@@ -69,19 +66,26 @@ const ListItemBase = ({
         <ExpandedAttributes doc={doc} expandedAttributes={expandedAttributes} />
       )}
       {showActionMenu && (
-        <ActionMenuWithClose
+        <ActionsMenu
+          open
           ref={anchorRef}
+          doc={doc}
+          actions={actions}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          componentsProps={{
+            actionsItems: { actionOptions: { setIsRenaming } }
+          }}
           onClose={() => setShowActionMenu(false)}
         >
           {showActionMenuHeader && (
-            <ActionMenuHeader>{actionMenuComp.Header}</ActionMenuHeader>
+            <ActionsMenuMobileHeader>
+              {actionMenuComp.Header}
+            </ActionsMenuMobileHeader>
           )}
-          <ActionsItems
-            doc={doc}
-            actions={actions}
-            setIsRenaming={setIsRenaming}
-          />
-        </ActionMenuWithClose>
+        </ActionsMenu>
       )}
     </>
   )

package/react/MuiCozyTheme/ListItem/ListItemContact/helpers.js

@@ -1,4 +1,4 @@
-import { hr, emailTo, smsTo, call } from '../../../ActionMenu/Actions'
+import { divider, emailTo, smsTo, call } from '../../../ActionsMenu/Actions'
 
 export const makeOptionalActions = contact => {
   const hasPhoneAction = contact.phone?.length > 0
@@ -6,7 +6,7 @@ export const makeOptionalActions = contact => {
   const hasMessageActions = hasPhoneAction || hasEmailAction
 
   const actionsAndOptions = [
-    { action: hr, condition: hasMessageActions },
+    { action: divider, condition: hasMessageActions },
     { action: call, condition: hasPhoneAction },
     { action: smsTo, condition: hasPhoneAction },
     { action: emailTo, condition: hasEmailAction }

package/react/MuiCozyTheme/ListItem/ListItemContact/helpers.spec.js

@@ -1,31 +1,31 @@
-import { hr, emailTo, smsTo, call } from '../../../ActionMenu/Actions'
+import { divider, emailTo, smsTo, call } from '../../../ActionsMenu/Actions'
 
 import { makeOptionalActions } from './helpers'
 
 describe('makeOptionalActions', () => {
-  it('should return hr, call, smsTo, emailTo', () => {
+  it('should return divider, call, smsTo, emailTo', () => {
     const res = makeOptionalActions({
       email: [{ address: 'mail@cozy.com' }],
       phone: [{ number: '123456' }]
     })
 
-    expect(res).toStrictEqual([hr, call, smsTo, emailTo])
+    expect(res).toStrictEqual([divider, call, smsTo, emailTo])
   })
 
-  it('should return hr, emailTo', () => {
+  it('should return divider, emailTo', () => {
     const res = makeOptionalActions({
       email: [{ address: 'mail@cozy.com' }]
     })
 
-    expect(res).toStrictEqual([hr, emailTo])
+    expect(res).toStrictEqual([divider, emailTo])
   })
 
-  it('should return hr, call, smsTo', () => {
+  it('should return divider, call, smsTo', () => {
     const res = makeOptionalActions({
       phone: [{ number: '123456' }]
     })
 
-    expect(res).toStrictEqual([hr, call, smsTo])
+    expect(res).toStrictEqual([divider, call, smsTo])
   })
 
   it('should empty array', () => {

package/react/MuiCozyTheme/ListItem/ListItemContact/useActions.jsx

@@ -1,8 +1,10 @@
 import { useMemo } from 'react'
 
-import { makeActions } from '../../../ActionMenu/Actions/helpers'
-import { modify } from '../../../ActionMenu/Actions/modify'
-import { viewInContacts } from '../../../ActionMenu/Actions/viewInContacts'
+import {
+  makeActions,
+  modify,
+  viewInContacts
+} from '../../../ActionsMenu/Actions'
 import { makeOptionalActions } from './helpers'
 
 const useActions = contact => {

package/react/Viewer/Panel/QualificationListItemInformation.jsx

@@ -2,7 +2,6 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { getBoundT } from 'cozy-client/dist/models/document/locales'
-import flag from 'cozy-flags'
 
 import ListItem from '../../MuiCozyTheme/ListItem'
 import ListItemSecondaryAction from '../../MuiCozyTheme/ListItemSecondaryAction'
@@ -42,7 +41,7 @@ const QualificationListItemInformation = forwardRef(
 
     const currentValue = makeInformationValue({ name, value, t, scannerT })
     const title =
-      name === 'number' && flag('mespapiers.migrated.metadata') // TODO Remove duplicate translations when remove this flag
+      name === 'number'
         ? t(
             `Viewer.panel.qualification.information.title.${qualificationLabel}.${name}`
           )

package/react/Viewer/locales/en.json

@@ -79,13 +79,7 @@
             "country": "Beneficiary nationality",
             "refTaxIncome": "Reference tax income",
             "contractType": "Contract type",
-            "noticePeriod": "Expiration alert",
-            "number": "License number",
-            "cafFileNumber": "CAF file number",
-            "cardNumber": "National ID card number",
-            "vinNumber": "Vehicle registration number (VIN)",
-            "ibanNumber": "IBAN number",
-            "passportNumber": "Passport number"
+            "noticePeriod": "Expiration alert"
           },
           "day": "day |||| days"
         },

package/react/Viewer/locales/fr.json

@@ -79,13 +79,7 @@
             "country": "Nationalité du bénéficiaire",
             "refTaxIncome": "Revenu fiscal de référence",
             "contractType": "Type de contrat",
-            "noticePeriod": "Alerte d’expiration",
-            "number": "Numéro du permis",
-            "cafFileNumber": "Numéro de dossier CAF",
-            "cardNumber": "Numéro de la carte d'identité",
-            "vinNumber": "Numéro de la carte grise (VIN)",
-            "ibanNumber": "Numéro d'IBAN",
-            "passportNumber": "Numéro du passeport"
+            "noticePeriod": "Alerte d’expiration"
           },
           "day": "jour |||| jours"
         },