feat(components): add an international french format

MTES-MCT · Jul 8, 2024 · ca61f53 · ca61f53
1 parent 32e8c03
commit ca61f53
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 71 deletions.
diff --git a/e2e/base/fields/PhoneInput.spec.tsx b/e2e/base/fields/PhoneInput.spec.tsx
@@ -70,96 +70,95 @@ context('Story', () => {
 
         outputShouldBe('0712345678')
       })
+    })
+    describe('international format', () => {
+      it('Should fill, change and clear the input', () => {
+        mountAndWait(
+          <StoryBox>
+            <PhoneInputStory {...commonProps} />
+          </StoryBox>
+        )
 
-      describe('international format', () => {
-        it('Should fill, change and clear the input', () => {
-          mountAndWait(
-            <StoryBox>
-              <PhoneInputStory {...commonProps} />
-            </StoryBox>
-          )
-
-          outputShouldBe(undefined)
+        outputShouldBe(undefined)
 
-          cy.fill(commonProps.label, '00 594 222 333 444')
+        cy.fill(commonProps.label, '00 594 222 333 444')
 
-          outputShouldBe('00594222333444')
+        outputShouldBe('00594222333444')
 
-          cy.fill(commonProps.label, '')
+        cy.fill(commonProps.label, '')
 
-          outputShouldBe(undefined)
-        })
+        outputShouldBe(undefined)
+      })
 
-        it('Should have output with default value`', () => {
-          mountAndWait(
-            <StoryBox>
-              <PhoneInputStory {...commonProps} value="00 594 222 333 444" />
-            </StoryBox>
-          )
+      it('Should have output with default value`', () => {
+        mountAndWait(
+          <StoryBox>
+            <PhoneInputStory {...commonProps} value="00 594 222 333 444" />
+          </StoryBox>
+        )
 
-          outputShouldBe('00594222333444')
-        })
-        describe('other format', () => {
-          it('Should fill, change and clear the input', () => {
-            mountAndWait(
-              <StoryBox>
-                <PhoneInputStory {...commonProps} />
-              </StoryBox>
-            )
+        outputShouldBe('00594222333444')
+      })
+    })
+    describe('other format', () => {
+      it('Should fill, change and clear the input', () => {
+        mountAndWait(
+          <StoryBox>
+            <PhoneInputStory {...commonProps} />
+          </StoryBox>
+        )
 
-            outputShouldBe(undefined)
+        outputShouldBe(undefined)
 
-            cy.fill(commonProps.label, '8317920035')
+        cy.fill(commonProps.label, '8317920035')
 
-            outputShouldBe('8317920035')
+        outputShouldBe('8317920035')
 
-            cy.fill(commonProps.label, '')
+        cy.fill(commonProps.label, '')
 
-            outputShouldBe(undefined)
-          })
+        outputShouldBe(undefined)
+      })
 
-          it('Should be editable to a international number', () => {
-            mountAndWait(
-              <StoryBox>
-                <PhoneInputStory {...commonProps} />
-              </StoryBox>
-            )
+      it('Should be editable to a international number', () => {
+        mountAndWait(
+          <StoryBox>
+            <PhoneInputStory {...commonProps} />
+          </StoryBox>
+        )
 
-            outputShouldBe(undefined)
+        outputShouldBe(undefined)
 
-            cy.fill(commonProps.label, '8317920035')
+        cy.fill(commonProps.label, '8317920035')
 
-            cy.get(`#${commonProps.name}`).type('{moveToStart}').type('00')
+        cy.get(`#${commonProps.name}`).type('{moveToStart}').type('00')
 
-            outputShouldBe('008317920035')
-          })
+        outputShouldBe('008317920035')
+      })
 
-          it('Should be editable to a french number', () => {
-            mountAndWait(
-              <StoryBox>
-                <PhoneInputStory {...commonProps} />
-              </StoryBox>
-            )
+      it('Should be editable to a french number', () => {
+        mountAndWait(
+          <StoryBox>
+            <PhoneInputStory {...commonProps} />
+          </StoryBox>
+        )
 
-            outputShouldBe(undefined)
+        outputShouldBe(undefined)
 
-            cy.fill(commonProps.label, '8317920035')
+        cy.fill(commonProps.label, '8317920035')
 
-            cy.get(`#${commonProps.name}`).type('{moveToStart}').type('0')
+        cy.get(`#${commonProps.name}`).type('{moveToStart}').type('0')
 
-            outputShouldBe('08317920035')
-          })
+        outputShouldBe('08317920035')
+      })
 
-          it('Should have output with default value`', () => {
-            mountAndWait(
-              <StoryBox>
-                <PhoneInputStory {...commonProps} value="+3361234567890" />
-              </StoryBox>
-            )
+      it('Should have output with default value`', () => {
+        mountAndWait(
+          <StoryBox>
+            <PhoneInputStory {...commonProps} value="+3361234567890" />
+          </StoryBox>
+        )
 
-            outputShouldBe('+3361234567890')
-          })
-        })
+        outputShouldBe('+3361234567890')
       })
     })
   })

diff --git a/src/fields/PhoneInput.tsx b/src/fields/PhoneInput.tsx
@@ -28,6 +28,11 @@ const internationalFormat = {
   mask: '`@@ #[00] 000 000 000 000'
 }
 
+const internationalFrenchFormat = {
+  definitions: { '@': /0/ },
+  mask: '`@@ 00 00 00 00 00'
+}
+
 const frenchFormat = { definitions: { '#': /[1-9]/, '@': /0/ }, mask: '`@# 00 00 00 00' }
 
 const defaultFormat = { definitions: { '#': /[1-9]/, '+': /[+\d]/ }, mask: '`+00 000 000 000 000 000' }
@@ -69,23 +74,27 @@ export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
           $isTransparent={isTransparent}
           disabled={disabled}
           dispatch={(appended, dynamicMasked) => {
-            const phoneNumber = dynamicMasked.unmaskedValue + appended
+            const phoneNumber = (dynamicMasked.unmaskedValue + appended).replace(/\s+/g, '')
 
             if (phoneNumber.startsWith('00')) {
+              if (value && value.length === 12 && phoneNumber === value) {
+                return dynamicMasked.compiledMasks[1]
+              }
+
               return dynamicMasked.compiledMasks[0]
             }
             if (phoneNumber.startsWith('0') && value && value.length <= 10 && phoneNumber === value) {
-              return dynamicMasked.compiledMasks[1]
+              return dynamicMasked.compiledMasks[2]
             }
 
-            return dynamicMasked.compiledMasks[2]
+            return dynamicMasked.compiledMasks[3]
           }}
           id={name}
-          mask={[internationalFormat, frenchFormat, defaultFormat]}
+          mask={[internationalFormat, internationalFrenchFormat, frenchFormat, defaultFormat]}
           onAccept={(nextValue: string) => {
             onChange(nextValue || undefined)
           }}
-          overwrite={false}
+          overwrite="shift"
           type="tel"
           unmask
           value={value}