SDKS-4670: Add support for extension in PhoneNumberCollector

.changeset/long-singers-do.md

@@ -0,0 +1,5 @@
+---
+'@forgerock/davinci-client': minor
+---
+
+A new PhoneNumberExtensionCollector has been added to support phone number fields that include an extension. When a DaVinci PHONE_NUMBER field has showExtension: true, the SDK now produces a PhoneNumberExtensionCollector instead of a PhoneNumberCollector.

.gitignore

@@ -95,3 +95,6 @@ GEMINI.md
 .claude/worktrees
 .claude/settings.local.json
 .opensource
+
+# Polaris
+.polaris-setup-progress.json

e2e/davinci-app/components/object-value.ts

@@ -8,6 +8,9 @@ import type {
   DeviceAuthenticationCollector,
   DeviceRegistrationCollector,
   PhoneNumberCollector,
+  PhoneNumberExtensionCollector,
+  PhoneNumberExtensionInputValue,
+  PhoneNumberInputValue,
   Updater,
 } from '@forgerock/davinci-client/types';
 
@@ -19,11 +22,16 @@ import type {
  */
 export default function objectValueComponent(
   formEl: HTMLFormElement,
-  collector: DeviceRegistrationCollector | DeviceAuthenticationCollector | PhoneNumberCollector,
+  collector:
+    | DeviceRegistrationCollector
+    | DeviceAuthenticationCollector
+    | PhoneNumberCollector
+    | PhoneNumberExtensionCollector,
   updater:
     | Updater<DeviceRegistrationCollector>
     | Updater<DeviceAuthenticationCollector>
-    | Updater<PhoneNumberCollector>,
+    | Updater<PhoneNumberCollector>
+    | Updater<PhoneNumberExtensionCollector>,
   submitForm: () => void,
 ) {
   if (
@@ -61,7 +69,7 @@ export default function objectValueComponent(
       buttonEl.textContent = option.label;
       formEl.appendChild(buttonEl);
     }
-  } else {
+  } else if (collector.type === 'PhoneNumberCollector') {
     const phoneLabel = document.createElement('label');
     phoneLabel.textContent = collector.output.label || 'Phone Number';
     phoneLabel.className = 'object-options-title';
@@ -73,6 +81,9 @@ export default function objectValueComponent(
     phoneInput.setAttribute('name', 'phone-number-input');
     phoneInput.setAttribute('placeholder', 'Enter phone number');
 
+    formEl.appendChild(phoneLabel);
+    formEl.appendChild(phoneInput);
+
     // Add change event listener
     phoneInput.addEventListener('change', (event) => {
       // Properly type the event target
@@ -84,13 +95,73 @@ export default function objectValueComponent(
         return;
       }
 
-      updater({
+      const phoneNumberInputValue: PhoneNumberInputValue = {
         phoneNumber: selectedValue,
         countryCode: collector.output.value?.countryCode || '',
-      } as any);
+      };
+      const phoneNumberUpdater = updater as Updater<PhoneNumberCollector>;
+      phoneNumberUpdater(phoneNumberInputValue);
     });
+  } else if (collector.type === 'PhoneNumberExtensionCollector') {
+    const phoneLabel = document.createElement('label');
+    phoneLabel.textContent = collector.output.label || 'Phone Number';
+    phoneLabel.className = 'object-options-title';
+    phoneLabel.setAttribute('for', 'phone-number-input-1');
 
-    formEl.appendChild(phoneLabel);
-    formEl.appendChild(phoneInput);
+    const phoneInput = document.createElement('input');
+    phoneInput.setAttribute('type', 'tel');
+    phoneInput.setAttribute('id', 'phone-number-input-1');
+    phoneInput.setAttribute('name', 'phone-number-input-1');
+    phoneInput.setAttribute('placeholder', 'Enter phone number');
+
+    const extensionLabel = document.createElement('label');
+    extensionLabel.textContent = collector.output.extensionLabel || 'Extension';
+    extensionLabel.className = 'object-options-title';
+    extensionLabel.setAttribute('for', 'extension-input-1');
+
+    const extensionInput = document.createElement('input');
+    extensionInput.setAttribute('type', 'text');
+    extensionInput.setAttribute('id', 'extension-input-1');
+    extensionInput.setAttribute('name', 'extension-input-1');
+    extensionInput.setAttribute('placeholder', 'Enter extension');
+
+    const divEl = document.createElement('div');
+    divEl.style = 'display: flex; gap: 8px;';
+    divEl.appendChild(phoneLabel);
+    divEl.appendChild(phoneInput);
+    divEl.appendChild(extensionLabel);
+    divEl.appendChild(extensionInput);
+
+    formEl.appendChild(divEl);
+
+    const phoneNumberExtensionUpdater = updater as Updater<PhoneNumberExtensionCollector>;
+
+    // Add change event listener for phone number input
+    phoneInput.addEventListener('change', (event) => {
+      const target = event.target as HTMLInputElement;
+      const phoneValue = target.value;
+      const extensionValue = extensionInput.value;
+      const phoneNumberExtensionInputValue: PhoneNumberExtensionInputValue = {
+        phoneNumber: phoneValue,
+        countryCode: collector.output.value?.countryCode || '',
+        extension: extensionValue,
+      };
+
+      phoneNumberExtensionUpdater(phoneNumberExtensionInputValue);
+    });
+
+    // Add change event listener for extension input
+    extensionInput.addEventListener('change', (event) => {
+      const target = event.target as HTMLInputElement;
+      const extensionValue = target.value;
+      const phoneValue = phoneInput.value;
+      const phoneNumberExtensionInputValue: PhoneNumberExtensionInputValue = {
+        phoneNumber: phoneValue,
+        countryCode: collector.output.value?.countryCode || '',
+        extension: extensionValue,
+      };
+
+      phoneNumberExtensionUpdater(phoneNumberExtensionInputValue);
+    });
   }
 }

e2e/davinci-app/main.ts

@@ -250,7 +250,10 @@ const urlParams = new URLSearchParams(window.location.search);
           formEl, // You can ignore this; it's just for rendering
           collector, // This is the plain object of the collector
         );
-      } else if (collector.type === 'PhoneNumberCollector') {
+      } else if (
+        collector.type === 'PhoneNumberCollector' ||
+        collector.type === 'PhoneNumberExtensionCollector'
+      ) {
         objectValueComponent(
           formEl, // You can ignore this; it's just for rendering
           collector, // This is the plain object of the collector

e2e/davinci-suites/src/form-fields.test.ts

@@ -31,7 +31,8 @@ test('Should render form fields', async ({ page }) => {
   await page.locator('#combobox-field-key-3').check();
   await page.locator('#combobox-field-key-2').uncheck();
 
-  await page.locator('#phone-number-input').fill('1234567890');
+  await page.locator('#phone-number-input-1').fill('1234567890');
+  await page.locator('#extension-input-1').fill('7890');
 
   await expect(page.getByRole('button', { name: 'Flow Button' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'Flow Link' })).toBeVisible();
@@ -42,9 +43,10 @@ test('Should render form fields', async ({ page }) => {
 
   await page.getByRole('button', { name: 'Submit' }).click();
   const request = await requestPromise;
-
-  const parsedData = JSON.parse(request.postData());
+  const postData = request.postData();
+  const parsedData = postData ? JSON.parse(postData) : {};
   const data = parsedData.parameters.data;
+
   expect(data.actionKey).toBe('submit');
   expect(data.formData).toStrictEqual({
     'text-input-key': 'The input',
@@ -55,6 +57,7 @@ test('Should render form fields', async ({ page }) => {
     'phone-field': {
       phoneNumber: '1234567890',
       countryCode: 'GB',
+      extension: '7890', // Tests PhoneNumberExtensionCollector
     },
   });
 });

e2e/davinci-suites/src/phone-number-field.test.ts

@@ -103,8 +103,9 @@ test.describe('Device registration tests', () => {
     await page.getByRole('button', { name: 'DEVICE_REGISTRATION' }).click();
     await expect(page.getByText('SDK Automation - Device Registration')).toBeVisible();
     await page.getByRole('button', { name: 'Text Message' }).click();
-    await expect(page.getByText('SDK Automation - Enter Phone Number')).toBeVisible();
+    await expect(page.getByText('SDK Automation [JS] - Enter Phone Number')).toBeVisible();
     await page.getByRole('textbox', { name: 'Enter Phone Number' }).fill('3035550100');
+    await expect(page.getByText('Extension')).not.toBeVisible(); // Tests standard PhoneNumberCollector
     await page.getByRole('button', { name: 'Submit' }).click();
 
     await expect(page.getByText('SMS/Voice MFA Registered')).toBeVisible();

packages/davinci-client/src/lib/client.store.ts

@@ -46,6 +46,7 @@ import type {
   MultiValueCollectors,
   FidoRegistrationInputValue,
   FidoAuthenticationInputValue,
+  PhoneNumberExtensionInputValue,
 } from './collector.types.js';
 import type {
   InitFlow,
@@ -338,6 +339,7 @@ export async function davinci<ActionType extends ActionTypes = ActionTypes>({
           | string
           | string[]
           | PhoneNumberInputValue
+          | PhoneNumberExtensionInputValue
           | FidoRegistrationInputValue
           | FidoAuthenticationInputValue,
         index?: number,

packages/davinci-client/src/lib/collector.types.test-d.ts

@@ -27,6 +27,14 @@ import type {
   ReadOnlyCollector,
   QrCodeCollector,
   AgreementCollector,
+  PhoneNumberCollector,
+  PhoneNumberExtensionCollector,
+  ObjectValueCollectorWithObjectValue,
+  InferValueObjectCollectorType,
+  PhoneNumberInputValue,
+  PhoneNumberOutputValue,
+  PhoneNumberExtensionInputValue,
+  PhoneNumberExtensionOutputValue,
 } from './collector.types.js';
 
 describe('Collector Types', () => {
@@ -358,6 +366,112 @@ describe('Collector Types', () => {
 
       expectTypeOf(tCollector).toMatchTypeOf<FlowCollector>();
     });
+
+    it('should correctly infer PhoneNumberCollector Type', () => {
+      const tCollector: InferValueObjectCollectorType<'PhoneNumberCollector'> = {
+        category: 'ObjectValueCollector',
+        error: null,
+        type: 'PhoneNumberCollector',
+        id: '',
+        name: '',
+        input: {
+          key: '',
+          value: { countryCode: '', phoneNumber: '' },
+          type: '',
+          validation: null,
+        },
+        output: {
+          key: '',
+          label: '',
+          type: '',
+          value: { countryCode: '', phoneNumber: '' },
+        },
+      };
+
+      expectTypeOf(tCollector).toEqualTypeOf<PhoneNumberCollector>();
+    });
+  });
+
+  describe('ObjectValueCollector Types', () => {
+    it('should correctly infer PhoneNumberExtensionCollector Type', () => {
+      const tCollector: InferValueObjectCollectorType<'PhoneNumberExtensionCollector'> = {
+        category: 'ObjectValueCollector',
+        error: null,
+        type: 'PhoneNumberExtensionCollector',
+        id: '',
+        name: '',
+        input: {
+          key: '',
+          value: { countryCode: '', phoneNumber: '', extension: '' },
+          type: '',
+          validation: null,
+        },
+        output: {
+          key: '',
+          label: '',
+          type: '',
+          extensionLabel: '',
+          value: {},
+        },
+      };
+
+      expectTypeOf(tCollector).toEqualTypeOf<PhoneNumberExtensionCollector>();
+    });
+
+    it('should validate PhoneNumberExtensionCollector structure', () => {
+      expectTypeOf<PhoneNumberExtensionCollector>()
+        .toHaveProperty('category')
+        .toEqualTypeOf<'ObjectValueCollector'>();
+      expectTypeOf<PhoneNumberExtensionCollector>()
+        .toHaveProperty('type')
+        .toEqualTypeOf<'PhoneNumberExtensionCollector'>();
+      expectTypeOf<
+        PhoneNumberExtensionCollector['input']['value']
+      >().toEqualTypeOf<PhoneNumberExtensionInputValue>();
+      expectTypeOf<
+        PhoneNumberExtensionCollector['output']['value']
+      >().toEqualTypeOf<PhoneNumberExtensionOutputValue>();
+    });
+
+    it('should validate PhoneNumberCollector structure', () => {
+      expectTypeOf<PhoneNumberCollector>().toEqualTypeOf<
+        ObjectValueCollectorWithObjectValue<
+          'PhoneNumberCollector',
+          PhoneNumberInputValue,
+          PhoneNumberOutputValue
+        >
+      >();
+      expectTypeOf<PhoneNumberCollector>()
+        .toHaveProperty('category')
+        .toEqualTypeOf<'ObjectValueCollector'>();
+      expectTypeOf<PhoneNumberCollector>()
+        .toHaveProperty('type')
+        .toEqualTypeOf<'PhoneNumberCollector'>();
+      expectTypeOf<PhoneNumberCollector['input']['value']>().toEqualTypeOf<PhoneNumberInputValue>();
+    });
+
+    it('should validate PhoneNumberCollector base type constraints', () => {
+      const collector: PhoneNumberCollector = {
+        category: 'ObjectValueCollector',
+        type: 'PhoneNumberCollector',
+        error: null,
+        id: 'test',
+        name: 'Test',
+        input: {
+          key: 'phone',
+          value: { countryCode: '+1', phoneNumber: '5555555555' },
+          type: 'string',
+          validation: null,
+        },
+        output: {
+          key: 'phone',
+          label: 'Phone Number',
+          type: 'phone',
+          value: { countryCode: '+1', phoneNumber: '5555555555' },
+        },
+      };
+      expectTypeOf(collector).toEqualTypeOf<PhoneNumberCollector>();
+    });
   });
 
   describe('InferNoValueCollectorType', () => {