[CA-4547] Fix phoneNumberField (#267)

CHANGELOG.md

@@ -7,6 +7,10 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix phoneNumberField so phone number is not in the payload instead of always valuating it to null
+
 ## [1.32.2] - 2025-02-10
 
 ### Fixed

src/components/form/fieldCreator.tsx

@@ -60,7 +60,7 @@ export type FieldComponentProps<T, P = {}, E extends Record<string, unknown> = {
 
 export interface Formatter<T, F, K extends string> {
     bind: (value?: T) => FormValue<F, K> | undefined
-    unbind: (value?: FormValue<F, K>) => T | null
+    unbind: (value?: FormValue<F, K>) => T | null | undefined
 }
 
 export type FieldDefinition<T, F = T, K extends string = 'raw'> = {
@@ -108,7 +108,7 @@ export function createField<
     mapping = new PathMapping(camelCasePath(path)),
     format = {
         bind: x => isValued(x) ? x as F : undefined,
-        unbind: x => (isValued(x) && isRichFormValue(x, rawProperty) ? x[rawProperty] as T : x as T) 
+        unbind: x => (isValued(x) && isRichFormValue(x, rawProperty) ? x[rawProperty] as T : x as T)
     },
     rawProperty = 'raw' as K,
     component: Component,
@@ -131,7 +131,7 @@ export function createField<
                 ...extParams
             };
 
-            return { 
+            return {
                 key,
                 render: ({ state: { value, validation }, ...props }: Partial<P> & { state: FieldValue<F, K, E> }) => (
                     <Component value={value} validation={validation} {...{...staticProps as P, ...props} as P} />
@@ -150,7 +150,7 @@ export function createField<
                 validate: async ({ value: formValue }: FieldValue<F, K, E>, ctx: FormContext<any>): Promise<ValidatorResult<E>> => {
                     const value = isRichFormValue(formValue, rawProperty) ? formValue[rawProperty] : formValue
                     const requireValidation = required ? await requiredRule.create(i18n)(value, ctx) : { valid: true } as ValidatorSuccess<E>
-                    return isValidatorSuccess(requireValidation) && isValued(value) 
+                    return isValidatorSuccess(requireValidation) && isValued(value)
                         ? await validator.create(i18n)(value, ctx)
                         : requireValidation
                 }

src/components/form/fields/phoneNumberField.tsx

@@ -182,7 +182,7 @@ const phoneNumberField = (
                 }
             },
             unbind: formValue => {
-                return (typeof formValue === 'object' && 'raw' in formValue ? formValue.raw : formValue) ?? null
+                return (typeof formValue === 'object' && 'raw' in formValue ? formValue.raw : formValue)
             }
         },
         validator: new Validator<Value>({

tests/components/form/fields/phoneNumberField.test.tsx

@@ -72,7 +72,7 @@ describe('DOM testing', () => {
         const initialValue = '+33123456789'
         const key = 'phone_number'
         const label = 'phone'
-        
+
         const onFieldChange = jest.fn()
         const onSubmit = jest.fn<(data: Model) => Promise<Model>>(data => Promise.resolve(data))
 
@@ -88,7 +88,7 @@ describe('DOM testing', () => {
             ],
         })
 
-        const renderResult = await waitFor(async () => {   
+        const renderResult = await waitFor(async () => {
             return render(
                 <WidgetContext
                     client={apiClient}
@@ -140,4 +140,50 @@ describe('DOM testing', () => {
             })
         )
     })
-})
+
+    test('optional', async () => {
+        const user = userEvent.setup()
+
+        const country = 'FR'
+        const key = 'phone_number'
+        const label = 'phone'
+
+        const onFieldChange = jest.fn()
+        const onSubmit = jest.fn<(data: Model) => Promise<Model>>(data => Promise.resolve(data))
+
+        const Form = createForm<Model>({
+            fields: [
+                phoneNumberField({
+                    key,
+                    label,
+                    country,
+                    withCountrySelect: true,
+                    required: false
+                }, defaultConfig)
+            ],
+        })
+
+        await waitFor(async () => {
+            return render(
+                <WidgetContext
+                    client={apiClient}
+                    config={defaultConfig}
+                    defaultMessages={defaultI18n}
+                >
+                    <Form
+                        fieldValidationDebounce={0} // trigger validation instantly
+                        onFieldChange={onFieldChange}
+                        handler={onSubmit}
+                    />
+                </WidgetContext>
+            )
+        })
+
+        const submitBtn = screen.getByRole('button')
+        await user.click(submitBtn)
+
+        await waitFor(() => expect(onSubmit).toHaveBeenCalled())
+
+        expect(onSubmit).toBeCalledWith({})
+    })
+})

types/identity-ui.d.ts

@@ -339,7 +339,7 @@ type FieldComponentProps<T, P = {}, E extends Record<string, unknown> = {}, K ex
 };
 interface Formatter<T, F, K extends string> {
     bind: (value?: T) => FormValue<F, K> | undefined;
-    unbind: (value?: FormValue<F, K>) => T | null;
+    unbind: (value?: FormValue<F, K>) => T | null | undefined;
 }
 type FieldDefinition<T, F = T, K extends string = 'raw'> = {
     key: string;