[Contact des unités de contrôle] Ajout d'un format de numéro (#1537)

## Related Pull Requests & Issues

- Resolve #1467 

----

- [ ] Tests E2E (Cypress)

frontend/cypress/e2e/side_window/reporting/reportings.spec.ts

@@ -13,9 +13,9 @@ context('Reportings', () => {
 
   it('Reportings should be archived in Reportings Table', () => {
     cy.intercept('PUT', '/bff/v1/reportings/5').as('archiveReporting')
-    cy.get('*[data-cy="status-filter-Archivés"]').click()
-    cy.get('*[data-cy="more-actions-reporting-5"]').scrollIntoView().click({ force: true })
-    cy.get('*[data-cy="archive-reporting-5"]').scrollIntoView().click({ force: true })
+    cy.getDataCy('status-filter-Archivés').click()
+    cy.getDataCy('more-actions-reporting-5').scrollIntoView().click({ force: true })
+    cy.getDataCy('archive-reporting-5').scrollIntoView().click({ force: true })
 
     cy.wait('@archiveReporting').then(({ response }) => {
       expect(response && response.body.id).equal(5)
@@ -25,8 +25,8 @@ context('Reportings', () => {
 
   it('Reporting should be duplicate and editable in Reportings Table', () => {
     cy.intercept('PUT', '/bff/v1/reportings').as('createReporting')
-    cy.get('*[data-cy="status-filter-Archivés"]').click()
-    cy.get('*[data-cy="duplicate-reporting-5"]').click({ force: true })
+    cy.getDataCy('status-filter-Archivés').click()
+    cy.getDataCy('duplicate-reporting-5').click({ force: true })
     cy.get('form').should('exist')
 
     cy.get('.rs-radio').find('label').contains('Autre').click()
@@ -47,9 +47,9 @@ context('Reportings', () => {
 
   it('Reporting should be delete in Reportings Table', () => {
     cy.intercept('DELETE', '/bff/v1/reportings/4').as('deleteReporting')
-    cy.get('*[data-cy="status-filter-Archivés"]').click()
-    cy.get('*[data-cy="more-actions-reporting-4"]').scrollIntoView().click({ force: true })
-    cy.get('*[data-cy="delete-reporting-4"]').scrollIntoView().click({ force: true })
+    cy.getDataCy('status-filter-Archivés').click()
+    cy.getDataCy('more-actions-reporting-4').scrollIntoView().click({ force: true })
+    cy.getDataCy('delete-reporting-4').scrollIntoView().click({ force: true })
 
     cy.clickButton('Confirmer la suppression')
 
@@ -58,38 +58,38 @@ context('Reportings', () => {
     })
   })
   it('Multiples reportings can be opened or created and saved in store', () => {
-    cy.get('*[data-cy="status-filter-Archivés"]').click()
+    cy.getDataCy('status-filter-Archivés').click()
 
-    cy.get('*[data-cy="edit-reporting-5"]').click({ force: true })
-    cy.get('*[data-id="reporting-collapse-or-expand-button-5"]').click()
+    cy.getDataCy('edit-reporting-5').click({ force: true })
+    cy.getDataCy('reporting-collapse-or-expand-button-5').click()
 
     // create new reporting
     cy.clickButton('Ajouter un nouveau signalement')
     cy.wait(500)
-    cy.get('*[data-cy="reporting-title"]').contains('NOUVEAU SIGNALEMENT (1)')
+    cy.getDataCy('reporting-title').contains('NOUVEAU SIGNALEMENT (1)')
 
     cy.fill('Nom du Sémaphore', 'Sémaphore de Dieppe')
-    cy.get('*[data-cy="reporting-target-type"]').click({ force: true })
+    cy.getDataCy('reporting-target-type').click({ force: true })
     cy.get('div[role="option"]').contains('Personne morale').click()
     cy.wait(200)
 
-    cy.get('*[data-id="reporting-collapse-or-expand-button-new-1"]').click()
+    cy.getDataCy('reporting-collapse-or-expand-button-new-1').click()
 
     // create another new reporting
     cy.clickButton('Ajouter un nouveau signalement')
-    cy.get('*[data-cy="reporting-title"]').contains('NOUVEAU SIGNALEMENT (2)')
-    cy.get('*[data-id="reporting-collapse-or-expand-button-new-1"]').click()
+    cy.getDataCy('reporting-title').contains('NOUVEAU SIGNALEMENT (2)')
+    cy.getDataCy('reporting-collapse-or-expand-button-new-1').click()
 
-    cy.get('*[data-cy="reporting-title"]').contains('NOUVEAU SIGNALEMENT (1)')
-    cy.get('*[data-cy="add-semaphore-source"]').contains('Sémaphore de Dieppe')
-    cy.get('*[data-cy="reporting-target-type"]').contains('Personne morale')
+    cy.getDataCy('reporting-title').contains('NOUVEAU SIGNALEMENT (1)')
+    cy.getDataCy('add-semaphore-source').contains('Sémaphore de Dieppe')
+    cy.getDataCy('reporting-target-type').contains('Personne morale')
   })
 
   it('Mission with attached env_action can be detached', () => {
     cy.intercept('PUT', '/bff/v1/reportings/6').as('updateReporting')
-    cy.get('*[data-cy="status-filter-Archivés"]').click()
+    cy.getDataCy('status-filter-Archivés').click()
 
-    cy.get('*[data-cy="edit-reporting-6"]').click({ force: true })
+    cy.getDataCy('edit-reporting-6').click({ force: true })
     cy.clickButton('Détacher la mission')
 
     cy.wait(500)

frontend/package.json

@@ -26,7 +26,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "18.4.2",
+    "@mtes-mct/monitor-ui": "18.5.1",
     "@reduxjs/toolkit": "1.9.7",
     "@rsuite/responsive-nav": "5.0.2",
     "@sentry/browser": "7.73.0",

frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/Item.tsx

@@ -8,25 +8,30 @@ export type ItemProps = {
   controlUnitContact: ControlUnit.ControlUnitContactData
   onEdit: (controlUnitContactId: number) => Promisable<void>
 }
-export function Item({ controlUnitContact, onEdit }: ItemProps) {
-  const handleEdit = useCallback(() => {
-    onEdit(controlUnitContact.id)
-  }, [controlUnitContact.id, onEdit])
 
-  function formatPhoneNumber(phoneNumber: string) {
-    if (phoneNumber.startsWith('00')) {
-      return `00 ${phoneNumber
-        .slice(2)
-        .match(/.{1,3}/g)
-        ?.join(' ')}`
-    }
-    if (phoneNumber.startsWith('0')) {
+export function formatPhoneNumber(phoneNumber: string) {
+  if (phoneNumber.startsWith('00')) {
+    if (phoneNumber.length === 12) {
       return phoneNumber.match(/.{1,2}/g)?.join(' ')
     }
 
-    return phoneNumber.match(/.{1,3}/g)?.join(' ')
+    return `00 ${phoneNumber
+      .slice(2)
+      .match(/.{1,3}/g)
+      ?.join(' ')}`
+  }
+  if (phoneNumber.startsWith('0')) {
+    return phoneNumber.match(/.{1,2}/g)?.join(' ')
   }
 
+  return phoneNumber.match(/.{1,3}/g)?.join(' ')
+}
+
+export function Item({ controlUnitContact, onEdit }: ItemProps) {
+  const handleEdit = useCallback(() => {
+    onEdit(controlUnitContact.id)
+  }, [controlUnitContact.id, onEdit])
+
   return (
     <Wrapper data-cy="ControlUnitDialog-control-unit-contact" data-id={controlUnitContact.id}>
       <Left>

frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitContactList/__tests__/formatPhoneNumber.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { formatPhoneNumber } from '../Item'
+
+describe('Phone Number format', () => {
+  it('should format international number starting with 00 then 3 by 3', async () => {
+    // Given
+    const phoneNumber = '00111222333444'
+
+    // When
+    const formattedNumber = formatPhoneNumber(phoneNumber)
+
+    // Then
+    expect(formattedNumber).toEqual('00 111 222 333 444')
+  })
+
+  it('should format international french number starting with 00 then 2 by 2', async () => {
+    // Given
+    const phoneNumber = '003344556677'
+
+    // When
+    const formattedNumber = formatPhoneNumber(phoneNumber)
+
+    // Then
+    expect(formattedNumber).toEqual('00 33 44 55 66 77')
+  })
+
+  it('should format french number 2 by 2', async () => {
+    // Given
+    const phoneNumber = '0122334455'
+
+    // When
+    const formattedNumber = formatPhoneNumber(phoneNumber)
+
+    // Then
+    expect(formattedNumber).toEqual('01 22 33 44 55')
+  })
+
+  it('should format other format 3 by 3', async () => {
+    // Given
+    const phoneNumber = '+33123456789100'
+
+    // When
+    const formattedNumber = formatPhoneNumber(phoneNumber)
+
+    // Then
+    expect(formattedNumber).toEqual('+33 123 456 789 100')
+  })
+})

frontend/src/features/Reportings/components/ReportingForm/Header.tsx

@@ -61,7 +61,7 @@ export function Header({
         <ReportingChevronIcon
           $isExpanded={isExpanded}
           accent={Accent.TERTIARY}
-          data-id={`reporting-collapse-or-expand-button-${reporting?.id}`}
+          data-cy={`reporting-collapse-or-expand-button-${reporting?.id}`}
           Icon={Icon.Chevron}
           onClick={reduceOrCollapseReporting}
         />

frontend/src/features/Reportings/components/ReportingsList/Cells/ButtonsRowGroup.tsx

@@ -78,7 +78,7 @@ export function ButtonsGroupRow({ id }) {
         />
 
         <StyledDropdown
-          accent={Accent.SECONDARY}
+          accent={Accent.TERTIARY}
           data-cy={`more-actions-reporting-${id}`}
           Icon={Icon.More}
           onSelect={archiveOrDelete}