feat(PhoneNumber): add property omitCountryCodeField (#2961)

dnbexperience · Dec 4, 2023 · 4a3c7e2 · 4a3c7e2
1 parent 995c43d
commit 4a3c7e2
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 30 deletions.
diff --git a/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx b/...ortal/src/docs/uilib/extensions/forms/feature-fields/PhoneNumber/properties.mdx
@@ -12,6 +12,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 | --------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------- |
 | `help`                                  | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`.                            |
 | `countries`                             | `string`            | _(optional)_ List only a certain set of countries: `Scandinavia`, `NorthernNordic` or `Europe`              |
+| `omitCountryCodeField`                  | `boolean`           | _(optional)_ If `true` is given, then everything related to country code is removed.                        |
 | `countryCodeFieldClassName`             | `string`            | _(optional)_ Class name for the country code component.                                                     |
 | `numberFieldClassName`                  | `string`            | _(optional)_ Class name for the number component.                                                           |
 | `countryCodePlaceholder`                | `string`            | _(optional)_ Placeholder for the country code field.                                                        |

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -18,6 +18,7 @@ export type Props = FieldHelpProps &
     countryCodeLabel?: string
     numberMask?: InputMaskedProps['mask']
     width?: 'large' | 'stretch'
+    omitCountryCodeField?: boolean
     onCountryCodeChange?: (value: string | undefined) => void
     onNumberChange?: (value: string | undefined) => void
     countries?: 'Scandinavia' | 'NorthernNordic' | 'Europe'
@@ -96,6 +97,7 @@ function PhoneNumber(props: Props) {
     validateInitially,
     continuousValidation,
     validateUnchanged,
+    omitCountryCodeField,
     handleFocus,
     handleBlur,
     handleChange,
@@ -193,20 +195,21 @@ function PhoneNumber(props: Props) {
   const handleNumberChange = useCallback(
     (value: string) => {
       const phoneNumber = value || emptyValue
-      const countryCode = countryCodeRef.current || emptyValue
+      const countryCode = omitCountryCodeField
+        ? emptyValue
+        : countryCodeRef.current || emptyValue
       phoneNumberRef.current = phoneNumber || emptyValue
 
       handleChange(
         phoneNumber ? joinValue([countryCode, phoneNumber]) : emptyValue,
-        {
-          countryCode,
-          phoneNumber,
-        }
+        omitCountryCodeField
+          ? { phoneNumber }
+          : { countryCode, phoneNumber }
       )
 
       onNumberChange?.(phoneNumber)
     },
-    [emptyValue, handleChange, onNumberChange]
+    [emptyValue, handleChange, onNumberChange, omitCountryCodeField]
   )
 
   const onFocusHandler = useCallback(
@@ -235,29 +238,31 @@ function PhoneNumber(props: Props) {
       {...pickSpacingProps(props)}
     >
       <Flex.Horizontal align="baseline">
-        <Autocomplete
-          className={classnames(
-            'dnb-forms-field-phone-number__country-code',
-            countryCodeFieldClassName
-          )}
-          placeholder={countryCodePlaceholder ?? ' '}
-          label_direction="vertical"
-          label={
-            countryCodeLabel ??
-            sharedContext?.translation.Forms.countryCodeLabel
-          }
-          data={dataRef.current}
-          value={countryCodeRef.current}
-          disabled={disabled}
-          on_focus={onFocusHandler}
-          on_blur={handleBlur}
-          on_change={handleCountryCodeChange}
-          independent_width
-          search_numbers
-          keep_selection
-          no_animation={props.noAnimation}
-          stretch={width === 'stretch'}
-        />
+        {!omitCountryCodeField && (
+          <Autocomplete
+            className={classnames(
+              'dnb-forms-field-phone-number__country-code',
+              countryCodeFieldClassName
+            )}
+            placeholder={countryCodePlaceholder ?? ' '}
+            label_direction="vertical"
+            label={
+              countryCodeLabel ??
+              sharedContext?.translation.Forms.countryCodeLabel
+            }
+            data={dataRef.current}
+            value={countryCodeRef.current}
+            disabled={disabled}
+            on_focus={onFocusHandler}
+            on_blur={handleBlur}
+            on_change={handleCountryCodeChange}
+            independent_width
+            search_numbers
+            keep_selection
+            no_animation={props.noAnimation}
+            stretch={width === 'stretch'}
+          />
+        )}
 
         <StringComponent
           className={classnames(
@@ -282,7 +287,7 @@ function PhoneNumber(props: Props) {
           warning={warning}
           error={error}
           disabled={disabled}
-          width="stretch"
+          width={omitCountryCodeField ? 'medium' : 'stretch'}
           help={help}
           required={required}
           validateInitially={validateInitially}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
@@ -511,4 +511,59 @@ describe('Field.PhoneNumber', () => {
         .textContent
     ).toBe('+47 Norge')
   })
+
+  it('should omit country code implementation with omitCountryCodeField', async () => {
+    const onChange = jest.fn()
+
+    const { rerender } = render(
+      <PhoneNumber omitCountryCodeField onChange={onChange} />
+    )
+
+    const numberElement = () =>
+      document.querySelector(
+        '.dnb-forms-field-phone-number__number input'
+      ) as HTMLInputElement
+
+    expect(
+      document.querySelector('.dnb-forms-field-phone-number__country-code')
+    ).not.toBeInTheDocument()
+
+    await userEvent.type(numberElement(), '123')
+
+    expect(numberElement().value).toBe('12 3  ')
+    expect(onChange).toHaveBeenLastCalledWith('123', {
+      countryCode: undefined,
+      phoneNumber: '123',
+    })
+
+    rerender(
+      <PhoneNumber
+        omitCountryCodeField
+        value="+47 99999999"
+        onChange={onChange}
+      />
+    )
+
+    expect(numberElement().value).toBe('99 99 99 99')
+
+    await userEvent.type(numberElement(), '{Backspace>8}8888')
+
+    expect(numberElement().value).toBe('88 88  ')
+    expect(onChange).toHaveBeenLastCalledWith('8888', {
+      phoneNumber: '8888',
+    })
+
+    await userEvent.type(numberElement(), '{Backspace>6}+4')
+
+    expect(numberElement().value).toBe('88 4  ')
+    expect(onChange).toHaveBeenLastCalledWith('884', {
+      phoneNumber: '884',
+    })
+    expect(
+      Object.prototype.hasOwnProperty.call(
+        onChange.mock.calls[17][1],
+        'countryCode'
+      )
+    ).toBeFalsy()
+  })
 })